# HG changeset patch # User Nicholas Jillings # Date 1433432884 -3600 # Node ID b840046615589119fc57f97c858990ce6d147aec # Parent c867677af7f47a2a8c53fd31e9b5134f5073856f Comment Boxes handled by Interface object. diff -r c867677af7f4 -r b84004661558 ape.js --- a/ape.js Thu Jun 04 15:54:56 2015 +0100 +++ b/ape.js Thu Jun 04 16:48:04 2015 +0100 @@ -20,7 +20,7 @@ var height = window.innerHeight; // The injection point into the HTML page - var insertPoint = document.getElementById("topLevelBody"); + interfaceContext.insertPoint = document.getElementById("topLevelBody"); var testContent = document.createElement('div'); testContent.id = 'testContent'; @@ -157,7 +157,7 @@ feedbackHolder.id = 'feedbackHolder'; testContent.style.zIndex = 1; - insertPoint.innerHTML = null; // Clear the current schema + interfaceContext.insertPoint.innerHTML = null; // Clear the current schema // Inject into HTML testContent.appendChild(title); // Insert the title @@ -165,7 +165,7 @@ testContent.appendChild(interfaceButtons); testContent.appendChild(sliderBox); testContent.appendChild(feedbackHolder); - insertPoint.appendChild(testContent); + interfaceContext.insertPoint.appendChild(testContent); // Load the full interface testState.initialise(); @@ -278,29 +278,10 @@ // Now load each audio sample. First create the new track by passing the full URL var trackURL = audioHolderObject.hostURL + element.url; - var audioObject = audioEngineContext.newTrack(trackURL); + var audioObject = audioEngineContext.newTrack(element); if (commentShow) { - // Create document objects to hold the comment boxes - var trackComment = document.createElement('div'); - trackComment.className = 'comment-div'; - trackComment.id = 'comment-div-'+index; - // Create a string next to each comment asking for a comment - var trackString = document.createElement('span'); - trackString.innerHTML = commentBoxPrefix+' '+index; - // Create the HTML5 comment box 'textarea' - var trackCommentBox = document.createElement('textarea'); - trackCommentBox.rows = '4'; - trackCommentBox.cols = '100'; - trackCommentBox.name = 'trackComment'+index; - trackCommentBox.className = 'trackComment'; - var br = document.createElement('br'); - // Add to the holder. - trackComment.appendChild(trackString); - trackComment.appendChild(br); - trackComment.appendChild(trackCommentBox); - feedbackHolder.appendChild(trackComment); - audioObject.commentDOM = trackComment; + var node = interfaceContext.createCommentBox(audioObject); } // Create a slider per track @@ -354,6 +335,9 @@ audioObject.metric.initialised(convSliderPosToRate(index)); }); + if (commentShow) { + interfaceContext.showCommentBoxes(feedbackHolder,true); + } // Append any commentQuestion boxes $(audioHolderObject.commentQuestions).each(function(index,element) { diff -r c867677af7f4 -r b84004661558 core.js --- a/core.js Thu Jun 04 15:54:56 2015 +0100 +++ b/core.js Thu Jun 04 16:48:04 2015 +0100 @@ -9,6 +9,7 @@ var audioContext; // Hold the browser web audio API var projectXML; // Hold the parsed setup XML var specification; +var interfaceContext; var popup; // Hold the interfacePopup object var testState; var currentTrackOrder = []; // Hold the current XML tracks in their (randomised) order @@ -39,6 +40,9 @@ // Create the specification object specification = new Specification(); + + // Create the interface object + interfaceContext = new Interface(specification); }; function interfacePopup() { @@ -225,7 +229,7 @@ this.stateIndex++; if (this.stateIndex >= this.stateMap.length) { console.log('Test Completed'); - createProjectSave(projectReturn); + createProjectSave(specification.projectReturn); } else { this.currentStateMap = this.stateMap[this.stateIndex]; if (this.currentStateMap.type == "audioHolder") { @@ -418,7 +422,7 @@ popup.showPopup(); popup.popupContent.innerHTML = null; - popup.popupContent.appendChild(a) + popup.popupContent.appendChild(a); } else { var xmlhttp = new XMLHttpRequest; xmlhttp.open("POST",destURL,true); @@ -435,7 +439,6 @@ }; xmlhttp.send(file); } - return submitDiv; } // Only other global function which must be defined in the interface class. Determines how to create the XML document. @@ -510,7 +513,7 @@ }; - this.newTrack = function(url) { + this.newTrack = function(element) { // Pull data from given URL into new audio buffer // URLs must either be from the same source OR be setup to 'Access-Control-Allow-Origin' @@ -519,7 +522,8 @@ this.audioObjects[audioObjectId] = new audioObject(audioObjectId); // AudioObject will get track itself. - this.audioObjects[audioObjectId].constructTrack(url); + this.audioObjects[audioObjectId].specification = element; + this.audioObjects[audioObjectId].constructTrack(element.parent.hostURL + element.url); return this.audioObjects[audioObjectId]; }; @@ -557,6 +561,7 @@ function audioObject(id) { // The main buffer object with common control nodes to the AudioEngine + this.specification; this.id = id; this.state = 0; // 0 - no data, 1 - ready this.url = null; // Hold the URL given for the output back to the results. @@ -1032,9 +1037,10 @@ } }; - this.audioElementNode = function(xml) { + this.audioElementNode = function(parent,xml) { this.url = xml.getAttribute('url'); this.id = xml.id; + this.parent = parent; }; this.commentQuestionNode = function(xml) { @@ -1074,7 +1080,7 @@ this.audioElements =[]; var audioElementsDOM = xml.getElementsByTagName('audioElements'); for (var i=0; i tag. + this.interfaceObjects = []; + this.interfaceObject = function(){}; + + this.commentBoxes = []; + this.commentBox = function(audioObject) { + var element = audioObject.specification; + this.id = audioObject.id; + var audioHolderObject = audioObject.specification.parent; + // Create document objects to hold the comment boxes + this.trackComment = document.createElement('div'); + this.trackComment.className = 'comment-div'; + this.trackComment.id = 'comment-div-'+audioObject.id; + // Create a string next to each comment asking for a comment + var trackString = document.createElement('span'); + trackString.innerHTML = audioHolderObject.commentBoxPrefix+' '+audioObject.id; + // Create the HTML5 comment box 'textarea' + var trackCommentBox = document.createElement('textarea'); + trackCommentBox.rows = '4'; + trackCommentBox.cols = '100'; + trackCommentBox.name = 'trackComment'+audioObject.id; + trackCommentBox.className = 'trackComment'; + var br = document.createElement('br'); + // Add to the holder. + this.trackComment.appendChild(trackString); + this.trackComment.appendChild(br); + this.trackComment.appendChild(trackCommentBox); + }; + + this.createCommentBox = function(audioObject) { + var node = new this.commentBox(audioObject); + this.commentBoxes.push(node); + audioObject.commentDOM = node; + return node; + }; + + this.sortCommentBoxes = function() { + var holder = []; + while (this.commentBoxes.length > 0) { + var node = this.commentBoxes.pop(0); + holder[node.id] = node; + } + this.commentBoxes = holder; + }; + + this.showCommentBoxes = function(inject, sort) { + if (sort) {interfaceContext.sortCommentBoxes();} + for (var i=0; i