From: riccardo Date: Tue, 7 Jun 2011 15:30:36 +0000 (+0200) Subject: restored changes X-Git-Tag: 1.1~130 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=f10d7f924c3ed6fd882b2782e4067bb3c621aed1;p=telemeta.git restored changes --- f10d7f924c3ed6fd882b2782e4067bb3c621aed1 diff --cc telemeta/htdocs/css/player.css index 7a07bd0f,7a07bd0f..98751b81 --- a/telemeta/htdocs/css/player.css +++ b/telemeta/htdocs/css/player.css @@@ -1,21 -1,21 +1,6 @@@ --/** --* 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 { ++ ++/*.ts-skin-lab .ts-player { padding: 0; clear: both; background: white; @@@ -30,46 -30,46 +15,48 @@@ width: 360px; height: 130px; background: transparent; --} ++}*/ #player_maximized .ts-player .ts-wave, #player_maximized .ts-player .ts-image { height: 170px; } --.ts-skin-lab .ts-player .ts-viewer { ++/*.ts-skin-lab .ts-player .ts-viewer { margin: 0; border: 0; --} --.ts-skin-lab .ts-player .ts-viewer .ts-pointer { ++}*/ ++/*.ts-skin-lab .ts-player .ts-viewer .ts-pointer { background: #BB0000; color: #DDD; border: solid 1px #BB0000; } --.ts-skin-lab .ts-player .ts-viewer a.ts-pointer { ++.ts-skin-lab .ts-player .ts-viewer .ts-pointer { color: #BB0000; background: white; padding: 0 0.5em; --} ++ border: solid 1px #BB0000; ++}*/ /*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 ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/ --.ts-pointer-canvas { ++/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line { fill: #BB0000; stroke-width:0; --} --.ts-skin-lab .ts-player .ts-viewer .ts-marker { ++}*/ ++/*.ts-skin-lab .ts-player .ts-viewer .ts-marker { padding: 0 0.5em; background: #e65911; color: #FFF; --} ++}*/ /*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 ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/ --.ts-marker-canvas { ++/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line { fill: #e65911; stroke-width:0; --} --.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { ++}*/ ++ ++/*.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { background: #595959; color: white; } @@@ -78,27 -78,27 +65,12 @@@ background: #2e2e2e; color: #ADADAD; border-bottom: solid 1px #adadad; --} ++}*/ .ts-skin-lab .ts-player .ts-control { background: url('../images/player_controlbg.png'); } --/*.ts-skin-lab .ts-player .ts-control .ts-playback a { -- padding: 28px 0 0 0; -- height :20px; for IE5/Win only -- margin-right: 0px; --} -- --.ts-skin-lab .ts-player .ts-control a { -- height:28px; -- margin-right: 0px; --} -- --.ts-skin-lab .ts-player .ts-control .ts-layout { -- margin-left: 0px; --} --*/ #player_maximized, #player_minimized { position: relative; } @@@ -127,29 -127,29 +99,22 @@@ display: none; } --#player .ts-visualizer{ ++/*#player .ts-visualizer{ margin:5px; } --.ts-ruler{ -- color: white; -- background-color: #333; -- font-size: 10px; --} -- --.ts-ruler{ ++.ts-skin-lab .ts-player .ts-ruler{ color: white; background-color: #2E2E2E; font-size: 10px; line-height: 13px; } --/*ruler canvas (svg)"*/ --.ts-ruler-upper-rect{ ++.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{ fill: #595959; stroke-width:0; -- stroke: #595959; /*to be sure...*/ ++ stroke: #595959; to be sure... } --.ts-ruler-lines{ ++.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{ stroke-width:1; stroke:#ADADAD; --} ++}*/ diff --cc telemeta/htdocs/timeside/js/player.js index cf85aabc,cf85aabc..a0212737 --- a/telemeta/htdocs/timeside/js/player.js +++ b/telemeta/htdocs/timeside/js/player.js @@@ -361,15 -361,15 +361,15 @@@ Timeside.classes.Player = Timeside.clas "
", //"
", //"
", -- "", -- "", -- "", -- "", -- "", ++ "", ++ "", ++ "", ++ "", ++ "", // "", //"
", -- "", ++ "", "
", "", "", diff --cc telemeta/htdocs/timeside/js/ruler.js index 73059f7d,73059f7d..face461a --- a/telemeta/htdocs/timeside/js/ruler.js +++ b/telemeta/htdocs/timeside/js/ruler.js @@@ -132,13 -132,13 +132,17 @@@ Timeside.classes.Ruler = Timeside.class }, drawRuler: function(rulerContainer,h,rulerLinesPath){ ++ var cssPref = this.cssPrefix; ++ var upperRectClass = cssPref + 'svg-' + 'ruler-upper-rect'; ++ var rulerLinesClass = cssPref + 'svg-' + 'ruler-lines'; ++ 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')); ++ rect.attr(attr(upperRectClass)); ++ path.attr(attr(rulerLinesClass)); return; } //create svg. Note that elements must be created within a namespace (createElementNS) @@@ -157,11 -157,11 +161,11 @@@ 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'); ++ rect.setAttributeNS( null, "class", upperRectClass); svg.appendChild(rect); var lines = d.createElementNS(svgNS, "svg:path"); lines.setAttributeNS( null, "d", rulerLinesPath); -- lines.setAttributeNS( null, "class", 'ts-ruler-lines'); ++ lines.setAttributeNS( null, "class", rulerLinesClass); svg.appendChild(lines); }, /** diff --cc telemeta/htdocs/timeside/js/rulermarker.js index 0d095862,0d095862..35c6d816 --- a/telemeta/htdocs/timeside/js/rulermarker.js +++ b/telemeta/htdocs/timeside/js/rulermarker.js @@@ -91,7 -91,7 +91,7 @@@ Timeside.classes.RulerMarker = Timeside 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'; ++ var canvasClass = cssPref + 'svg-'+className+'-line'; if(this.isSvgSupported){ 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 diff --cc telemeta/htdocs/timeside/js/timeside.js index 0a52009a,0a52009a..2310d904 --- a/telemeta/htdocs/timeside/js/timeside.js +++ b/telemeta/htdocs/timeside/js/timeside.js @@@ -197,6 -197,6 +197,15 @@@ Timeside.classes.TimesideClass = Timesi //(ie, every instance has its own copy) this.listenersMap={}; }, ++ ++ cssPrefix : 'ts-', //actually almost uneuseful, still here for backward compatibility with old code (TODO: remove?) ++ $J : jQuery, ++ debugging : false, ++ debug : function(message) { ++ if (this.debugging && typeof console != 'undefined' && console.log) { ++ console.log(message); ++ } ++ }, /** * 3 methods defining listeners, events fire and bind (aloing the lines of jQuery.bind, unbind and trigger): @@@ -338,15 -338,15 +347,7 @@@ return ret.join(""); }, -- cssPrefix : 'ts-', //actually almost uneuseful, still here for backward compatibility with old code (TODO: remove?) -- $J : jQuery, -- debugging : false, -- debug : function(message) { -- if (this.debugging && typeof console != 'undefined' && console.log) { -- console.log(message); -- } -- }, -- ++ //vml (+css specific functions): Used in ruler.js and RulerMarker.js: /** diff --cc telemeta/htdocs/timeside/skins/lab/style.css index 33197339,33197339..94371d14 --- a/telemeta/htdocs/timeside/skins/lab/style.css +++ b/telemeta/htdocs/timeside/skins/lab/style.css @@@ -1,128 -1,128 +1,150 @@@ ++/* ++* Style for the timeside player. The skeleton of the player must be embedded inside a div of class C (in this case ++* C = 'ts-skin-lab') and reads: ++* ++*
++*
>>RULER CONTAINER ++*
>>PLAYER BODY CONTAINER which includes: ++*
>>MARKER LINES CONTAINER ++*
>>WAVE IMAGE CONTAINER ++* ++*
++*
++*
++*
", >>CONTROLS (BUTTONS) CONTAINER ++* ++* ++* ++* ++* ++* ++*
++* ++* ++* ++*
++*
++*
++* ++* IMPORTANT NOTES: ====================================================== ++* 1) Css rules here should deal only with player APPEARENCE, not player LAYOUT and POSITIONING. For instance, some styles properties, ++* namely position and overflow of divs, are unnecessary here, as they will be overridden by javascript code, ++* 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 classes (classes beginning with '.ts-svg-') have specific svg-css syntax (have a look) ++* Svg is not supported in IE7-8, as usual, and apparently even 9 (it should be, it is not according to Raphael function detecting svg support), ++* In this cases, raphael library will care about building VML canvas, and a parser inside the player will read class rules and send them to raphael library ++* in the form of a map suitable for the 'attr' function in Raphael. Note that: ++* a) Many but not all css properties are supported for conversion. ++* b) The parser READS ONLY STAND ALONE RULES, SO BE CAREFUL: If we want,eg, define css for '.ts-svg-marker-line', write something ++* like: ++* .aClass .ts-marker-canvas'{...} ++* will not be rendered ++*/ ++ .ts-skin-lab .ts-player { -- background: #3c4251; -- padding-top: 10px; -- padding-bottom: 10px; -- border: solid #b2b2b2 1px; ++ padding: 0; ++ /*clear: both; ++ background: white;*/ ++ /*padding-top: 10px; ++ padding-bottom: 10px;*/ ++ border: solid 1px #ADADAD; ++ margin-top: 2px; } .ts-skin-lab .ts-player .ts-viewer { -- margin: 0 12px 10px 12px; -- border: solid 1px white; ++ margin: 0; ++ border: 0; } --.ts-skin-lab .ts-player .ts-viewer .ts-marker { -- color: white; -- background: #7290bc; --} --.ts-skin-lab .ts-player .ts-viewer a.ts-marker, .ts-skin-lab .ts-player .ts-viewer a.ts-pointer { -- text-decoration: none; --} -- --.ts-skin-lab .ts-player .ts-viewer { /*.ts-pointer {*/ -- color: #3c4251; -- background: #e7e7e7; --} --.ts-pointer{ -- border: 1px solid #a10006 !important; -- -moz-border-radius: 1ex !important; -- -webkit-border-radius: 1ex !important; -- border-radius: 1ex !important; -- color: #6A0307 !important; --} --.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-label { -- color: #c3c2cc; -- background: #2a3242; -- padding-bottom: 1px; -- padding-left: 2px; -- line-height: 13px; --} -- --.ts-skin-lab .ts-player .ts-ruler .ts-section .ts-lines { -- background: #384051; -- color: #9498a1; -- border-bottom: solid 1px white; ++.ts-skin-lab .ts-player .ts-ruler{ ++ color: white; ++ background-color: #2E2E2E; ++ font-size: 10px; line-height: 13px; } --.ts-skin-lab .ts-player .ts-wave .ts-image { -- background: #090e0d ; ++.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{ ++ fill: #595959; ++ stroke-width:0; ++ stroke: #595959; /*to be sure...*/ } -- --.ts-skin-lab .ts-player .ts-control { -- background: url('img/controlbg.png'); --/* height: 28px; -- border-top: dotted #b2b2b2 1px; */ ++.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{ ++ stroke-width:1; ++ stroke:#ADADAD; } --/*.ts-skin-lab .ts-player .ts-control .ts-layout { -- margin-left: 12px; -- margin-right: 12px; -- padding-top: 0px; -- --.ts-skin-lab .ts-player .ts-control .ts-playback a { -- display: block; -- float: left; -- width: 30px; -- padding: 28px 0 0 0; -- overflow: hidden; -- height: 0px !important; -- margin-right: 0px; ++/*wave:*/ ++.ts-skin-lab .ts-player .ts-wave { ++ height: 130px; } --.ts-skin-lab .ts-player .ts-control .ts-playback a:hover { -- background-position: 0 -28px; ++.ts-skin-lab .ts-player .ts-wave .ts-image { ++ width: 360px; ++ height: 130px; ++ background: transparent; } --.ts-volume, .ts-volume:hover, .ts-volume:visited { -- background-image: url('img/volume.png'); -- background-repeat: no-repeat; -- width:60px !important; ++/*.ts-skin-lab .ts-player { ++ background: #3c4251; ++ ++ border: solid #b2b2b2 1px; } --.ts-skin-lab .ts-player .ts-control .ts-playback .ts-play { -- background-image: url('img/play.png'); --} ++.ts-skin-lab .ts-player .ts-viewer { ++ margin: 0 12px 10px 12px; ++ border: solid 1px white; ++}*/ --.ts-skin-lab .ts-player .ts-control .ts-playback .ts-pause { -- background-image: url('img/pause.png'); ++.ts-skin-lab .ts-player .ts-viewer .ts-marker { ++ padding: 0 0.5em; ++ background: #e65911; ++ color: #FFF; ++ text-decoration: none; ++ /*color: white; ++ background: #7290bc;*/ } --.ts-skin-lab .ts-player .ts-control .ts-playback .ts-rewind { -- background-image: url('img/rewind.png'); ++.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line { ++ fill: #e65911; ++ stroke-width:0; } --.ts-skin-lab .ts-player .ts-control .ts-playback .ts-forward { -- background-image: url('img/forward.png'); --} ++.ts-skin-lab .ts-player .ts-viewer a.ts-pointer { ++ color: #BB0000; ++ background-color: white; ++ padding: 0 0.5em; ++ border: solid 1px #BB0000; --.ts-skin-lab .ts-player .ts-control .ts-playback .ts-set-marker { -- background-image: url('img/setmarker.png'); ++ text-decoration: none; ++ /*background-color: #e7e7e7; ++ border: 1px solid #3c4251; #a10006 !important;*/ ++ -moz-border-radius: .3em !important; ++ -webkit-border-radius: .3em !important; ++ border-radius: .3em !important; ++ /*color: #3c4251; #6A0307 !important;*/ } --.ts-skin-lab .ts-player .ts-marker-control .ts-set-marker { -- display: block; -- width: 89px; -- padding: 28px 0 0 0; -- overflow: hidden; -- height: 0px !important; -- background-image: url('img/setmarker.gif'); -- margin: 5px auto 0 auto; ++.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line { ++ fill: #BB0000; ++ stroke-width:0; } --.ts-skin-lab .ts-player .ts-marker-control .ts-set-marker:hover { -- background-position: 0 -21px; ++.ts-skin-lab .ts-player .ts-wave .ts-image { ++ background: #090e0d ; } --.ts-skin-lab .ts-player .ts-marker-control { -- border-top: dotted #b2b2b2 1px; -- border-bottom: dotted #b2b2b2 1px; -- height: 30px; ++.ts-skin-lab .ts-player .ts-control { ++ background: url('img/controlbg.png'); } -- */ /** display (inline-block) and overflow of a is set inside javascript*/ --.ts-skin-lab .ts-player .ts-control a { ++.ts-skin-lab .ts-player .ts-control .ts-button { background-repeat: no-repeat; height:28px; width:28px; @@@ -147,13 -147,13 +169,6 @@@ background-image: url('img/setmarker.png'); } --/*.ts-skin-lab .ts-player .ts-control .ts-volume { -- background-image: url('img/volume.png'); -- width:90px !important; --}*/ --/*.ts-skin-lab .ts-player .ts-control .ts-volume-speaker { -- background-image: url('img/volumeon.png'); --}*/ .ts-skin-lab .ts-player .ts-control .ts-volume-speaker-on { background-image: url('img/volumeon.png'); width:24px; @@@ -167,7 -167,7 +182,7 @@@ background-position: -3px left; background-repeat: repeat-x; height:10px; -- width:56px; ++ width:42px; margin-top:9px; -moz-border-radius: 5px; -webkit-border-radius: 5px; @@@ -196,6 -196,6 +211,36 @@@ padding-right: 60px; font-size: 80%; color:white; -- } ++ ++/*.ts-skin-lab .ts-player .ts-ruler{ ++ color: #c3c2cc; ++ background-color: #2a3242; ++}*/ ++ ++/*canvas (svg). 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 ++ALONE ARE PARSED (eg ".ts-blabla, .ts-marker-canvas{...}" WILL NOT BE RECOGNIZED)*/ ++ ++/*ruler canvas (svg)"*/ ++/*.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-upper-rect{ ++ fill: #2a3242; ++ stroke-width:0; ++ stroke: #c3c2cc; to be sure... ++}*/ ++/*.ts-skin-lab .ts-player .ts-ruler .ts-svg-ruler-lines{ ++ stroke-width:1; ++ stroke:#9498a1; ++}*/ ++/*class for the canvas (svg) associated to a marker. ++.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line { ++ fill: #a10006; ++ stroke-width:0; ++} */ ++ ++/*class for the canvas (svg) associated to a marker.*/ ++/*.ts-skin-lab .ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line { ++ fill: #7290bc; ++ stroke-width:0; ++}*/