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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
// python3 -m http.server
const data_dir = 'data';
const index_file = "index.json";
var index = null;
var mapframe = null;
function httpGetAsync(url, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function loadIndexFromJson(raw_text, title) {
index_obj = JSON.parse(raw_text)
//TODO pass index here. that would be cleaner than public vars.
build_interface(index_obj, title);
}
function build_indexlist(index_obj, display_name) {
div = document.createElement('div');
div.classList.add('index');
title = document.createElement('h4');
title.innerText = display_name;
div.appendChild(title);
list = document.createElement('ul');
for (const i in index_obj) {
var map = index_obj[i];
a = document.createElement('a');
a.classList.add('link');
a.setAttribute('href', '');// data_dir + '/' + map.file);
a.setAttribute('mapfile', map.file);
a.onclick = indexlink_click;
a.innerText = map.display_name;
a.id = map.file;
li = document.createElement('li');
li.appendChild(a);
list.appendChild(li);
}
div.appendChild(list);
return div;
}
function indexlink_click(e) {
mapframe.querySelector('#mapframe').src = data_dir + '/' + this.getAttribute('mapfile');
return false;
}
function productlink_click(e) {
clear_interface();
var list_title = this.getAttribute('list_title');
httpGetAsync(data_dir + '/' + this.getAttribute('indexfile'), function(a){ loadIndexFromJson(a,list_title);});
return false;
}
function build_mapframe() {
div = document.createElement('div');
div.classList.add('mapframe');
frame = document.createElement('img');
frame.id = 'mapframe';
//frame.classList.add('mapframe');
mapframe = frame;
div.appendChild(frame);
return div;
}
function build_interface(index_obj, display_name) {
index = build_indexlist(index_obj, display_name);
mapframe = build_mapframe();
document.body.appendChild(index);
document.body.appendChild(mapframe);
}
function clear_interface() {
if (index)
index.remove();
if(mapframe)
mapframe.remove();
}
function build_product_index(raw_text) {
product_index = JSON.parse(raw_text);
div = document.createElement('div');
div.classList.add('product_index');
title = document.createElement('h4');
title.innerText = 'Products';
div.appendChild(title);
list = document.createElement('ul');
for (const i in product_index) {
var product = product_index[i];
a = document.createElement('a');
a.classList.add('link');
a.setAttribute('href', '');// data_dir + '/' + map.file);
a.setAttribute('indexfile', product.indexfile);
a.setAttribute('list_title', product.list_title);
a.onclick = productlink_click;
a.innerText = product.name;
a.id = product.indexfile;
li = document.createElement('li');
li.appendChild(a);
list.appendChild(li);
}
div.appendChild(list);
document.body.appendChild(div);
}
window.onload = function() {
//httpGetAsync(data_dir + '/' + index_file, loadIndexFromJson);
httpGetAsync(data_dir + '/' + index_file, build_product_index);
}
|