+/**
+* 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;
.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
.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;
.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;
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
},
//resourceType can be: 'collection', 'item', 'marker'
- //addResource RENAME TODO!!!!
addResourceToPlaylist: function(playlistId,resourceType,objectId, callbackOnSuccess,callbackOnError){
var send = {
'public_id':uniqid(),
'<div zero_top_padding><textarea class="markersdivDescription"></textarea></div>',
'<div zero_top_padding><a class="markersdivSave">OK</a></div>',
'<div zero_top_padding><span style="font-size:75%;color:#999">'+gettrans('author')+': '+marker.author+'</span></div>'].join("");
- var div = this.$J('<div/>').attr('tabindex','0').addClass("markerdiv").html(html_); //TODO: avoid text nodes
+ var div = this.$J('<div/>').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');
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;
idx = this.insertionIndex(identifier);
}
if(idx<0 || idx>=this.length){
- //TODO: handle error
this.debug('remove: marker not found');
return;
}
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";
//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;
},
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();
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();
}
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('<span/>').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 <labels.length;i++){
'bottom':'',
'top':'0',
'left':labels[i][1]+'px'
- });
+ });
rulerContainer.append(span);
}
}else{
},
+ drawRuler: function(rulerContainer,h,rulerLinesPath){
+ if(!this.isSvgSupported()){
+ var paper = Raphael(rulerContainer[0], rulerContainer.width(), h);
+ var rect = paper.rect(0,0, rulerContainer.width(), h/2);
+ var path = paper.path(rulerLinesPath);
+ var attr = this.getVmlAttr;
+ rect.attr(attr('ts-ruler-upper-rect'));
+ path.attr(attr('ts-ruler-lines'));
+ return;
+ }
+ //create svg. Note that elements must be created within a namespace (createElementNS)
+ //and attributes must be set via .setAttributeNS(null,name,value)
+ //in other words, jQuery does not work (maybe in future releases)
+ var $J = this.$J;
+ var svgNS = "http://www.w3.org/2000/svg";
+ var d = document;
+ var svg = d.createElementNS(svgNS, "svg:svg");
+ svg.setAttributeNS( null, "width", rulerContainer.width()); //TODO: optimize width is called also below
+ svg.setAttributeNS( null, "height", h);
+ rulerContainer.append($J(svg));
+
+ var rect = d.createElementNS(svgNS, "svg:rect");
+ rect.setAttributeNS( null, "x", 0);
+ rect.setAttributeNS( null, "y", 0);
+ rect.setAttributeNS( null, "width", rulerContainer.width());
+ rect.setAttributeNS( null, "height", (h/2));
+ rect.setAttributeNS( null, "class", 'ts-ruler-upper-rect');
+ svg.appendChild(rect);
+ var lines = d.createElementNS(svgNS, "svg:path");
+ lines.setAttributeNS( null, "d", rulerLinesPath);
+ lines.setAttributeNS( null, "class", 'ts-ruler-lines');
+ svg.appendChild(lines);
+ },
/**
* returns an object with the following properties:
* path: (string) the path of the ruler to be drawn
labels[i] = [makeTimeLabel(sectionDuration*i),fontLeftMargin+i*sectionWidth];
}
return {
- 'path': path.join('')+' z',
+ 'path': path.join(''),
'labels':labels
};
},
//overridden: Note that the pointer is NOT cleared!!!!!
clear: function(){
var markers = this._super();
- // if('getPointer' in this){
- // markers.push(this.getPointer());
- // }
for( var i=0; i<markers.length; i++){
markers[i].remove();
}
});
//to avoid scrolling
- //TODO: what happens if the user releases the mouse OUTSIDE the browser????
+ //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);
this.positionInPixels = 0;
this.positionAsViewerRatio = 0;
- var tW = 9; //2*((fontSize - 1) >>> 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){
}
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){
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)
}
//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; i<len; i++){
+ var obj = callbacks[i];
+ if('optionalThisArgInCallback' in obj){
+ obj.callback.apply(obj.optionalThisArgInCallback, [dataArgument]);
+ }else{
+ obj.callback(dataArgument);
+ }
+ }
+ },
/**
* function to calculate the text width according to a text and a given fontsize
*/
console.log(message);
}
},
- //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; i<len; i++){
- var obj = callbacks[i];
- if('optionalThisArgInCallback' in obj){
- obj.callback.apply(obj.optionalThisArgInCallback, [dataArgument]);
- }else{
- obj.callback(dataArgument);
- }
- }
- },
//vml (+css specific functions): Used in ruler.js and RulerMarker.js:
projects / telemeta.git / commitdiff