From a02a90cfc5b5d93c50852c07900a706abdbd1c6d Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Wed, 9 Feb 2011 19:56:47 +0100
Subject: [PATCH] Added and fixed comunication with server (no more server
 errors). To be fixed: 1) more markers than those saved (seem to be duplicated
 copies) are displayed, 2) an error during page initialization (clash with old
 code player.resize) 3) proper css (markers on a separate hidden div)

---
 telemeta/htdocs/timeside/src/controller.js | 174 +++++----------------
 telemeta/htdocs/timeside/src/markermap.js  | 162 +++++++++++++------
 telemeta/htdocs/timeside/src/player.js     |   2 +-
 3 files changed, 157 insertions(+), 181 deletions(-)

diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js
index ff056256..56f6b4d2 100644
--- a/telemeta/htdocs/timeside/src/controller.js
+++ b/telemeta/htdocs/timeside/src/controller.js
@@ -14,16 +14,19 @@ TimeSide(function($N) {
             this.configure(cfg, {
                 player: null,
                 soundProvider: null,
-                map: null,
-                markersDiv: document.getElementById("markers_div_id")
+                map: null
             });
-            if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
-                this.cfg.player = new $N.Player(this.cfg.player);
-            }
-            this._setupPlayer();
+//            if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
+//                this.cfg.player = new $N.Player(this.cfg.player);
+//            }
+            //this._setupPlayer();
+            this.loadHTTP();
         },
 
         _setupPlayer: function() {
+             if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
+                this.cfg.player = new $N.Player(this.cfg.player);
+            }
             this.attach(this.updateMarkersDiv);
             this.cfg.player
             .setSoundProvider(this.cfg.soundProvider)
