From: riccardo Date: Fri, 17 Jun 2011 19:01:23 +0000 (+0200) Subject: implemented popup onmouseover. It works, Still to be debugged (conflicts while playin... X-Git-Tag: 1.1~100 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=a341ca1b1991ae0eb0d6d2dbf0f04c1df559a155;p=telemeta.git implemented popup onmouseover. It works, Still to be debugged (conflicts while playing? conflicts among different mouseevent among markers?) --- diff --git a/telemeta/htdocs/js/playerLoader.js b/telemeta/htdocs/js/playerLoader.js index 9f9808e7..33c2f032 100644 --- a/telemeta/htdocs/js/playerLoader.js +++ b/telemeta/htdocs/js/playerLoader.js @@ -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); + }); + } } } diff --git a/telemeta/htdocs/timeside/js/player.js b/telemeta/htdocs/timeside/js/player.js index df4b8b5b..dccd7845 100644 --- a/telemeta/htdocs/timeside/js/player.js +++ b/telemeta/htdocs/timeside/js/player.js @@ -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]); diff --git a/telemeta/htdocs/timeside/js/ruler.js b/telemeta/htdocs/timeside/js/ruler.js index 36f1bb24..cf884672 100644 --- a/telemeta/htdocs/timeside/js/ruler.js +++ b/telemeta/htdocs/timeside/js/ruler.js @@ -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)); diff --git a/telemeta/htdocs/timeside/js/rulermarker.js b/telemeta/htdocs/timeside/js/rulermarker.js index 3cf886d8..3acf2db5 100644 --- a/telemeta/htdocs/timeside/js/rulermarker.js +++ b/telemeta/htdocs/timeside/js/rulermarker.js @@ -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) { diff --git a/telemeta/htdocs/timeside/skins/lab/style.css b/telemeta/htdocs/timeside/skins/lab/style.css index c44d0226..fd28a89a 100755 --- a/telemeta/htdocs/timeside/skins/lab/style.css +++ b/telemeta/htdocs/timeside/skins/lab/style.css @@ -52,12 +52,6 @@ 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:*/