From 6dc8a91eaccead1c0c315e009b3824ac14026543 Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Fri, 11 Feb 2011 17:39:46 +0100
Subject: [PATCH] Fixed m::arkers add/edit/remove, as well as server get/save.
 Graphical Layout still to be optimized

---
 telemeta/htdocs/css/telemeta.css              |   8 +
 telemeta/htdocs/timeside/skins/lab/style.css  |   2 +
 telemeta/htdocs/timeside/src/controller.js    |  35 +-
 telemeta/htdocs/timeside/src/markermap.js     | 369 +++++++++++-------
 .../telemeta_default/mediaitem_detail.html    |  13 +-
 telemeta/web/base.py                          |   7 +-
 6 files changed, 262 insertions(+), 172 deletions(-)

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index 729100a7..e3be051e 100644
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -744,3 +744,11 @@ a.image-link {
     margin: 0;
     padding: 1em;
 }
+
+/*.ts-marker-button {
+    border: solid #00190a 1px;
+    padding: .5ex .5ex .5ex .5ex;
+    background-color:#00890a;
+    color: #ffffff;
+    font-weight: bold;
+}*/
diff --git a/telemeta/htdocs/timeside/skins/lab/style.css b/telemeta/htdocs/timeside/skins/lab/style.css
index 5dcd3539..a8626c54 100755
--- a/telemeta/htdocs/timeside/skins/lab/style.css
+++ b/telemeta/htdocs/timeside/skins/lab/style.css
@@ -114,3 +114,5 @@
     height: 30px;
 }
 
+
+
diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js
index 56f6b4d2..9a1be290 100644
--- a/telemeta/htdocs/timeside/src/controller.js
+++ b/telemeta/htdocs/timeside/src/controller.js
@@ -16,17 +16,17 @@ TimeSide(function($N) {
                 soundProvider: null,
                 map: null
             });
-//            if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
-//                this.cfg.player = new $N.Player(this.cfg.player);
-//            }
-            //this._setupPlayer();
-            this.loadHTTP();
+            if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
+                this.cfg.player = new $N.Player(this.cfg.player);
+            }
+            this._setupPlayer();
+            
         },
 
         _setupPlayer: function() {
-             if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
-                this.cfg.player = new $N.Player(this.cfg.player);
-            }
+//             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)
@@ -38,6 +38,7 @@ TimeSide(function($N) {
             .observe('markermove', this.attach(this._onMarkerMove))
             
             .draw();
+            this.loadHTTP();
             
         },
 
@@ -49,16 +50,14 @@ TimeSide(function($N) {
 
         _onMarkerMove: function(e, data) {
             if (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);
             }
         },
 
         _onMarkerAdd: function(e, data) {
             if (this.cfg.map) {
                 //this.refreshMarkersText(this.cfg.map);
-                this.cfg.map.add(data.offset, '');
+                this.cfg.map.addNew(data.offset, '');
             //this.updateMarkersDiv(this.cfg.map, data.offset);
 
             }
@@ -89,17 +88,17 @@ TimeSide(function($N) {
                             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);
+                                var marker = {
+                                    id: result[i].public_id,
+                                    offset: result[i].time,
+                                    desc: result[i].description
+                                };
+                                map.add(marker);
                             }
                         }
                         
                     }
-                    me._setupPlayer();
+                    //me._setupPlayer();
                 }
             });
             var g = 9;
diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index 28c711dd..b72eddb0 100644
--- a/telemeta/htdocs/timeside/src/markermap.js
+++ b/telemeta/htdocs/timeside/src/markermap.js
@@ -48,64 +48,55 @@ TimeSide(function($N, $J) {
             return index;
         },
 
-        _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 = this.markers;
-            
-            if(div){
-                var divChildren = div.childNodes;
-                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:
-            this.markers.sort(this.compare);
-            for (var i in this.markers) {
-                this.fire('indexchange', {
-                    marker: this.markers[i],
-                    index: parseInt(i)
-                });
-            }
-            //now update the div
-            this.updateDiv(selectedMarkerOffset);
-        },
-
-        add: function(offset, desc) {
+        addNew: function(offset, description){
             var id = this.uniqid();
             var marker = {
                 id: id,
                 offset: offset,
-                desc: desc
+                desc: description,
+                isNew: true
             };
-            var i = this.markers.push(marker) - 1;
+            this.add(marker);
+        },
+
+        //this function adds a new marker. It is actually
+        add: function(marker) {
+            var idx = this.insertionIndex(marker);
+            //adding the div
+            marker.div = this.createDiv(marker,idx);
+            this.markers.splice(idx,0,marker);
+            //calls core.js $N.attachFunction
+            //which calls ruler.js onMapAdd
             this.fire('add', {
                 marker: marker,
-                index: i
+                index: idx
             });
-            this._reorder(offset);
+            this.fireRefreshLabels(idx+1,this.markers.length);
+            //this._reorder(marker.offset);
             return marker;
         },
+        
+        
 
-        remove: function(marker) {
+        remove: function(klass, marker) {
             if (marker) {
-                var i = this.indexOf(marker);
-                this.markers.splice(i, 1);
-                this.fire('remove', {
+                if(!(klass)){
+                    klass = this;
+                }
+                var i = klass.indexOf(marker);
+                klass.markers.splice(i, 1);
+                marker.div.remove();
+                klass.fire('remove', {
                     marker: marker
                 });
-                this._reorder();
+                //                var i1= Math.min(oldIndex,newIndex);
+                //                var i2= Math.max(oldIndex,newIndex);
+                //var mrks = this.markers;
+                klass.fireRefreshLabels(i,klass.markers.length);
+
+                klass.removeHTTP(marker);
+
             }
             return marker;
         },
@@ -121,133 +112,184 @@ TimeSide(function($N, $J) {
         },
 
         move: function(marker, offset) {
-            oldMarkers = [].concat(this.markers);
+            var oldIndex = this.indexOf(marker);
             marker.offset = offset;
-            this._reorder(offset);
+            marker.offset = offset;
+            var newIndex = this.insertionIndex(marker);
+            //change marker time
+            $($( marker.div.children()[0] ).children()[1]).html(this.formatMarkerOffset(offset));
+
+            if(newIndex>oldIndex){
+                newIndex--;
+            }
+            if(newIndex==oldIndex){
+                return;
+            }
+            var l = this.markers.length;
+            this.markers.splice(oldIndex,1);
+            this.markers.splice(newIndex,0,marker);
+            //The .detach() method is the same as .remove(), except that .detach() keeps
+            //all jQuery data associated with the removed elements.
+            //This method is useful when removed elements are to be reinserted into the DOM at a later time.
+            marker.div.detach();
+            if(newIndex==l-1){
+                this.divContainer.append(marker.div);
+            }else{
+                $( this.divContainer.children()[newIndex] ).before(marker.div);
+            }
+            $($( marker.div.children()[1] )).focus();
+            
+            var i1= Math.min(oldIndex,newIndex);
+            var i2= Math.max(oldIndex,newIndex);
+            //var mrks = this.markers;
+
+            this.fireRefreshLabels(i1,i2+1);
+
+
+           
+            
+        //this._reorder(offset);
         },
 
-        getPrevious: function(offset, skip) {
-            var marker = null;
-            if (!skip) {
-                skip = 0;
+        fireRefreshLabels: function(firstIndex,lastIndex){
+            if(lastIndex<=firstIndex){
+                return;
+            }
+            for (var i=firstIndex; i <lastIndex;i++) {
+                //calls ruler _onMapIndexChange
+                this.fire('indexchange', {
+                    marker: this.markers[i],
+                    index: i
+                });
+                //update label element
+                $($( this.markers[i].div.children()[0] ).children()[0]).html(i+1);
+
             }
-            markers = [].concat(this.markers).reverse();
-            $J(markers).each(function(i, m) {
-                if (offset > m.offset && !(skip--)) {
-                    marker = m;
-                    return false;
-                }
-            });
-            return marker;
         },
 
-        getNext: function(offset, skip) {
-            var marker = null;
-            if (!skip) {
-                skip = 0;
+        insertionIndex: function(marker){
+            var index = 0;
+            var l = this.markers.length;
+            while (index<l && this.markers[index].offset <= marker.offset) {
+                index ++;
             }
-            $J(this.markers).each(function(i, m) {
-                if (offset < m.offset && !(skip--)) {
-                    marker = m;
-                    return false;
-                }
-            });
-            return marker;
+            //markers.splice(index,0,marker);
+            return index;
         },
 
+        
+
         each: function(callback) {
             $J(this.markers).each(callback);
         },
 
-        updateDiv: function(selectedMarkOffset){
+
+        createDiv: function(marker,insertionIndex){
             var div = this.divContainer;
             var m = this.markers;
             var l = m.length;
             if(div){
-                var textWithFocus;
+                //var textWithFocus;
                 //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){
-                       
-                        //creating marker, see marker.js
-                        //would be better not to copy this code but to
-                        //reference it.
-                        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 = $( div.children()[i] );
-                        text = $( subdiv.children()[1] );
-                        header = $( subdiv.children()[0] );
-                        ok = $( subdiv.children()[2] ); 
-                    }
-                    var timeStr = this.formatMarkerOffset(marker.offset);
 
-                    $( header.children()[1] ).html(timeStr);
-                    //updating text
-                    text.val(marker.desc);
 
-                    if(selectedMarkOffset==marker.offset){
-                        textWithFocus = text;
-                    }
-                    var send = this.sendHTTP;
-                    //set the ok function
-                    ok.click( function(){
-                        marker.desc = text.val();
-                        send(marker);
-                    });
+                var text, timeSpan, closeAnchor, ok, header;
 
+
+                //creating marker, see marker.js
+                //would be better not to copy this code but to
+                //reference it.
+                var label = $J('<span/>')
+                .css({
+                    color:'#fff',
+                    backgroundColor:'#009',
+                    width: '2em',
+                    textAlign: 'center'
+                //,fontFamily: 'monospace'
+                })
+                .html(insertionIndex+1);
+
+                timeSpan = $J('<span/>')
+                .css({
+                    marginLeft:'1ex'
+                });
+
+                closeAnchor = $J('<a/>')
+                .attr("href","#")
+                .html("x")
+                .css({
+                    //fontFamily: 'monospace',
+                    fontWeight:'bold',
+                    ackgroundColor:'#888877',
+                    float:'right',
+                    color:'white'
+                //,backgroundImage:'url("img/cancel.png")'
+                });
+                //.append('</img>').attr("src","img/cancel.png");
+
+                header = $J('<div/>')
+                .append(label)
+                .append(timeSpan)
+                .append(closeAnchor);
+
+                text = $J('<textarea/>')
+                .css({
+                    margin:0,
+                    padding:0,
+                    width:'100%'
+                });
+
+                ok = $J('<a/>')
+                .attr("href","#")
+                .addClass('ts-marker-button')
+                .html("OK");
+
+                //create new div
+                var subdiv = $J('<div/>')
+                .append(header)
+                .append(text)
+                .append(ok)
+                .css({
+                    marginBottom:'1em',
+                    marginTop:'1ex'
+                });
+
+                var timeStr = this.formatMarkerOffset(marker.offset);
+
+                timeSpan.html(timeStr);
+
+                //updating text
+                text.val(marker.desc);
+
+                var send = this.sendHTTP;
+                //set the ok function
+                //we clear all the click event handlers from ok and assign a new one:
+                ok.unbind('click').click( function(){
+                    marker.desc = text.val();
+                    send(marker);
+                });
+                //set the remove action
+                var remove = this.remove;
+                var klass = this;
+                closeAnchor.unbind('click').click( function(){
+                    remove(klass, marker);
+                });
+
+                var divLen = div.children().length;
+                div.append(subdiv);
+                if(insertionIndex==divLen){
+                    div.append(subdiv);
+                }else{
+                    $( div.children()[insertionIndex] ).before(subdiv);
                 }
-                if(textWithFocus){
-                    textWithFocus.focus();
-                }
+                //if(textWithFocus){
+                text.focus();
+                // }
+                return subdiv;
             }
         },
+        
 
         formatMarkerOffset: function(markerOffset){
             //marker offset is in float format second.decimalPart
@@ -276,16 +318,49 @@ TimeSide(function($N, $J) {
 
             //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 isNew = marker.isNew;
+            var method = isNew ? "telemeta.add_marker" : "telemeta.update_marker";
             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"}';
+            marker.offset+'","description": "'+marker.desc+'"}], "method":"'+method+'","jsonrpc":"1.0"}';
 
 
             $.ajax({
                 type: "POST",
                 url: 'http://localhost:9000/json/',
                 contentType: "application/json",
-                data: data2send
+                data: data2send,
+                success: function(){
+                    if(isNew){
+                        marker.isNew = false;
+                    }
+                }
+            });
+        },
+
+        removeHTTP: 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);
+            var public_id = marker.id;
+            //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":["'+public_id+'"], "method":"telemeta.del_marker","jsonrpc":"1.0"}';
+            //            var map = this.cfg.map;
+            //            var me = this;
+            $.ajax({
+                type: "POST",
+                url: 'http://localhost:9000/json/',
+                contentType: "application/json",
+                data: data2send,
+                dataType: "json"
+            
             });
+            var g = 9;
         }
 
     });
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index 974b6b18..5ed93fb6 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -64,10 +64,9 @@
             </div>
         </div>
 
-        <div class="markers_div" id="markers_div_id"></div>
-        <div id="item_edit">
-            <div class="item_visualization" id="item_markers_id">
-            </div>
+        
+       
+            
             <div class="item_visualization" id="item_visualization_id">
                 <form id="visualizer_id_form" method="get" action="#">
                     <!--
@@ -87,6 +86,8 @@
                     <input type="submit" value="Set" />
                 </form>
 
+                <div class="markers_div" id="markers_div_id"></div>
+                
                 <div class="analyzer">
                     <table width="100%">
                         <tr class="analyzer-title">
@@ -109,6 +110,8 @@
                         {% endfor %}
                     </table>
                 </div>
+
+                
                 <!--
                         <form method="get" action="#">
                             <p>&nbsp;Vamp plugin analysis</p>
@@ -122,7 +125,7 @@
                         </form>
                 -->
             </div>
-        </div>
+        
         {% if audio_export_enabled %}
         <div class="exporter">
             <p>{% trans "Download:" %}
diff --git a/telemeta/web/base.py b/telemeta/web/base.py
index da1ee8dc..2fe46e31 100644
--- a/telemeta/web/base.py
+++ b/telemeta/web/base.py
@@ -597,8 +597,11 @@ class WebView(object):
 
     @jsonrpc_method('telemeta.del_marker')
     def del_marker(request, public_id):
-        m = MediaItemMarker.objects.get(public_id=public_id)
-        m.delete()
+#        m = MediaItemMarker.objects.get(public_id=public_id)
+#        m.delete()
+        m = MediaItemMarker.objects.filter(public_id=public_id)
+        for marker in m:
+            marker.delete()
         
     @jsonrpc_method('telemeta.get_markers')
     def get_markers(request, item_id):
-- 
2.39.5