From: riccardo Date: Tue, 21 Jun 2011 18:00:50 +0000 (+0200) Subject: fixed minor bugs, changed the way popup div is displayed and marker mouse events... X-Git-Tag: 1.1~93 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=8925cb743dd3b6b1602651090cbc71b071a27dbb;p=telemeta.git fixed minor bugs, changed the way popup div is displayed and marker mouse events + editable mode --- diff --git a/telemeta/htdocs/js/divmarker.js b/telemeta/htdocs/js/divmarker.js index 6d8e993a..db1a07ba 100644 --- a/telemeta/htdocs/js/divmarker.js +++ b/telemeta/htdocs/js/divmarker.js @@ -45,7 +45,6 @@ Timeside.classes.MarkerMapDiv = Timeside.classes.TimesideArray.extend({ this._super(div,index); if(isNew){ this.setEditMode(index,true); - this.setFocus(index,true); } if(index=0 && idx player save var map = player.getMarkerMap(); if(map){ @@ -273,7 +282,7 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu var marker = data.marker; var idx = map.insertionIndex(marker); if(idx<0 || idx>=map.length){ - this.debug('marker not found'); + this.debug('mapUI.save: marker not found'); return; } @@ -365,6 +374,8 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu }; wdw.onbeforeunload = confirmExit; } + + if(map && wdw.PopupDiv){ var POPUP_TIMEOUT=3; //in seconds. Zero means: no popup, negative numbers: //popup stays infinitely on the player (until next marker cross) @@ -409,7 +420,10 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu if(popupTimeoutId !== undefined){ clearHidePopupTimeout(popupTimeoutId); } - popupTimeoutId=undefined; + popupTimeoutId=undefined; + + + popupShowFunction(data); if(POPUP_TIMEOUT<0){ @@ -419,17 +433,6 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu if(next === undefined || next-data.currentSoundPosition > POPUP_TIMEOUT){ popupTimeoutId = popupdiv.setTimeout('close',POPUP_TIMEOUT*1000); } - - //var index = data.index; - //consolelog('==='); - //consolelog(data.currentSoundPosition); - //consolelog(data.nextMarkerTimeInterval); - //consolelog(index+') '+data.marker.offset+' | '+(map.toArray()[index+1].offset+' - '+data.timeMarginInSec)); - //if(index+1 == map.length || map.toArray()[index+1].offset-data.marker.offset-data.timeMarginInSec>3){ - // popupTimeoutId = popupdiv.setTimeout('close',3000); - //} - //consolelog('firing markercrossed'); - //consolelog(data.marker.title); }); @@ -438,21 +441,11 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu var draggingSomeMarker = false; //now bind mouse events player.bind('markerMouseEvent', function(data){ -// if(data.index<0 || player.playState>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 === 'click' && data.index>-1){ + player.setSoundPosition(data.marker.offset); + draggingSomeMarker = false; //to be sure + return; + } if(data.eventName === 'mouseenter'){ if(!draggingSomeMarker && data.index>=0 && player.playState===0){ popupShowFunction(data); @@ -460,7 +453,7 @@ function loadPlayer(analizerUrl, soundUrl, soundImgSize, itemId, visualizers, cu } }else if(data.eventName === 'dragstart'){ draggingSomeMarker = true; - }else if(data.eventName === 'mouseup'){ + }else if(data.eventName === 'dragend'){ draggingSomeMarker = false; } if(popupdiv.isShowing()){ diff --git a/telemeta/htdocs/js/popupdiv-min.js b/telemeta/htdocs/js/popupdiv-min.js new file mode 100644 index 00000000..0737a607 --- /dev/null +++ b/telemeta/htdocs/js/popupdiv-min.js @@ -0,0 +1 @@ +function PopupDiv(){var a=jQuery;var b=this;var c={};if(arguments.length&&arguments[0]){c=arguments[0]}var d=a('
');var e=a('
').append(a('').attr('href','#').click(function(){b.close();return false})).append(' ').append(a('
').css('clear','both'));var g=a('
').css('overflow','auto');var h=a('
').append(a('').attr('href','#').click(function(){b.trigger('ok',true);return false}));d.append(e).append(g).append(h);this.getDiv=function(){return d};var i={};this.getListeners=function(){return i};var k;var j;for(k in PopupDiv){var f=PopupDiv[k];if(PopupDiv.hasOwnProperty(k)&&(typeof f!=='function')){if(!j){j={}}j[k]=f}}if(j){var l=true;var m=undefined;if(typeof Object.getPrototypeOf!=="function"){if(typeof this.__proto__==="object"){m=this.__proto__}else{m=this;l=false}}else{m=Object.getPrototypeOf(this)}for(k in j){if(j.hasOwnProperty(k)){m[k]=j[k];if(l){delete PopupDiv[k]}}}}for(k in c){if(c.hasOwnProperty(k)){if(k==='onOk'||k==='onShow'||k==='onClose'){this.bind(k.substring(2).toLowerCase(),c[k])}else if(k=='content'){this.setContent(c[k])}else{this[k]=c[k]}}}if(!this.popupCss){this.popupCss={}}}(function(p){var $=jQuery;var z=window;var A=document;var B=$(z);var C='popup_'+(new Date().getTime());p.isClickElement=function(a){return a&&a.length==1&&a instanceof $&&a[0]!==z&&a[0]!==A&&(a.is('a')||a.is('input[type=button]')||a.is('button')||a.is('input[type=submit]'))};p.getId=function(){var a=this.getDiv();if(!(a.attr('id'))){a.attr('id',C+'_'+(new Date().getTime()))}return a.attr('id')};p.shadowOffset=4;p.invoker=B;p.bounds={'top':0.25,'left':0.25,'right':0.25,'bottom':0.25};p.boundsExact=false;p.popupClass='';p.popupCss={};p.showOk=false;p.showClose=false;p.title="";p.okButtonClass='';p.okButtonAlign='right';p.closeButtonClass='';p.titleClass='';p.okButtonTitle='Ok';p.closeButtonTitle='x';p.defaultCloseOperation='hide';p.focusable=false;p.fadInTime='fast';p.fadeOutTime=0;p.shadowOpacity=0.25;p.zIndex=10000;p.listItemClass='';p.listItemCss='';p.getFormData=function(){var c=this.find('input,select,textarea');var d={};var f=this.getFormDataAttrName();c.each(function(i,e){var a=$(e);var b=a.attr(f);if(b){d[b]=a.val()}});return d};p.setTitle=function(a){this.getDiv().children().eq(0).find(':title').eq(0).val(a)};p.find=function(a){return this.getDiv().children().eq(1).find(a)};p.bind=function(a,b){var c=this.getListeners();if(c.hasOwnProperty(a)){c[a].push(b)}else{c[a]=[b]}};p.unbind=function(a){var b=this.getListeners();if(a&&b.hasOwnProperty(a)){delete b[a]}else if(!a){for(var k in b){if(b.hasOwnProperty(k)){delete b[k]}}}};p.trigger=function(a){var b=this.getListeners();var c=this;if(b.hasOwnProperty(a)){var d=b[a];var i=0;if(a=='ok'){var e=this.getFormData();for(i=0;i').attr('type','hidden').attr(g,'selIndex');var m=function(a,b,c){b.click(function(){c.val(a);j.trigger('ok',true);return false}).focus(function(){c.val(a)})};var n=$([]);for(var h=0;h').attr('href','#').html(""+o).css('whiteSpace','nowrap');n=n.add(a);m(h,a,l);f.append(a)}n.css({'margin':'2px'});if(this.listItemClass){n.addClass(this.listItemClass)}if(this.listItemCss){n.css(this.listItemCss)}n.css({'position':'','display':'block'});f.append(l)}else if(d&&d.constructor==Object){var p=$([]);var q=$([]);var r=[0,0];var s=function(a,b){var c=$('
');if(!b){b=a;a=$('')}q=q.add(b);p=p.add(a);f.append(c.append(a).append(b));return c};var t,component;var u=Math.max;var v=undefined;var w=$([]);for(var k in d){if(d.hasOwnProperty(k)){var x=d[k];if(typeof x=='string'||typeof x=='number'){t=$('').html(k);r[0]=u(r[0],k.length);r[1]=u(r[1],x.length);component=$('').attr('type','text').val(x).attr(g,k);w=w.add(s(t,component))}else if(x===true||x===false){var y=this.getId()+"_checkbox";t=$('').attr('type','checkbox').attr(g,k).attr('id',y);if(x){t.attr('checked','checked')}else{t.removeAttr('checked')}component=$('
", - //"
", "
"]; //removed" @@ -265,9 +237,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ 'display':'inline-block', 'overflow':'hidden' }); - // if(!canAddMarkers){ - // setMarkerButton.hide().unbind('click'); - // } + var waitImg = control.find('.ts-wait'); waitImg.html('wait').css({ @@ -294,7 +264,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ return ruler; } //bind mouse events: - ruler.bind('markermouseevent', function(data){ + ruler.bind('rulermarkermouseevent', function(data){ var idx = data.index; data.marker = idx > -1 ? me.getMarker(idx) : undefined; me.fire('markerMouseEvent',data); @@ -338,9 +308,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ //Weird enough (with IE it isn't actually), we have just to set the property we already set in the css: //ie, top: auto. This is however useful even if somebody specified a top property on the divs ruler_.add(wave).add(control).css('top','auto'); -// if(h > $J('.ts-wave').position().top){ -// $J('.ts-wave').css('top',0+'px'); -// } }, @@ -410,21 +377,12 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ play : function(){ var player = this; var sound = player.getSound(); - //var imgWaitDisplaying = this.isWaitVisible(); - //soundManager multishot set false should prevent the play when already playing. We leave this check for safety + if(!player || !sound){ return false; } - //setting markercorss callback - //for these varirables, see explanation below: - //var numberOfSubsequentPlayCall=0; - //var minimumNumberOfSubsequentPlayCall=3; - //var isPlayingId=2; - //var isBufferingId=1; - //var uninitializedId=0; - //var currentState=uninitializedId; var fireOnMarkerPosition = function(seconds){}; //does nothing by default var map = player.getMarkerMap(); @@ -467,12 +425,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ intervalLowerBound = offs-margin; data.index = idx; data.marker = marker; -// { //if you change data, change it also above -// index:idx, -// marker:marker -// }; -// }else{ -// marker = undefined; } } } @@ -568,67 +520,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ } }; - // var playOptions = { - // position: sPosInMsec, - // whileplaying: function(){ - // var sPos = this.position; - // var buffering = this.isBuffering; //this refers to the soundmanager sound obj - // //Now, what are we doing here below? we could simply check whether is buffering or not.. - // //Unfortunately, when buffering some playState (isBuffering = false) are also fired, randomly - // //ONCE in a while - // //the result is a blinking 'isBuffering' 'isPlaying' state in the wait element displaying the state (not so nice), - // //which is also costly in terms of computation. So, we wait for at least N playstate fired SUBSEQUENTLY, without - // //NO bufferingState fired between them. N is set to minimumNumberOfSubsequentPlayCall. When this happens, we can start moving the - // //pointer as a result of a real play state, and we avoid blinking of the wait element - // switch(buffering){ - // case true: - // numberOfSubsequentPlayCall = 0; //reset the count - // switch(currentState){ - // case isBufferingId: //do nothing (wait element already displaying) - // break; - // default: //update the wait element showing it: - // currentState = isBufferingId; - // player.playState = 2; - // if(bufferingString){ - // player.setWait(bufferingString); - // } - // } - // break; - // default: - // switch(currentState){ - // case uninitializedId: - // case isBufferingId: //in these 2 cases, increment numberOfSubsequentPlayCall - // numberOfSubsequentPlayCall++; - // if(numberOfSubsequentPlayCall == minimumNumberOfSubsequentPlayCall){ - // //if is not buffering, we could skip this. However, there could be the waitbar displaying for some other reason: - // player.setWait(player.isImgRefreshing ? player.msgs.imgRefreshing : ''); - // currentState = isPlayingId; //set state for future subsequent calls of this case - // player.playState = 3; - // }else{ - // break; //do not move pointer (default condition below) - // } - // default: //move pointer - // var sPosInSec = toSec(sPos); - // player.soundPosition = sPosInSec; - // ruler.movePointer(sPosInSec); - // } - // fireOnMarkerPosition(sPosInSec); - // } - // - // }, - // onfinish: function() { - // //whileplaying is NOT called onsinfish. We must update the pointer: - // //note that for small length sounds (wg, 5 secs) the pointer shifts abruptly from the last - // //whileplaying position to the end. We tried with a setTimeout function but the visual effect is not - // //removed. So we leave this small 'bug' - // ruler.movePointer(player.getSoundDuration()); - // player.setWait(player.isImgRefreshing ? player.msgs.imgRefreshing : ''); - // player.playState = 0; - // pauseFunction('endReached'); - // - // //player.fire('endReached'); - // } - // }; //if the pointer is already at the end of sound, soundmanager does not fire onfinish but starts buffering //forever. Therefore, we must check this case here. @@ -662,12 +553,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ } return false; }, - isWaitVisible: function(){ - return this.getContainer().find('.ts-control').find('.ts-wait').is(':visible'); - }, - getWaitString: function(){ - return this.getContainer().find('.ts-control').find('.ts-wait').html(); - }, setWaitElement: function(element){ @@ -680,14 +565,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ //msg string: undefined: do nothing, empty: hide, otherwise show wait with html = msg setWait: function(msg){ var wait = undefined; - // if(typeof msg == 'function'){ - // wait = msg(); - // if(wait){ - // msg = wait.html(); - // }else{ - // return; - // } - // }else{ + wait = this.getWaitElement(); if(!wait || msg === undefined){ return; @@ -695,7 +573,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ if(wait.html()!=msg){ wait.html(msg); } - // } var visible = wait.css('display') != 'none'; @@ -737,16 +614,13 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ },100); }, resize: function() { - this.debug("resizing"); var height; var container = this.getContainer(); var wave = container.find('.ts-wave'); - height = wave.height(); - this.debug("wave height:" + height); - + if (height) { //set image, imagecontainer and canvas (container on imagecontainer for lines and pointer triangles) css @@ -981,10 +855,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ moveMarker: function(identifier, newOffset){ //identifier can be an number (marker index) or a marker (the index will be aearched) var map = this.getMarkerMap(); if(map){ - //note that map.move does everything BUT moving visually a marker on the ruler -// var r = this.getRuler(); -// var m = r.toArray()[identifier]; -// m.move(r.toPixelOffset(newOffset)); //TODO: check what happens here inside, no 'fire' hopefully... map.move(identifier,newOffset); } }, @@ -1013,7 +883,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ var rulerAdd = ruler.add; - var debug_ = player.debug; //TODO: remove if(markers){ //add markers to the map. No listeners associated to it (for the moment) @@ -1035,8 +904,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ //mapuiAdd.apply(mapUI,[data.marker, data.index,data.isNew]); rulerAdd.apply(ruler,[data.marker.offset, data.index,data.marker.isEditable]); player.fire('markerAdded',data); - debug_('add'); - debug_(data); }); //2) MOVE @@ -1044,8 +911,8 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ //add the binding when we move a marker on the ruler: ruler.bind('markermoved',function(data){ var soundPos = data.soundPosition; - var markerClass = data.markerClass; - if(markerClass=='pointer'){ + var isPointer = data.isPointer; + if(isPointer){ player.setSoundPosition(soundPos); }else{ map.move(data.markerElement.getIndex(), soundPos); @@ -1059,8 +926,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ var to = data.toIndex; ruler.move.apply(ruler,[from,to,data.marker.offset]); player.fire('markerMoved',data); - debug_('moved'); - debug_(data); }); @@ -1068,8 +933,6 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({ map.bind('remove',function(data){ ruler.remove.apply(ruler, [data.index]); player.fire('markerRemoved',data); - debug_('removed'); - debug_(data); }); } diff --git a/telemeta/htdocs/timeside/js/ruler.js b/telemeta/htdocs/timeside/js/ruler.js index 41c86b13..366f8acc 100644 --- a/telemeta/htdocs/timeside/js/ruler.js +++ b/telemeta/htdocs/timeside/js/ruler.js @@ -36,8 +36,7 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ return soundDuration; }; - //var waveContainer = viewer.find('.' + cssPref + 'image-canvas'); - this.debug( 'WAVECONTAINER?? LENGTH='+ waveContainer.length); + this.getWaveContainer =function(){ return waveContainer; }; @@ -46,8 +45,7 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ 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'); @@ -55,40 +53,11 @@ 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; - // } - // }, - - //colors:{}, //used to draw rulermarkers resize : function(){ var duration = this.getSoundDuration(); //in seconds if (!duration) { - this.debug("Can't draw ruler with a duration of 0"); + this.debug("ruler.resize: Can't draw ruler with a duration of 0"); return; } @@ -293,16 +262,11 @@ 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'); } - //this.debug('ruler.move: [from:'+from+', to:'+to+', real:'+newIndex+']'); if(to!=from){ var i1 = Math.min(from,to); var i2 = Math.max(from,to)+1; - //this.debug('updating ['+i1+','+i2+']'); this.each(i1,i2, function(index,rulermarker){ rulermarker.setIndex(index, true); }); @@ -314,7 +278,6 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ //add(offset, index, isMovable) adds a marker, movable if isMovable == true add: function(offset, index, isMovable){ var soundPosition; - var isMovable; var markerClass; if(index<0){ @@ -327,16 +290,9 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ markerClass='marker'; } - var container = this.getRulerContainer(); - var layout = container.find("."+this.cssPrefix + 'layout'); - var $J = this.$J; - // var pointer = new RulerMarker($J(layout.get(0)),this.getWaveContainer(),markerClass); - - + var pointerOrMarker = new Timeside.classes.RulerMarker(this,this.getWaveContainer(),markerClass); - - //call super constructor //if it is a pointer, dont add it if(markerClass != 'pointer'){ @@ -347,7 +303,6 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ //rulermarker.setIndex.apply(rulermarker, [i,i!=indexIfMarker]); //update label width only if it is not this marker added //as for this marker we update the position below (move) }); - this.debug('added marker at index '+index+' offset: '+offset); }else{ //note that setText is called BEFORE move as move must have the proper label width pointerOrMarker.setText(this.makeTimeLabel(0)); @@ -358,121 +313,140 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ //pointer.setText(markerClass== 'pointer' ? this.makeTimeLabel(0) : this.length); //click on labels stop propagating. Always: - var lbl = pointerOrMarker.getLabel(); - lbl.bind('click', function(evt){ - evt.stopPropagation(); - return false; - }); + var isPointer = markerClass === 'pointer'; + this._setEditable(pointerOrMarker, isMovable, isPointer); + return pointerOrMarker; + + }, - //if there are no events to associate, return it. - if(!isMovable){ - return pointerOrMarker; + eventNamespace : 'rulerMouseEvent', //namespace for mouse events + mouseEventType : 'rulermarkermouseevent', //event type for fire TO THE PLAYER. The player then fires markerMouseEvent to outside + + setEditable: function(index, value){ + var a = this.toArray(); + if(index>=0 && index < a.length){ + this._setEditable(a[index],value,false); } + }, + //do not call, use setEditable(index,value) instead + _setEditable: function(pointerOrMarker, value, isPointer){ + var eventNamespace = this.eventNamespace; + var doc = this.$J(document); + var lbl = pointerOrMarker.getLabel(); + var me = this; + var mme = this.mouseEventType; - //namespace for jquery event: - var eventId = 'markerclicked'; - var doc = $J(document); - var me = this; + lbl.unbind('.'+eventNamespace); //this should delete all previous events + //TODO: check!!!! - //flag to be set to true when moving a poiner from mouse. - //when true, movePointer (see below) has no effect - //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){ + lbl.bind('mouseenter.'+eventNamespace,function(evt){ me.fire(mme,{ eventName: 'mouseenter', eventObj: evt, - index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex() + index: isPointer ? -1 : pointerOrMarker.getIndex() }); + return false; }); - lbl.bind('mouseleave.'+eventId,function(evt){ + lbl.bind('mouseleave.'+eventNamespace,function(evt){ me.fire(mme,{ eventName: 'mouseleave', eventObj: evt, - index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex() + index: isPointer ? -1 : pointerOrMarker.getIndex() }); + return false; + }); + + //to prevent page scrolling after mouseup, as click is also fired + lbl.bind('click.'+this.eventNamespace, function(evt){ + return false; }); + - lbl.bind('mousedown.'+eventId,function(evt) { + lbl.bind('mousedown.'+eventNamespace,function(evt) { if(evt.which===1){ - pointerOrMarker.isMovedByMouse = true; - //consolelog('w '+evt.which); - + if(value){ + pointerOrMarker.isMovedByMouse = true; + } + + //preventClickFire = false; + 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; - newPos = startPos+(x-startX); - pointerOrMarker.move(newPos); - //update the text if pointer - if(markerClass=='pointer'){ - pointerOrMarker.setText(me.makeTimeLabel(me.toSoundPosition(newPos))); + doc.bind('mousemove.'+eventNamespace, function(evt_){ + //preventClickFire=true; + if(value){ + var x = evt_.pageX; + newPos = startPos+(x-startX); + pointerOrMarker.move(newPos); + //update the text if pointer + if(isPointer){ + pointerOrMarker.setText(me.makeTimeLabel(me.toSoundPosition(newPos))); + } } - if(launchDragStart){ launchDragStart = false; me.fire(mme,{ eventName: 'dragstart', eventObj: evt_, - index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex() + index: isPointer ? -1 : pointerOrMarker.getIndex() }); } return false; - + }); //to avoid scrolling ////TODO: check IE bug on mouseup on the ruler (pointer is moving too) //TODO: what happens if the user releases the mouse OUTSIDE the browser???? check bug in IE (mouse release) var mouseup = function(evt_){ - doc.unbind('mousemove.'+eventId); - doc.unbind('mouseup.'+eventId); + + doc.unbind('mousemove.'+eventNamespace); + doc.unbind('mouseup.'+eventNamespace); evt_.stopPropagation(); - if(newPos == startPos){ - return false; + if(value){ + if(newPos !== startPos){ + + var data = { + 'markerElement':pointerOrMarker, + 'soundPosition': me.toSoundPosition.apply(me,[newPos]), + 'isPointer':isPointer + }; + me.fire('markermoved',data); + } + pointerOrMarker.isMovedByMouse = false; + } + if(evt_.pageX !== startX){ + me.fire(mme,{ + eventName: 'dragend', + eventObj: evt_, + index: isPointer ? -1 : pointerOrMarker.getIndex() + }); + }else{ + me.fire(mme,{ + eventName: 'click', + eventObj: evt_, + index: isPointer ? -1 : pointerOrMarker.getIndex() + }); } - var data = { - 'markerElement':pointerOrMarker, - 'soundPosition': me.toSoundPosition.apply(me,[newPos]), - 'markerClass':markerClass - }; - me.fire('markermoved',data); - - 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); + doc.bind('mouseup.'+eventNamespace, mouseup); } me.fire(mme,{ eventName: 'mousedown', eventObj: evt, - index: markerClass=='pointer' ? -1 : pointerOrMarker.getIndex() + index: isPointer ? -1 : pointerOrMarker.getIndex() }); - + return false; }); - - return pointerOrMarker; - - }, //moves the pointer, does not notify any listener. @@ -485,13 +459,11 @@ Timeside.classes.Ruler = Timeside.classes.TimesideArray.extend({ pointer.setText(this.makeTimeLabel(soundPosition)); pointer.move(pixelOffset); //does NOT fire any move method } - //this.debug('moving pointer: position set to '+offset); return soundPosition; }, //soundPosition is in seconds (float) toPixelOffset: function(soundPosition) { - //this.debug('sPos:' + soundPosition+ 'sDur: '+this.getSoundDuration()); var duration = this.getSoundDuration(); if (soundPosition < 0){ soundPosition = 0; diff --git a/telemeta/htdocs/timeside/js/rulermarker.js b/telemeta/htdocs/timeside/js/rulermarker.js index 3acf2db5..fc1825f3 100644 --- a/telemeta/htdocs/timeside/js/rulermarker.js +++ b/telemeta/htdocs/timeside/js/rulermarker.js @@ -105,11 +105,6 @@ Timeside.classes.RulerMarker = Timeside.classes.TimesideClass.extend({ canvas = this.createCanvasVml(waveImgDiv, arrowBaselineWidth); this.jQueryCanvas = $J(canvas.node); var attributes = vml.getVmlAttr(canvasClass); -// var attributes = ruler.classToRaphaelAttr[canvasClass]; -// if(!attributes){ -// attributes = ruler.getVmlAttr(canvasClass); -// ruler.classToRaphaelAttr[canvasClass] = attributes; -// } canvas.attr(attributes); //Raphael method this.moveCanvas = function(pixelOffset){ //for some reason, coordinates inside the VML object are stored by raphael with a zoom of 10: @@ -231,36 +226,6 @@ Timeside.classes.RulerMarker = Timeside.classes.TimesideClass.extend({ var shape = paper.path(this.createCanvasPath(0, arrowBaseWidth)); return shape; }, -// createCanvasVml: function(container, arrowBaseWidth){ -// //for creating a vml object, we make use of raphael to avoid a pain in the ... implementing a non standard Microsoft syntax -// //(which, after a glance, it's even syntactically a mess) -// //unfotunately (and this is a real lack not even planned to be fixed, see raphael forums), -// //raphael does not allow to wrap existing object, so we have to register in this.elementToPaperMap (see timeside.js) -// //which is a map where to each container is associated a raphael paper: -// var paper = this.elementToPaperMap && this.elementToPaperMap[container.get(0)]; -// if(!paper){ -// var obj = this.elementToPaperMap; -// if(!obj){ -// this.elementToPaperMap = {}; -// obj = this.elementToPaperMap; -// } -// paper = Raphael(container.get(0),container.width(),container.height()); -// obj[container.get(0)] = paper; -// //paper canvas is a div with weird dimensions. You can check it by printing paper.canvas.outerHTML in IE. -// //We set them to 100% so we dont have clipping regions when resizing (maximizing) -// paper.canvas.style.width='100%'; -// paper.canvas.style.height='100%'; -// paper.canvas.width='100%'; -// paper.canvas.height='100%'; -// //apparently, there is also a clip style declaration made by raphael. The following code trhows an error in IE7: -// //paper.canvas.style.clip = 'auto'; -// //however, even leaving the clip style declaration as it is, it seems to work (the div spans the whole width) -// } -// -// -// var shape = paper.path(this.createCanvasPath(0, arrowBaseWidth)); -// return shape; -// }, //w must be odd. Cause the central line must be centered. Example: // diff --git a/telemeta/htdocs/timeside/js/timeside.js b/telemeta/htdocs/timeside/js/timeside.js index 705ef6b3..b64983d6 100644 --- a/telemeta/htdocs/timeside/js/timeside.js +++ b/telemeta/htdocs/timeside/js/timeside.js @@ -34,6 +34,10 @@ var Timeside = { classes:{}, player:undefined, config: { + /** + *set to true to see debug messages on the console (only error or warning messages shown) + */ + debug: false, /* * timeside scripts to be loaded when Timeside.load is called. URL paths are relative to the timeside folder, which * will be determined according to the src attribute of the timeside.js script path (to be included in the of the page) @@ -229,11 +233,12 @@ Timeside.classes.TimesideClass = Timeside.Class.extend({ $J : jQuery, //reference to jQuery for faster lookup inside methods $TU : Timeside.utils, //reference to Timeside variable for faster lookup inside methods debugging : false, - debug : function(message) { - if (this.debugging && typeof console != 'undefined' && console.log) { - console.log(message); + debug : Timeside.config.debug ? function(message) { + var C = console; + if (C && C.log) { + C.log(message); } - }, + } : function(message){}, /** * 3 methods defining listeners, events fire and bind (aloing the lines of jQuery.bind, unbind and trigger. @@ -242,11 +247,11 @@ Timeside.classes.TimesideClass = Timeside.Class.extend({ bind : function(eventType, callback, optionalThisArgInCallback){ if(!callback || typeof callback !== 'function'){ - this.debug('cannot bind '+eventType+' to callback: the latter is null or not a function'); + this.debug('TimesideClass.bind: cannot bind '+eventType+' to callback: the latter is null or not a function'); return; } if(!eventType){ - this.debug('eventType is empty in bind'); + this.debug('TimesideClass.bind: eventType is empty in bind'); return; } var listenersMap = this.listenersMap; @@ -322,7 +327,6 @@ Timeside.classes.TimesideClass = Timeside.Class.extend({ fire : function(key, dataArgument){ var listenersMap = this.listenersMap; if(!(listenersMap.hasOwnProperty(key))){ - //this.debug('"'+key+'" fired but no binding associated to it'); return; } if(arguments.length < 2 || !dataArgument){ @@ -385,7 +389,7 @@ Timeside.classes.TimesideClass = Timeside.Class.extend({ } } return n; - } + }; var ret = []; for(var i =0; i