]> git.parisson.com Git - telemeta.git/commitdiff
implemented popup onmouseover. It works, Still to be debugged (conflicts while playin...
authorriccardo <riccardo@parisson.com>
Fri, 17 Jun 2011 19:01:23 +0000 (21:01 +0200)
committerriccardo <riccardo@parisson.com>
Fri, 17 Jun 2011 19:01:23 +0000 (21:01 +0200)
telemeta/htdocs/js/playerLoader.js
telemeta/htdocs/timeside/js/player.js
telemeta/htdocs/timeside/js/ruler.js
telemeta/htdocs/timeside/js/rulermarker.js
telemeta/htdocs/timeside/skins/lab/style.css

index 9f9808e7493195000b98cdeb119a966921e20cfc..33c2f0324333ddc18b96f0e923d34f7e10d5d0ef 100644 (file)
@@ -402,14 +402,17 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu
                                 player.bind('markerCrossed',popupShowFunction);
                             }else{
                                 var popupTimeoutId = undefined;
-                                var cT = clearTimeout;
+                                var clearHidePopupTimeout = clearTimeout;
                                 player.bind('markerCrossed',function(data){
                                     if(popupTimeoutId !== undefined){
-                                        cT(popupTimeoutId);
+                                        clearHidePopupTimeout(popupTimeoutId);
                                     }
                                     popupTimeoutId=undefined;
                                     popupShowFunction(data);
-                                    
+
+                                    if(POPUP_TIMEOUT<0){
+                                        return;
+                                    }
                                     var next = data.nextMarkerTimeInterval ? data.nextMarkerTimeInterval[0] :undefined;
                                     if(next === undefined || next-data.currentSoundPosition > POPUP_TIMEOUT){
                                         popupTimeoutId = popupdiv.setTimeout('close',POPUP_TIMEOUT*1000);
@@ -427,6 +430,30 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu
                                 //consolelog(data.marker.title);
                             
                                 });
+                                //now bind mouse events
+                                player.bind('markerMouseEvent', function(data){
+                                    if(data.index<0){ //is the pointer
+                                        return;
+                                    }
+                                    if(popupTimeoutId !== undefined){
+                                        clearHidePopupTimeout(popupTimeoutId);
+                                    }
+                                    if(data.eventName === 'dragstart' || data.eventName === 'mouseleave'){
+                                        if(popupdiv.isShowing()){
+                                            popupdiv.close();
+                                        }
+                                        return;
+                                    }
+                                    if(data.eventName !== 'mouseenter'){
+                                        return;
+                                    }
+                                    popupShowFunction(data);
+                                    if(POPUP_TIMEOUT<0){
+                                        return;
+                                    }
+                                    popupTimeoutId = popupdiv.setTimeout('close',POPUP_TIMEOUT*1000);
+                                });
+
                             }
                         }
                     }
index df4b8b5b2b5311b1ad6291ca4e55389539b48ff5..dccd78450cf2c3898f4964a0e639f98e33fe0b60 100644 (file)
@@ -67,9 +67,9 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         
         this.soundPosition =  sound.position ? this.toSec(sound.position) : 0;
         //public methods: returns the sound position
-        this.getSoundPosition = function(){
-            return this.soundPosition;
-        };
+//        this.getSoundPosition = function(){
+//            return this.soundPosition;
+//        };
 
 
         //       if(sound.readyState != 3){
