comparison ape.js @ 154:61f8e66d119d Dev_main

Feature #1253: Comment box backgrounds light up when selected track playing. Colours for sliders and comment boxes now in ape.css for quick adjustments

 		
 		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 = 'Comment on track '+index;
 			// Create the HTML5 comment box 'textarea'
 			var trackCommentBox = document.createElement('textarea');

 		// Create a slider per track
 		
 		var trackSliderObj = document.createElement('div');
 		trackSliderObj.className = 'track-slider';
 		trackSliderObj.id = 'track-slider-'+index;
+		
+		var trackSliderAOIndex = document.createAttribute('trackIndex');
+		trackSliderAOIndex.nodeValue = index;
+		trackSliderObj.setAttributeNode(trackSliderAOIndex);
+		
 		// Distribute it randomnly
 		var w = window.innerWidth - (offset+8)*2;
 		w = Math.random()*w;
 		w = Math.floor(w+(offset+8));
 		trackSliderObj.style.left = w+'px';
 		trackSliderObj.innerHTML = '<span>'+index+'</span>';
 		trackSliderObj.draggable = true;
 		trackSliderObj.ondragend = dragEnd;
 		trackSliderObj.ondragstart = function()
 		{
-			var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99!
+			var id = Number(event.srcElement.attributes['trackIndex'].value);
 			audioEngineContext.metric.sliderMoveStart(id);
 		};
 		
 		// Onclick, switch playback to that track
 		trackSliderObj.onclick = function() {
 			// Start the test on first click, that way timings are more accurate.
 			audioEngineContext.play();
 			if (audioEngineContext.audioObjectsReady) {
 				// Cannot continue to issue play command until audioObjects reported as ready!
 				// Get the track ID from the object ID
-				var id = Number(this.id.substr(13,2)); // Maximum theoretical tracks is 99!
+				var id = Number(event.srcElement.attributes['trackIndex'].value);
 				//audioEngineContext.metric.sliderPlayed(id);
 				audioEngineContext.selectedTrack(id);
 	            // Currently playing track red, rest green
-	            document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
-	            for (var i = 0; i<$(currentTrackOrder).length; i++)
-	            {
-	                if (i!=index) // Make all other sliders green
-	                {
-	           	        document.getElementById('track-slider-'+i).style.backgroundColor = "rgb(100,200,100)";
-	                }
-	                              
-	            }
+	            
+	            //document.getElementById('track-slider-'+index).style.backgroundColor = "#FF0000";
+	            $('.track-slider').removeClass('track-slider-playing');
+	            $(event.srcElement).addClass('track-slider-playing');
+	            $('.comment-div').removeClass('comment-box-playing');
+	            $('#comment-div-'+id).addClass('comment-box-playing');
 			}
 		};
 		
 		canvas.appendChild(trackSliderObj);
 		audioEngineContext.audioObjects[index].metric.initialised(convSliderPosToRate(index));