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);
//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);
+ });
+
}
}
}
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){
if(canAddMarkers){
setMarkerButton.show().attr('href','#').unbind('click').bind('click', function(){
- me.addMarker(me.getSoundPosition());
+ me.addMarker(me.soundPosition);
return false;
});
}else{
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
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
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
}
},
+ each: function(){
+ var map = this.getMarkerMap();
+ if(map){
+ map.each.apply(map,arguments);
+ }
+ },
+
newMarker: function(offset){
return {
offset:offset
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;
//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]);
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
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+']');
//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;
});
'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;
});
//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));