|
1 | 1 | 'use strict'; |
2 | 2 | (function (window) { |
3 | 3 | var UI = function (version) { |
4 | | - this.menu = document.querySelector('#menu .main'); |
5 | | - this.container = document.querySelector('#symbolizers'); |
6 | | - this.versionLabel = document.querySelector('#version'); |
7 | | - this.fetchFromHash() || this.fetch(version); |
8 | | - var self = this; |
9 | | - window.addEventListener('hashchange', function () {self.fetchFromHash();}); |
| 4 | + this.menu = document.querySelector('#menu .main'); |
| 5 | + this.container = document.querySelector('#symbolizers'); |
| 6 | + this.versionLabel = document.querySelector('#version'); |
| 7 | + this.fetchFromHash() || this.fetch(version); |
| 8 | + var self = this; |
| 9 | + window.addEventListener('hashchange', function () {self.fetchFromHash();}); |
10 | 10 | }; |
11 | 11 | UI.versions = ['3.0.22', '3.0.20', '3.0.6', '3.0.3', '3.0.0', '2.3.0', '2.2.0', '2.1.0', '2.0.0']; |
12 | 12 | UI.prototype = { |
|
28 | 28 | return el; |
29 | 29 | }, |
30 | 30 |
|
31 | | - fetch: function (version) { |
32 | | - var self = this; |
33 | | - this.version = version || window.UI.versions[0]; |
34 | | - nanoajax.ajax('./' + this.version + '/reference.json', function (code, content) { |
35 | | - self.build(JSON.parse(content)); |
| 31 | + fetch: function (version) { |
| 32 | + var self = this; |
| 33 | + this.version = version || window.UI.versions[0]; |
| 34 | + nanoajax.ajax('./' + this.version + '/reference.json', function (code, content) { |
| 35 | + var reference = JSON.parse(content); |
| 36 | + nanoajax.ajax('./' + version + '/datasources.json', function (code, content) { |
| 37 | + console.log(code); |
| 38 | + if (code == 404) { |
| 39 | + self.build(reference); |
| 40 | + } |
| 41 | + else { |
| 42 | + var datasources = JSON.parse(content); |
| 43 | + reference = Object.assign(reference, datasources); |
| 44 | + self.build(reference); |
| 45 | + } |
36 | 46 | }); |
37 | | - return true; |
| 47 | + }); |
| 48 | + return true; |
38 | 49 | }, |
39 | 50 |
|
40 | | - fetchFromHash: function () { |
41 | | - var newVersion = window.location.hash.split('/')[0].replace('#', ''); |
42 | | - if (newVersion !== this.version && this.inArray(UI.versions, newVersion)) return this.fetch(newVersion); |
43 | | - }, |
| 51 | + fetchFromHash: function () { |
| 52 | + var newVersion = window.location.hash.split('/')[0].replace('#', ''); |
| 53 | + if (newVersion !== this.version && this.inArray(UI.versions, newVersion)) return this.fetch(newVersion); |
| 54 | + }, |
44 | 55 |
|
45 | | - build: function (ref) { |
| 56 | + build: function (ref) { |
46 | 57 | this.container.innerHTML = ''; |
47 | 58 | this.menu.innerHTML = ''; |
48 | 59 | this.versionLabel.innerHTML = this.version; |
|
71 | 82 | var layerMenu = this.node('h5', {className: 'headerBlock'}, this.menu); |
72 | 83 | this.node('a', {href: '#' + this.version + '/layer'}, layerMenu, 'Layer'); |
73 | 84 | } |
74 | | - var symbolizerMenu = this.node('h5', {className: 'headerBlock'}, this.menu); |
75 | | - this.node('a', {href: '#' + this.version + '/symbolizers'}, symbolizerMenu, 'Symbolizers'); |
76 | | - |
77 | | - if (hasStyleCss) { |
78 | | - var styleHeading = this.node('h2', {}, this.container); |
79 | | - this.node('a', {id: this.version + '/style', href: '#' + this.version + '/style'}, styleHeading, 'Style'); |
80 | | - var styleContainer = this.node('div', {className: 'symbolizer'}, this.container); |
81 | | - for (var id in ref.style) { |
82 | | - if (ref.style[id].hasOwnProperty('css')) { |
83 | | - this.addRule(id, ref.style[id], styleContainer); |
84 | | - } |
85 | | - } |
86 | | - } |
87 | | - |
88 | | - if (hasLayerCss) { |
89 | | - var layerHeading = this.node('h2', {}, this.container); |
90 | | - this.node('a', {id: this.version + '/layer', href: '#' + this.version + '/layer'}, layerHeading, 'Layer'); |
91 | | - var layerContainer = this.node('div', {className: 'symbolizer'}, this.container); |
92 | | - for (var id in ref.layer) { |
93 | | - if (ref.layer[id].hasOwnProperty('css')) { |
94 | | - this.addRule(id, ref.layer[id], layerContainer); |
95 | | - } |
96 | | - } |
97 | | - } |
98 | 85 |
|
99 | | - var symbolizerHeading = this.node('h2', {}, this.container); |
100 | | - this.node('a', {id: this.version + '/symbolizers', href: '#' + this.version + '/symbolizers'}, symbolizerHeading, 'Symbolizers'); |
101 | | - for (var id in ref.symbolizers) this.addSymbolizer(id, ref.symbolizers[id]); |
102 | 86 |
|
103 | | - this.addVersions(); |
104 | | - if (window.location.hash) window.location = window.location; // we have rebuild the DOM, help the browser find the North again. |
105 | | - }, |
106 | | - |
107 | | - addVersions: function () { |
108 | | - var container = this.node('div', {className: 'versions'}, this.menu); |
109 | | - this.node('h5', {}, container, 'Versions'); |
110 | | - for (var i = 0; i < UI.versions.length; i++) this.addVersionLink(UI.versions[i], container); |
111 | | - }, |
112 | 87 |
|
113 | | - addVersionLink: function (version, parent) { |
114 | | - var current = version === this.version ? ' current' : ''; |
115 | | - this.node('a', {className: 'block' + current, href: '#' + version + '/'}, parent, version); |
116 | | - }, |
117 | | - |
118 | | - anchor: function (id) { |
119 | | - return this.version + '/' + id; |
120 | | - }, |
| 88 | + if (hasStyleCss) { |
| 89 | + var styleHeading = this.node('h2', {}, this.container); |
| 90 | + this.node('a', {id: this.version + '/style', href: '#' + this.version + '/style'}, styleHeading, 'Style'); |
| 91 | + var styleContainer = this.node('div', {className: 'symbolizer'}, this.container); |
| 92 | + for (var id in ref.style) { |
| 93 | + if (ref.style[id].hasOwnProperty('css')) { |
| 94 | + this.addRule(id, ref.style[id], styleContainer); |
| 95 | + } |
| 96 | + } |
| 97 | + } |
| 98 | + |
| 99 | + if (hasLayerCss) { |
| 100 | + var layerHeading = this.node('h2', {}, this.container); |
| 101 | + this.node('a', {id: this.version + '/layer', href: '#' + this.version + '/layer'}, layerHeading, 'Layer'); |
| 102 | + var layerContainer = this.node('div', {className: 'symbolizer'}, this.container); |
| 103 | + for (var id in ref.layer) { |
| 104 | + if (ref.layer[id].hasOwnProperty('css')) { |
| 105 | + this.addRule(id, ref.layer[id], layerContainer); |
| 106 | + } |
| 107 | + } |
| 108 | + } |
121 | 109 |
|
122 | | - addSymbolizer: function (id, rules) { |
123 | | - this.node('a', {className: 'block', href: '#' + this.anchor(id)}, this.menu, id); |
124 | | - this.addSymbolizerBlock(id, rules); |
125 | | - }, |
| 110 | + var collapsibleMenu = this.node('h5', {className: 'headerBlock'}, this.menu); |
| 111 | + // Symbolizers |
| 112 | + var button = this.node('button', {className:'collapsible'}, collapsibleMenu, ''); |
| 113 | + this.node('a', {href: '#' + this.version + '/symbolizers'}, button, 'Symbolizers'); |
| 114 | + var symbolizerHeading = this.node('h2', {}, this.container); |
| 115 | + this.node('a', {id: this.version + '/symbolizers', href: '#' + this.version + '/symbolizers'}, symbolizerHeading, 'Symbolizers'); |
| 116 | + var content = this.node('div', {className: 'content', style: 'display:none'}, collapsibleMenu, ''); |
| 117 | + for (var id in ref.symbolizers) { |
| 118 | + this.addSymbolizer(id, ref.symbolizers[id], content); |
| 119 | + } |
| 120 | + // Datasources |
| 121 | + var button = this.node('button', {className:'collapsible'}, collapsibleMenu, ''); |
| 122 | + this.node('a', {href: '#' + this.version + '/datasources'}, button, 'Datasources'); |
| 123 | + var datasourcesHeading = this.node('h2', {}, this.container); |
| 124 | + this.node('a', {id: this.version + '/datasources', href: '#' + this.version + '/datasources'}, datasourcesHeading, 'Datasources'); |
| 125 | + var content = this.node('div', {className: 'content', style: 'display:none'}, collapsibleMenu, ''); |
| 126 | + for (var id in ref.datasources) { |
| 127 | + this.addDatasource(id, ref.datasources[id], content); |
| 128 | + } |
126 | 129 |
|
127 | | - addSymbolizerBlock: function (id, rules) { |
128 | | - var container = this.node('div', {className: 'symbolizer'}, this.container); |
129 | | - var section = this.node('h2', {}, container); |
130 | | - this.node('a', {href: '#' + this.anchor(id), id: this.anchor(id)}, section, id); |
131 | | - for (var ruleId in rules) this.addRule(ruleId, rules[ruleId], container); |
132 | | - }, |
| 130 | + this.addVersions(); |
| 131 | + this.addScript(); |
| 132 | + if (window.location.hash) window.location = window.location; // we have rebuild the DOM, help the browser find the North again. |
| 133 | + }, |
| 134 | + |
| 135 | + addScript: function () { |
| 136 | + var body = document.body; |
| 137 | + var script = document.createElement('script'); |
| 138 | + script.type = 'text/javascript'; |
| 139 | + script.innerHTML = `var coll = document.getElementsByClassName('collapsible'); |
| 140 | + for (var i = 0; i < coll.length; i++) { |
| 141 | + coll[i].addEventListener('click', function() { |
| 142 | + this.classList.toggle('active'); |
| 143 | + var content = this.nextElementSibling; |
| 144 | + console.log(content); |
| 145 | + if (content.style.display === 'block') { |
| 146 | + content.style.display = 'none'; |
| 147 | + } else { |
| 148 | + content.style.display = 'block'; |
| 149 | + } |
| 150 | + }); |
| 151 | + }`; |
| 152 | + document.body.appendChild(script); |
| 153 | + }, |
| 154 | + addVersions: function () { |
| 155 | + var container = this.node('div', {className: 'versions'}, this.menu); |
| 156 | + this.node('h5', {}, container, 'Versions'); |
| 157 | + for (var i = 0; i < UI.versions.length; i++) this.addVersionLink(UI.versions[i], container); |
| 158 | + }, |
| 159 | + |
| 160 | + addVersionLink: function (version, parent) { |
| 161 | + var current = version === this.version ? ' current' : ''; |
| 162 | + this.node('a', {className: 'block' + current, href: '#' + version + '/'}, parent, version); |
| 163 | + }, |
| 164 | + |
| 165 | + |
| 166 | + anchor: function (id) { |
| 167 | + return this.version + '/' + id; |
| 168 | + }, |
| 169 | + |
| 170 | + addSymbolizer: function (id, rules, parent) { |
| 171 | + this.node('a', {className: 'block', href: '#' + this.anchor(id)}, parent, id); |
| 172 | + this.addSymbolizerBlock(id, rules); |
| 173 | + }, |
| 174 | + |
| 175 | + addSymbolizerBlock: function (id, rules) { |
| 176 | + var container = this.node('div', {className: 'symbolizer'}, this.container); |
| 177 | + var section = this.node('h2', {}, container); |
| 178 | + this.node('a', {href: '#' + this.anchor(id), id: this.anchor(id)}, section, id); |
| 179 | + for (var ruleId in rules) this.addRule(ruleId, rules[ruleId], container); |
| 180 | + }, |
| 181 | + |
| 182 | + addDatasource: function (id, rules, parent) { |
| 183 | + this.node('a', {className: 'block', href: '#' + this.anchor(id)}, parent, id); |
| 184 | + this.addDatasourceBlock(id, rules); |
| 185 | + }, |
| 186 | + |
| 187 | + addDatasourceBlock: function (id, rules) { |
| 188 | + var container = this.node('div', {className: 'symbolizer'}, this.container); |
| 189 | + var section = this.node('h2', {}, container); |
| 190 | + this.node('a', {href: '#' + this.anchor(id), id: this.anchor(id)}, section, id); |
| 191 | + for (var ruleId in rules) this.addRule(ruleId, rules[ruleId], container); |
| 192 | + }, |
133 | 193 |
|
134 | 194 | addRule: function (id, props, parent) { |
135 | 195 | var title = this.node('h3', {}, parent); |
|
148 | 208 |
|
149 | 209 | }; |
150 | 210 | UI.init = function (version) { |
151 | | - // if (!version && window.location.hash && window.location.hash.indexOf('/') !== -1) { |
152 | | - // version = window.location.hash.split('/')[0]; |
153 | | - // } |
154 | | - return new UI(version); |
| 211 | + // if (!version && window.location.hash && window.location.hash.indexOf('/') !== -1) { |
| 212 | + // version = window.location.hash.split('/')[0]; |
| 213 | + // } |
| 214 | + return new UI(version); |
155 | 215 | }; |
156 | 216 | window.UI = UI; |
157 | 217 | })(window); |
0 commit comments