comparison interfaces/horizontal-sliders.js @ 2700:87d9f785f1ec

JShinted Horizontal-Sliders (#180). Minor fixes to core and discrete
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Mon, 13 Mar 2017 11:39:30 +0000
parents 22efb2d04bc9
children 9c01d5dd22a2
comparison
equal deleted inserted replaced
2699:6350ae016862 2700:87d9f785f1ec
1 // Once this is loaded and parsed, begin execution 1 // Once this is loaded and parsed, begin execution
2 /*globals interfaceContext, window, document, specification, audioEngineContext, console, testState, $, storage */
2 loadInterface(); 3 loadInterface();
3 4
4 function loadInterface() { 5 function loadInterface() {
5 // Use this to do any one-time page / element construction. For instance, placing any stationary text objects, 6 // Use this to do any one-time page / element construction. For instance, placing any stationary text objects,
6 // holding div's, or setting up any nodes which are present for the entire test sequence 7 // holding div's, or setting up any nodes which are present for the entire test sequence
17 title.align = "center"; 18 title.align = "center";
18 var titleSpan = document.createElement('span'); 19 var titleSpan = document.createElement('span');
19 titleSpan.id = "test-title"; 20 titleSpan.id = "test-title";
20 21
21 // Set title to that defined in XML, else set to default 22 // Set title to that defined in XML, else set to default
22 if (titleAttr != undefined) { 23 if (titleAttr !== undefined) {
23 titleSpan.textContent = titleAttr; 24 titleSpan.textContent = titleAttr;
24 } else { 25 } else {
25 titleSpan.textContent = 'Listening test'; 26 titleSpan.textContent = 'Listening test';
26 } 27 }
27 // Insert the titleSpan element into the title div element. 28 // Insert the titleSpan element into the title div element.
28 title.appendChild(titleSpan); 29 title.appendChild(titleSpan);
29 30
30 var pagetitle = document.createElement('div'); 31 var pagetitle = document.createElement('div');
31 pagetitle.className = "pageTitle"; 32 pagetitle.className = "pageTitle";
32 pagetitle.align = "center"; 33 pagetitle.align = "center";
33 var titleSpan = document.createElement('span'); 34
35 titleSpan = document.createElement('span');
34 titleSpan.id = "pageTitle"; 36 titleSpan.id = "pageTitle";
35 pagetitle.appendChild(titleSpan); 37 pagetitle.appendChild(titleSpan);
36 38
37 // Create Interface buttons! 39 // Create Interface buttons!
38 var interfaceButtons = document.createElement('div'); 40 var interfaceButtons = document.createElement('div');
109 interfaceContext.insertPoint.appendChild(testContent); 111 interfaceContext.insertPoint.appendChild(testContent);
110 112
111 // Load the full interface 113 // Load the full interface
112 testState.initialise(); 114 testState.initialise();
113 testState.advanceState(); 115 testState.advanceState();
114 }; 116 }
115 117
116 function loadTest(page) { 118 function loadTest(page) {
117 // Called each time a new test page is to be build. The page specification node is the only item passed in 119 // Called each time a new test page is to be build. The page specification node is the only item passed in
118 var id = page.id; 120 var id = page.id;
119 121
126 } 128 }
127 interfaceObj = interfaceObj[0]; 129 interfaceObj = interfaceObj[0];
128 130
129 // Set the page title 131 // Set the page title
130 if (typeof page.title == "string" && page.title.length > 0) { 132 if (typeof page.title == "string" && page.title.length > 0) {
131 document.getElementById("test-title").textContent = page.title 133 document.getElementById("test-title").textContent = page.title;
132 } 134 }
133 135
134 if (interfaceObj.title != null) { 136 if (interfaceObj.title !== null) {
135 document.getElementById("pageTitle").textContent = interfaceObj.title; 137 document.getElementById("pageTitle").textContent = interfaceObj.title;
136 } 138 }
137 139
138 // Delete outside reference 140 // Delete outside reference
139 document.getElementById("outside-reference-holder").innerHTML = ""; 141 document.getElementById("outside-reference-holder").innerHTML = "";
140 142
141 var sliderBox = document.getElementById('slider-holder'); 143 var sliderBox = document.getElementById('slider-holder');
142 sliderBox.innerHTML = ""; 144 sliderBox.innerHTML = "";
143 145
144 var commentBoxPrefix = "Comment on track"; 146 var commentBoxPrefix = "Comment on track";
145 if (interfaceObj.commentBoxPrefix != undefined) { 147 if (interfaceObj.commentBoxPrefix !== undefined) {
146 commentBoxPrefix = interfaceObj.commentBoxPrefix; 148 commentBoxPrefix = interfaceObj.commentBoxPrefix;
147 } 149 }
148 var loopPlayback = page.loop; 150 var loopPlayback = page.loop;
149 151
150 $(page.commentQuestions).each(function (index, element) { 152 $(page.commentQuestions).each(function (index, element) {
184 interfaceContext.commentBoxes.createCommentBox(audioObject); 186 interfaceContext.commentBoxes.createCommentBox(audioObject);
185 index += 1; 187 index += 1;
186 } 188 }
187 189
188 }); 190 });
189 for (var option of interfaceObj.options) { 191 interfaceObj.options.forEach(function (option) {
190 if (option.type == "show") { 192 if (option.type == "show") {
191 switch (option.name) { 193 switch (option.name) {
192 case "playhead": 194 case "playhead":
193 var playbackHolder = document.getElementById('playback-holder'); 195 var playbackHolder = document.getElementById('playback-holder');
194 if (playbackHolder == null) { 196 if (playbackHolder === null) {
195 playbackHolder = document.createElement('div'); 197 playbackHolder = document.createElement('div');
196 playbackHolder.style.width = "100%"; 198 playbackHolder.style.width = "100%";
197 playbackHolder.align = 'center'; 199 playbackHolder.align = 'center';
198 playbackHolder.appendChild(interfaceContext.playhead.object); 200 playbackHolder.appendChild(interfaceContext.playhead.object);
199 feedbackHolder.appendChild(playbackHolder); 201 feedbackHolder.appendChild(playbackHolder);
200 } 202 }
201 break; 203 break;
202 case "page-count": 204 case "page-count":
203 var pagecountHolder = document.getElementById('page-count'); 205 var pagecountHolder = document.getElementById('page-count');
204 if (pagecountHolder == null) { 206 if (pagecountHolder === null) {
205 pagecountHolder = document.createElement('div'); 207 pagecountHolder = document.createElement('div');
206 pagecountHolder.id = 'page-count'; 208 pagecountHolder.id = 'page-count';
207 } 209 }
208 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; 210 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
209 var inject = document.getElementById('interface-buttons'); 211 var inject = document.getElementById('interface-buttons');
210 inject.appendChild(pagecountHolder); 212 inject.appendChild(pagecountHolder);
211 break; 213 break;
212 case "volume": 214 case "volume":
213 if (document.getElementById('master-volume-holder') == null) { 215 if (document.getElementById('master-volume-holder') === null) {
214 feedbackHolder.appendChild(interfaceContext.volume.object); 216 feedbackHolder.appendChild(interfaceContext.volume.object);
215 } 217 }
216 break; 218 break;
217 case "comments": 219 case "comments":
218 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); 220 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
219 break; 221 break;
220 } 222 }
221 } 223 }
222 } 224 });
223 // Auto-align 225 // Auto-align
224 resizeWindow(null); 226 resizeWindow(null);
225 } 227 }
226 228
227 function sliderObject(audioObject, label) { 229 function sliderObject(audioObject, label) {
289 // Called when playback has begun 291 // Called when playback has begun
290 this.play.setAttribute("playstate", "playing"); 292 this.play.setAttribute("playstate", "playing");
291 $(".track-slider").removeClass('track-slider-playing'); 293 $(".track-slider").removeClass('track-slider-playing');
292 $(this.holder).addClass('track-slider-playing'); 294 $(this.holder).addClass('track-slider-playing');
293 var outsideReference = document.getElementById('outside-reference'); 295 var outsideReference = document.getElementById('outside-reference');
294 if (outsideReference != null) { 296 if (outsideReference !== null) {
295 $(outsideReference).removeClass('track-slider-playing'); 297 $(outsideReference).removeClass('track-slider-playing');
296 } 298 }
297 }; 299 };
298 this.stopPlayback = function () { 300 this.stopPlayback = function () {
299 // Called when playback has stopped. This gets called even if playback never started! 301 // Called when playback has stopped. This gets called even if playback never started!
324 }; 326 };
325 this.error = function () { 327 this.error = function () {
326 // audioObject has an error!! 328 // audioObject has an error!!
327 this.playback.textContent = "Error"; 329 this.playback.textContent = "Error";
328 $(this.playback).addClass("error-colour"); 330 $(this.playback).addClass("error-colour");
329 } 331 };
330 }; 332 }
331 333
332 function resizeWindow(event) { 334 function resizeWindow(event) {
333 // Called on every window resize event, use this to scale your page properly 335 // Called on every window resize event, use this to scale your page properly
334 336
335 var numObj = document.getElementsByClassName('track-slider').length; 337 var numObj = document.getElementsByClassName('track-slider').length;
365 var width = canvas.width; 367 var width = canvas.width;
366 var textHolder = document.getElementById('scale-text-holder'); 368 var textHolder = document.getElementById('scale-text-holder');
367 textHolder.innerHTML = ""; 369 textHolder.innerHTML = "";
368 ctx.fillStyle = "#000000"; 370 ctx.fillStyle = "#000000";
369 ctx.setLineDash([1, 4]); 371 ctx.setLineDash([1, 4]);
370 for (var scale of scales) { 372 scales.forEach(function (scale) {
371 var posPercent = scale.position / 100.0; 373 var posPercent = scale.position / 100.0;
372 var posPix = Math.round(width * posPercent); 374 var posPix = Math.round(width * posPercent);
373 if (posPix <= 0) { 375 if (posPix <= 0) {
374 posPix = 1; 376 posPix = 1;
375 } 377 }
387 text.appendChild(textC); 389 text.appendChild(textC);
388 text.className = "scale-text"; 390 text.className = "scale-text";
389 textHolder.appendChild(text); 391 textHolder.appendChild(text);
390 text.style.width = Math.ceil($(text).width()) + 'px'; 392 text.style.width = Math.ceil($(text).width()) + 'px';
391 text.style.left = (posPix + 100 - ($(text).width() / 2)) + 'px'; 393 text.style.left = (posPix + 100 - ($(text).width() / 2)) + 'px';
392 } 394 });
393 } 395 }
394 396
395 function buttonSubmitClick() // TODO: Only when all songs have been played! 397 function buttonSubmitClick() // TODO: Only when all songs have been played!
396 { 398 {
397 var checks = testState.currentStateMap.interfaces[0].options, 399 var checks = testState.currentStateMap.interfaces[0].options,
398 canContinue = true; 400 canContinue = true;
399 401
400 // Check that the anchor and reference objects are correctly placed 402 // Check that the anchor and reference objects are correctly placed
401 if (interfaceContext.checkHiddenAnchor() == false) { 403 if (interfaceContext.checkHiddenAnchor() === false) {
402 return; 404 return;
403 } 405 }
404 if (interfaceContext.checkHiddenReference() == false) { 406 if (interfaceContext.checkHiddenReference() === false) {
405 return; 407 return;
406 } 408 }
407 409
408 for (var i = 0; i < checks.length; i++) { 410 for (var i = 0; i < checks.length; i++) {
411 var checkState = true;
409 if (checks[i].type == 'check') { 412 if (checks[i].type == 'check') {
410 switch (checks[i].name) { 413 switch (checks[i].name) {
411 case 'fragmentPlayed': 414 case 'fragmentPlayed':
412 // Check if all fragments have been played 415 // Check if all fragments have been played
413 var checkState = interfaceContext.checkAllPlayed(); 416 checkState = interfaceContext.checkAllPlayed();
414 if (checkState == false) {
415 canContinue = false;
416 }
417 break; 417 break;
418 case 'fragmentFullPlayback': 418 case 'fragmentFullPlayback':
419 // Check all fragments have been played to their full length 419 // Check all fragments have been played to their full length
420 var checkState = interfaceContext.checkAllPlayed(); 420 checkState = interfaceContext.checkAllPlayed();
421 if (checkState == false) {
422 canContinue = false;
423 }
424 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); 421 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead');
425 break; 422 break;
426 case 'fragmentMoved': 423 case 'fragmentMoved':
427 // Check all fragment sliders have been moved. 424 // Check all fragment sliders have been moved.
428 var checkState = interfaceContext.checkAllMoved(); 425 checkState = interfaceContext.checkAllMoved();
429 if (checkState == false) {
430 canContinue = false;
431 }
432 break; 426 break;
433 case 'fragmentComments': 427 case 'fragmentComments':
434 // Check all fragment sliders have been moved. 428 // Check all fragment sliders have been moved.
435 var checkState = interfaceContext.checkAllCommented(); 429 checkState = interfaceContext.checkAllCommented();
436 if (checkState == false) {
437 canContinue = false;
438 }
439 break; 430 break;
440 case 'scalerange': 431 case 'scalerange':
441 // Check the scale has been used effectively 432 // Check the scale has been used effectively
442 var checkState = interfaceContext.checkScaleRange(checks[i].min, checks[i].max); 433 checkState = interfaceContext.checkScaleRange(checks[i].min, checks[i].max);
443 if (checkState == false) { 434
444 canContinue = false;
445 }
446 break; 435 break;
447 default: 436 default:
448 console.log("WARNING - Check option " + checks[i].check + " is not supported on this interface"); 437 console.log("WARNING - Check option " + checks[i].check + " is not supported on this interface");
449 break; 438 break;
450 } 439 }
451 440 }
452 } 441 if (checkState === false) {
453 if (!canContinue) { 442 canContinue = false;
454 break; 443 break;
455 } 444 }
456 } 445 }
457 446
458 if (canContinue) { 447 if (canContinue) {
459 if (audioEngineContext.status == 1) { 448 if (audioEngineContext.status == 1) {
460 var playback = document.getElementById('playback-button'); 449 var playback = document.getElementById('playback-button');
461 playback.click(); 450 playback.click();
462 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options 451 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options
463 } else { 452 } else {
464 if (audioEngineContext.timer.testStarted == false) { 453 if (audioEngineContext.timer.testStarted === false) {
465 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please press start to begin the test!'); 454 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please press start to begin the test!');
466 return; 455 return;
467 } 456 }
468 } 457 }
469 testState.advanceState(); 458 testState.advanceState();