From f6a8be8006af1298d33fcf4318a411d18cd7b4b6 Mon Sep 17 00:00:00 2001
From: yomguy <yomguy@parisson.com>
Date: Tue, 15 Mar 2011 15:17:12 +0000
Subject: [PATCH] add divmarker.js

---
 timeside/ui/src/divmarker.js | 266 +++++++++++++++++++++++++++++++++++
 1 file changed, 266 insertions(+)
 create mode 100644 timeside/ui/src/divmarker.js

diff --git a/timeside/ui/src/divmarker.js b/timeside/ui/src/divmarker.js
new file mode 100644
index 0000000..a38f0ff
--- /dev/null
+++ b/timeside/ui/src/divmarker.js
@@ -0,0 +1,266 @@
+/**
+ * TimeSide - Web Audio Components
+ * Copyright (c) 2008-2009 Samalyse
+ * Author: Riccardo Zaccarelli
+ * License: GNU General Public License version 2.0
+ */
+
+TimeSide(function($N, $J) {
+
+    $N.Class.create("DivMarker", $N.Core, {
+        //static constant variables to retireve the Marker Html Elements (MHE)
+        //to be used with the function below getHtmElm, eg:
+        //getHtmElm(marker, this.MHE_OFFSET_LABEL)
+        e_indexLabel:null,
+        e_descriptionText:null,
+        e_offsetLabel:null,
+        e_deleteButton:null,
+        e_okButton:null,
+        e_header:null,
+        e_editButton:null,
+        e_titleText:null,
+        me:null,
+        markerMap:null,
+        markerIndex:-1,
+        //static constant variables for edit mode:
+        EDIT_MODE_SAVED:0,
+        EDIT_MODE_EDIT_TEXT:1,
+        EDIT_MODE_MARKER_MOVED:2,
+
+        initialize: function($super, markermap) {
+            $super();
+            //sets the fields required???? see ruler.js createPointer
+            this.configure({
+                //why instantiating a variable to null?
+                parent: [null, 'required']
+            });
+            this.cfg.parent = $J("#markers_div_id");
+            this.markerMap = markermap;
+            this.me = this.createDiv();
+        //set the index insert the div and set events on elements
+        //this.setIndex(insertionIndex);
+        },
+
+
+        //creates a new div. By default, text is hidden and edit button is visible
+        createDiv: function(){
+            
+            var div = this.cfg.parent;
+            var markerDiv;
+            if(div){
+                
+
+                //var indexLabel, descriptionText, offsetLabel, deleteButton, okButton, header, editButton, descriptionLabel;
+                var margin = '1ex';
+
+                //index label
+                this.e_indexLabel = $J('<span/>')
+                .addClass('markersdivIndexLabel')
+                .addClass('markersdivTopElement');
+
+                //offset label
+                this.e_offsetLabel = $J('<span/>')
+                .addClass('markersdivTopElement')
+                .addClass('markersdivOffset')
+                
+
+                //title text
+                this.e_titleText = $J('<input/>')
+                .attr('type','text')
+                .addClass('markersdivTitle')
+                .addClass('markersdivTopElement')
+                
+
+                //close button
+                this.e_deleteButton = $J('<a/>')
+                .addClass('markersdivDelete')
+                .addClass('markersdivTopElement')
+                .attr('title','delete marker')
+                .attr("href","#")
+               
+                //edit button
+                this.e_editButton = $J('<a/>')
+                .addClass('roundBorder4')
+                .addClass('markersdivEdit')
+                .addClass('markersdivTopElement')
+                .attr('title','edit marker description')
+                .attr("href","#")
+                .html('<span>EDIT</span>')
+                                
+
+                //add all elements to header:
+                this.e_header = $J('<div/>')
+                .append(this.e_indexLabel)
+                .append(this.e_offsetLabel)
+                .append(this.e_titleText)
+                .append(this.e_deleteButton)
+                .append(this.e_editButton);
+                
+                //description text
+                this.e_descriptionText = $J('<textarea/>')
+                .addClass('markersdivDescription')
+
+                //ok button
+                this.e_okButton = $J('<a/>')
+                .attr('title','save marker description and offset')
+                .addClass('roundBorder6')
+                .addClass('markersdivSave')
+                .attr("href","#")
+                .html("OK");
+                //                .append($J('<img/>').attr("src","/images/marker_ok_green.png").css({
+                //                    width:'3em'
+                //                }))
+
+                //create marker div and append all elements
+                markerDiv = $J('<div/>')
+                .append(this.e_header)
+                .append(this.e_descriptionText)
+                .append(this.e_okButton)
+                .addClass('roundBorder8')
+                .addClass('markerdiv');
+
+            }
+            return markerDiv;
+        },
+
+        setIndex: function(index){
+            var map = this.markerMap;
+            var marker = map.get(index);
+            this.e_indexLabel.attr('title',marker.toString());
+            this.e_indexLabel.html(index+1);
+            this.e_offsetLabel.html(this.formatMarkerOffset(marker.offset));
+            if(index!=this.markerIndex){ 
+                //add it to the parent div or move the div
+                if(this.markerIndex!=-1){
+                    //here is the case when the div is already added, so we have to remove it from the parent
+                    //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.
+                    this.me.detach();
+                    //note that we might have index!=this.markerIndex without the need to detach the div
+                    //we leave this code to be sure, especially on loading 
+                }else{
+                    //div is not added: set description and title
+                    this.e_descriptionText.val(marker.desc ? marker.desc : "");
+                    this.e_titleText.val(marker.title ? marker.title : "");
+                }
+                //the div is still to be added
+                var divLen = this.cfg.parent.children().length;
+                //this.cfg.parent.append(this.me);
+                if(index==divLen){
+                    this.cfg.parent.append(this.me);
+                }else{
+                    $( this.cfg.parent.children()[index] ).before(this.me);
+                }
+            }
+            
+            if(!marker.isEditable || marker.isSaved){
+                this.e_okButton.hide();
+                this.e_descriptionText.attr('readonly','readonly').addClass('markersdivUneditable');
+                this.e_titleText.attr('readonly','readonly').addClass('markersdivUneditable');
+                if(!marker.isEditable){
+                    this.e_deleteButton.hide();
+                    this.e_editButton.hide();
+                    return;
+                }
+            }
+            if(index!=this.markerIndex){
+                //update events associated to anchors
+                this.markerIndex = index;
+                var remove = map.remove;
+                this.e_deleteButton.unbind('click').click( function(){
+                    remove.apply(map,[index]);
+                    return false; //avoid scrolling of the page on anchor click
+                }).show();
+
+                var dText = this.e_descriptionText;
+                var tText  = this.e_titleText;
+                var okB = this.e_okButton;
+                this.e_editButton.unbind('click').click( function(){
+                    dText.removeAttr('readonly').removeClass('markersdivUneditable').show();
+                    tText.removeAttr('readonly').removeClass('markersdivUneditable').show();
+                    okB.show();
+                    $(this).hide();
+                    tText.select();
+                    return false; //avoid scrolling of the page on anchor click
+                });
+                var eB = this.e_editButton;
+                //action for ok button
+                this.e_okButton.unbind('click').click( function(){
+                    //if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below
+                    marker.desc = dText.val();
+                    marker.title = tText.val();
+                    map.sendHTTP(marker,
+                    
+                    function(){
+                    dText.attr('readonly','readonly').addClass('markersdivUneditable');
+                    tText.attr('readonly','readonly').addClass('markersdivUneditable');
+                    eB.show();
+                    okB.hide();
+                    },
+                    true
+                    );
+                    //}
+                    //                func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText,
+                    //                    descriptionLabel, okButton]);
+                    return false; //avoid scrolling of the page on anchor click
+                });
+                //set the title text width. This method
+                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_indexLabel.outerWidth(true) - this.e_offsetLabel.outerWidth(true) -
+                this.e_editButton.outerWidth(true) - this.e_deleteButton.outerWidth(true);
+                tText.css('width',space+'px');
+            }
+            if(!marker.isSaved){
+                this.e_editButton.trigger('click');
+            }
+            
+        },
+
+        remove: function(){
+            this.me.remove();
+            this.e_indexLabel = null;
+            this.e_descriptionText=null;
+            this.e_offsetLabel=null;
+            this.e_deleteButton=null;
+            this.e_okButton=null;
+            this.e_header=null;
+            this.e_editButton=null;
+            this.e_titleText=null;
+            this.me=null;
+        },
+
+        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<10 ? "0"+msec : msec );
+            return format;
+        }
+   
+
+
+    });
+
+    $N.notifyScriptLoad();
+
+});
+
+
+Object.prototype.toString = function(){
+    var s="";
+    for(var k in this){
+        s+=k+": "+this[k]+"\n";
+    }
+    return s;
+}
\ No newline at end of file
-- 
2.39.5