comparison core.js @ 1525:b92bdfcbf61c

Bug #1300: Boxes are resized with the window. On HD level displays (1920 wide) will have three columns

 		document.getElementsByTagName("head")[0].appendChild(css);
 	}
 	document.getElementsByTagName("head")[0].appendChild(interfaceJS);
 	
 	// Define window callbacks for interface
-	window.onresize = function(event){resizeWindow(event);};
+	window.onresize = function(event){interfaceContext.resizeWindow(event);};
 }
 
 function createProjectSave(destURL) {
 	// Save the data from interface into XML and send to destURL
 	// If destURL is null then download XML in client

 	hold.appendChild(date);
 	hold.appendChild(time);
 	return hold
 	
 }
-
-function testWaitIndicator() {
-	if (audioEngineContext.checkAllReady() == false) {
-		var hold = document.createElement("div");
-		hold.id = "testWaitIndicator";
-		hold.className = "indicator-box";
-		hold.style.zIndex = 3;
-		var span = document.createElement("span");
-		span.textContent = "Please wait! Elements still loading";
-		hold.appendChild(span);
-		var blank = document.createElement('div');
-		blank.className = 'testHalt';
-		blank.id = "testHaltBlank";
-		var body = document.getElementsByTagName('body')[0];
-		body.appendChild(hold);
-		body.appendChild(blank);
-		testWaitTimerIntervalHolder = setInterval(function(){
-			var ready = audioEngineContext.checkAllReady();
-			if (ready) {
-				var elem = document.getElementById('testWaitIndicator');
-				var blank = document.getElementById('testHaltBlank');
-				var body = document.getElementsByTagName('body')[0];
-				body.removeChild(elem);
-				body.removeChild(blank);
-				clearInterval(testWaitTimerIntervalHolder);
-			}
-		},500,false);
-	}
-}
-
-var testWaitTimerIntervalHolder = null;
 
 function Specification() {
 	// Handles the decoding of the project specification XML into a simple JavaScript Object.
 	
 	this.interfaceType;

 	// Interface object MUST have an exportXMLDOM method which returns the various DOM levels
 	// For example, APE returns  the slider position normalised in a <value> tag.
 	this.interfaceObjects = [];
 	this.interfaceObject = function(){};
 	
+	this.resizeWindow = function(event)
+	{
+		for(var i=0; i<this.commentBoxes.length; i++)
+		{this.commentBoxes[i].resize();}
+		for(var i=0; i<this.commentQuestions.length; i++)
+		{this.commentQuestions[i].resize();}
+		try
+		{
+			resizeWindow(event);
+		}
+		catch(err)
+		{
+			console.log("Warning - Interface does not have Resize option");
+			console.log(err);
+		}
+	};
+	
 	this.commentBoxes = [];
 	this.elementCommentBox = function(audioObject) {
 		var element = audioObject.specification;
 		this.audioObject = audioObject;
 		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;
-		var boxwidth = (window.innerWidth-100)/2;
-		if (boxwidth >= 624)
-		{
-			boxwidth = 624;
-		}
-		else if (boxwidth < 400)
-		{
-			boxwidth = 400;
-		}
-		this.trackComment.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.trackString = document.createElement('span');
 		this.trackString.innerHTML = audioHolderObject.commentBoxPrefix+' '+audioObject.id;
 		// Create the HTML5 comment box 'textarea'
 		this.trackCommentBox = document.createElement('textarea');
 		this.trackCommentBox.rows = '4';
 		this.trackCommentBox.cols = '100';
 		this.trackCommentBox.name = 'trackComment'+audioObject.id;
 		this.trackCommentBox.className = 'trackComment';
-		this.trackCommentBox.style.width = boxwidth-6+"px";
 		var br = document.createElement('br');
 		// Add to the holder.
 		this.trackComment.appendChild(this.trackString);
 		this.trackComment.appendChild(br);
 		this.trackComment.appendChild(this.trackCommentBox);

 				root.appendChild(question);
 				root.appendChild(response);
 			}
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.trackComment.style.width = boxwidth+"px";
+			this.trackCommentBox.style.width = boxwidth-6+"px";
+		};
+		this.resize();
 	};
 	
 	this.commentQuestions = [];
 	
 	this.commentBox = function(commentQuestion) {
 		this.specification = commentQuestion;
 		// Create document objects to hold the comment boxes
 		this.holder = document.createElement('div');
 		this.holder.className = 'comment-div';
-		var boxwidth = (window.innerWidth-100)/2;
-		if (boxwidth >= 624)
-		{
-			boxwidth = 624;
-		}
-		else if (boxwidth < 400)
-		{
-			boxwidth = 400;
-		}
-		this.holder.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.string = document.createElement('span');
 		this.string.innerHTML = commentQuestion.question;
 		// Create the HTML5 comment box 'textarea'
 		this.textArea = document.createElement('textarea');
 		this.textArea.rows = '4';
 		this.textArea.cols = '100';
 		this.textArea.className = 'trackComment';
-		this.textArea.style.width = boxwidth-6+"px";
 		var br = document.createElement('br');
 		// Add to the holder.
 		this.holder.appendChild(this.string);
 		this.holder.appendChild(br);
 		this.holder.appendChild(this.textArea);

 			root.textContent = this.textArea.value;
 			console.log("Question: "+this.string.textContent);
 			console.log("Response: "+root.textContent);
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.holder.style.width = boxwidth+"px";
+			this.textArea.style.width = boxwidth-6+"px";
+		};
+		this.resize();
 	};
 	
 	this.radioBox = function(commentQuestion) {
 		this.specification = commentQuestion;
 		// Create document objects to hold the comment boxes
 		this.holder = document.createElement('div');
 		this.holder.className = 'comment-div';
-		var boxwidth = (window.innerWidth-100)/2;
-		if (boxwidth >= 624)
-		{
-			boxwidth = 624;
-		}
-		else if (boxwidth < 400)
-		{
-			boxwidth = 400;
-		}
-		this.holder.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.string = document.createElement('span');
 		this.string.innerHTML = commentQuestion.statement;
 		var br = document.createElement('br');
 		// Add to the holder.

 		this.span.style.marginLeft = '12px';
 		this.span.align = 'center';
 		this.span.style.marginTop = '15px';
 		
 		var optCount = commentQuestion.options.length;
-		var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
 		for (var i=0; i<optCount; i++)
 		{
 			var div = document.createElement('div');
 			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			var input = document.createElement('input');
 			input.type = 'radio';
 			input.name = commentQuestion.id;
 			input.setAttribute('setvalue',commentQuestion.options[i].name);
 			input.className = 'comment-radio';

 			
 			
 			div = document.createElement('div');
 			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			div.align = 'center';
 			var span = document.createElement('span');
 			span.textContent = commentQuestion.options[i].text;
 			span.className = 'comment-radio-span';
 			div.appendChild(span);

 			console.log('Response: '+response.textContent);
 			root.appendChild(question);
 			root.appendChild(response);
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.holder.style.width = boxwidth+"px";
+			var text = this.holder.children[2];
+			var options = this.holder.children[3];
+			var optCount = options.children.length;
+			var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
+			var options = options.firstChild;
+			var text = text.firstChild;
+			options.style.marginRight = spanMargin;
+			options.style.marginLeft = spanMargin;
+			text.style.marginRight = spanMargin;
+			text.style.marginLeft = spanMargin;
+			while(options.nextSibling != undefined)
+			{
+				options = options.nextSibling;
+				text = text.nextSibling;
+				options.style.marginRight = spanMargin;
+				options.style.marginLeft = spanMargin;
+				text.style.marginRight = spanMargin;
+				text.style.marginLeft = spanMargin;
+			}
+		};
+		this.resize();
 	};
 	
 	this.checkboxBox = function(commentQuestion) {
 		this.specification = commentQuestion;
 		// Create document objects to hold the comment boxes
 		this.holder = document.createElement('div');
 		this.holder.className = 'comment-div';
-		var boxwidth = (window.innerWidth-100)/2;
-		if (boxwidth >= 624)
-		{
-			boxwidth = 624;
-		}
-		else if (boxwidth < 400)
-		{
-			boxwidth = 400;
-		}
-		this.holder.style.width = boxwidth+"px";
 		// Create a string next to each comment asking for a comment
 		this.string = document.createElement('span');
 		this.string.innerHTML = commentQuestion.statement;
 		var br = document.createElement('br');
 		// Add to the holder.

 		this.span.style.marginLeft = '12px';
 		this.span.align = 'center';
 		this.span.style.marginTop = '15px';
 		
 		var optCount = commentQuestion.options.length;
-		var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
 		for (var i=0; i<optCount; i++)
 		{
 			var div = document.createElement('div');
 			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			var input = document.createElement('input');
 			input.type = 'checkbox';
 			input.name = commentQuestion.id;
 			input.setAttribute('setvalue',commentQuestion.options[i].name);
 			input.className = 'comment-radio';

 			
 			
 			div = document.createElement('div');
 			div.style.width = '80px';
 			div.style.float = 'left';
-			div.style.marginRight = spanMargin;
-			div.style.marginLeft = spanMargin;
 			div.align = 'center';
 			var span = document.createElement('span');
 			span.textContent = commentQuestion.options[i].text;
 			span.className = 'comment-radio-span';
 			div.appendChild(span);

 				root.appendChild(response);
 				console.log('Response '+response.getAttribute('name') +': '+response.textContent);
 			}
 			return root;
 		};
