Mercurial > hg > webaudioevaluationtool
comparison interfaces/ape.js @ 2696:2edf2fc6755c
#180. APE JSHinted
author | Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk> |
---|---|
date | Mon, 13 Mar 2017 10:42:37 +0000 |
parents | f4a146282ef5 |
children | 0562dcdfd5eb |
comparison
equal
deleted
inserted
replaced
2695:211364181d16 | 2696:2edf2fc6755c |
---|---|
1 /** | 1 /** |
2 * ape.js | 2 * ape.js |
3 * Create the APE interface | 3 * Create the APE interface |
4 */ | 4 */ |
5 | 5 |
6 | 6 /*globals window,interfaceContext, document, audioEngineContext, console, $, Interface, testState, storage, specification */ |
7 /*globals metricTracker */ | |
7 // Once this is loaded and parsed, begin execution | 8 // Once this is loaded and parsed, begin execution |
8 loadInterface(); | 9 loadInterface(); |
9 | 10 |
10 function loadInterface() { | 11 function loadInterface() { |
11 | 12 |
19 | 20 |
20 testContent.id = 'testContent'; | 21 testContent.id = 'testContent'; |
21 | 22 |
22 // Bindings for interfaceContext | 23 // Bindings for interfaceContext |
23 interfaceContext.checkAllPlayed = function () { | 24 interfaceContext.checkAllPlayed = function () { |
24 hasBeenPlayed = audioEngineContext.checkAllPlayed(); | 25 var hasBeenPlayed = audioEngineContext.checkAllPlayed(); |
25 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet | 26 if (hasBeenPlayed.length > 0) // if a fragment has not been played yet |
26 { | 27 { |
27 var str = ""; | 28 var str = ""; |
28 if (hasBeenPlayed.length > 1) { | 29 if (hasBeenPlayed.length > 1) { |
29 for (var i = 0; i < hasBeenPlayed.length; i++) { | 30 for (var i = 0; i < hasBeenPlayed.length; i++) { |
51 var str = 'You have not moved the following sliders. '; | 52 var str = 'You have not moved the following sliders. '; |
52 for (var i = 0; i < this.interfaceSliders.length; i++) { | 53 for (var i = 0; i < this.interfaceSliders.length; i++) { |
53 var interfaceTID = []; | 54 var interfaceTID = []; |
54 for (var j = 0; j < this.interfaceSliders[i].metrics.length; j++) { | 55 for (var j = 0; j < this.interfaceSliders[i].metrics.length; j++) { |
55 var ao_id = this.interfaceSliders[i].sliders[j].getAttribute("trackIndex"); | 56 var ao_id = this.interfaceSliders[i].sliders[j].getAttribute("trackIndex"); |
56 if (this.interfaceSliders[i].metrics[j].wasMoved == false && audioEngineContext.audioObjects[ao_id].interfaceDOM.canMove()) { | 57 if (this.interfaceSliders[i].metrics[j].wasMoved === false && audioEngineContext.audioObjects[ao_id].interfaceDOM.canMove()) { |
57 state = false; | 58 state = false; |
58 interfaceTID.push(j); | 59 interfaceTID.push(j); |
59 } | 60 } |
60 } | 61 } |
61 if (interfaceTID.length != 0) { | 62 if (interfaceTID.length !== 0) { |
62 var interfaceName = this.interfaceSliders[i].interfaceObject.title; | 63 var interfaceName = this.interfaceSliders[i].interfaceObject.title; |
63 if (interfaceName == undefined) { | 64 if (interfaceName === undefined) { |
64 str += 'On axis ' + String(i + 1) + ' you must move '; | 65 str += 'On axis ' + String(i + 1) + ' you must move '; |
65 } else { | 66 } else { |
66 str += 'On axis "' + interfaceName + '" you must move '; | 67 str += 'On axis "' + interfaceName + '" you must move '; |
67 } | 68 } |
68 if (interfaceTID.length == 1) { | 69 if (interfaceTID.length == 1) { |
74 } | 75 } |
75 str += (audioEngineContext.audioObjects[interfaceTID[interfaceTID.length - 1]].interfaceDOM.getPresentedId()) + '. '; | 76 str += (audioEngineContext.audioObjects[interfaceTID[interfaceTID.length - 1]].interfaceDOM.getPresentedId()) + '. '; |
76 } | 77 } |
77 } | 78 } |
78 } | 79 } |
79 if (state != true) { | 80 if (state !== true) { |
80 this.storeErrorNode(str); | 81 this.storeErrorNode(str); |
81 interfaceContext.lightbox.post("Message", str); | 82 interfaceContext.lightbox.post("Message", str); |
82 console.log(str); | 83 console.log(str); |
83 } | 84 } |
84 return state; | 85 return state; |
87 Interface.prototype.checkAllCommented = function () { | 88 Interface.prototype.checkAllCommented = function () { |
88 var audioObjs = audioEngineContext.audioObjects; | 89 var audioObjs = audioEngineContext.audioObjects; |
89 var audioHolder = testState.stateMap[testState.stateIndex]; | 90 var audioHolder = testState.stateMap[testState.stateIndex]; |
90 var state = true; | 91 var state = true; |
91 if (audioHolder.elementComments) { | 92 if (audioHolder.elementComments) { |
92 var strNums = []; | 93 var notCommented = audioObjs.filter(function (ao) { |
93 for (var i = 0; i < audioObjs.length; i++) { | 94 return ao.commentDOM.trackCommentBox.value.length === 0; |
94 if (audioObjs[i].commentDOM.trackCommentBox.value.length == 0) { | 95 }); |
95 state = false; | 96 notCommented.sort(function (a, b) { |
96 strNums.push(i); | 97 var va = a.interfaceDOM.getPresentedId(); |
97 } | 98 var vb = a.interfaceDOM.getPresentedId(); |
98 } | 99 if (va < vb) { |
99 if (state == false) { | 100 return -1; |
100 var str = ""; | 101 } |
101 if (strNums.length > 1) { | 102 if (vb < va) { |
102 | 103 return 1; |
103 for (var i = 0; i < strNums.length; i++) { | 104 } |
104 var ao_id = audioEngineContext.audioObjects[strNums[i]].interfaceDOM.getPresentedId(); | 105 return 0; |
105 str = str + (ao_id); // start from 1 | 106 }); |
106 if (i < strNums.length - 2) { | 107 if (notCommented.length > 0) { |
107 str += ", "; | 108 var str = "You have not commented on fragment"; |
108 } else if (i == strNums.length - 2) { | 109 if (notCommented.length > 1) { |
109 str += " or "; | 110 str += "s "; |
110 } | 111 } else { |
112 str += " "; | |
113 } | |
114 for (var i = 0; i < notCommented.length; i++) { | |
115 var ao_id = notCommented[i].interfaceDOM.getPresentedId(); | |
116 str = str + ao_id; // start from 1 | |
117 if (i < notCommented.length - 2) { | |
118 str += ", "; | |
119 } else if (i == notCommented.length - 2) { | |
120 str += " or "; | |
111 } | 121 } |
112 str = 'You have not commented on fragments ' + str + ' yet. Please listen, rate and comment all samples before submitting.'; | 122 } |
113 } else { | 123 str += "Please listen, rate and comment all samples before submitting."; |
114 str = 'You have not commented on fragment ' + (audioEngineContext.audioObjects[strNums[0]].interfaceDOM.getPresentedId()) + ' yet. Please listen, rate and comment all samples before submitting.'; | |
115 } | |
116 this.storeErrorNode(str); | 124 this.storeErrorNode(str); |
117 interfaceContext.lightbox.post("Message", str); | 125 interfaceContext.lightbox.post("Message", str); |
118 console.log(str); | 126 console.log(str); |
119 } | 127 } |
120 } | 128 } |
122 }; | 130 }; |
123 | 131 |
124 Interface.prototype.checkScaleRange = function () { | 132 Interface.prototype.checkScaleRange = function () { |
125 var audioObjs = audioEngineContext.audioObjects; | 133 var audioObjs = audioEngineContext.audioObjects; |
126 var audioHolder = testState.stateMap[testState.stateIndex]; | 134 var audioHolder = testState.stateMap[testState.stateIndex]; |
135 var interfaceObject = this.interfaceSliders[0].interfaceObject; | |
127 var state = true; | 136 var state = true; |
128 var str = ''; | 137 var str = ''; |
129 for (var i = 0; i < this.interfaceSliders.length; i++) { | 138 this.interfaceSliders.forEach(function (sliderHolder, i) { |
130 var minScale; | 139 var scales = (function () { |
131 var maxScale; | 140 var scaleRange = interfaceObject.options.find(function (a) { |
132 var interfaceObject = interfaceContext.interfaceSliders[0].interfaceObject; | 141 return a.name == "scalerange"; |
133 for (var j = 0; j < interfaceObject.options.length; j++) { | 142 }); |
134 if (interfaceObject.options[j].check == "scalerange") { | 143 return { |
135 minScale = interfaceObject.options[j].min; | 144 min: scaleRange.min, |
136 maxScale = interfaceObject.options[j].max; | 145 max: scaleRange.max |
137 break; | 146 }; |
138 } | 147 })(); |
139 } | 148 var outsideBounds = sliderHolder.sliders.some(function (elem) { |
140 var minRanking = convSliderPosToRate(this.interfaceSliders[i].sliders[0]); | 149 var a = convSliderPosToRate(elem); |
141 var maxRanking = minRanking; | 150 if (a <= scales.min) { |
142 for (var j = 1; j < this.interfaceSliders[i].sliders.length; j++) { | 151 return true; |
143 var ranking = convSliderPosToRate(this.interfaceSliders[i].sliders[j]); | 152 } |
144 if (ranking < minRanking) { | 153 if (a >= scales.max) { |
145 minRanking = ranking; | 154 return true; |
146 } else if (ranking > maxRanking) { | 155 } |
147 maxRanking = ranking; | 156 return false; |
148 } | 157 }); |
149 } | 158 if (!outsideBounds) { |
150 if (minRanking > minScale || maxRanking < maxScale) { | |
151 state = false; | 159 state = false; |
152 str += 'On axis "' + this.interfaceSliders[i].interfaceObject.title + '" you have not used the full width of the scale. '; | 160 str += 'On axis "' + sliderHolder.interfaceObject.title + '" you have not used the full width of the scale. '; |
153 } | 161 } |
154 } | 162 }); |
155 if (state != true) { | 163 if (state !== true) { |
156 this.storeErrorNode(str); | 164 this.storeErrorNode(str); |
157 interfaceContext.lightbox.post("Message", str); | 165 interfaceContext.lightbox.post("Message", str); |
158 console.log(str); | 166 console.log(str); |
159 } | 167 } |
160 return state; | 168 return state; |
161 }; | 169 }; |
162 | 170 |
163 Interface.prototype.objectSelected = null; | 171 Interface.prototype.objectSelected = null; |
164 Interface.prototype.objectMoved = false; | 172 Interface.prototype.objectMoved = false; |
165 Interface.prototype.selectObject = function (object) { | 173 Interface.prototype.selectObject = function (object) { |
166 if (this.objectSelected == null) { | 174 if (this.objectSelected === null) { |
167 this.objectSelected = object; | 175 this.objectSelected = object; |
168 this.objectMoved = false; | 176 this.objectMoved = false; |
169 } | 177 } |
170 }; | 178 }; |
171 Interface.prototype.moveObject = function () { | 179 Interface.prototype.moveObject = function () { |
172 if (this.objectMoved == false) { | 180 if (this.objectMoved === false) { |
173 this.objectMoved = true; | 181 this.objectMoved = true; |
174 } | 182 } |
175 }; | 183 }; |
176 Interface.prototype.releaseObject = function () { | 184 Interface.prototype.releaseObject = function () { |
177 this.objectSelected = null; | 185 this.objectSelected = null; |
196 title.align = "center"; | 204 title.align = "center"; |
197 var titleSpan = document.createElement('span'); | 205 var titleSpan = document.createElement('span'); |
198 titleSpan.id = "test-title"; | 206 titleSpan.id = "test-title"; |
199 | 207 |
200 // Set title to that defined in XML, else set to default | 208 // Set title to that defined in XML, else set to default |
201 if (titleAttr != undefined) { | 209 if (titleAttr !== undefined) { |
202 titleSpan.textContent = titleAttr; | 210 titleSpan.textContent = titleAttr; |
203 } else { | 211 } else { |
204 titleSpan.textContent = 'Listening test'; | 212 titleSpan.textContent = 'Listening test'; |
205 } | 213 } |
206 // Insert the titleSpan element into the title div element. | 214 // Insert the titleSpan element into the title div element. |
272 var sliderHolder = document.getElementById('slider-holder'); | 280 var sliderHolder = document.getElementById('slider-holder'); |
273 feedbackHolder.innerHTML = ""; | 281 feedbackHolder.innerHTML = ""; |
274 sliderHolder.innerHTML = ""; | 282 sliderHolder.innerHTML = ""; |
275 | 283 |
276 // Set labelType if default to number | 284 // Set labelType if default to number |
277 if (audioHolderObject.label == "default" || audioHolderObject.label == "") { | 285 if (audioHolderObject.label === "default" || audioHolderObject.label === "") { |
278 audioHolderObject.label = "number"; | 286 audioHolderObject.label = "number"; |
279 } | 287 } |
280 // Set the page title | 288 // Set the page title |
281 if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) { | 289 if (typeof audioHolderObject.title == "string" && audioHolderObject.title.length > 0) { |
282 document.getElementById("test-title").textContent = audioHolderObject.title | 290 document.getElementById("test-title").textContent = audioHolderObject.title; |
283 } | 291 } |
284 | 292 |
285 | 293 |
286 // Delete outside reference | 294 // Delete outside reference |
287 document.getElementById("outside-reference-holder").innerHTML = ""; | 295 document.getElementById("outside-reference-holder").innerHTML = ""; |
288 | 296 |
289 var interfaceObj = interfaceContext.getCombinedInterfaces(audioHolderObject); | 297 var interfaceObj = interfaceContext.getCombinedInterfaces(audioHolderObject); |
290 for (var k = 0; k < interfaceObj.length; k++) { | 298 interfaceObj.forEach(function (interfaceObjectInstance) { |
291 // Create the div box to center align | 299 // Create the div box to center align |
292 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObj[k])); | 300 interfaceContext.interfaceSliders.push(new interfaceSliderHolder(interfaceObjectInstance)); |
293 } | 301 }); |
294 interfaceObj.forEach(function (interface) { | 302 interfaceObj.forEach(function (interface) { |
295 for (var option of interface.options) { | 303 interface.options.forEach(function (option) { |
296 if (option.type == "show") { | 304 if (option.type == "show") { |
297 switch (option.name) { | 305 switch (option.name) { |
298 case "playhead": | 306 case "playhead": |
299 var playbackHolder = document.getElementById('playback-holder'); | 307 var playbackHolder = document.getElementById('playback-holder'); |
300 if (playbackHolder == null) { | 308 if (playbackHolder === null) { |
301 playbackHolder = document.createElement('div'); | 309 playbackHolder = document.createElement('div'); |
302 playbackHolder.style.width = "100%"; | 310 playbackHolder.style.width = "100%"; |
303 playbackHolder.align = 'center'; | 311 playbackHolder.align = 'center'; |
304 playbackHolder.appendChild(interfaceContext.playhead.object); | 312 playbackHolder.appendChild(interfaceContext.playhead.object); |
305 feedbackHolder.insertBefore(playbackHolder, feedbackHolder.firstElementChild); | 313 feedbackHolder.insertBefore(playbackHolder, feedbackHolder.firstElementChild); |
306 } | 314 } |
307 break; | 315 break; |
308 case "page-count": | 316 case "page-count": |
309 var pagecountHolder = document.getElementById('page-count'); | 317 var pagecountHolder = document.getElementById('page-count'); |
310 if (pagecountHolder == null) { | 318 if (pagecountHolder === null) { |
311 pagecountHolder = document.createElement('div'); | 319 pagecountHolder = document.createElement('div'); |
312 pagecountHolder.id = 'page-count'; | 320 pagecountHolder.id = 'page-count'; |
313 } | 321 } |
314 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; | 322 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; |
315 var inject = document.getElementById('interface-buttons'); | 323 var inject = document.getElementById('interface-buttons'); |
316 inject.appendChild(pagecountHolder); | 324 inject.appendChild(pagecountHolder); |
317 break; | 325 break; |
318 case "volume": | 326 case "volume": |
319 if (document.getElementById('master-volume-holder') == null) { | 327 if (document.getElementById('master-volume-holder') === null) { |
320 feedbackHolder.appendChild(interfaceContext.volume.object); | 328 feedbackHolder.appendChild(interfaceContext.volume.object); |
321 } | 329 } |
322 break; | 330 break; |
323 case "comments": | 331 case "comments": |
324 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); | 332 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); |
325 break; | 333 break; |
326 } | 334 } |
327 } | 335 } |
328 } | 336 }); |
329 }); | 337 }); |
330 | 338 |
331 var commentBoxPrefix = "Comment on fragment"; | 339 var commentBoxPrefix = "Comment on fragment"; |
332 | 340 |
333 var commentShow = audioHolderObject.elementComments; | 341 var commentShow = audioHolderObject.elementComments; |
334 | 342 |
335 var loopPlayback = audioHolderObject.loop; | 343 var loopPlayback = audioHolderObject.loop; |
336 | 344 |
337 currentTestHolder = document.createElement('audioHolder'); | 345 var currentTestHolder = document.createElement('audioHolder'); |
338 currentTestHolder.id = audioHolderObject.id; | 346 currentTestHolder.id = audioHolderObject.id; |
339 currentTestHolder.repeatCount = audioHolderObject.repeatCount; | 347 currentTestHolder.repeatCount = audioHolderObject.repeatCount; |
340 | 348 |
341 // Find all the audioElements from the audioHolder | 349 // Find all the audioElements from the audioHolder |
342 $(audioHolderObject.audioElements).each(function (index, element) { | 350 $(audioHolderObject.audioElements).each(function (index, element) { |
370 }); | 378 }); |
371 | 379 |
372 $('.slider').mousemove(function (event) { | 380 $('.slider').mousemove(function (event) { |
373 event.preventDefault(); | 381 event.preventDefault(); |
374 var obj = interfaceContext.getSelectedObject(); | 382 var obj = interfaceContext.getSelectedObject(); |
375 if (obj == null) { | 383 if (obj === null) { |
376 return; | 384 return; |
377 } | 385 } |
378 var move = event.clientX - 6; | 386 var move = event.clientX - 6; |
379 var w = $(event.currentTarget).width(); | 387 var w = $(event.currentTarget).width(); |
380 move = Math.max(50, move); | 388 move = Math.max(50, move); |
384 }); | 392 }); |
385 | 393 |
386 $('.slider').on('touchmove', null, function (event) { | 394 $('.slider').on('touchmove', null, function (event) { |
387 event.preventDefault(); | 395 event.preventDefault(); |
388 var obj = interfaceContext.getSelectedObject(); | 396 var obj = interfaceContext.getSelectedObject(); |
389 if (obj == null) { | 397 if (obj === null) { |
390 return; | 398 return; |
391 } | 399 } |
392 var move = event.originalEvent.targetTouches[0].clientX - 6; | 400 var move = event.originalEvent.targetTouches[0].clientX - 6; |
393 var w = $(event.currentTarget).width(); | 401 var w = $(event.currentTarget).width(); |
394 move = Math.max(50, move); | 402 move = Math.max(50, move); |
398 }); | 406 }); |
399 | 407 |
400 $(document).mouseup(function (event) { | 408 $(document).mouseup(function (event) { |
401 event.preventDefault(); | 409 event.preventDefault(); |
402 var obj = interfaceContext.getSelectedObject(); | 410 var obj = interfaceContext.getSelectedObject(); |
403 if (obj == null) { | 411 if (obj === null) { |
404 return; | 412 return; |
405 } | 413 } |
406 var interfaceID = obj.parentElement.getAttribute("interfaceid"); | 414 var interfaceID = obj.parentElement.getAttribute("interfaceid"); |
407 var trackID = obj.getAttribute("trackindex"); | 415 var trackID = obj.getAttribute("trackindex"); |
408 if (interfaceContext.hasSelectedObjectMoved() == true) { | 416 var id; |
417 if (interfaceContext.hasSelectedObjectMoved() === true) { | |
418 var l = $(obj).css("left"); | |
419 id = obj.getAttribute('trackIndex'); | |
420 var time = audioEngineContext.timer.getTestTime(); | |
421 var rate = convSliderPosToRate(obj); | |
422 audioEngineContext.audioObjects[id].metric.moved(time, rate); | |
423 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate); | |
424 console.log("slider " + id + " moved to " + rate + ' (' + time + ')'); | |
425 obj.setAttribute("slider-value", convSliderPosToRate(obj)); | |
426 } else { | |
427 id = Number(obj.attributes.trackIndex.value); | |
428 //audioEngineContext.metric.sliderPlayed(id); | |
429 audioEngineContext.play(id); | |
430 } | |
431 interfaceContext.releaseObject(); | |
432 }); | |
433 | |
434 $('.slider').on('touchend', null, function (event) { | |
435 var obj = interfaceContext.getSelectedObject(); | |
436 if (obj === null) { | |
437 return; | |
438 } | |
439 var interfaceID = obj.parentElement.getAttribute("interfaceid"); | |
440 var trackID = obj.getAttribute("trackindex"); | |
441 if (interfaceContext.hasSelectedObjectMoved() === true) { | |
409 var l = $(obj).css("left"); | 442 var l = $(obj).css("left"); |
410 var id = obj.getAttribute('trackIndex'); | 443 var id = obj.getAttribute('trackIndex'); |
411 var time = audioEngineContext.timer.getTestTime(); | 444 var time = audioEngineContext.timer.getTestTime(); |
412 var rate = convSliderPosToRate(obj); | 445 var rate = convSliderPosToRate(obj); |
413 audioEngineContext.audioObjects[id].metric.moved(time, rate); | 446 audioEngineContext.audioObjects[id].metric.moved(time, rate); |
414 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate); | 447 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate); |
415 console.log("slider " + id + " moved to " + rate + ' (' + time + ')'); | 448 console.log("slider " + id + " moved to " + rate + ' (' + time + ')'); |
416 obj.setAttribute("slider-value", convSliderPosToRate(obj)); | |
417 } else { | |
418 var id = Number(obj.attributes['trackIndex'].value); | |
419 //audioEngineContext.metric.sliderPlayed(id); | |
420 audioEngineContext.play(id); | |
421 } | |
422 interfaceContext.releaseObject(); | |
423 }); | |
424 | |
425 $('.slider').on('touchend', null, function (event) { | |
426 var obj = interfaceContext.getSelectedObject(); | |
427 if (obj == null) { | |
428 return; | |
429 } | |
430 var interfaceID = obj.parentElement.getAttribute("interfaceid"); | |
431 var trackID = obj.getAttribute("trackindex"); | |
432 if (interfaceContext.hasSelectedObjectMoved() == true) { | |
433 var l = $(obj).css("left"); | |
434 var id = obj.getAttribute('trackIndex'); | |
435 var time = audioEngineContext.timer.getTestTime(); | |
436 var rate = convSliderPosToRate(obj); | |
437 audioEngineContext.audioObjects[id].metric.moved(time, rate); | |
438 interfaceContext.interfaceSliders[interfaceID].metrics[trackID].moved(time, rate); | |
439 console.log("slider " + id + " moved to " + rate + ' (' + time + ')'); | |
440 } | 449 } |
441 interfaceContext.releaseObject(); | 450 interfaceContext.releaseObject(); |
442 }); | 451 }); |
443 | 452 |
444 var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces); | 453 var interfaceList = audioHolderObject.interfaces.concat(specification.interfaces); |
445 for (var k = 0; k < interfaceList.length; k++) { | 454 for (var k = 0; k < interfaceList.length; k++) { |
446 for (var i = 0; i < interfaceList[k].options.length; i++) { | 455 for (var i = 0; i < interfaceList[k].options.length; i++) { |
447 if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') { | 456 if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'playhead') { |
448 var playbackHolder = document.getElementById('playback-holder'); | 457 var playbackHolder = document.getElementById('playback-holder'); |
449 if (playbackHolder == null) { | 458 if (playbackHolder === null) { |
450 playbackHolder = document.createElement('div'); | 459 playbackHolder = document.createElement('div'); |
451 playbackHolder.id = "playback-holder"; | 460 playbackHolder.id = "playback-holder"; |
452 playbackHolder.style.width = "100%"; | 461 playbackHolder.style.width = "100%"; |
453 playbackHolder.align = 'center'; | 462 playbackHolder.align = 'center'; |
454 playbackHolder.appendChild(interfaceContext.playhead.object); | 463 playbackHolder.appendChild(interfaceContext.playhead.object); |
455 feedbackHolder.appendChild(playbackHolder); | 464 feedbackHolder.appendChild(playbackHolder); |
456 } | 465 } |
457 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') { | 466 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'page-count') { |
458 var pagecountHolder = document.getElementById('page-count'); | 467 var pagecountHolder = document.getElementById('page-count'); |
459 if (pagecountHolder == null) { | 468 if (pagecountHolder === null) { |
460 pagecountHolder = document.createElement('div'); | 469 pagecountHolder = document.createElement('div'); |
461 pagecountHolder.id = 'page-count'; | 470 pagecountHolder.id = 'page-count'; |
462 } | 471 } |
463 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; | 472 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; |
464 var inject = document.getElementById('interface-buttons'); | 473 var inject = document.getElementById('interface-buttons'); |
465 inject.appendChild(pagecountHolder); | 474 inject.appendChild(pagecountHolder); |
466 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') { | 475 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'volume') { |
467 if (document.getElementById('master-volume-holder') == null) { | 476 if (document.getElementById('master-volume-holder') === null) { |
468 feedbackHolder.appendChild(interfaceContext.volume.object); | 477 feedbackHolder.appendChild(interfaceContext.volume.object); |
469 } | 478 } |
470 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'comments') { | 479 } else if (interfaceList[k].options[i].type == 'show' && interfaceList[k].options[i].name == 'comments') { |
471 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); | 480 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); |
472 break; | 481 break; |
495 var pagetitle = document.createElement('div'); | 504 var pagetitle = document.createElement('div'); |
496 pagetitle.className = "pageTitle"; | 505 pagetitle.className = "pageTitle"; |
497 pagetitle.align = "center"; | 506 pagetitle.align = "center"; |
498 var titleSpan = document.createElement('span'); | 507 var titleSpan = document.createElement('span'); |
499 titleSpan.id = "pageTitle-" + this.id; | 508 titleSpan.id = "pageTitle-" + this.id; |
500 if (interfaceObject.title != undefined && typeof interfaceObject.title == "string") { | 509 if (interfaceObject.title !== undefined && typeof interfaceObject.title == "string") { |
501 titleSpan.textContent = interfaceObject.title; | 510 titleSpan.textContent = interfaceObject.title; |
502 } else { | 511 } else { |
503 titleSpan.textContent = "Axis " + String(this.id + 1); | 512 titleSpan.textContent = "Axis " + String(this.id + 1); |
504 } | 513 } |
505 pagetitle.appendChild(titleSpan); | 514 pagetitle.appendChild(titleSpan); |
506 this.sliderDOM.appendChild(pagetitle); | 515 this.sliderDOM.appendChild(pagetitle); |
507 | 516 |
508 // Create the slider box to hold the slider elements | 517 // Create the slider box to hold the slider elements |
509 this.canvas = document.createElement('div'); | 518 this.canvas = document.createElement('div'); |
510 if (this.name != undefined) | 519 if (this.name !== undefined) |
511 this.canvas.id = 'slider-' + this.name; | 520 this.canvas.id = 'slider-' + this.name; |
512 else | 521 else |
513 this.canvas.id = 'slider-' + this.id; | 522 this.canvas.id = 'slider-' + this.id; |
514 this.canvas.setAttribute("interfaceid", this.id); | 523 this.canvas.setAttribute("interfaceid", this.id); |
515 this.canvas.className = 'slider'; | 524 this.canvas.className = 'slider'; |
529 this.scale.align = 'left'; | 538 this.scale.align = 'left'; |
530 this.sliderDOM.appendChild(this.scale); | 539 this.sliderDOM.appendChild(this.scale); |
531 var positionScale = this.canvas.style.width.substr(0, this.canvas.style.width.length - 2); | 540 var positionScale = this.canvas.style.width.substr(0, this.canvas.style.width.length - 2); |
532 var offset = 50; | 541 var offset = 50; |
533 var dest = document.getElementById("slider-holder").appendChild(this.sliderDOM); | 542 var dest = document.getElementById("slider-holder").appendChild(this.sliderDOM); |
534 for (var scaleObj of interfaceObject.scales) { | 543 interfaceObject.scales.forEach(function (scaleObj) { |
535 var position = Number(scaleObj.position) * 0.01; | 544 var position = Number(scaleObj.position) * 0.01; |
536 var pixelPosition = (position * $(this.canvas).width()) + offset; | 545 var pixelPosition = (position * $(this.canvas).width()) + offset; |
537 var scaleDOM = document.createElement('span'); | 546 var scaleDOM = document.createElement('span'); |
538 scaleDOM.className = "ape-marker-text"; | 547 scaleDOM.className = "ape-marker-text"; |
539 scaleDOM.textContent = scaleObj.text; | 548 scaleDOM.textContent = scaleObj.text; |
540 scaleDOM.setAttribute('value', position) | 549 scaleDOM.setAttribute('value', position); |
541 this.scale.appendChild(scaleDOM); | 550 this.scale.appendChild(scaleDOM); |
542 scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px'; | 551 scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px'; |
543 } | 552 }, this); |
544 | 553 |
545 this.createSliderObject = function (audioObject, label) { | 554 this.createSliderObject = function (audioObject, label) { |
546 var trackObj = document.createElement('div'); | 555 var trackObj = document.createElement('div'); |
547 trackObj.align = "center"; | 556 trackObj.align = "center"; |
548 trackObj.className = 'track-slider track-slider-disabled track-slider-' + audioObject.id; | 557 trackObj.className = 'track-slider track-slider-disabled track-slider-' + audioObject.id; |
549 trackObj.id = 'track-slider-' + this.id + '-' + audioObject.id; | 558 trackObj.id = 'track-slider-' + this.id + '-' + audioObject.id; |
550 trackObj.setAttribute('trackIndex', audioObject.id); | 559 trackObj.setAttribute('trackIndex', audioObject.id); |
551 if (this.name != undefined) { | 560 if (this.name !== undefined) { |
552 trackObj.setAttribute('interface-name', this.name); | 561 trackObj.setAttribute('interface-name', this.name); |
553 } else { | 562 } else { |
554 trackObj.setAttribute('interface-name', this.id); | 563 trackObj.setAttribute('interface-name', this.id); |
555 } | 564 } |
556 var offset = 50; | 565 var offset = 50; |
570 trackObj.setAttribute("slider-value", rate); | 579 trackObj.setAttribute("slider-value", rate); |
571 return trackObj; | 580 return trackObj; |
572 }; | 581 }; |
573 | 582 |
574 this.resize = function (event) { | 583 this.resize = function (event) { |
575 var width = window.innerWidth; | |
576 var sliderDiv = this.canvas; | 584 var sliderDiv = this.canvas; |
577 var sliderScaleDiv = this.scale; | 585 var sliderScaleDiv = this.scale; |
578 var width = $(sliderDiv).width(); | 586 var width = $(sliderDiv).width(); |
579 var marginsize = 50; | 587 var marginsize = 50; |
580 // Move sliders into new position | 588 // Move sliders into new position |
581 for (var index = 0; index < this.sliders.length; index++) { | 589 this.sliders.forEach(function (slider, index) { |
582 var pix = Number(this.sliders[index].getAttribute("slider-value")) * width; | 590 var pix = Number(slider.getAttribute("slider-value")) * width; |
583 this.sliders[index].style.left = (pix + marginsize) + 'px'; | 591 slider.style.left = (pix + marginsize) + 'px'; |
584 } | 592 }); |
585 | 593 |
586 // Move scale labels | 594 // Move scale labels |
587 for (var index = 0; index < this.scale.children.length; index++) { | 595 for (var index = 0; index < this.scale.children.length; index++) { |
588 var scaleObj = this.scale.children[index]; | 596 var scaleObj = this.scale.children[index]; |
589 var position = Number(scaleObj.attributes['value'].value); | 597 var position = Number(scaleObj.attributes.value.value); |
590 var pixelPosition = (position * width) + marginsize; | 598 var pixelPosition = (position * width) + marginsize; |
591 scaleObj.style.left = Math.floor((pixelPosition - ($(scaleObj).width() / 2))) + 'px'; | 599 scaleObj.style.left = Math.floor((pixelPosition - ($(scaleObj).width() / 2))) + 'px'; |
592 } | 600 } |
593 }; | 601 }; |
594 } | 602 } |
669 }; | 677 }; |
670 this.error = function () { | 678 this.error = function () { |
671 // audioObject has an error!! | 679 // audioObject has an error!! |
672 this.playback.textContent = "Error"; | 680 this.playback.textContent = "Error"; |
673 $(this.playback).addClass("error-colour"); | 681 $(this.playback).addClass("error-colour"); |
674 } | 682 }; |
675 } | 683 } |
676 | 684 |
677 function outsideReferenceDOM(audioObject, index, inject) { | 685 function outsideReferenceDOM(audioObject, index, inject) { |
678 this.parent = audioObject; | 686 this.parent = audioObject; |
679 this.outsideReferenceHolder = document.createElement('div'); | 687 this.outsideReferenceHolder = document.createElement('div'); |
682 var outsideReferenceHolderspan = document.createElement('span'); | 690 var outsideReferenceHolderspan = document.createElement('span'); |
683 outsideReferenceHolderspan.textContent = 'Reference'; | 691 outsideReferenceHolderspan.textContent = 'Reference'; |
684 this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan); | 692 this.outsideReferenceHolder.appendChild(outsideReferenceHolderspan); |
685 this.outsideReferenceHolder.setAttribute('track-id', index); | 693 this.outsideReferenceHolder.setAttribute('track-id', index); |
686 | 694 |
687 this.outsideReferenceHolder.onclick = function (event) { | 695 this.handleEvent = function (event) { |
688 audioEngineContext.play(event.currentTarget.getAttribute('track-id')); | 696 audioEngineContext.play(audioObject.id); |
689 $('.track-slider').removeClass('track-slider-playing'); | 697 $('.track-slider').removeClass('track-slider-playing'); |
690 $('.comment-div').removeClass('comment-box-playing'); | 698 $('.comment-div').removeClass('comment-box-playing'); |
691 if (event.currentTarget.nodeName == 'DIV') { | 699 $(this.outsideReferenceHolder).addClass('track-slider-playing'); |
692 $(event.currentTarget).addClass('track-slider-playing'); | 700 }; |
693 } else { | 701 this.outsideReferenceHolder.addEventListener("click", this.handleEvent); |
694 $(event.currentTarget.parentElement).addClass('track-slider-playing'); | |
695 } | |
696 }; | |
697 inject.appendChild(this.outsideReferenceHolder); | 702 inject.appendChild(this.outsideReferenceHolder); |
698 this.enable = function () { | 703 this.enable = function () { |
699 if (this.parent.state == 1) { | 704 if (this.parent.state == 1) { |
700 $(this.outsideReferenceHolder).removeClass('track-slider-disabled'); | 705 $(this.outsideReferenceHolder).removeClass('track-slider-disabled'); |
701 } | 706 } |
731 }; | 736 }; |
732 this.error = function () { | 737 this.error = function () { |
733 // audioObject has an error!! | 738 // audioObject has an error!! |
734 this.outsideReferenceHolder.textContent = "Error"; | 739 this.outsideReferenceHolder.textContent = "Error"; |
735 $(this.outsideReferenceHolder).addClass("error-colour"); | 740 $(this.outsideReferenceHolder).addClass("error-colour"); |
736 } | 741 }; |
737 } | 742 } |
738 | 743 |
739 function buttonSubmitClick() { | 744 function buttonSubmitClick() { |
740 var checks = testState.currentStateMap.interfaces[0].options, | 745 var checks = testState.currentStateMap.interfaces[0].options, |
741 canContinue = true; | 746 canContinue = true; |
742 | 747 |
743 // Check that the anchor and reference objects are correctly placed | 748 // Check that the anchor and reference objects are correctly placed |
744 if (interfaceContext.checkHiddenAnchor() == false) { | 749 if (interfaceContext.checkHiddenAnchor() === false) { |
745 return; | 750 return; |
746 } | 751 } |
747 if (interfaceContext.checkHiddenReference() == false) { | 752 if (interfaceContext.checkHiddenReference() === false) { |
748 return; | 753 return; |
749 } | 754 } |
750 | 755 |
751 for (var i = 0; i < checks.length; i++) { | 756 for (var i = 0; i < checks.length; i++) { |
752 if (checks[i].type == 'check') { | 757 if (checks[i].type == 'check') { |
758 var checkState; | |
753 switch (checks[i].name) { | 759 switch (checks[i].name) { |
754 case 'fragmentPlayed': | 760 case 'fragmentPlayed': |
755 // Check if all fragments have been played | 761 // Check if all fragments have been played |
756 var checkState = interfaceContext.checkAllPlayed(); | 762 checkState = interfaceContext.checkAllPlayed(); |
757 if (checkState == false) { | 763 if (checkState === false) { |
758 canContinue = false; | 764 canContinue = false; |
759 } | 765 } |
760 break; | 766 break; |
761 case 'fragmentFullPlayback': | 767 case 'fragmentFullPlayback': |
762 // Check all fragments have been played to their full length | 768 // Check all fragments have been played to their full length |
763 var checkState = interfaceContext.checkFragmentsFullyPlayed(); | 769 checkState = interfaceContext.checkFragmentsFullyPlayed(); |
764 if (checkState == false) { | 770 if (checkState === false) { |
765 canContinue = false; | 771 canContinue = false; |
766 } | 772 } |
767 break; | 773 break; |
768 case 'fragmentMoved': | 774 case 'fragmentMoved': |
769 // Check all fragment sliders have been moved. | 775 // Check all fragment sliders have been moved. |
770 var checkState = interfaceContext.checkAllMoved(); | 776 checkState = interfaceContext.checkAllMoved(); |
771 if (checkState == false) { | 777 if (checkState === false) { |
772 canContinue = false; | 778 canContinue = false; |
773 } | 779 } |
774 break; | 780 break; |
775 case 'fragmentComments': | 781 case 'fragmentComments': |
776 // Check all fragment sliders have been moved. | 782 // Check all fragment sliders have been moved. |
777 var checkState = interfaceContext.checkAllCommented(); | 783 checkState = interfaceContext.checkAllCommented(); |
778 if (checkState == false) { | 784 if (checkState === false) { |
779 canContinue = false; | 785 canContinue = false; |
780 } | 786 } |
781 break; | 787 break; |
782 case 'scalerange': | 788 case 'scalerange': |
783 // Check the scale is used to its full width outlined by the node | 789 // Check the scale is used to its full width outlined by the node |
784 var checkState = interfaceContext.checkScaleRange(); | 790 checkState = interfaceContext.checkScaleRange(); |
785 if (checkState == false) { | 791 if (checkState === false) { |
786 canContinue = false; | 792 canContinue = false; |
787 } | 793 } |
788 break; | 794 break; |
789 default: | 795 default: |
790 console.log("WARNING - Check option " + checks[i].name + " is not supported on this interface"); | 796 console.log("WARNING - Check option " + checks[i].name + " is not supported on this interface"); |
801 if (audioEngineContext.status == 1) { | 807 if (audioEngineContext.status == 1) { |
802 var playback = document.getElementById('playback-button'); | 808 var playback = document.getElementById('playback-button'); |
803 playback.click(); | 809 playback.click(); |
804 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options | 810 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options |
805 } else { | 811 } else { |
806 if (audioEngineContext.timer.testStarted == false) { | 812 if (audioEngineContext.timer.testStarted === false) { |
807 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click a fragment to begin the test!'); | 813 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please click a fragment to begin the test!'); |
808 return; | 814 return; |
809 } | 815 } |
810 } | 816 } |
811 testState.advanceState(); | 817 testState.advanceState(); |
845 return; | 851 return; |
846 } | 852 } |
847 var audioelements = store.getElementsByTagName("audioelement"); | 853 var audioelements = store.getElementsByTagName("audioelement"); |
848 for (var i = 0; i < audioelements.length; i++) { | 854 for (var i = 0; i < audioelements.length; i++) { |
849 // Have to append the metric specific nodes | 855 // Have to append the metric specific nodes |
850 if (pageSpecification.outsideReference == null || pageSpecification.outsideReference.id != audioelements[i].id) { | 856 if (pageSpecification.outsideReference === undefined || pageSpecification.outsideReference.id != audioelements[i].id) { |
851 var inject = audioelements[i].getElementsByTagName("metric"); | 857 var inject = audioelements[i].getElementsByTagName("metric"); |
852 if (inject.length == 0) { | 858 if (inject.length === 0) { |
853 inject = storage.document.createElement("metric"); | 859 inject = storage.document.createElement("metric"); |
854 } else { | 860 } else { |
855 inject = inject[0]; | 861 inject = inject[0]; |
856 } | 862 } |
857 for (var k = 0; k < interfaceContext.interfaceSliders.length; k++) { | 863 for (var k = 0; k < interfaceContext.interfaceSliders.length; k++) { |