changeset 2480:713a2d059a16

Completed waveform/timeline interface. Need to add in checks

--- a/interfaces/timeline.css	Wed Aug 03 14:52:04 2016 +0100
+++ b/interfaces/timeline.css	Thu Aug 04 11:34:29 2016 +0100
@@ -14,7 +14,7 @@
 div.timeline-element-canvas-holder {
     display: flex;
     width: inherit;
-    height: 150px;
+    height: 160px;
     margin-left: 50px;
 }
 
@@ -40,4 +40,32 @@
 
 canvas.canvas-disabled {
     background-color: gray;
+}
+
+div.timeline-element-comment-holder {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+div.comment-entry {
+    border: 1px solid #444444;
+    max-width: 600px;
+    min-width: 400px;
+    margin: 0px 0px 5px 5px;
+    padding: 5px;
+    height: 80px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+div.comment-entry-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+textarea.comment-entry-text {
+    resize: none;
+    margin: auto;
 }
\ No newline at end of file

--- a/interfaces/timeline.js	Wed Aug 03 14:52:04 2016 +0100
+++ b/interfaces/timeline.js	Thu Aug 04 11:34:29 2016 +0100
@@ -177,18 +177,32 @@
             this.parent = parent;
             this.time = time;
             this.DOM = document.createElement("div");
-            this.DOM.className = "comment-div";
+            this.DOM.className = "comment-entry";
+            var titleHolder = document.createElement("div");
+            titleHolder.className = "comment-entry-header";
             this.title = document.createElement("span");
             if (str != undefined) {
                 this.title.textContent = str;
             } else {
                 this.title.textContent = "Time: "+time.toFixed(2)+"s";
             }
+            titleHolder.appendChild(this.title);
             this.textarea = document.createElement("textarea");
-            this.textarea.className = "trackComment";
-            this.DOM.appendChild(this.title);
-            this.DOM.appendChild(document.createElement("br"));
+            this.textarea.className = "comment-entry-text";
+            this.DOM.appendChild(titleHolder);
             this.DOM.appendChild(this.textarea);
+            
+            this.clear = {
+                DOM: document.createElement("button"),
+                parent: this,
+                handleEvent: function() {
+                    this.parent.parent.deleteComment(this.parent);
+                }
+            }
+            this.clear.DOM.textContent = "Delete";
+            this.clear.DOM.addEventListener("click",this.clear);
+            titleHolder.appendChild(this.clear.DOM);
+            
             this.resize = function() {
                 var w = window.innerWidth;
                 w = Math.min(w,800);
@@ -198,6 +212,18 @@
                 this.DOM.style.width = elem_w+"px";
                 this.textarea.style.width = (elem_w-5)+"px";
             }
+            this.buildXML = function(root) {
+                //storage.document.createElement();
+                var node = storage.document.createElement("comment");
+                var question = storage.document.createElement("question");
+                var comment = storage.document.createElement("response");
+                node.setAttribute("time",this.time);
+                question.textContent = this.title.textContent;
+                comment.textContent = this.textarea.value;
+                node.appendChild(question);
+                node.appendChild(comment);
+                root.appendChild(node);
+            }
             this.resize();
         },
         newComment: function(time) {
@@ -207,10 +233,21 @@
             return node;
         },
         deleteComment: function(comment) {
-            
+            var index = this.list.findIndex(function(element,index,array){
+                if (element == comment) {return true;} return false;
+            },comment);
+            if (index == -1) {
+                return false;
+            }
+            var node = this.list.splice(index,1);
+            comment.DOM.remove();
+            this.parent.canvas.drawMarkers();
+            return true;
         },
         clearList: function() {
-            
+            while(this.list.length > 0) {
+                this.deleteComment(this.list[0]);
+            }
         }
     }
     
@@ -230,6 +267,8 @@
             this.layer2.style.width = w+"px";
             this.layer3.style.width = w+"px";
             this.layer4.style.width = w+"px";
+            this.drawWaveform();
+            this.drawMarkers();
         },
         handleEvent: function(event) {
             switch(event.currentTarget) {
@@ -253,6 +292,9 @@
             }
         },
         drawWaveform: function() {
+            if (this.parent.parent == undefined || this.parent.parent.buffer == undefined) {
+                return;
+            }
             var buffer = this.parent.parent.buffer.buffer;
             var context = this.layer4.getContext("2d");
             context.lineWidth = 1;
@@ -305,6 +347,9 @@
             context.stroke();
         },
         drawMarkers: function() {
+            if (this.parent.parent == undefined || this.parent.parent.buffer == undefined) {
+                return;
+            }
             var context = this.layer3.getContext("2d");
             context.clearRect(0,0,this.layer3.width, this.layer3.height);
             context.strokeStyle = "#008";
@@ -359,20 +404,7 @@
     this.playButton.DOM.disabled = true;
     this.playButton.DOM.textContent = "Wait";
     
-    this.clearButton = {
-        parent: this,
-        DOM: document.createElement("button"),
-        handleEvent: function(event) {
-            this.parent.comments.clearList();
-        }
-    }
-    this.clearButton.DOM.addEventListener("click",this.clearButton);
-    this.clearButton.DOM.className = "timeline-button";
-    this.clearButton.DOM.textContent = "Clear";
-    
-    
     buttonHolder.appendChild(this.playButton.DOM);
-    buttonHolder.appendChild(this.clearButton.DOM);
     
     this.resize = function() {
         var w = window.innerWidth;
@@ -452,6 +484,7 @@
 
 function buttonSubmitClick()
 {
+    testState.advanceState();
 }
 
 function pageXMLSave(store, pageSpecification)
@@ -462,4 +495,13 @@
 	// Get the current <page> information in store (remember to appendChild your data to it)
 	// pageSpecification is the current page node configuration
 	// To create new XML nodes, use storage.document.createElement();
+    
+    for (var i=0; i<audioEngineContext.audioObjects.length; i++) {
+        var id = audioEngineContext.audioObjects[i].specification.id;
+        var commentsList = audioEngineContext.audioObjects[i].interfaceDOM.comments.list;
+        var root = audioEngineContext.audioObjects[i].storeDOM;
+        for (var j=0; j<commentsList.length; j++) {
+            commentsList[j].buildXML(root);
+        }
+    }
 }
\ No newline at end of file