+		this.resize = function()
+		{
+			var boxwidth = (window.innerWidth-100)/2;
+			if (boxwidth >= 600)
+			{
+				boxwidth = 600;
+			}
+			else if (boxwidth < 400)
+			{
+				boxwidth = 400;
+			}
+			this.holder.style.width = boxwidth+"px";
+			var text = this.holder.children[2];
+			var options = this.holder.children[3];
+			var optCount = options.children.length;
+			var spanMargin = Math.floor(((boxwidth-20-(optCount*80))/(optCount))/2)+'px';
+			var options = options.firstChild;
+			var text = text.firstChild;
+			options.style.marginRight = spanMargin;
+			options.style.marginLeft = spanMargin;
+			text.style.marginRight = spanMargin;
+			text.style.marginLeft = spanMargin;
+			while(options.nextSibling != undefined)
+			{
+				options = options.nextSibling;
+				text = text.nextSibling;
+				options.style.marginRight = spanMargin;
+				options.style.marginLeft = spanMargin;
+				text.style.marginRight = spanMargin;
+				text.style.marginLeft = spanMargin;
+			}
+		};
+		this.resize();
 	};
 
 	this.createCommentBox = function(audioObject) {
 		var node = new this.elementCommentBox(audioObject);
 		this.commentBoxes.push(node);