@@ -43,124 +46,26 @@ TimeSide(function($N) {
             this.cfg.soundProvider.seek(data.offset);
         },
 
-        formatMarkerOffset: function(markerOffset){
-            //marker offset is in float format second.decimalPart
-            var hours = parseInt(markerOffset/(60*24));
-            markerOffset-=hours*(60*24);
-            var minutes = parseInt(markerOffset/(60));
-            markerOffset-=minutes*(60);
-            var seconds = parseInt(markerOffset);
-            markerOffset-=seconds;
-            var msec = Math.round(markerOffset*100); //show only centiseconds
-            //(use 1000* to show milliseconds)
-            var format = (hours<10 ? "0"+hours : hours )+":"+
-            (minutes<10 ? "0"+minutes : minutes )+":"+
-            (seconds<10 ? "0"+seconds : seconds )+"."+
-            msec;
-            return format;
-        },
+
         _onMarkerMove: function(e, data) {
             if (this.cfg.map) {
-                this.refreshMarkersText(this.cfg.map);
+                //this.refreshMarkersText(this.cfg.map);
                 this.cfg.map.move(this.cfg.map.byId(data.id), data.offset);
-                this.updateMarkersDiv(this.cfg.map, data.offset);
+            //this.updateMarkersDiv(this.cfg.map, data.offset);
             }
         },
 
         _onMarkerAdd: function(e, data) {
             if (this.cfg.map) {
-                this.refreshMarkersText(this.cfg.map);
+                //this.refreshMarkersText(this.cfg.map);
                 this.cfg.map.add(data.offset, '');
-                this.updateMarkersDiv(this.cfg.map, data.offset);
+            //this.updateMarkersDiv(this.cfg.map, data.offset);
 
             }
         },
-        
-        refreshMarkersText: function(nonNullMarkersMap){
-            var div = this.cfg.markersDiv;
-            var m = nonNullMarkersMap.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;
-                }
-            }
-
-        },
-        updateMarkersDiv: function(nonNullMarkersMap, selectedMarkOffset){
-            var div = this.cfg.markersDiv;
-            var m = nonNullMarkersMap.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 = doc.createElement('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.setAttribute("class", $N.cssPrefix + this.cfg.className);
-                        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();
-                }
-            }
-        },
+        loadHTTP: function(){
 
-        sendHTTP: function(marker){
-            
             //itemid is the item (spund file) name
             var sPath = window.location.pathname;
             //remove last "/" or last "/#", if any...
@@ -169,36 +74,39 @@ TimeSide(function($N) {
 
             //WARNING: use single quotes for the whole string!!
             //see http://stackoverflow.com/questions/4809157/i-need-to-pass-a-json-object-to-a-javascript-ajax-method-for-a-wcf-call-how-can
-            var data2send = '{"id":"jsonrpc", "params":[{"item_id":"'+ itemid+'", "public_id": "'+marker.id+'", "time": "'+
-            marker.offset+'","description": "'+marker.desc+'"}], "method":"telemeta.add_marker","jsonrpc":"1.0"}';
-
-
+            var data2send = '{"id":"jsonrpc","params":["'+itemid+'"], "method":"telemeta.get_markers","jsonrpc":"1.0"}';
+            var map = this.cfg.map;
+            var me = this;
             $.ajax({
                 type: "POST",
                 url: 'http://localhost:9000/json/',
                 contentType: "application/json",
-                data: data2send
+                data: data2send,
+                dataType: "json",
+                success: function(data) {
+                    if(data){
+                        if(data.result){
+                            var result = data.result;
+                            
+                            for(var i =0; i< result.length; i++){
+//                                var marker = {
+//                                    id: result[i].public_id,
+//                                    offset: result[i].time,
+//                                    desc: result[i].description
+//                                };
+                                map.add(result[i].time, result[i].description);
+                            }
+                        }
+                        
+                    }
+                    me._setupPlayer();
+                }
             });
-        },
-
-        quote: function(string){
-            //            var s = "\"";
-            //            var isEscaped = false;
-            //            for(var i=0; i<string.length; i++){
-            //                var c = string.charAt(i);
-            //                if(isEscaped){
-            //
-            //                }else if(c == "\\"){
-            //                    isEscaped = true;
-            //                }else{
-            //
-            //                }
-            //                s+=c;
-            //            }
-            //            s+="\"";
-            return s;
+            var g = 9;
         }
 
+    
+
     });
 
     $N.notifyScriptLoad();
diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index d5d1516c..28c711dd 100644
--- 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"),
+        divContainer: $J("#markers_div_id"),
         initialize: function($super, markers) {
             $super();
             if (!markers){
@@ -48,20 +48,26 @@ TimeSide(function($N, $J) {
             return index;
         },
 
-        _reorder: function() {
+        _reorder: function(selectedMarkerOffset) {
+            //selectedMarkerOffset is the offset of the marker whose textarea
+            //must be selected. It can be undefined
+
             //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;
+            var m = this.markers;
+            
             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;
+                if(divChildren){
+                    var l = Math.min(divChildren.length, m.length);
+                    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:
@@ -70,10 +76,10 @@ TimeSide(function($N, $J) {
                 this.fire('indexchange', {
                     marker: this.markers[i],
                     index: parseInt(i)
-                    });
+                });
             }
             //now update the div
-            this.updateDiv();
+            this.updateDiv(selectedMarkerOffset);
         },
 
         add: function(offset, desc) {
@@ -88,7 +94,7 @@ TimeSide(function($N, $J) {
                 marker: marker,
                 index: i
             });
-            this._reorder();
+            this._reorder(offset);
             return marker;
         },
 
@@ -117,7 +123,7 @@ TimeSide(function($N, $J) {
         move: function(marker, offset) {
             oldMarkers = [].concat(this.markers);
             marker.offset = offset;
-            this._reorder();
+            this._reorder(offset);
         },
 
         getPrevious: function(offset, skip) {
@@ -155,69 +161,131 @@ TimeSide(function($N, $J) {
 
         updateDiv: function(selectedMarkOffset){
             var div = this.divContainer;
-            var m = markers;
+            var m = this.markers;
             var l = m.length;
             if(div){
                 var textWithFocus;
-                div.style.display = "block";
-                var doc = document;
-                var divChildren = div.childNodes;
+                //div.style.display = "block";
+                //var doc = document;
+                var divChildren = div.children();
                 //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);
+                        var label = $J('<span/>')
+                        .css({
+                            color:'#fff',
+                            backgroundColor:'#009',
+                            width: '2ex',
+                            textAlign: 'center',
+                            fontFamily: 'monospace'
+                        })
+                        .html(i+1);
+
+                        var timeSpan = $J('<span/>')
+                        .css({
+                            marginLeft:'1ex'
+                        });
+                        
+                        
+                        var header = $J('<div/>')
+                        .append(label)
+                        .append(timeSpan);
+
+                        text = $J('<textarea/>')
+                        .css({
+                            margin:0,
+                            padding:0,
+                            width:'100%'
+                        });
+                        
+                        var ok = $J('<a/>')
+                        .attr("href","#")
+                        .html("OK");
+
+                        //create new div
+                        subdiv = $J('<div/>')
+                        .append(header)
+                        .append(text)
+                        .append(ok)
+                        .css({
+                            marginBottom:'1em',
+                            marginTop:'1ex'
+                        });
+
+                        div.append(subdiv);
                     }else{
-                        subdiv = divChildren[i];
-                        text = subdiv.childNodes[1];
-                        header = subdiv.childNodes[0];
+                        subdiv = $( div.children()[i] );
+                        text = $( subdiv.children()[1] );
+                        header = $( subdiv.children()[0] );
+                        ok = $( subdiv.children()[2] ); 
                     }
                     var timeStr = this.formatMarkerOffset(marker.offset);
 
-                    header.childNodes[1].innerHTML = timeStr;
+                    $( header.children()[1] ).html(timeStr);
                     //updating text
-                    text.value = marker.desc;
+                    text.val(marker.desc);
 
                     if(selectedMarkOffset==marker.offset){
                         textWithFocus = text;
                     }
                     var send = this.sendHTTP;
                     //set the ok function
-                    ok.onclick = function(){
-                        marker.desc = text.value;
+                    ok.click( function(){
+                        marker.desc = text.val();
                         send(marker);
-                    };
+                    });
 
                 }
                 if(textWithFocus){
                     textWithFocus.focus();
                 }
             }
+        },
+
+        formatMarkerOffset: function(markerOffset){
+            //marker offset is in float format second.decimalPart
+            var hours = parseInt(markerOffset/(60*24));
+            markerOffset-=hours*(60*24);
+            var minutes = parseInt(markerOffset/(60));
+            markerOffset-=minutes*(60);
+            var seconds = parseInt(markerOffset);
+            markerOffset-=seconds;
+            var msec = Math.round(markerOffset*100); //show only centiseconds
+            //(use 1000* to show milliseconds)
+            var format = (hours<10 ? "0"+hours : hours )+":"+
+            (minutes<10 ? "0"+minutes : minutes )+":"+
+            (seconds<10 ? "0"+seconds : seconds )+"."+
+            msec;
+            return format;
+        },
+
+        sendHTTP: function(marker){
+
+            //itemid is the item (spund file) name
+            var sPath = window.location.pathname;
+            //remove last "/" or last "/#", if any...
+            sPath = sPath.replace(/\/#*$/,"");
+            var itemid = sPath.substring(sPath.lastIndexOf('/') + 1);
+
+            //WARNING: use single quotes for the whole string!!
+            //see http://stackoverflow.com/questions/4809157/i-need-to-pass-a-json-object-to-a-javascript-ajax-method-for-a-wcf-call-how-can
+            var data2send = '{"id":"jsonrpc", "params":[{"item_id":"'+ itemid+'", "public_id": "'+marker.id+'", "time": "'+
+            marker.offset+'","description": "'+marker.desc+'"}], "method":"telemeta.add_marker","jsonrpc":"1.0"}';
+
+
+            $.ajax({
+                type: "POST",
+                url: 'http://localhost:9000/json/',
+                contentType: "application/json",
+                data: data2send
+            });
         }
 
     });
diff --git a/telemeta/htdocs/timeside/src/player.js b/telemeta/htdocs/timeside/src/player.js
index e82bc19c..067bf3cb 100644
--- a/telemeta/htdocs/timeside/src/player.js
+++ b/telemeta/htdocs/timeside/src/player.js
@@ -18,7 +18,7 @@ TimeSide(function($N, $J) {
             },
             'div.control': {
                 'div.layout': {
-                    'div.playback': ['a.play', 'a.pause', 'a.rewind', 'a.forward', 'a.set-marker', 'a.set-marker2']
+                    'div.playback': ['a.play', 'a.pause', 'a.rewind', 'a.forward', 'a.set-marker']
                 //,'input.textMarker']
                 }
             }/*,
-- 
2.39.5