From 80713ad063bdaf24248aeaeb5b8e8287857fcc56 Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Wed, 30 Mar 2011 19:27:49 +0200
Subject: [PATCH] fixed: 1) playlist remove in home page, 2) item public_id
 retrieval (by global js var, formerly by url address) 3) json mathod in
 markers (now they all call global function json), 4)restored red pointer in
 the player to fit the overall page color (now it's just a little lighter to
 contrast with the markers) 5)reduced padding in marker divs (still minor
 alignment problems though) 6) added icon add_to_playlist in the div marker
 (still to be bound to an event, which needs to change the implementation of
 loading the playlist from django)

---
 telemeta/htdocs/css/telemeta.css              | 23 +++--
 telemeta/htdocs/js/application.js             |  4 +-
 telemeta/htdocs/js/playerUtils.js             |  1 +
 telemeta/htdocs/timeside/skins/lab/style.css  |  4 +-
 telemeta/htdocs/timeside/src/divmarker.js     | 33 ++++---
 telemeta/htdocs/timeside/src/markermap.js     | 94 ++++---------------
 telemeta/htdocs/timeside/src/timeside.js      |  6 +-
 telemeta/templates/telemeta_default/home.html |  2 +-
 .../telemeta_default/mediaitem_detail.html    |  4 +-
 9 files changed, 68 insertions(+), 103 deletions(-)

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index fd7c0cfb..d0a779b4 100644
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -924,7 +924,7 @@ a.image-link {
     font-style: italic;
 }
 .markersdivTopElement{
-    /*vertical-align:middle;*/
+   /* vertical-align:middle;*/
 }
 .markersdivTitle{
     font-weight:bold;
@@ -955,13 +955,21 @@ a.image-link {
 .markersdivEdit span{
     position:absolute;top:-0.75ex;left:3ex;
 }
-.markersdivDelete{
+.markersdivDelete, .markersdivAddPlaylist{
     border:0px;
     float:right;
     background-image: url('/images/del_marker.png');
     background-repeat: no-repeat;
     background-position: top center;
-    padding:1ex 1ex 1ex 1ex;/*top right bottom left. The padding is only to show the element */
+    /*padding:1ex 1ex 1ex 1ex; top right bottom left. The padding is only to show the element */
+    width: 15px;
+    height:15px;
+}
+.markersdivDelete{
+    background-image: url('/images/del_marker.png');
+}
+.markersdivAddPlaylist{
+    background-image: url('/images/add_playlist_marker.png');
 }
 .markersdivDescription{
     margin:0ex 0px 0ex 0px; /*top right bottom left*/
@@ -974,10 +982,13 @@ a.image-link {
     background-color: #087714;
     color: #fff;
     font-weight: bold;
-    padding: 0.3em 0.8em 0.3em 0.8em;
-    padding:5px 10px 5px 26px;
+    /*padding: 0.3em 0.8em 0.3em 0.8em;
+    padding:5px 10px 5px 26px;*/
+    display:block;
+    width: 4ex;
+    padding: 1ex .5ex 1ex 3.5ex;
     background-repeat: no-repeat;
-    background-position: 1ex .5ex;
+    background-position: 1ex 1ex;
     -moz-border-radius: 1ex 1ex 1ex 1ex;
     -webkit-border-radius: 1ex 1ex 1ex 1ex;
     border-radius: 1ex 1ex 1ex 1ex;
diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js
index 12442a4d..b2f62ed2 100644
--- a/telemeta/htdocs/js/application.js
+++ b/telemeta/htdocs/js/application.js
@@ -108,14 +108,14 @@ $(document).ready(function() {
 //
 //method: the json method, eg "telemeta.update_marker". See base.py
 //
-//onSuccesFcn(data, textStatus, jqXHR) OPTIONAL
+//onSuccesFcn(data, textStatus, jqXHR) OPTIONAL --IF MISSING, NOTHING HAPPENS --
 //   A function to be called if the request succeeds.
 //   The function gets passed three arguments:
 //      The data returned from the server, formatted according to the dataType parameter;
 //      a string describing the status;
 //      and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object
 //
-//onErrorFcn(jqXHR, textStatus, errorThrown) OPTIONAL. --If missing, default dialog error is shown--
+//onErrorFcn(jqXHR, textStatus, errorThrown) OPTIONAL. --IF MISSING, THE DEFAULT ERROR DIALOG IS SHOWN--
 //    A function to be called if the request fails.
 //    The function receives three arguments:
 //      The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object,
diff --git a/telemeta/htdocs/js/playerUtils.js b/telemeta/htdocs/js/playerUtils.js
index a6f30038..ce50fc01 100644
--- a/telemeta/htdocs/js/playerUtils.js
+++ b/telemeta/htdocs/js/playerUtils.js
@@ -99,6 +99,7 @@ function load_player(duration) {
     soundManager.onready(function() {
         // SM2 is ready to go!
         //alert('okkkk');
+        map.debug('loaded sound manager');
         soundEngineReady = true;
         load_sound(); // soundManager.createSound(), etc.
     });
diff --git a/telemeta/htdocs/timeside/skins/lab/style.css b/telemeta/htdocs/timeside/skins/lab/style.css
index 03365001..8afcb591 100755
--- a/telemeta/htdocs/timeside/skins/lab/style.css
+++ b/telemeta/htdocs/timeside/skins/lab/style.css
@@ -25,11 +25,11 @@
     background: #e7e7e7;
 }
 .ts-pointer{
-    border: 1px solid #B0C4DE !important;
+    border: 1px solid #a10006 !important;
      -moz-border-radius: .5ex !important;
     -webkit-border-radius: .5ex  !important;
     border-radius: .5ex !important;
-    color: #006666 !important;
+    color: #6A0307 !important;
 
 }
 .ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label {
diff --git a/telemeta/htdocs/timeside/src/divmarker.js b/telemeta/htdocs/timeside/src/divmarker.js
index 23ef2c26..64e2b053 100644
--- a/telemeta/htdocs/timeside/src/divmarker.js
+++ b/telemeta/htdocs/timeside/src/divmarker.js
@@ -19,6 +19,7 @@ TimeSide(function($N, $J) {
         e_header:null,
         e_editButton:null,
         e_titleText:null,
+        e_addplaylistButton:null,
         me:null,
         markerMap:null,
 
@@ -51,22 +52,28 @@ TimeSide(function($N, $J) {
                 //offset label
                 this.e_offsetLabel = $J('<span/>')
                 .addClass('markersdivTopElement')
-                .addClass('markersdivOffset')
+                .addClass('markersdivOffset');
                 
 
                 //title text
                 this.e_titleText = $J('<input/>')
                 .attr('type','text')
                 .addClass('markersdivTitle')
+                .addClass('markersdivTopElement');
+                
+                //add playlist button
+                this.e_addplaylistButton = $J('<a/>')
+                .addClass('markersdivAddPlaylist')
                 .addClass('markersdivTopElement')
+                .attr('title','add to playlist')
+                .attr("href","#");
                 
-
                 //close button
                 this.e_deleteButton = $J('<a/>')
                 .addClass('markersdivDelete')
                 .addClass('markersdivTopElement')
                 .attr('title','delete marker')
-                .attr("href","#")
+                .attr("href","#");
                
                 //edit button
                 this.e_editButton = $J('<a/>')
@@ -75,16 +82,16 @@ TimeSide(function($N, $J) {
                 .addClass('markersdivTopElement')
                 .attr('title','edit marker description')
                 .attr("href","#")
-                .html('<span>EDIT</span>')
+                .html('<span>EDIT</span>');
                                 
-
                 //add all elements to header:
-                this.e_header = $J('<div/>').css('margin','1ex 0ex 0.5ex 0ex')
+                this.e_header = $J('<div/>') //.css('margin','0.1ex 0ex 0.5ex 0ex')
                 .append(this.e_indexLabel)
                 .append(this.e_offsetLabel)
                 .append(this.e_titleText)
                 .append(this.e_deleteButton)
-                .append(this.e_editButton);
+                .append(this.e_editButton)
+                .append(this.e_addplaylistButton);
                 
                 //description text
                 this.e_descriptionText = $J('<textarea/>')
@@ -97,17 +104,16 @@ TimeSide(function($N, $J) {
                 .attr("href","#")
                 .html("OK");
                 
-
                 //create marker div and append all elements
                 markerDiv = $J('<div/>')
                 .append(this.e_header)
                 .append(this.e_descriptionText)
                 //.append(this.e_okButton)
-                .append($J('<div/>').css('margin','1ex 0ex 1ex 0ex').append(this.e_okButton))
+                .append($J('<div/>') //.css('margin','1ex 0ex 0.1ex 0ex')
+                .append(this.e_okButton))
                 .addClass('roundBorder8')
                 .addClass('markerdiv');
-
-            //set default visibility
+                //set default visibility
 
             }
             return markerDiv;
@@ -146,6 +152,7 @@ TimeSide(function($N, $J) {
             this.e_okButton.hide();
             this.e_editButton.show();
             this.e_deleteButton.show();
+            this.e_addplaylistButton.show();
             this.e_descriptionText.attr('readonly','readonly').addClass('markersdivUneditable');
             this.e_titleText.attr('readonly','readonly').addClass('markersdivUneditable');
             
@@ -154,10 +161,11 @@ TimeSide(function($N, $J) {
                 this.e_editButton.hide();
                 this.e_deleteButton.hide();
                 //we unbind events to be sure
+                this.e_addplaylistButton.unbind('click').hide();
                 this.e_okButton.unbind('click')
                 this.e_deleteButton.unbind('click').hide();
                 this.e_editButton.unbind('click').hide();
-                return;
+                return false;
             }
             
             var remove = map.remove;
@@ -239,6 +247,7 @@ TimeSide(function($N, $J) {
                 var w = tText.parent().width();
                 w-=tText.outerWidth(true)-tText.width(); //so we consider also tText margin border and padding
                 var space = w
+                - (this.e_addplaylistButton.is(':visible') ? this.e_addplaylistButton.outerWidth(true) : 0)
                 - (this.e_indexLabel.is(':visible') ? this.e_indexLabel.outerWidth(true) : 0)
                 - (this.e_offsetLabel.is(':visible') ? this.e_offsetLabel.outerWidth(true) : 0)
                 - (this.e_editButton.is(':visible') ? this.e_editButton.outerWidth(true) : 0)
diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index 91422552..7ab4d0df 100644
--- a/telemeta/htdocs/timeside/src/markermap.js
+++ b/telemeta/htdocs/timeside/src/markermap.js
@@ -162,41 +162,18 @@ TimeSide(function($N, $J) {
        
 
         sendHTTP: function(marker, functionOnSuccess, showAlertOnError){
-
-            //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"}';
-
-           
-            var isSaved = marker.isSavedOnServer;
+            var itemid = ITEM_PUBLIC_ID;
+             var isSaved = marker.isSavedOnServer;
             var method = isSaved ? "telemeta.update_marker" : "telemeta.add_marker";
-            
-            var s = this.jsonify;
-            
-            //server problem on zero. offset of zero must be converted to 0.0
-            var offset = marker.offset;
-            if(!(offset)){
-                offset = "0.0";
-            }
-            var data2send = '{"id":"jsonrpc", "params":[{"item_id":"'+ s(itemid)+
-            '", "public_id": "'+s(marker.id)+'", "time": "'+s(offset)+
-            '", "author": "'+s(marker.author)+
-            '", "title": "'+s(marker.title)+
-            '","description": "'+s(marker.desc)+'"}], "method":"'+method+'","jsonrpc":"1.0"}';
-
-            $.ajax({
-                type: "POST",
-                url: '/json/',
-                contentType: "application/json",
-                data: data2send,
-                success: function(){
+            var param = {
+                'item_id':itemid,
+                'public_id': marker.id,
+                'time':marker.offset,
+                'author': marker.author,
+                'title':marker.title,
+                'description':marker.desc
+            };
+            var success = function(){
                     if(!isSaved){
                         marker.isSavedOnServer = true;
                         marker.isModified = false;
@@ -204,53 +181,16 @@ TimeSide(function($N, $J) {
                     if(functionOnSuccess){
                         functionOnSuccess();
                     }
-                },
-                error: function(jqXHR, textStatus, errorThrown){
-                    if(showAlertOnError){
-                        var details = "\n(no further info available)";
-                        if(jqXHR) {
-                            details="\nThe server responded witha status of "+jqXHR.status+" ("+
-                                jqXHR.statusText+")\n\nDetails (request responseText):\n"+jqXHR.responseText;
-                        }
-                        alert("ERROR: Failed to save marker"+details);
-                    }
-                }
-            });
-
+                };
+            //json(param,method,onSuccessFcn,onErrorFcn){
+            json([param], method, success);
             
         },
 
-        jsonify: function(string){
-            var s = string;
-            if(typeof string == "string"){
-                s = string.replace(/\\/g,"\\\\")
-                .replace(/\n/g,"\\n")
-                .replace(/"/g,"\\\"");
-            }
-            return s;
-        },
         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: '/json/',
-                contentType: "application/json",
-                data: data2send,
-                dataType: "json"
-            
-            });
-            var g = 9;
+             var public_id = marker.id
+            //json(param,method,onSuccessFcn,onErrorFcn){
+            json([public_id], "telemeta.del_marker");
         }
 
     });
diff --git a/telemeta/htdocs/timeside/src/timeside.js b/telemeta/htdocs/timeside/src/timeside.js
index 25c62276..beb915eb 100644
--- a/telemeta/htdocs/timeside/src/timeside.js
+++ b/telemeta/htdocs/timeside/src/timeside.js
@@ -27,7 +27,7 @@ TimeSide(function($N, $J) {
     $N.isLoading = false;
     $N.onLoadCallbacks = [];
     $N.cssPrefix = 'ts-';
-    $N.debugging = false;
+    $N.debugging = true;
 
     $J(document).ready(function () {
         $N.isDomLoaded = true;
@@ -92,8 +92,9 @@ TimeSide(function($N, $J) {
     $N.load = function(callback) {
         $N.domReady(function() {
             if ($N.isLoaded) {
-                if (callback)
+                if (callback){
                     callback();
+                }
             } else {
                 if (callback)
                     $N.onLoadCallbacks.push(callback);
@@ -119,6 +120,7 @@ TimeSide(function($N, $J) {
                                 $N.isLoading = false;
                                 $J($N.onLoadCallbacks).each(function(i, callback) {
                                     callback();
+                                    //console.log(callback.toString());
                                 });
                             });
                         });
diff --git a/telemeta/templates/telemeta_default/home.html b/telemeta/templates/telemeta_default/home.html
index 3c0dcae3..ce33135e 100644
--- a/telemeta/templates/telemeta_default/home.html
+++ b/telemeta/templates/telemeta_default/home.html
@@ -73,7 +73,7 @@
           <td style="border-bottom:1px solid #6A0307;color:#6A0307;font-size: 100%">{{ playlist.playlist.title }}</td>
           <td style="width:33ex; padding-right: 0; border-bottom:1px solid #6A0307; text-align:right">
             <a href="{% url telemeta-playlist-csv-export playlist.playlist.public_id %}" class="component_icon button icon_csv">CSV</a>
-            <a href="#" id="{{playlist.playlist.public_id}}" onclick="playlist.remove(this.id);return false;" class="component_icon button icon_cancel">{% trans "Delete" %}</a>
+            <a href="#" id="{{playlist.playlist.public_id}}" onclick="playlistUtils.remove(this.id);return false;" class="component_icon button icon_cancel">{% trans "Delete" %}</a>
           </td>
       </tr>
   </table>
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index 65ce4749..ec42812b 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -30,7 +30,9 @@
         $('#_add_to_playlist').click(function(e){return popup.show(content,e)});
     });
 
-
+    {% if item %}
+        var ITEM_PUBLIC_ID = '{{item.public_id}}';
+    {% endif %}
     
 </script>
 
-- 
2.39.5