Mercurial > hg > webaudioevaluationtool
comparison test_create/test_core.js @ 1370:f329347e8918
New test creator tool. Still WIP, but much more dynamic. Based on XSD and external lists so far easier to modify.
author | Nicholas Jillings <nickjillings@users.noreply.github.com> |
---|---|
date | Wed, 10 Feb 2016 12:02:25 +0000 |
parents | |
children | f8920367ec32 |
comparison
equal
deleted
inserted
replaced
1369:ebe6c10bd52d | 1370:f329347e8918 |
---|---|
1 var interfaceSpecs; | |
2 var xmlHttp; | |
3 var popupObject; | |
4 var popupStateNodes; | |
5 var specification; | |
6 var convert; | |
7 var attributeText; | |
8 | |
9 // Firefox does not have an XMLDocument.prototype.getElementsByName | |
10 // and there is no searchAll style command, this custom function will | |
11 // search all children recusrively for the name. Used for XSD where all | |
12 // element nodes must have a name and therefore can pull the schema node | |
13 XMLDocument.prototype.getAllElementsByName = function(name) | |
14 { | |
15 name = String(name); | |
16 var selected = this.documentElement.getAllElementsByName(name); | |
17 return selected; | |
18 } | |
19 | |
20 Element.prototype.getAllElementsByName = function(name) | |
21 { | |
22 name = String(name); | |
23 var selected = []; | |
24 var node = this.firstElementChild; | |
25 while(node != null) | |
26 { | |
27 if (node.getAttribute('name') == name) | |
28 { | |
29 selected.push(node); | |
30 } | |
31 if (node.childElementCount > 0) | |
32 { | |
33 selected = selected.concat(node.getAllElementsByName(name)); | |
34 } | |
35 node = node.nextElementSibling; | |
36 } | |
37 return selected; | |
38 } | |
39 | |
40 XMLDocument.prototype.getAllElementsByTagName = function(name) | |
41 { | |
42 name = String(name); | |
43 var selected = this.documentElement.getAllElementsByTagName(name); | |
44 return selected; | |
45 } | |
46 | |
47 Element.prototype.getAllElementsByTagName = function(name) | |
48 { | |
49 name = String(name); | |
50 var selected = []; | |
51 var node = this.firstElementChild; | |
52 while(node != null) | |
53 { | |
54 if (node.nodeName == name) | |
55 { | |
56 selected.push(node); | |
57 } | |
58 if (node.childElementCount > 0) | |
59 { | |
60 selected = selected.concat(node.getAllElementsByTagName(name)); | |
61 } | |
62 node = node.nextElementSibling; | |
63 } | |
64 return selected; | |
65 } | |
66 | |
67 // Firefox does not have an XMLDocument.prototype.getElementsByName | |
68 if (typeof XMLDocument.prototype.getElementsByName != "function") { | |
69 XMLDocument.prototype.getElementsByName = function(name) | |
70 { | |
71 name = String(name); | |
72 var node = this.documentElement.firstElementChild; | |
73 var selected = []; | |
74 while(node != null) | |
75 { | |
76 if (node.getAttribute('name') == name) | |
77 { | |
78 selected.push(node); | |
79 } | |
80 node = node.nextElementSibling; | |
81 } | |
82 return selected; | |
83 } | |
84 } | |
85 | |
86 window.onload = function() | |
87 { | |
88 specification = new Specification(); | |
89 convert = new SpecificationToHTML(); | |
90 xmlHttp = new XMLHttpRequest(); | |
91 xmlHttp.open("GET","./interface-specs.xml",true); | |
92 xmlHttp.onload = function() | |
93 { | |
94 var parse = new DOMParser(); | |
95 interfaceSpecs = parse.parseFromString(xmlHttp.response,'text/xml'); | |
96 buildPage(); | |
97 popupObject.postNode(popupStateNodes.state[0]) | |
98 } | |
99 xmlHttp.send(); | |
100 | |
101 var xsdGet = new XMLHttpRequest(); | |
102 xsdGet.open("GET","../test-schema.xsd",true); | |
103 xsdGet.onload = function() | |
104 { | |
105 var parse = new DOMParser(); | |
106 specification.schema = parse.parseFromString(xsdGet.response,'text/xml');; | |
107 } | |
108 xsdGet.send(); | |
109 | |
110 var jsonAttribute = new XMLHttpRequest(); | |
111 jsonAttribute.open("GET","./attributes.json",true); | |
112 jsonAttribute.onload = function() | |
113 { | |
114 attributeText = JSON.parse(jsonAttribute.response) | |
115 } | |
116 jsonAttribute.send(); | |
117 } | |
118 | |
119 function buildPage() | |
120 { | |
121 popupObject = new function() { | |
122 this.object = document.getElementById("popupHolder"); | |
123 this.blanket = document.getElementById("blanket"); | |
124 | |
125 this.popupTitle = document.createElement("div"); | |
126 this.popupTitle.id = "popup-title-holder"; | |
127 this.popupTitle.align = "center"; | |
128 this.titleDOM = document.createElement("span"); | |
129 this.titleDOM.id = "popup-title"; | |
130 this.popupTitle.appendChild(this.titleDOM); | |
131 this.object.appendChild(this.popupTitle); | |
132 | |
133 this.popupContent = document.createElement("div"); | |
134 this.popupContent.id = "popup-content"; | |
135 this.object.appendChild(this.popupContent); | |
136 | |
137 this.proceedButton = document.createElement("button"); | |
138 this.proceedButton.id = "popup-proceed"; | |
139 this.proceedButton.textContent = "Next"; | |
140 this.proceedButton.onclick = function() | |
141 { | |
142 popupObject.popupContent.innerHTML = null; | |
143 popupObject.shownObject.continue(); | |
144 }; | |
145 this.object.appendChild(this.proceedButton); | |
146 | |
147 this.shownObject; | |
148 | |
149 this.resize = function() | |
150 { | |
151 var w = window.innerWidth; | |
152 var h = window.innerHeight; | |
153 this.object.style.left = Math.floor((w-750)/2) + 'px'; | |
154 this.object.style.top = Math.floor((h-500)/2) + 'px'; | |
155 } | |
156 | |
157 this.show = function() | |
158 { | |
159 this.object.style.visibility = "visible"; | |
160 this.blanket.style.visibility = "visible"; | |
161 } | |
162 | |
163 this.hide = function() | |
164 { | |
165 this.object.style.visibility = "hidden"; | |
166 this.blanket.style.visibility = "hidden"; | |
167 } | |
168 | |
169 this.postNode = function(postObject) | |
170 { | |
171 this.show(); | |
172 //Passed object must have the following: | |
173 // Title: text to show in the title | |
174 // Content: HTML DOM to show on the page | |
175 // On complete this HTML DOM is destroyed so make sure it is referenced elsewhere for processing | |
176 this.titleDOM.textContent = postObject.title; | |
177 this.popupContent.appendChild(postObject.content); | |
178 this.shownObject = postObject; | |
179 } | |
180 | |
181 this.resize(); | |
182 this.hide(); | |
183 }; | |
184 | |
185 popupStateNodes = new function() | |
186 { | |
187 // This defines the several popup states wanted | |
188 this.state = []; | |
189 this.state[0] = new function() | |
190 { | |
191 this.title = "Welcome"; | |
192 this.content = document.createElement("div"); | |
193 this.content.id = "state-0"; | |
194 var span = document.createElement("span"); | |
195 span.textContent = "Welcome to the WAET test creator tool. This will allow you to create a new test from scratch to suit your testing needs. If you wish to update a test file, please drag and drop the XML document into the area below for processing, otherwise press 'Next' to start a new test. This tool generates files for the WAET 1.2.0 version." | |
196 this.content.appendChild(span); | |
197 this.dragArea = document.createElement("div"); | |
198 this.dragArea.classList = "drag-area"; | |
199 this.content.appendChild(this.dragArea); | |
200 | |
201 this.continue = function() | |
202 { | |
203 popupObject.postNode(popupStateNodes.state[1]); | |
204 } | |
205 } | |
206 this.state[1] = new function() | |
207 { | |
208 this.title = "Select your interface"; | |
209 this.content = document.createElement("div"); | |
210 this.content.id = "state-1"; | |
211 var spnH = document.createElement('div'); | |
212 var span = document.createElement("span"); | |
213 span.textContent = "Please select your interface from the list shown below. This will define the various options which are available. This can later be changed."; | |
214 spnH.appendChild(span); | |
215 this.content.appendChild(spnH); | |
216 this.select = document.createElement("select"); | |
217 this.testsXML = interfaceSpecs.getElementsByTagName('tests')[0].children; | |
218 for (var i=0; i<this.testsXML.length; i++) | |
219 { | |
220 var option = document.createElement('option'); | |
221 option.value = this.testsXML[i].getAttribute('name'); | |
222 option.textContent = this.testsXML[i].getAttribute('name'); | |
223 this.select.appendChild(option); | |
224 } | |
225 this.content.appendChild(this.select); | |
226 this.continue = function() | |
227 { | |
228 var testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(this.select.value)[0]; | |
229 specification.interface = testXML.getAttribute("interface"); | |
230 popupStateNodes.state[2].generate(); | |
231 popupObject.postNode(popupStateNodes.state[2]); | |
232 } | |
233 } | |
234 this.state[2] = new function() | |
235 { | |
236 this.title = "Test Checks & Restrictions"; | |
237 this.content = document.createElement("div"); | |
238 this.content.id = "state-1"; | |
239 var spnH = document.createElement('div'); | |
240 var span = document.createElement("span"); | |
241 span.textContent = "Select your test checks and restrictions. Greyed out items are fixed by the test/interface and cannot be changed"; | |
242 spnH.appendChild(span); | |
243 this.content.appendChild(spnH); | |
244 var holder = document.createElement("div"); | |
245 this.options = []; | |
246 this.testXML = null; | |
247 this.interfaceXML = null; | |
248 this.generate = function() | |
249 { | |
250 var interfaceName = popupStateNodes.state[1].select.value; | |
251 this.checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("checks")[0]; | |
252 this.testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; | |
253 this.interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(this.testXML.getAttribute("interface"))[0].getAllElementsByTagName("checks")[0]; | |
254 this.testXML = this.testXML.getAllElementsByTagName("checks"); | |
255 for (var i=0; i<this.interfaceXML.children.length; i++) | |
256 { | |
257 var interfaceNode = this.interfaceXML.children[i]; | |
258 var checkName = interfaceNode.getAttribute('name'); | |
259 var testNode | |
260 if (this.testXML.length > 0) | |
261 { | |
262 testNode = this.testXML[0].getAllElementsByName(checkName); | |
263 if(testNode.length != 0) {testNode = testNode[0];} | |
264 else {testNode = undefined;} | |
265 } else { | |
266 testNode = undefined; | |
267 } | |
268 var optH = document.createElement('div'); | |
269 optH.className = "popup-checkbox"; | |
270 var checkbox = document.createElement('input'); | |
271 checkbox.type = "checkbox"; | |
272 var text = document.createElement('span'); | |
273 checkbox.setAttribute('name',checkName); | |
274 if (interfaceNode.getAttribute('default') == 'on') | |
275 { | |
276 checkbox.checked = true; | |
277 } | |
278 if (interfaceNode.getAttribute('support') == "none") | |
279 { | |
280 checkbox.disabled = true; | |
281 checkbox.checked = false; | |
282 optH.className = "popup-checkbox disabled"; | |
283 } else if (interfaceNode.getAttribute('support') == "mandatory") | |
284 { | |
285 checkbox.disabled = true; | |
286 checkbox.checked = true; | |
287 optH.className = "popup-checkbox disabled"; | |
288 } | |
289 if(testNode != undefined) | |
290 { | |
291 if (interfaceNode.getAttribute('default') == 'on') | |
292 { | |
293 checkbox.checked = true; | |
294 } | |
295 if (testNode.getAttribute('support') == "none") | |
296 { | |
297 checkbox.disabled = true; | |
298 checkbox.checked = false; | |
299 optH.className = "popup-checkbox disabled"; | |
300 }else if (interfaceNode.getAttribute('support') == "mandatory") | |
301 { | |
302 checkbox.disabled = true; | |
303 checkbox.checked = true; | |
304 optH.className = "popup-checkbox disabled"; | |
305 } | |
306 } | |
307 text.textContent = popupStateNodes.state[2].checkText.getAllElementsByName(checkName)[0].textContent; | |
308 optH.appendChild(checkbox); | |
309 optH.appendChild(text); | |
310 this.options.push(optH); | |
311 this.content.appendChild(optH); | |
312 } | |
313 } | |
314 this.continue = function() | |
315 { | |
316 if (specification.interfaces == null) | |
317 { | |
318 specification.interfaces = new specification.interfaceNode(); | |
319 } | |
320 for (var object of this.options) | |
321 { | |
322 var checkbox = object.children[0]; | |
323 if (checkbox.checked) | |
324 { | |
325 var option = { | |
326 type: "check", | |
327 name: checkbox.getAttribute('name') | |
328 }; | |
329 specification.interfaces.options.push(option); | |
330 } | |
331 } | |
332 popupStateNodes.state[3].generate(); | |
333 popupObject.postNode(popupStateNodes.state[3]); | |
334 } | |
335 } | |
336 this.state[3] = new function() | |
337 { | |
338 this.title = "Test Metrics"; | |
339 this.content = document.createElement("div"); | |
340 this.content.id = "state-1"; | |
341 var spnH = document.createElement('div'); | |
342 var span = document.createElement("span"); | |
343 span.textContent = "Select which data points to include in the exported results XML. Some of this is required for certain post script analysis. See the documentation for further details"; | |
344 spnH.appendChild(span); | |
345 this.content.appendChild(spnH); | |
346 this.options = []; | |
347 this.checkText; | |
348 this.testXML; | |
349 this.interfaceXML; | |
350 this.generate = function() | |
351 { | |
352 var interfaceName = popupStateNodes.state[1].select.value; | |
353 this.checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("metrics")[0]; | |
354 this.testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; | |
355 this.interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(this.testXML.getAttribute("interface"))[0].getAllElementsByTagName("metrics")[0]; | |
356 this.testXML = this.testXML.getAllElementsByTagName("metrics"); | |
357 for (var i=0; i<this.interfaceXML.children.length; i++) | |
358 { | |
359 var interfaceNode = this.interfaceXML.children[i]; | |
360 var checkName = interfaceNode.getAttribute('name'); | |
361 var testNode | |
362 if (this.testXML.length > 0) | |
363 { | |
364 testNode = this.testXML[0].getAllElementsByName(checkName); | |
365 if(testNode.length != 0) {testNode = testNode[0];} | |
366 else {testNode = undefined;} | |
367 } else { | |
368 testNode = undefined; | |
369 } | |
370 var optH = document.createElement('div'); | |
371 optH.className = "popup-checkbox"; | |
372 var checkbox = document.createElement('input'); | |
373 checkbox.type = "checkbox"; | |
374 var text = document.createElement('span'); | |
375 checkbox.setAttribute('name',checkName); | |
376 if (interfaceNode.getAttribute('default') == 'on') | |
377 { | |
378 checkbox.checked = true; | |
379 } | |
380 if (interfaceNode.getAttribute('support') == "none") | |
381 { | |
382 checkbox.disabled = true; | |
383 checkbox.checked = false; | |
384 optH.className = "popup-checkbox disabled"; | |
385 } else if (interfaceNode.getAttribute('support') == "mandatory") | |
386 { | |
387 checkbox.disabled = true; | |
388 checkbox.checked = true; | |
389 optH.className = "popup-checkbox disabled"; | |
390 } | |
391 if(testNode != undefined) | |
392 { | |
393 if (interfaceNode.getAttribute('default') == 'on') | |
394 { | |
395 checkbox.checked = true; | |
396 } | |
397 if (testNode.getAttribute('support') == "none") | |
398 { | |
399 checkbox.disabled = true; | |
400 checkbox.checked = false; | |
401 optH.className = "popup-checkbox disabled"; | |
402 }else if (interfaceNode.getAttribute('support') == "mandatory") | |
403 { | |
404 checkbox.disabled = true; | |
405 checkbox.checked = true; | |
406 optH.className = "popup-checkbox disabled"; | |
407 } | |
408 } | |
409 text.textContent = popupStateNodes.state[3].checkText.getAllElementsByName(checkName)[0].textContent; | |
410 optH.appendChild(checkbox); | |
411 optH.appendChild(text); | |
412 this.options.push(optH); | |
413 this.content.appendChild(optH); | |
414 } | |
415 } | |
416 this.continue = function() | |
417 { | |
418 if (specification.metrics == null) { | |
419 specification.metrics = new specification.metricNode(); | |
420 } | |
421 for (var object of this.options) | |
422 { | |
423 var checkbox = object.children[0]; | |
424 if (checkbox.checked) | |
425 { | |
426 specification.metrics.enabled.push(checkbox.getAttribute('name')); | |
427 } | |
428 } | |
429 popupStateNodes.state[4].generate(); | |
430 popupObject.postNode(popupStateNodes.state[4]); | |
431 } | |
432 } | |
433 this.state[4] = new function() | |
434 { | |
435 this.title = "Test Visuals"; | |
436 this.content = document.createElement("div"); | |
437 this.content.id = "state-1"; | |
438 var spnH = document.createElement('div'); | |
439 var span = document.createElement("span"); | |
440 span.textContent = "You can display extra visual content with your interface for the test user to interact with. Select from the available options below. Greyed out options are unavailable for your selected interface"; | |
441 spnH.appendChild(span); | |
442 this.content.appendChild(spnH); | |
443 this.options = []; | |
444 this.checkText; | |
445 this.testXML; | |
446 this.interfaceXML; | |
447 this.generate = function() | |
448 { | |
449 var interfaceName = popupStateNodes.state[1].select.value; | |
450 this.checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("show")[0]; | |
451 this.testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; | |
452 this.interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(this.testXML.getAttribute("interface"))[0].getAllElementsByTagName("show")[0]; | |
453 this.testXML = this.testXML.getAllElementsByTagName("metrics"); | |
454 for (var i=0; i<this.interfaceXML.children.length; i++) | |
455 { | |
456 var interfaceNode = this.interfaceXML.children[i]; | |
457 var checkName = interfaceNode.getAttribute('name'); | |
458 var testNode | |
459 if (this.testXML.length > 0) | |
460 { | |
461 testNode = this.testXML[0].getAllElementsByName(checkName); | |
462 if(testNode.length != 0) {testNode = testNode[0];} | |
463 else {testNode = undefined;} | |
464 } else { | |
465 testNode = undefined; | |
466 } | |
467 var optH = document.createElement('div'); | |
468 optH.className = "popup-checkbox"; | |
469 var checkbox = document.createElement('input'); | |
470 checkbox.type = "checkbox"; | |
471 var text = document.createElement('span'); | |
472 checkbox.setAttribute('name',checkName); | |
473 if (interfaceNode.getAttribute('default') == 'on') | |
474 { | |
475 checkbox.checked = true; | |
476 } | |
477 if (interfaceNode.getAttribute('support') == "none") | |
478 { | |
479 checkbox.disabled = true; | |
480 checkbox.checked = false; | |
481 optH.className = "popup-checkbox disabled"; | |
482 } else if (interfaceNode.getAttribute('support') == "mandatory") | |
483 { | |
484 checkbox.disabled = true; | |
485 checkbox.checked = true; | |
486 optH.className = "popup-checkbox disabled"; | |
487 } | |
488 if(testNode != undefined) | |
489 { | |
490 if (interfaceNode.getAttribute('default') == 'on') | |
491 { | |
492 checkbox.checked = true; | |
493 } | |
494 if (testNode.getAttribute('support') == "none") | |
495 { | |
496 checkbox.disabled = true; | |
497 checkbox.checked = false; | |
498 optH.className = "popup-checkbox disabled"; | |
499 }else if (interfaceNode.getAttribute('support') == "mandatory") | |
500 { | |
501 checkbox.disabled = true; | |
502 checkbox.checked = true; | |
503 optH.className = "popup-checkbox disabled"; | |
504 } | |
505 } | |
506 text.textContent = this.checkText.getAllElementsByName(checkName)[0].textContent; | |
507 optH.appendChild(checkbox); | |
508 optH.appendChild(text); | |
509 this.options.push(optH); | |
510 this.content.appendChild(optH); | |
511 } | |
512 } | |
513 this.continue = function() | |
514 { | |
515 if (specification.interfaces == null) | |
516 { | |
517 specification.interfaces = new specification.interfaceNode(); | |
518 } | |
519 for (var object of this.options) | |
520 { | |
521 var checkbox = object.children[0]; | |
522 if (checkbox.checked) | |
523 { | |
524 var option = { | |
525 type: "show", | |
526 name: checkbox.getAttribute('name') | |
527 }; | |
528 specification.interfaces.options.push(option); | |
529 } | |
530 } | |
531 popupObject.hide(); | |
532 convert.convert(document.getElementById('content')); | |
533 } | |
534 } | |
535 this.state[5] = new function() { | |
536 this.title = "Add/Edit Survey Element"; | |
537 this.content = document.createElement("div"); | |
538 this.content.id = "state-1"; | |
539 var spnH = document.createElement('div'); | |
540 var span = document.createElement("span"); | |
541 span.textContent = "You can configure your survey element here. Press 'Continue' to complete your changes."; | |
542 spnH.appendChild(span); | |
543 this.content.appendChild(spnH); | |
544 this.dynamic = document.createElement("div"); | |
545 this.option = null; | |
546 this.parent = null; | |
547 var select = document.createElement("select"); | |
548 select.setAttribute("name","type"); | |
549 select.addEventListener("change",this,false); | |
550 this.content.appendChild(select); | |
551 this.content.appendChild(this.dynamic); | |
552 this.generate = function(option, parent) | |
553 { | |
554 this.option = option; | |
555 this.parent = parent; | |
556 var optionList = specification.schema.getAllElementsByName("survey")[0].getAllElementsByName("type")[0].getAllElementsByTagName("xs:enumeration"); | |
557 for (var i=0; i<optionList.length; i++) | |
558 { | |
559 var selectOption = document.createElement("option"); | |
560 selectOption.value = optionList[i].getAttribute("value"); | |
561 selectOption.textContent = selectOption.value; | |
562 select.appendChild(selectOption); | |
563 } | |
564 if (this.option.type != undefined){ | |
565 select.value = this.option.type | |
566 } else { | |
567 select.value = "statement"; | |
568 this.option.type = "statement"; | |
569 } | |
570 | |
571 this.dynamic.innerHTML = null; | |
572 var statement = document.createElement("div"); | |
573 var statementText = document.createElement("span"); | |
574 var statementEntry = document.createElement("textarea"); | |
575 statement.appendChild(statementText); | |
576 statement.appendChild(statementEntry); | |
577 statementText.textContent = "Statement/Question"; | |
578 statementEntry.addEventListener("change",this,false); | |
579 statementEntry.setAttribute("name","statement"); | |
580 statementEntry.value = this.option.statement; | |
581 this.dynamic.appendChild(statement); | |
582 switch(this.option.type) | |
583 { | |
584 case "statement": | |
585 break; | |
586 case "question": | |
587 var boxsizeSelect = document.createElement("select"); | |
588 var optionList = specification.schema.getAllElementsByName("survey")[0].getAllElementsByName("boxsize")[0].getAllElementsByTagName("xs:enumeration"); | |
589 for (var i=0; i<optionList.length; i++) | |
590 { | |
591 var selectOption = document.createElement("option"); | |
592 selectOption.value = optionList[i].getAttribute("value"); | |
593 selectOption.textContent = selectOption.value; | |
594 boxsizeSelect.appendChild(selectOption); | |
595 } | |
596 if(this.option.boxsize != undefined) { | |
597 boxsizeSelect.value = this.option.boxsize; | |
598 } else { | |
599 boxsizeSelect.value = "normal"; | |
600 this.option.boxsize = "normal"; | |
601 } | |
602 boxsizeSelect.setAttribute("name","boxsize"); | |
603 boxsizeSelect.addEventListener("change",this,false); | |
604 var boxsize = document.createElement("div"); | |
605 var boxsizeText = document.createElement("span"); | |
606 boxsizeText.textContent = "Entry Size: "; | |
607 boxsize.appendChild(boxsizeText); | |
608 boxsize.appendChild(boxsizeSelect); | |
609 this.dynamic.appendChild(boxsize); | |
610 | |
611 var mandatory = document.createElement("div"); | |
612 var mandatoryInput = document.createElement("input"); | |
613 var mandatoryText = document.createElement("span"); | |
614 mandatoryText.textContent = "Mandatory: "; | |
615 mandatory.appendChild(mandatoryText); | |
616 mandatory.appendChild(mandatoryInput); | |
617 mandatoryInput.type = "checkbox"; | |
618 if (this.option.mandatory) {mandatoryInput.checked = true;} else {mandatoryInput.checked = false;} | |
619 mandatoryInput.setAttribute("name","mandatory"); | |
620 mandatoryInput.addEventListener("change",this,false); | |
621 mandatory.appendChild(mandatoryText); | |
622 mandatory.appendChild(mandatoryInput); | |
623 this.dynamic.appendChild(mandatory); | |
624 break; | |
625 } | |
626 } | |
627 this.handleEvent = function() | |
628 { | |
629 var name = event.currentTarget.getAttribute("name"); | |
630 switch(name) { | |
631 case "type": | |
632 // If type has changed, we may need to rebuild the entire state node | |
633 if (event.currentTarget.value != this.option.name) | |
634 { | |
635 this.option.type = event.currentTarget.value; | |
636 this.generate(this.option,this.parent); | |
637 } | |
638 break; | |
639 case "mandatory": | |
640 this.option.mandatory = event.currentTarget.checked; | |
641 break; | |
642 case "boxsize": | |
643 this.option.boxsize = event.currentTarget.value; | |
644 break; | |
645 case "statement": | |
646 this.option.statement = event.currentTarget.value; | |
647 break; | |
648 } | |
649 } | |
650 this.continue = function() | |
651 { | |
652 var newNode = new this.parent.surveyEntryNode(this.parent,this.option); | |
653 this.parent.children.push(newNode); | |
654 this.parent.childrenDOM.appendChild(newNode.rootDOM); | |
655 popupObject.hide(); | |
656 } | |
657 } | |
658 } | |
659 } | |
660 | |
661 function SpecificationToHTML() | |
662 { | |
663 // This takes the specification node and converts it to an on-page HTML object | |
664 // Each Specification Node is given its own JS object which listens to the XSD for instant verification | |
665 // Once generated, it directly binds into the specification object to update with changes | |
666 // Fixed DOM entries | |
667 this.injectDOM; | |
668 this.setupDOM; | |
669 this.pages = []; | |
670 | |
671 // Self-contained generators | |
672 this.createGeneralNodeDOM = function(name,id,parent) | |
673 { | |
674 var root = document.createElement('div'); | |
675 root.id = id; | |
676 root.className = "node"; | |
677 | |
678 var titleDiv = document.createElement('div'); | |
679 titleDiv.className = "node-title"; | |
680 var title = document.createElement('span'); | |
681 title.className = "node-title"; | |
682 title.textContent = name; | |
683 titleDiv.appendChild(title); | |
684 | |
685 var attributeDiv = document.createElement('div'); | |
686 attributeDiv.className = "node-attributes"; | |
687 | |
688 var childrenDiv = document.createElement('div'); | |
689 childrenDiv.className = "node-children"; | |
690 | |
691 var buttonsDiv = document.createElement('div'); | |
692 buttonsDiv.className = "node-buttons"; | |
693 | |
694 root.appendChild(titleDiv); | |
695 root.appendChild(attributeDiv); | |
696 root.appendChild(childrenDiv); | |
697 root.appendChild(buttonsDiv); | |
698 | |
699 var obj = { | |
700 rootDOM: root, | |
701 titleDOM: title, | |
702 attributeDOM: attributeDiv, | |
703 attributes: [], | |
704 childrenDOM: childrenDiv, | |
705 children: [], | |
706 buttonDOM: buttonsDiv, | |
707 parent: parent | |
708 } | |
709 return obj; | |
710 } | |
711 | |
712 this.convertAttributeToDOM = function(node,schema) | |
713 { | |
714 // This takes an attribute schema node and returns an object with the input node and any bindings | |
715 if (schema.getAttribute('name') == undefined && schema.getAttribute('ref') != undefined) | |
716 { | |
717 schema = specification.schema.getAllElementsByName(schema.getAttribute('ref'))[0]; | |
718 } | |
719 var obj = new function() | |
720 { | |
721 this.input; | |
722 this.name; | |
723 this.owner; | |
724 this.holder; | |
725 | |
726 this.name = schema.getAttribute('name'); | |
727 this.default = schema.getAttribute('default'); | |
728 this.dataType = schema.getAttribute('type'); | |
729 if (typeof this.dataType == "string") { this.dataType = this.dataType.substr(3);} | |
730 else {this.dataType = "string";} | |
731 var minVar = undefined; | |
732 var maxVar = undefined; | |
733 switch(this.dataType) | |
734 { | |
735 case "negativeInteger": | |
736 maxVar = -1; | |
737 break; | |
738 case "positiveInteger": | |
739 minVar = 1; | |
740 break; | |
741 case "nonNegativeInteger": | |
742 minVar = 0; | |
743 break; | |
744 case "nonPositiveInteger": | |
745 maxVar = 0; | |
746 break; | |
747 case "byte": | |
748 minVar = 0; | |
749 maxVar = 256; | |
750 break; | |
751 case "short": | |
752 minVar = 0; | |
753 maxVar = 65536; | |
754 break; | |
755 default: | |
756 break; | |
757 } | |
758 | |
759 this.input = document.createElement('input'); | |
760 switch(this.dataType) | |
761 { | |
762 case "boolean": | |
763 this.input.type = "checkbox"; | |
764 break; | |
765 case "negativeInteger": | |
766 case "positiveInteger": | |
767 case "nonNegativeInteger": | |
768 case "nonPositiveInteger": | |
769 case "integer": | |
770 case "short": | |
771 case "byte": | |
772 this.input.step = 1; | |
773 case "decimal": | |
774 this.input.type = "number"; | |
775 this.input.min = minVar; | |
776 this.input.max = maxVar; | |
777 break; | |
778 default: | |
779 break; | |
780 } | |
781 var value; | |
782 eval("value = specification."+this.name) | |
783 if (value != undefined) | |
784 { | |
785 this.input.value = value; | |
786 } else if (this.default != undefined) | |
787 { | |
788 this.input.value = this.default; | |
789 } | |
790 this.handleEvent = function(event) | |
791 { | |
792 var value; | |
793 switch(this.input.type) | |
794 { | |
795 case "checkbox": | |
796 value = event.currentTarget.checked; | |
797 break; | |
798 case "number": | |
799 value = Number(event.currentTarget.value); | |
800 break; | |
801 default: | |
802 value = event.currentTarget.value; | |
803 break; | |
804 } | |
805 eval("this.owner."+this.name+" = value"); | |
806 } | |
807 this.holder = document.createElement('div'); | |
808 this.holder.className = "attribute"; | |
809 this.holder.setAttribute('name',this.name); | |
810 var text = document.createElement('span'); | |
811 eval("text.textContent = attributeText."+this.name+"+': '"); | |
812 this.holder.appendChild(text); | |
813 this.holder.appendChild(this.input); | |
814 this.owner = node; | |
815 this.input.addEventListener("change",this,false); | |
816 } | |
817 if (obj.attribute != null) | |
818 { | |
819 obj.input.value = obj.attribute; | |
820 } | |
821 return obj; | |
822 } | |
823 | |
824 this.convert = function(root) | |
825 { | |
826 //Performs the actual conversion using the given root DOM as the root | |
827 this.injectDOM = root; | |
828 | |
829 // First perform the setupNode; | |
830 var setupSchema = specification.schema.getAllElementsByName('setup')[0]; | |
831 this.setupDOM = new this.createGeneralNodeDOM('setup','setup',null); | |
832 this.injectDOM.appendChild(this.setupDOM.rootDOM); | |
833 var setupAttributes = setupSchema.getAllElementsByTagName('xs:attribute'); | |
834 for (var i=0; i<setupAttributes.length; i++) | |
835 { | |
836 var attributeName = setupAttributes[i].getAttribute('name'); | |
837 var attrObject = this.convertAttributeToDOM(specification,setupAttributes[i]); | |
838 this.setupDOM.attributeDOM.appendChild(attrObject.holder); | |
839 this.setupDOM.attributes.push(attrObject); | |
840 } | |
841 | |
842 // Now we must build the interface Node | |
843 this.interfaceDOM = new this.interfaceNode(this,specification.interfaces); | |
844 this.interfaceDOM.build("Interface","setup-interface",this.setupDOM.rootDOM); | |
845 | |
846 // Now build the Metrics selection node | |
847 var metric = this.createGeneralNodeDOM("metrics","setup-metric",this.setupDOM); | |
848 metric.rootDOM.removeChild(metric.attributeDOM); | |
849 this.setupDOM.children.push(metric); | |
850 this.setupDOM.childrenDOM.appendChild(metric.rootDOM); | |
851 var interfaceName = popupStateNodes.state[1].select.value; | |
852 var checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("metrics")[0]; | |
853 var testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; | |
854 var interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(testXML.getAttribute("interface"))[0].getAllElementsByTagName("metrics")[0]; | |
855 testXML = testXML.getAllElementsByTagName("metrics"); | |
856 for (var i=0; i<interfaceXML.children.length; i++) | |
857 { | |
858 var obj = { | |
859 input: document.createElement('input'), | |
860 root: document.createElement('div'), | |
861 text: document.createElement('span'), | |
862 specification: specification.metrics.enabled, | |
863 name: interfaceXML.children[i].getAttribute("name"), | |
864 handleEvent: function() | |
865 { | |
866 for (var i=0; i<this.specification.length; i++) | |
867 { | |
868 if (this.specification[i] == this.name) | |
869 { | |
870 var options = this.specification; | |
871 if (this.input.checked == false) { | |
872 if (i == options.length) | |
873 {options = options.slice(0,i);} | |
874 else { | |
875 options = options.slice(0,i).concat(options.slice(i+1)); | |
876 } | |
877 } else { | |
878 return; | |
879 } | |
880 this.specification = options; | |
881 break; | |
882 } | |
883 } | |
884 if (this.input.checked) { | |
885 this.specification.push(this.name); | |
886 } | |
887 } | |
888 }; | |
889 obj.root.className = "attribute"; | |
890 obj.input.type = "checkbox"; | |
891 obj.root.appendChild(obj.text); | |
892 obj.root.appendChild(obj.input); | |
893 obj.text.textContent = checkText.children[i].textContent; | |
894 metric.children.push(obj); | |
895 metric.childrenDOM.appendChild(obj.root); | |
896 for (var i=0; i<specification.metrics.enabled.length; i++) | |
897 { | |
898 if (specification.metrics.enabled[i] == obj.name) | |
899 { | |
900 obj.input.checked = true; | |
901 break; | |
902 } | |
903 } | |
904 } | |
905 | |
906 // Now both before and after surveys | |
907 if (specification.preTest == undefined){ | |
908 specification.preTest = new specification.surveyNode(); | |
909 specification.preTest.location = "pre"; | |
910 } | |
911 if (specification.postTest == undefined){ | |
912 specification.postTest = new specification.surveyNode(); | |
913 specification.postTest.location = "post"; | |
914 } | |
915 var surveyBefore = new this.surveyNode(this,specification.preTest,"Pre"); | |
916 var surveyAfter = new this.surveyNode(this,specification.postTest,"Post"); | |
917 this.setupDOM.children.push(surveyBefore); | |
918 this.setupDOM.children.push(surveyAfter); | |
919 this.setupDOM.childrenDOM.appendChild(surveyBefore.rootDOM); | |
920 this.setupDOM.childrenDOM.appendChild(surveyAfter.rootDOM); | |
921 | |
922 // Add in the page creator button | |
923 this.addPage = { | |
924 root: document.createElement("button"), | |
925 parent: this, | |
926 handleEvent: function() | |
927 { | |
928 var pageObj = new specification.page(); | |
929 specification.pages.push(pageObj); | |
930 var newPage = new this.parent.pageNode(this.parent,pageObj); | |
931 this.parent.injectDOM.appendChild(newPage.rootDOM); | |
932 this.parent.pages.push(newPage); | |
933 } | |
934 } | |
935 this.addPage.root.textContent = "Add Page"; | |
936 this.addPage.root.addEventListener("click",this.addPage,false); | |
937 this.injectDOM.appendChild(this.addPage.root); | |
938 } | |
939 | |
940 this.interfaceNode = function(parent,rootObject) | |
941 { | |
942 this.rootDOM; | |
943 this.titleDOM; | |
944 this.attributeDOM; | |
945 this.attributes = []; | |
946 this.childrenDOM; | |
947 this.children = []; | |
948 this.buttonDOM; | |
949 this.parent = parent; | |
950 this.HTMLPoint; | |
951 this.specification = rootObject; | |
952 this.schema = specification.schema.getAllElementsByName("interface")[1]; | |
953 | |
954 this.createIOasAttr = function(name,specification,parent,type) { | |
955 this.root = document.createElement('div'); | |
956 this.input = document.createElement("input"); | |
957 this.name = name; | |
958 this.type = type; | |
959 this.parent = parent; | |
960 this.specification = specification; | |
961 this.handleEvent = function(event) { | |
962 for (var i=0; i<this.specification.options.length; i++) | |
963 { | |
964 if (this.specification.options[i].name == this.name) | |
965 { | |
966 var options = this.specification.options; | |
967 if (this.input.checked == false) { | |
968 if (i == options.length) | |
969 {options = options.slice(0,i);} | |
970 else { | |
971 options = options.slice(0,i).concat(options.slice(i+1)); | |
972 } | |
973 } else { | |
974 return; | |
975 } | |
976 this.specification.options = options; | |
977 break; | |
978 } | |
979 } | |
980 if (this.input.checked) { | |
981 var obj = { | |
982 name: this.name, | |
983 type: this.type | |
984 }; | |
985 this.specification.options.push(obj); | |
986 } | |
987 if (this.parent.HTMLPoint.id == "setup") | |
988 { | |
989 // We've changed a global setting, must update all child 'interfaces' and disable them | |
990 for (pages of convert.pages) | |
991 { | |
992 for (interface of pages.interfaces) | |
993 { | |
994 if (this.type == "check") | |
995 { | |
996 for (node of interface.children[0].attributes) | |
997 { | |
998 if (node.name == this.name) { | |
999 if (this.input.checked) { | |
1000 node.input.disabled = true; | |
1001 node.input.checked = false; | |
1002 } else { | |
1003 node.input.disabled = false; | |
1004 } | |
1005 break; | |
1006 } | |
1007 } | |
1008 } else if (this.type == "show") | |
1009 { | |
1010 for (node of interface.children[1].attributes) | |
1011 { | |
1012 if (node.name == this.name) { | |
1013 if (this.input.checked) { | |
1014 node.input.disabled = true; | |
1015 } else { | |
1016 node.input.disabled = false; | |
1017 } | |
1018 break; | |
1019 } | |
1020 } | |
1021 } | |
1022 } | |
1023 } | |
1024 } | |
1025 }; | |
1026 this.findIndex = function(element,index,array){ | |
1027 if (element.name == this.name) | |
1028 return true; | |
1029 else | |
1030 return false; | |
1031 }; | |
1032 this.findNode = function(element,index,array){ | |
1033 if (element.name == this.name) | |
1034 return true; | |
1035 else | |
1036 return false; | |
1037 }; | |
1038 this.input.type = "checkbox"; | |
1039 this.input.setAttribute("name",name); | |
1040 this.input.addEventListener("change",this,false); | |
1041 this.root.appendChild(this.input); | |
1042 this.root.className = "attribute"; | |
1043 return this; | |
1044 } | |
1045 | |
1046 this.build = function(name,id,parent) | |
1047 { | |
1048 var obj = this.parent.createGeneralNodeDOM(name,id,parent); | |
1049 | |
1050 this.rootDOM = obj.rootDOM; | |
1051 this.titleDOM = obj.titleDOM; | |
1052 this.attributeDOM = obj.attributeDOM; | |
1053 this.childrenDOM = obj.childrenDOM; | |
1054 this.buttonDOM = obj.buttonsDOM; | |
1055 this.HTMLPoint = parent; | |
1056 this.rootDOM.removeChild(this.attributeDOM); | |
1057 // Put in the check / show options as individual children | |
1058 var checks = this.parent.createGeneralNodeDOM("Checks","setup-interface-checks",this); | |
1059 | |
1060 var interfaceName = popupStateNodes.state[1].select.value; | |
1061 var checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("checks")[0]; | |
1062 var testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; | |
1063 var interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(testXML.getAttribute("interface"))[0].getAllElementsByTagName("checks")[0]; | |
1064 testXML = testXML.getAllElementsByTagName("checks"); | |
1065 for (var i=0; i<interfaceXML.children.length; i++) | |
1066 { | |
1067 var obj = new this.createIOasAttr(interfaceXML.children[i].getAttribute("name"),this.specification,this,"check"); | |
1068 for (var option of this.specification.options) | |
1069 { | |
1070 if (option.name == obj.name) | |
1071 { | |
1072 obj.input.checked = true; | |
1073 break; | |
1074 } | |
1075 } | |
1076 if (parent.id != "setup") { | |
1077 var node = convert.interfaceDOM.children[0].attributes.find(obj.findNode,obj); | |
1078 if (node.input.checked) { | |
1079 obj.input.checked = false; | |
1080 obj.input.disable = true; | |
1081 } | |
1082 } | |
1083 var text = document.createElement('span'); | |
1084 text.textContent = checkText.children[i].textContent; | |
1085 obj.root.appendChild(text); | |
1086 checks.attributeDOM.appendChild(obj.root); | |
1087 checks.attributes.push(obj); | |
1088 } | |
1089 this.children.push(checks); | |
1090 this.childrenDOM.appendChild(checks.rootDOM); | |
1091 | |
1092 var show = this.parent.createGeneralNodeDOM("Show","setup-interface-show",this); | |
1093 interfaceName = popupStateNodes.state[1].select.value; | |
1094 checkText = interfaceSpecs.getElementsByTagName("global")[0].getAllElementsByTagName("show")[0]; | |
1095 testXML = interfaceSpecs.getElementsByTagName("tests")[0].getAllElementsByName(interfaceName)[0]; | |
1096 interfaceXML = interfaceSpecs.getAllElementsByTagName("interfaces")[0].getAllElementsByName(testXML.getAttribute("interface"))[0].getAllElementsByTagName("show")[0]; | |
1097 testXML = testXML.getAllElementsByTagName("show"); | |
1098 for (var i=0; i<interfaceXML.children.length; i++) | |
1099 { | |
1100 var obj = new this.createIOasAttr(interfaceXML.children[i].getAttribute("name"),this.specification,this,"show"); | |
1101 for (var option of this.specification.options) | |
1102 { | |
1103 if (option.name == obj.name) | |
1104 { | |
1105 obj.input.checked = true; | |
1106 break; | |
1107 } | |
1108 } | |
1109 if (parent.id != "setup") { | |
1110 var node = convert.interfaceDOM.children[0].attributes.find(obj.findNode,obj); | |
1111 if (node.input.checked) { | |
1112 obj.input.checked = false; | |
1113 obj.input.disable = true; | |
1114 } | |
1115 } | |
1116 var text = document.createElement('span'); | |
1117 text.textContent = checkText.children[i].textContent; | |
1118 obj.root.appendChild(text); | |
1119 show.attributeDOM.appendChild(obj.root); | |
1120 show.attributes.push(obj); | |
1121 } | |
1122 this.children.push(show); | |
1123 this.childrenDOM.appendChild(show.rootDOM); | |
1124 | |
1125 if (parent.id == "setup") | |
1126 { | |
1127 } else { | |
1128 var nameAttr = this.parent.convertAttributeToDOM(this,specification.schema.getAllElementsByName("name")[0]); | |
1129 this.attributeDOM.appendChild(nameAttr.holder); | |
1130 this.attributes.push(nameAttr); | |
1131 } | |
1132 if (parent != undefined) | |
1133 { | |
1134 parent.appendChild(this.rootDOM); | |
1135 } | |
1136 } | |
1137 } | |
1138 | |
1139 this.surveyNode = function(parent,rootObject,location) | |
1140 { | |
1141 this.rootDOM = document.createElement("div"); | |
1142 this.titleDOM = document.createElement("span"); | |
1143 this.attributeDOM = document.createElement("div"); | |
1144 this.attributes = []; | |
1145 this.childrenDOM = document.createElement("div"); | |
1146 this.children = []; | |
1147 this.buttonDOM = document.createElement("div"); | |
1148 this.parent = parent; | |
1149 this.specification = rootObject; | |
1150 this.schema = specification.schema.getAllElementsByName("survey")[1]; | |
1151 this.rootDOM.className = "node"; | |
1152 | |
1153 var titleDiv = document.createElement('div'); | |
1154 titleDiv.className = "node-title"; | |
1155 this.titleDOM.className = "node-title"; | |
1156 this.titleDOM.textContent = "Survey"; | |
1157 titleDiv.appendChild(this.titleDOM); | |
1158 | |
1159 this.attributeDOM.className = "node-attributes"; | |
1160 var locationAttr = document.createElement("span"); | |
1161 this.attributeDOM.appendChild(locationAttr); | |
1162 if (location == "Pre" || location == "pre") { | |
1163 locationAttr.textContent = "Location: Before"; | |
1164 } else { | |
1165 locationAttr.textContent = "Location: After"; | |
1166 } | |
1167 this.childrenDOM.className = "node-children"; | |
1168 this.buttonDOM.className = "node-buttons"; | |
1169 | |
1170 this.rootDOM.appendChild(titleDiv); | |
1171 this.rootDOM.appendChild(this.attributeDOM); | |
1172 this.rootDOM.appendChild(this.childrenDOM); | |
1173 this.rootDOM.appendChild(this.buttonDOM); | |
1174 | |
1175 this.surveyEntryNode = function(parent,rootObject) | |
1176 { | |
1177 this.rootDOM = document.createElement("div"); | |
1178 this.titleDOM = document.createElement("span"); | |
1179 this.attributeDOM = document.createElement("div"); | |
1180 this.attributes = []; | |
1181 this.childrenDOM = document.createElement("div"); | |
1182 this.children = []; | |
1183 this.buttonDOM = document.createElement("div"); | |
1184 this.parent = parent; | |
1185 this.specification = rootObject; | |
1186 this.schema = specification.schema.getAllElementsByName("surveyentry")[1]; | |
1187 | |
1188 this.rootDOM.id = id; | |
1189 this.rootDOM.className = "node"; | |
1190 this.rootDOM.style.minWidth = "50%"; | |
1191 | |
1192 var titleDiv = document.createElement('div'); | |
1193 titleDiv.className = "node-title"; | |
1194 this.titleDOM.className = "node-title"; | |
1195 titleDiv.appendChild(this.titleDOM); | |
1196 | |
1197 this.attributeDOM.className = "node-attributes"; | |
1198 this.childrenDOM.className = "node-children"; | |
1199 this.buttonDOM.className = "node-buttons"; | |
1200 | |
1201 this.rootDOM.appendChild(titleDiv); | |
1202 this.rootDOM.appendChild(this.attributeDOM); | |
1203 this.rootDOM.appendChild(this.childrenDOM); | |
1204 this.rootDOM.appendChild(this.buttonDOM); | |
1205 | |
1206 var statement = {}; | |
1207 statement.rootDOM = document.createElement("div"); | |
1208 statement.titleDOM = document.createElement("span"); | |
1209 statement.titleDOM.textContent = "Statement/Question"; | |
1210 statement.input = document.createElement("textarea"); | |
1211 statement.input.value = this.specification.statement; | |
1212 statement.specification = this.specification; | |
1213 statement.handleEvent = function() { | |
1214 this.specification.statement = this.input.value; | |
1215 } | |
1216 statement.input.addEventListener("change",statement,false); | |
1217 statement.rootDOM.appendChild(statement.titleDOM); | |
1218 statement.rootDOM.appendChild(statement.input); | |
1219 this.children.push(statement); | |
1220 this.childrenDOM.appendChild(statement.rootDOM); | |
1221 switch(this.specification.type) | |
1222 { | |
1223 case "statement": | |
1224 this.titleDOM.textContent = "Statement"; | |
1225 this.rootDOM.removeChild(this.attributeDOM); | |
1226 break; | |
1227 case "question": | |
1228 var id = convert.convertAttributeToDOM(this.specification.id,specification.schema.getAllElementsByName("id")[0]); | |
1229 var mandatory = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("id")[0]); | |
1230 var boxsize = convert.convertAttributeToDOM(this.specification.mandatory,specification.schema.getAllElementsByName("boxsize")[0]); | |
1231 break; | |
1232 } | |
1233 | |
1234 this.editNode = { | |
1235 root: document.createElement("button"), | |
1236 parent: this, | |
1237 handleEvent: function() | |
1238 { | |
1239 popupObject.show(); | |
1240 popupStateNodes.state[5].generate(this,this.parent); | |
1241 popupObject.postNode(popupStateNodes.state[5]); | |
1242 } | |
1243 } | |
1244 this.editNode.root.textContent = "Edit Entry"; | |
1245 this.editNode.root.addEventListener("click",this.editNode,false); | |
1246 this.buttonDOM.appendChild(this.editNode.root); | |
1247 | |
1248 this.deleteNode = { | |
1249 root: document.createElement("button"), | |
1250 parent: this, | |
1251 handleEvent: function() | |
1252 { | |
1253 var optionList = this.parent.parent.specification.options; | |
1254 var childList = this.parent.parent.children; | |
1255 for (var i=0; i <this.parent.parent.specification.options.length; i++) | |
1256 { | |
1257 var option = this.parent.parent.specification.options[i]; | |
1258 if (option == this.parent.specification) | |
1259 { | |
1260 this.parent.parent.childrenDOM.removeChild(this.parent.rootDOM); | |
1261 if (i == this.parent.parent.specification.options.length-1) | |
1262 { | |
1263 optionList = optionList.slice(0,i); | |
1264 childList = childList.slice(0,i); | |
1265 } | |
1266 else { | |
1267 optionList = optionList.slice(0,i).concat(optionList.slice(i+1)); | |
1268 childList = childList.slice(0,i).concat(childList.slice(i+1)); | |
1269 } | |
1270 this.parent.parent.specification.options = optionList; | |
1271 this.parent.parent.children = childList; | |
1272 } | |
1273 } | |
1274 } | |
1275 } | |
1276 this.deleteNode.root.textContent = "Delete Entry"; | |
1277 this.deleteNode.root.addEventListener("click",this.deleteNode,false); | |
1278 this.buttonDOM.appendChild(this.deleteNode.root); | |
1279 } | |
1280 this.addNode = { | |
1281 root: document.createElement("button"), | |
1282 parent: this, | |
1283 handleEvent: function() | |
1284 { | |
1285 var newNode = new this.parent.specification.OptionNode(); | |
1286 this.parent.specification.options.push(newNode); | |
1287 popupObject.show(); | |
1288 popupStateNodes.state[5].generate(newNode,this.parent); | |
1289 popupObject.postNode(popupStateNodes.state[5]); | |
1290 } | |
1291 } | |
1292 this.addNode.root.textContent = "Add Survey Entry"; | |
1293 this.addNode.root.addEventListener("click",this.addNode,false); | |
1294 this.buttonDOM.appendChild(this.addNode.root); | |
1295 | |
1296 for (var option of this.specification.options) | |
1297 { | |
1298 var newNode = new this.surveyEntryNode(this,option); | |
1299 this.children.push(newNode); | |
1300 this.childrenDOM.appendChild(newNode.rootDOM); | |
1301 } | |
1302 } | |
1303 | |
1304 this.pageNode = function(parent,rootObject) | |
1305 { | |
1306 this.rootDOM = document.createElement("div"); | |
1307 this.titleDOM = document.createElement("span"); | |
1308 this.attributeDOM = document.createElement("div"); | |
1309 this.attributes = []; | |
1310 this.childrenDOM = document.createElement("div"); | |
1311 this.children = []; | |
1312 this.buttonDOM = document.createElement("div"); | |
1313 this.parent = parent; | |
1314 this.specification = rootObject; | |
1315 this.schema = specification.schema.getAllElementsByName("page")[0]; | |
1316 this.rootDOM.className = "node"; | |
1317 | |
1318 var titleDiv = document.createElement('div'); | |
1319 titleDiv.className = "node-title"; | |
1320 this.titleDOM.className = "node-title"; | |
1321 this.titleDOM.textContent = "Test Page"; | |
1322 titleDiv.appendChild(this.titleDOM); | |
1323 | |
1324 this.attributeDOM.className = "node-attributes"; | |
1325 this.childrenDOM.className = "node-children"; | |
1326 this.buttonDOM.className = "node-buttons"; | |
1327 | |
1328 this.rootDOM.appendChild(titleDiv); | |
1329 this.rootDOM.appendChild(this.attributeDOM); | |
1330 this.rootDOM.appendChild(this.childrenDOM); | |
1331 this.rootDOM.appendChild(this.buttonDOM); | |
1332 | |
1333 // Do the comment prefix node | |
1334 var cpn = this.parent.createGeneralNodeDOM("Comment Prefix",""+this.specification.id+"-commentprefix",this.parent); | |
1335 cpn.rootDOM.removeChild(cpn.attributeDOM); | |
1336 var obj = { | |
1337 root: document.createElement("div"), | |
1338 input: document.createElement("input"), | |
1339 parent: this, | |
1340 handleEvent: function() | |
1341 { | |
1342 this.parent.specification.commentBoxPrefix = event.currentTarget.value; | |
1343 } | |
1344 } | |
1345 cpn.children.push(obj); | |
1346 cpn.childrenDOM.appendChild(obj.root); | |
1347 obj.root.appendChild(obj.input); | |
1348 obj.input.addEventListener("change",obj,false); | |
1349 obj.input.value = this.specification.commentBoxPrefix; | |
1350 this.childrenDOM.appendChild(cpn.rootDOM); | |
1351 this.children.push(cpn); | |
1352 | |
1353 // Now both before and after surveys | |
1354 if (this.specification.preTest == undefined){ | |
1355 this.specification.preTest = new specification.surveyNode(); | |
1356 this.specification.preTest.location = "pre"; | |
1357 } | |
1358 if (this.specification.postTest == undefined){ | |
1359 this.specification.postTest = new specification.surveyNode(); | |
1360 this.specification.postTest.location = "post"; | |
1361 } | |
1362 var surveyBefore = new this.parent.surveyNode(this,this.specification.preTest,"Pre"); | |
1363 var surveyAfter = new this.parent.surveyNode(this,this.specification.postTest,"Post"); | |
1364 this.children.push(surveyBefore); | |
1365 this.children.push(surveyAfter); | |
1366 this.childrenDOM.appendChild(surveyBefore.rootDOM); | |
1367 this.childrenDOM.appendChild(surveyAfter.rootDOM); | |
1368 | |
1369 // Build the attributes | |
1370 var attributeList = this.schema.getAllElementsByTagName("xs:attribute"); | |
1371 for (var i=0; i<attributeList.length; i++) | |
1372 { | |
1373 var attributeName = attributeList[i].getAttribute('name'); | |
1374 var attrObject = this.parent.convertAttributeToDOM(rootObject,attributeList[i]); | |
1375 this.attributeDOM.appendChild(attrObject.holder); | |
1376 this.attributes.push(attrObject); | |
1377 } | |
1378 | |
1379 this.interfaces = []; | |
1380 | |
1381 this.audioElementNode = function(parent,rootObject) | |
1382 { | |
1383 this.rootDOM = document.createElement("div"); | |
1384 this.titleDOM = document.createElement("span"); | |
1385 this.attributeDOM = document.createElement("div"); | |
1386 this.attributes = []; | |
1387 this.childrenDOM = document.createElement("div"); | |
1388 this.children = []; | |
1389 this.buttonDOM = document.createElement("div"); | |
1390 this.parent = parent; | |
1391 this.specification = rootObject; | |
1392 this.schema = specification.schema.getAllElementsByName("audioelement")[0]; | |
1393 this.rootDOM.className = "node"; | |
1394 | |
1395 var titleDiv = document.createElement('div'); | |
1396 titleDiv.className = "node-title"; | |
1397 this.titleDOM.className = "node-title"; | |
1398 this.titleDOM.textContent = "Audio Element"; | |
1399 titleDiv.appendChild(this.titleDOM); | |
1400 | |
1401 this.attributeDOM.className = "node-attributes"; | |
1402 this.childrenDOM.className = "node-children"; | |
1403 this.buttonDOM.className = "node-buttons"; | |
1404 | |
1405 this.rootDOM.appendChild(titleDiv); | |
1406 this.rootDOM.appendChild(this.attributeDOM); | |
1407 this.rootDOM.appendChild(this.childrenDOM); | |
1408 this.rootDOM.appendChild(this.buttonDOM); | |
1409 | |
1410 // Build the attributes | |
1411 var attributeList = this.schema.getAllElementsByTagName("xs:attribute"); | |
1412 for (var i=0; i<attributeList.length; i++) | |
1413 { | |
1414 var attributeName = attributeList[i].getAttribute('name'); | |
1415 var attrObject = this.parent.parent.convertAttributeToDOM(rootObject,attributeList[i]); | |
1416 this.attributeDOM.appendChild(attrObject.holder); | |
1417 this.attributes.push(attrObject); | |
1418 } | |
1419 | |
1420 this.deleteNode = { | |
1421 root: document.createElement("button"), | |
1422 parent: this, | |
1423 handleEvent: function() | |
1424 { | |
1425 var i = this.parent.parent.specification.audioElements.findIndex(this.findNode,this); | |
1426 if (i >= 0) { | |
1427 var aeList = this.parent.parent.specification.audioElements; | |
1428 if (i < aeList.length-1) { | |
1429 aeList = aeList.slice(0,i).concat(aeList.slice(i+1)); | |
1430 } else { | |
1431 aeList = aeList.slice(0,i); | |
1432 } | |
1433 } | |
1434 i = this.parent.parent.children.findIndex(function(element,index,array){ | |
1435 if (element == this.parent) | |
1436 return true; | |
1437 else | |
1438 return false; | |
1439 },this); | |
1440 if (i >= 0) { | |
1441 var childList = this.parent.children; | |
1442 if (i < aeList.length-1) { | |
1443 childList = childList.slice(0,i).concat(childList.slice(i+1)); | |
1444 } else { | |
1445 childList = childList.slice(0,i); | |
1446 } | |
1447 this.parent.parent.childrenDOM.removeChild(this.parent.rootDOM); | |
1448 } | |
1449 }, | |
1450 findNode: function(element,index,array){ | |
1451 if (element == this.parent.specification) | |
1452 return true; | |
1453 else | |
1454 return false; | |
1455 } | |
1456 } | |
1457 this.deleteNode.root.textContent = "Delete Entry"; | |
1458 this.deleteNode.root.addEventListener("click",this.deleteNode,false); | |
1459 this.buttonDOM.appendChild(this.deleteNode.root); | |
1460 } | |
1461 | |
1462 this.commentQuestionNode = function(parent,rootObject) | |
1463 { | |
1464 this.rootDOM = document.createElement("div"); | |
1465 this.titleDOM = document.createElement("span"); | |
1466 this.attributeDOM = document.createElement("div"); | |
1467 this.attributes = []; | |
1468 this.childrenDOM = document.createElement("div"); | |
1469 this.children = []; | |
1470 this.buttonDOM = document.createElement("div"); | |
1471 this.parent = parent; | |
1472 this.specification = rootObject; | |
1473 this.schema = specification.schema.getAllElementsByName("page")[0]; | |
1474 this.rootDOM.className = "node"; | |
1475 | |
1476 var titleDiv = document.createElement('div'); | |
1477 titleDiv.className = "node-title"; | |
1478 this.titleDOM.className = "node-title"; | |
1479 this.titleDOM.textContent = "Test Page"; | |
1480 titleDiv.appendChild(this.titleDOM); | |
1481 | |
1482 this.attributeDOM.className = "node-attributes"; | |
1483 this.childrenDOM.className = "node-children"; | |
1484 this.buttonDOM.className = "node-buttons"; | |
1485 | |
1486 this.rootDOM.appendChild(titleDiv); | |
1487 this.rootDOM.appendChild(this.attributeDOM); | |
1488 this.rootDOM.appendChild(this.childrenDOM); | |
1489 this.rootDOM.appendChild(this.buttonDOM); | |
1490 | |
1491 } | |
1492 | |
1493 this.addInterface = { | |
1494 root: document.createElement("button"), | |
1495 parent: this, | |
1496 handleEvent: function() { | |
1497 var InterfaceObj = new specification.interfaceNode(); | |
1498 var newInterface = new this.parent.parent.interfaceNode(this.parent.parent,InterfaceObj); | |
1499 newInterface.build("Interface",""+this.parent.specification.id+"-interface",this.parent.childrenDOM); | |
1500 this.parent.children.push(newInterface); | |
1501 this.parent.specification.interfaces.push(InterfaceObj); | |
1502 this.parent.interfaces.push(newInterface); | |
1503 } | |
1504 } | |
1505 this.addInterface.root.textContent = "Add Interface"; | |
1506 this.addInterface.root.addEventListener("click",this.addInterface,false); | |
1507 this.buttonDOM.appendChild(this.addInterface.root); | |
1508 | |
1509 this.addAudioElement = { | |
1510 root: document.createElement("button"), | |
1511 parent: this, | |
1512 handleEvent: function() { | |
1513 var audioElementObject = new this.parent.specification.audioElementNode(); | |
1514 var audioElementDOM = new this.parent.audioElementNode(this.parent,audioElementObject); | |
1515 this.parent.specification.audioElements.push(audioElementObject); | |
1516 this.parent.children.push(audioElementDOM); | |
1517 this.parent.childrenDOM.appendChild(audioElementDOM.rootDOM); | |
1518 } | |
1519 } | |
1520 this.addAudioElement.root.textContent = "Add Audio Element"; | |
1521 this.addAudioElement.root.addEventListener("click",this.addAudioElement,false); | |
1522 this.buttonDOM.appendChild(this.addAudioElement.root); | |
1523 } | |
1524 } |