From bb66c4a1e68e2fb55c03786fe83dcefe86d5815e Mon Sep 17 00:00:00 2001 From: riccardo Date: Wed, 25 May 2011 20:10:08 +0200 Subject: [PATCH] Fixed ruler and some help in player.css --- telemeta/htdocs/css/player.css | 37 ++++++- telemeta/htdocs/js/playlist.js | 1 - telemeta/htdocs/timeside/js/divmarker.js | 6 +- telemeta/htdocs/timeside/js/markermap.js | 14 +-- telemeta/htdocs/timeside/js/player.js | 4 +- telemeta/htdocs/timeside/js/ruler.js | 69 ++++++++----- telemeta/htdocs/timeside/js/rulermarker.js | 8 +- telemeta/htdocs/timeside/js/timeside.js | 114 ++++++++++----------- 8 files changed, 147 insertions(+), 106 deletions(-) diff --git a/telemeta/htdocs/css/player.css b/telemeta/htdocs/css/player.css index c26a0911..7e9c2630 100644 --- a/telemeta/htdocs/css/player.css +++ b/telemeta/htdocs/css/player.css @@ -1,3 +1,20 @@ +/** +* player.css customize the player skin. Note: +* 1) Some styles will be overridden, namely position and overflow of divs, because otherwise they might break the player layout. +* 2) .ts-marker and .ts-pointer fontSize should be changed according to .ts-ruler fontSize. In general, change the latter without +* specifying a font for the formers, which will inherit it. The player internally calculates a default ruler height before housing +* pointer and markers in order to paint its ruler lines. If font sizes of ruler vs. pointer and markers are different, the latters +* might overlap vertically. On the other hand, if pointers and markers have strong borders/padding, +* playing around with different font size and line heights might be the solution to avoid vartical overlap +* 3) canvas (svg) classes (.ts-pointer-canvas, .ts-marker-canvas, .ts-ruler-upper-rect and .ts-ruler-lines) +* have specific css syntax (have a look) +* In case svg is not supported (IE7-8, as usual, and apparently even 9, according to Raphael function detecting svg support), +* a parser inside the player will read class rules and send them to raphael library +* in the form of a map (function attr in Raphael. Note that many but not all css properties are supported). +* This parser READS ONLY STAND ALONE RULES, SO BE CAREFUL NOT WRITING A CSS RULE LIKE '.aClass .ts-marker-canvas' because +* it WILL NOT affect elements with class 'ts-marker-canvas' (watiing for full SVG support, when this mess will be over) +*/ + .ts-skin-lab .ts-player { padding: 0; clear: both; @@ -31,6 +48,7 @@ .ts-skin-lab .ts-player .ts-viewer a.ts-pointer { color: #BB0000; background: white; + padding: 0 0.5em; } /*class for the canvas (svg) associated to a marker. If svg is not supported, a parser in the palyer converts these values (nb: not all are supported) to specigic vml attributes. In this case, however, ONLY CLASSES WRITTEN @@ -38,7 +56,6 @@ ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED .ts-pointer-canvas { fill: #BB0000; stroke-width:0; - stroke:#e65911; /*to be sure...*/ } .ts-skin-lab .ts-player .ts-viewer .ts-marker { padding: 0 0.5em; @@ -51,7 +68,6 @@ ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED .ts-marker-canvas { fill: #e65911; stroke-width:0; - stroke:#e65911; /*to be sure...*/ } .ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { background: #595959; @@ -114,4 +130,21 @@ ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED color: white; background-color: #333; font-size: 10px; +} + +.ts-ruler{ + color: white; + background-color: #2E2E2E; + font-size: 10px; + line-height: 13px; +} +/*ruler canvas (svg)"*/ +.ts-ruler-upper-rect{ + fill: #595959; + stroke-width:0; + stroke: #595959; /*to be sure...*/ +} +.ts-ruler-lines{ + stroke-width:1; + stroke:#ADADAD; } \ No newline at end of file diff --git a/telemeta/htdocs/js/playlist.js b/telemeta/htdocs/js/playlist.js index d3f7a61d..5c79837a 100644 --- a/telemeta/htdocs/js/playlist.js +++ b/telemeta/htdocs/js/playlist.js @@ -142,7 +142,6 @@ var playlistUtils = { }, //resourceType can be: 'collection', 'item', 'marker' - //addResource RENAME TODO!!!! addResourceToPlaylist: function(playlistId,resourceType,objectId, callbackOnSuccess,callbackOnError){ var send = { 'public_id':uniqid(), diff --git a/telemeta/htdocs/timeside/js/divmarker.js b/telemeta/htdocs/timeside/js/divmarker.js index c3fb3b65..f6e2072a 100644 --- a/telemeta/htdocs/timeside/js/divmarker.js +++ b/telemeta/htdocs/timeside/js/divmarker.js @@ -215,11 +215,9 @@ var MarkerMapDiv = TimesideArray.extend({ '
', '
OK
', '
'+gettrans('author')+': '+marker.author+'
'].join(""); - var div = this.$J('
').attr('tabindex','0').addClass("markerdiv").html(html_); //TODO: avoid text nodes + var div = this.$J('
').attr('tabindex','0').addClass("markerdiv").html(html_); div.find('a').attr('href','#'); - //todo: remove markerlabel from css!!!!!!! - //new RulerMarker(div.find('.markerlbl'),div.find('.markercanvas'),'marker',false); - + var e_indexLabel = div.find('.ts-marker'); //var e_offsetLabel =div.find('.markersdivOffset'); var e_okButton = div.find('.markersdivSave'); diff --git a/telemeta/htdocs/timeside/js/markermap.js b/telemeta/htdocs/timeside/js/markermap.js index 712936fb..0a8345bb 100644 --- a/telemeta/htdocs/timeside/js/markermap.js +++ b/telemeta/htdocs/timeside/js/markermap.js @@ -86,9 +86,7 @@ var MarkerMap = TimesideArray.extend({ return idx; }, - //TODO: remove from here - - + //argument is either an object loaded from server or a number specifying the marker offset createMarker: function(argument){ var marker = null; @@ -146,7 +144,6 @@ var MarkerMap = TimesideArray.extend({ idx = this.insertionIndex(identifier); } if(idx<0 || idx>=this.length){ - //TODO: handle error this.debug('remove: marker not found'); return; } @@ -174,11 +171,10 @@ var MarkerMap = TimesideArray.extend({ save: function(marker){ var idx = this.insertionIndex(marker); if(idx<0 || idx>=this.length){ - //TODO: habdle error this.debug('marker not found'); + return; } - //TODO: item public id defined elsewhere up, not here inside var itemid = this.getItemId(); var isSavedOnServer = marker.isSavedOnServer; var method = isSavedOnServer ? "telemeta.update_marker" : "telemeta.add_marker"; @@ -216,11 +212,9 @@ var MarkerMap = TimesideArray.extend({ //just return the real insertionIndex newIndex = -newIndex-1; } - // var markers = this.getMarkers(); - // //TODO: remove move from array prototype!!!! + var realIndex = this._super(markerIndex,newIndex); - // //var realIndex = markers.move(markerIndex,newIndex); - // this.debug('fromindex '+markerIndex+' to: '+newIndex+' results in '+realIndex); + var markers = this.toArray(); var marker = markers[realIndex]; marker.offset = newOffset; diff --git a/telemeta/htdocs/timeside/js/player.js b/telemeta/htdocs/timeside/js/player.js index b4b5d0e9..810a02aa 100644 --- a/telemeta/htdocs/timeside/js/player.js +++ b/telemeta/htdocs/timeside/js/player.js @@ -156,7 +156,7 @@ var Player = TimesideClass.extend({ }, play : function(){ var player = this; - if(!player || player.isPlaying()){ //TODO: remove?, multishot is set to false + if(!player || player.isPlaying()){ //soundManager multishot is set to false. We leave this check for safety return false; } var sound = player.getSound(); @@ -365,7 +365,7 @@ var Player = TimesideClass.extend({ return false; }); - //binds click for the pointer: TODO: change this way of getting the tsviweer!!!! + //binds click for the pointer var v = $J('#player').find('.ts-viewer'); v.unbind('click').click(function(evt){ var w = v.width(); diff --git a/telemeta/htdocs/timeside/js/ruler.js b/telemeta/htdocs/timeside/js/ruler.js index cbb6e837..7095a396 100644 --- a/telemeta/htdocs/timeside/js/ruler.js +++ b/telemeta/htdocs/timeside/js/ruler.js @@ -67,34 +67,23 @@ var Ruler = TimesideArray.extend({ } var $J = this.$J; var rulerContainer = this.getRulerContainer(); - var linesColor = this.color(rulerContainer.css('color')); - if(!linesColor){ - linesColor = '#000000'; - } - var lineAttr = { - 'stroke-width':1, - 'stroke': linesColor - }; - + //remove all elements not pointer or marker rulerContainer.find(':not(a.ts-pointer,a.ts-marker,a.ts-pointer>*,a.ts-marker>*)').remove(); //calculate h with an artifice: create a span (that will be reused later) with the "standard" label var firstSpan = $J('').css({ - 'display':'block', - 'position':'absolute' - }).html('00000'); //typical timelabel should be '00:00', with '00000' we assure a bit of extra safety space - //note also that display and position must be set as below to calculate the proper outerHeight + 'display':'block', + 'position':'absolute' + }).html('00000'); //typical timelabel should be '00:00', with '00000' we assure a bit of extra safety space + //note also that display and position must be set as below to calculate the proper outerHeight rulerContainer.append(firstSpan); //to calculate height, element must be in the document, append it var verticalMargin = 1; var h = 2*(verticalMargin+firstSpan.outerHeight()); - + //TODO: set height in div ruler???? var obj = this.calculateRulerElements(rulerContainer.width(),h,firstSpan.outerWidth()); - - var paper = Raphael(rulerContainer[0], rulerContainer.width(), h); - var path = paper.path(obj.path); - path.attr(lineAttr); - + this.drawRuler(rulerContainer,h,obj.path); + var labels = obj.labels; if(labels){ for(var i=0; i >> 1)+1; //if fontsize:10 or 9, tW:9, if fontSize:8 or 7, tW:7, and so on + var arrowBaselineWidth = 9; //2*((fontSize - 1) >>> 1)+1; //if fontsize:10 or 9, tW:9, if fontSize:8 or 7, tW:7, and so on var canvas = undefined; var canvasClass = cssPref + className+'-canvas'; if(this.isSvgSupported()){ - canvas = this.createCanvasSvg(waveImgDiv, tW); + canvas = this.createCanvasSvg(waveImgDiv, arrowBaselineWidth); var path = canvas.childNodes[0]; //note that $J(canvas).find('path') does not work in FF at least 3.5 path.setAttributeNS(null,'class',canvasClass); this.moveCanvas = function(pixelOffset){ @@ -101,7 +101,7 @@ var RulerMarker = TimesideClass.extend({ } this.jQueryCanvas = $J(canvas); }else{ - canvas = this.createCanvasVml(waveImgDiv, tW); + canvas = this.createCanvasVml(waveImgDiv, arrowBaselineWidth); this.jQueryCanvas = $J(canvas.node); var attributes = ruler.classToRaphaelAttr[canvasClass]; if(!attributes){ @@ -244,7 +244,7 @@ var RulerMarker = TimesideClass.extend({ paper.canvas.style.height='100%'; paper.canvas.width='100%'; paper.canvas.height='100%'; - //apparently, there is also a clip style declaration. The following code trhows an error in IE7: + //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) } diff --git a/telemeta/htdocs/timeside/js/timeside.js b/telemeta/htdocs/timeside/js/timeside.js index 9a1f61aa..f6a24f74 100644 --- a/telemeta/htdocs/timeside/js/timeside.js +++ b/telemeta/htdocs/timeside/js/timeside.js @@ -154,7 +154,63 @@ //Defining the base TimeClass class. Player, Ruler, MarkerMap are typical implementations (see js files) //Basically we store here static methods which must be accessible in several timside sub-classes var TimesideClass = Class.extend({ + //init constructor. Define the 'bind' and 'fire' (TODO: rename as 'trigger'?) methods + //we do it in the init function so that we can set a private variable storing all + //listeners. This means we have to re-write all methods + init: function(){ + //the map for listeners. Must be declared in the init as it's private and NOT shared by all instances + //(ie, every instance has its own copy) + this.listenersMap={}; + }, + /** + * 3 methods defining listeners, events fire and bind (aloing the lines of jQuery.bind, unbind and trigger): + */ + bind : function(key, callback, optionalThisArgInCallback){ + if(!(callback && callback instanceof Function)){ + this.debug('cannot bind '+key+' to callback: the latter is null or not a function'); + return; + } + var listenersMap = this.listenersMap; + var keyAlreadyRegistered = (key in listenersMap); + if(!keyAlreadyRegistered){ + listenersMap[key] = []; + } + listenersMap[key].push({ + callback:callback, + optionalThisArgInCallback:optionalThisArgInCallback + }); + }, + unbind : function(){ + var listenersMap = this.listenersMap; + if(arguments.length>0){ + var key = arguments[0]; + if(key in listenersMap){ + delete listenersMap[key]; + } + }else{ + for(key in listenersMap){ + delete listenersMap[key]; + } + } + }, + fire : function(key, dataArgument){ + var listenersMap = this.listenersMap; + if(!(key in listenersMap)){ + this.debug('"'+key+'" fired but no binding associated to it'); + return; + } + var callbacks = listenersMap[key]; + var len = callbacks && callbacks.length ? callbacks.length : 0; + for(var i=0; i0){ - var key = arguments[0]; - if(key in listenersMap){ - delete listenersMap[key]; - } - }else{ - for(key in listenersMap){ - delete listenersMap[key]; - } - } - }, - fire : function(key, dataArgument){ - var listenersMap = this.listenersMap; - if(!(key in listenersMap)){ - this.debug('"'+key+'" fired but no binding associated to it'); - return; - } - var callbacks = listenersMap[key]; - var len = callbacks && callbacks.length ? callbacks.length : 0; - for(var i=0; i