@@ -210,7 +210,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
 
         if(canAddMarkers){
             setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
-                me.addMarker(me.getSoundPosition());
+                me.addMarker(me.soundPosition);
                 return false;
             });
         }else{
@@ -293,6 +293,15 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         this.getRuler = function(){
             return ruler;
         }
+        //bind mouse events:
+        ruler.bind('markermouseevent', function(data){
+           consolelog(data.eventName);
+           consolelog(data);
+           var idx = data.index;
+           data.marker = idx > -1 ? me.getMarker(idx) : undefined;
+           me.fire('markerMouseEvent',data);
+        });
+
 
         //setting image size (if provided) and resize player. Note that _setImageSize (with underscore) is intended to be
         //a private method (faster). setImageSize (without underscore) is the public method to use outside of player object
@@ -870,7 +879,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         var markers = map.toArray();
         var len = markers.length;
         var offset =  this.getSoundDuration();
-        var position = this.getSoundPosition(); //parseFloat(this.getSoundPosition());
+        var position = this.soundPosition; //parseFloat(this.getSoundPosition());
         var idx = map.insertionIndex(position);
         if(idx<0){
             idx = -idx-1; //cursor is not on a a marker, get the insertion index
@@ -893,7 +902,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         var map = this.getMarkerMap();
         var markers = map.toArray();
         var offset =  0;
-        var position = this.getSoundPosition(); //parseFloat(this.getSoundPosition());
+        var position = this.soundPosition; //parseFloat(this.getSoundPosition());
         var idx = map.insertionIndex(position);
         if(idx<0){
             idx = -idx-1; //cursor is not on a a marker, get the insertion index
@@ -944,6 +953,13 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         }
     },
 
+    each: function(){
+      var map = this.getMarkerMap();
+        if(map){
+            map.each.apply(map,arguments);
+        }
+    },
+
     newMarker: function(offset){
         return {
             offset:offset
@@ -992,8 +1008,10 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         var map = this.getMarkerMap();
         //var mapUI = this.getMarkersUI();
         var ruler = this.getRuler();
-        map.clear();
-        ruler.clear();
+
+        //TODO: think about if clearing or not: we assign some bindings in the constructor, too:
+//        map.clear();
+//        ruler.clear();
        
   
         var rulerAdd = ruler.add;
@@ -1039,7 +1057,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         //and now add a binding to the map when we move a marker:
           
         map.bind('move', function(data){
-            consolelog(data);
             var from = data.fromIndex;
             var to = data.toIndex;
             ruler.move.apply(ruler,[from,to,data.marker.offset]);
index 36f1bb24351818817f6dc51212c38e562c552d4d..cf884672c763226ebc5450a04312d986b2a83625 100644 (file)
@@ -55,33 +55,33 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({
             return rulerContainer;
         }
     },
-//    init: function(viewer, soundDuration){
-//        this._super();
-//        var cssPref = this.cssPrefix;
-//
-//        this.getSoundDuration= function(){
-//            return soundDuration;
-//        };
-//
-//        var waveContainer = viewer.find('.' + cssPref + 'image-canvas');
-//        this.debug( 'WAVECONTAINER?? LENGTH='+ waveContainer.length);
-//        this.getWaveContainer =function(){
-//            return waveContainer;
-//        };
-//        //TODO: we dont need containerWiever here!!!
-//        //better: it is usefult only for the canvas defined below. However...
-//        this.getContainerWidth =function(){
-//            return waveContainer.width();
-//        };
-//        this.debug( 'init ruler: container width '+this.getContainerWidth());
-//
-//        //private function used in resize() defined below
-//        var container = viewer.find('.' + cssPref + 'ruler');
-//
-//        this.getRulerContainer = function(){
-//            return container;
-//        }
-//    },
+    //    init: function(viewer, soundDuration){
+    //        this._super();
+    //        var cssPref = this.cssPrefix;
+    //
+    //        this.getSoundDuration= function(){
+    //            return soundDuration;
+    //        };
+    //
+    //        var waveContainer = viewer.find('.' + cssPref + 'image-canvas');
+    //        this.debug( 'WAVECONTAINER?? LENGTH='+ waveContainer.length);
+    //        this.getWaveContainer =function(){
+    //            return waveContainer;
+    //        };
+    //        //TODO: we dont need containerWiever here!!!
+    //        //better: it is usefult only for the canvas defined below. However...
+    //        this.getContainerWidth =function(){
+    //            return waveContainer.width();
+    //        };
+    //        this.debug( 'init ruler: container width '+this.getContainerWidth());
+    //
+    //        //private function used in resize() defined below
+    //        var container = viewer.find('.' + cssPref + 'ruler');
+    //
+    //        this.getRulerContainer = function(){
+    //            return container;
+    //        }
+    //    },
 
     //colors:{}, //used to draw rulermarkers
     
@@ -293,9 +293,9 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({
         var pixelOffset = this.toPixelOffset(newOffset);
         if(rulermarker.positionInPixels != pixelOffset){ //should not be the case if this method is called from a mouse event
             rulermarker.move(pixelOffset);
-//            consolelog('moved');
-//        }else{
-//            consolelog('nothing to move');
+        //            consolelog('moved');
+        //        }else{
+        //            consolelog('nothing to move');
         }
 
         //this.debug('ruler.move: [from:'+from+', to:'+to+', real:'+newIndex+']');
@@ -377,28 +377,56 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({
 
         //flag to be set to true when moving a poiner from mouse.
         //when true, movePointer (see below) has no effect
-        this.isPointerMovingFromMouse = false;
+        //this.isPointerMovingFromMouse = false;
         //functions to set if we are moving the pointer (for player when playing)
+        var mme = 'markermouseevent';
+        lbl.bind('mouseenter.'+eventId,function(evt){
+            me.fire(mme,{
+                eventName: 'mouseenter',
+                eventObj: evt,
+                index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex()
+            });
+        });
+        lbl.bind('mouseleave.'+eventId,function(evt){
+            me.fire(mme,{
+                eventName: 'mouseleave',
+                eventObj: evt,
+                index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex()
+            });
+        });
 
         lbl.bind('mousedown.'+eventId,function(evt) {
-            
-            if(markerClass=='pointer'){
-                me.isPointerMovingFromMouse = true;
-            }
+            pointerOrMarker.isMovedByMouse = true;
+
+           
+            //            if(markerClass=='pointer'){
+            //                me.isPointerMovingFromMouse = true;
+            //            }
+
+            var launchDragStart = true;
 
             var startX = evt.pageX; //lbl.position().left-container.position().left;
             var startPos = lbl.position().left+lbl.width()/2;
             
             evt.stopPropagation(); //dont notify the ruler or other elements;
             var newPos = startPos;
-            doc.bind('mousemove.'+eventId, function(evt){
-                var x = evt.pageX;
+            doc.bind('mousemove.'+eventId, function(evt_){
+                var x = evt_.pageX;
                 newPos = startPos+(x-startX);
                 pointerOrMarker.move(newPos);
                 //update the text if pointer
                 if(markerClass=='pointer'){
                     pointerOrMarker.setText(me.makeTimeLabel(me.toSoundPosition(newPos)));
                 }
+
+                if(launchDragStart){
+                    launchDragStart = false;
+                    me.fire(mme,{
+                        eventName: 'dragstart',
+                        eventObj: evt_,
+                        index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex()
+                    });
+                }
                 return false;
                 
             });
@@ -418,12 +446,29 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({
                     'markerClass':markerClass
                 };
                 me.fire('markermoved',data);
-                if(markerClass=='pointer'){
-                    me.isPointerMovingFromMouse = false;
-                }
+
+                pointerOrMarker.isMovedByMouse = false;
+                //                if(markerClass=='pointer'){
+                //                    me.isPointerMovingFromMouse = false;
+                //                }
+
+                me.fire(mme,{
+                    eventName: 'mouseup',
+                    eventObj: evt_,
+                    index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex()
+                });
+
                 return false;
             };
             doc.bind('mouseup.'+eventId, mouseup);
+
+
+            me.fire(mme,{
+                eventName: 'mousedown',
+                eventObj: evt,
+                index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex()
+            });
+
             
             return false;
         });
@@ -437,7 +482,7 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({
     //soundPosition is in seconds (float)
     movePointer : function(soundPosition) {
         var pointer = this.getPointer();
-        if (pointer && !this.isPointerMovingFromMouse) {
+        if (pointer && !pointer.isMovedByMouse) {
             var pixelOffset = this.toPixelOffset(soundPosition);
             //first set text, so the label width is set, then call move:
             pointer.setText(this.makeTimeLabel(soundPosition));
index 3cf886d8edf7a10083cdb90857357fba6df72f04..3acf2db5267eed72be303508eca17a2b00b54145 100644 (file)
@@ -123,7 +123,7 @@ Timeside.classes.RulerMarker = Timeside.classes.TimesideClass.extend({
             }
         }
     },
-
+    //isMovedByMouse: false, //flag to be set by the ruler (see add method) when mouse is moving this rulermarker
     //sets the text of the marker, if the text changes the marker width and optionalUpdateLabelPosition=true,
     //re-arranges the marker position to be center-aligned with its vertical line (the one lying on the wav image)
     setText: function(text, optionalUpdateLabelPosition) {
index c44d0226bfd8029e12bddf6ffe4bd772f9f17dff..fd28a89a494ceed388856b68c2667d5d79e21de0 100755 (executable)
     margin-top: 2px;
 }
 
-/*.ts-skin-lab .ts-player .ts-viewer {
-    margin: 0;
-    border: 0;
-}*/
-
-
 
 .ts-skin-lab .ts-player .ts-ruler{
     color: white;
@@ -76,7 +70,7 @@
   ".ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines"*/
 .ts-svg-ruler-lines{
     stroke-width:1;
-    stroke:#ADADAD;
+    stroke: #ADADAD;
 }
 
 /*wave:*/