-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (70 loc) · 2.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href="/images/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<custom-component :items="items" :width="width" :height="height"/>
</div>
<script type="text/javascript">
const components = {
IIIFSideBySide: [{
id: 'item-0',
url1: 'https://iiif.visual-essays.app/images/88b53551f91eaeea450ff6c196b4fd5f9fd6955b356d616543af591f/info.json',
url2: 'https://iiif.visual-essays.app/images/a58d7d72db0b59290c54d57e414d88d892efee1b88cc639ee0f6dc3f/info.json'
}],
D3Network: [{ id: 'item-0', url: 'data/miserables.json' }],
D3PlusNetwork: [{ id: 'item-0', url: 'data/network-1.json' }],
VisNetwork: [{ id: 'item-0', file: 'data/medici.tsv' }]
}
Vue.mixin({
methods: {
load(url, callback) {
let e
if (url.split('.').pop() === 'js') {
e = document.createElement('script')
e.src = url
e.type='text/javascript'
} else {
e = document.createElement('link')
e.href = url
e.rel='stylesheet'
}
e.addEventListener('load', callback)
document.getElementsByTagName('head')[0].appendChild(e)
},
loadDependencies(dependencies, i, callback) {
this.load(dependencies[i], () => {
if (i < dependencies.length-1) {
this.loadDependencies(dependencies, i+1, callback)
} else {
callback()
}
})
}
}
})
const component = window.location.search.split('component=').pop() || 'D3PlusNetwork'
console.log(`loading component: ${component}`)
new Vue({
el: '#app',
components: {
'custom-component': httpVueLoader(`components/${component}.vue`)
},
data: () => ({
items: components[component],
width: 500,
height: 500
})
})
</script>
</body>
</html>