still work in progress

diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index 8a285c76e80cc91bc9677e098a5801af5b8be172..d5d1516cb11e842015369636900d8d9016ff002c 100644 (file)
--- a/telemeta/htdocs/timeside/src/markermap.js
+++ b/telemeta/htdocs/timeside/src/markermap.js
@@ -9,7 +9,7 @@ TimeSide(function($N, $J) {
 
     $N.Class.create("MarkerMap", $N.Core, {
         markers: null,
-
+        divContainer: $J("#markers_div"),
         initialize: function($super, markers) {
             $super();
             if (!markers){
@@ -49,6 +49,22 @@ TimeSide(function($N, $J) {
         },
 
         _reorder: function() {
+            //first of all, assign to each marker its text.
+            //we could assign it onchange, but that event is NOT fired when the textarea changes.
+            //so we doit it here
+            var div = this.divContainer;
+            var m = markers;
+            var l = m.length;
+            if(div){
+                var divChildren = div.childNodes;
+                for(var i=0; i<l; i++){
+                    var marker = m[i];
+                    var subdiv = divChildren[i];
+                    var text = subdiv.childNodes[1];
+                    marker.desc = text.value;
+                }
+            }
+            //old code:
             this.markers.sort(this.compare);
             for (var i in this.markers) {
                 this.fire('indexchange', {
@@ -56,6 +72,8 @@ TimeSide(function($N, $J) {
                     index: parseInt(i)
                     });
             }
+            //now update the div
+            this.updateDiv();
         },
 
         add: function(offset, desc) {
@@ -135,16 +153,71 @@ TimeSide(function($N, $J) {
             $J(this.markers).each(callback);
         },
 
-        _toString: function() {
-            var s = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<telemeta>\n<markers>";
-            for (var i in this.markers) {
-                marker = this.markers[i];
-                s+="\n\t"; //+marker._toString();
-                s+="<marker id="+marker.id+" position="+marker.offset+" description=\""+
-                +marker.desc+"\"/>"
+        updateDiv: function(selectedMarkOffset){
+            var div = this.divContainer;
+            var m = markers;
+            var l = m.length;
+            if(div){
+                var textWithFocus;
+                div.style.display = "block";
+                var doc = document;
+                var divChildren = div.childNodes;
+                //var round = Math.round;
+                for(var i=0; i<l; i++){
+                    var marker = m[i];
+                    var subdiv, text;
+                    if(divChildren.length<=i){
+                        //create new div
+                        subdiv = $J('div');
+                        var header = doc.createElement('div');
+                        //creating marker, see marker.js
+                        //would be better not to copy this code but to
+                        //reference it.
+                        var label = doc.createElement('span');
+                        label.style.cssText = "color:#fff;background-color:#009;width: '2ex';textAlign: 'center';font-family: 'monospace'";
+                        label.innerHTML = (i+1);
+                        header.appendChild(label);
+                        var timeSpan = doc.createElement('span');
+                        timeSpan.style.cssText="margin-left:1ex";
+                        header.appendChild(timeSpan);
+                        subdiv.appendChild(header);
+
+                        text = doc.createElement('textarea');
+                        text.style.cssText="margin:0;padding:0;width:100%";
+
+                        var ok = doc.createElement('a');
+                        ok.setAttribute("href","#");
+                        ok.innerHTML = "OK";
+                        subdiv.appendChild(text);
+                        subdiv.appendChild(ok);
+                        subdiv.style.cssText="margin-bottom:1em;margin-top:1ex";
+                        div.appendChild(subdiv);
+                    }else{
+                        subdiv = divChildren[i];
+                        text = subdiv.childNodes[1];
+                        header = subdiv.childNodes[0];
+                    }
+                    var timeStr = this.formatMarkerOffset(marker.offset);
+
+                    header.childNodes[1].innerHTML = timeStr;
+                    //updating text
+                    text.value = marker.desc;
+
+                    if(selectedMarkOffset==marker.offset){
+                        textWithFocus = text;
+                    }
+                    var send = this.sendHTTP;
+                    //set the ok function
+                    ok.onclick = function(){
+                        marker.desc = text.value;
+                        send(marker);
+                    };
+
+                }
+                if(textWithFocus){
+                    textWithFocus.focus();
+                }
             }
-            s+="\n</markers>\n</telemeta>";
-            return s;
         }
 
     });