Changeset 18b63a6


Ignore:
Timestamp:
May 24, 2011 4:42:42 PM (4 years ago)
Author:
riccardo <riccardo@…>
Branches:
master, crem, crem2, crem3, dev, dev2, diadems, dj1.6, feature/breadcrumbs, feature/ts-0.5, feature/ts-0.5.4, feature/writecache, forma, generic, instru_search, lam, lam2, mapsv3, merge, nlivemulti, prob, production, release/1.4.4, sabiod, search, security, server, social, storage, telecaster, test, video
Children:
48e642d
Parents:
310770b7
git-author:
riccardo <riccardo@…> (24/05/2011 16:42:42)
git-committer:
riccardo <riccardo@…> (24/05/2011 16:42:42)
Message:

using svg + raphael library

Location:
telemeta
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • telemeta/htdocs/timeside/js/playerLoader.js

    r5701e7f9 r18b63a6  
    5757} 
    5858 
     59//function loadPlayer_(htmlContainer, w, h, durationInMsec, soundUrl, callback){ 
     60//    var $ = jQuery; 
     61//    if(w<=0){ 
     62//        w = 360; 
     63//    } 
     64//    if(h<=0){ 
     65//        h= 130; 
     66//    } 
     67//    if(!callback || (typeof callback !== 'function')){ 
     68//        callback = function(){}; 
     69//    } 
     70//    if(!(htmlContainer instanceof $)){ 
     71//        htmlContainer = $(htmlContainer); 
     72//    } 
     73//    if(htmlContainer.length!=1){ 
     74//        throw 'invalid htmlContainer'; 
     75//    } 
     76//    var errMsg = ''; 
     77//    if(typeof durationInMsecOrAnalyzerUrl == 'number'){ 
     78//        load_player(soundUrl, durationInMsecOrAnalyzerUrl, itemId, visualizers, currentUserName); 
     79//    }else{ 
     80// 
     81//        $.ajax({ 
     82//            url: durationInMsecOrAnalyzerUrl, //'analyze/xml', 
     83//            dataType: 'xml', 
     84//            success: function(data){ 
     85//                //populatetable 
     86//                $J.each($J(data).find('data'),function(index,element){ 
     87//                    var elm = $J(element); 
     88//                    tableBody.append('<tr><td>'+elm.attr('name')+'</td><td>'+elm.attr('value')+'</td><td>' 
     89//                        +elm.attr('unit')+'</td></tr>'); 
     90//                }); 
     91//                //loaded analizer, loading player 
     92//                if(msgElm){ 
     93//                    msgElm.html('Loading player...'); 
     94//                } 
     95//                var duration = $J(data).find('#duration').attr('value'); 
     96//                duration = duration.split(":"); 
     97//                //format duration 
     98//                var pin = parseInt; 
     99//                var pfl = parseFloat; 
     100//                var timeInMSecs=pin(duration[0])*3600+pin(duration[1])*60+pfl(duration[2]); 
     101//                timeInMSecs = Math.round(timeInMSecs*1000); 
     102//                load_player(soundUrl, timeInMSecs, itemId, visualizers, currentUserName); 
     103//            }, 
     104//            error:function(){ 
     105//                errMsg = 'Error loading analyzer'; 
     106//            } 
     107//        }); 
     108//    } 
     109//} 
    59110 
    60111 
  • telemeta/htdocs/timeside/js/ruler.js

    r5701e7f9 r18b63a6  
    2525/** 
    2626 * Class representing the ruler (upper part) of the player. Requires jQuery 
    27  * wz_jsgraphics. 
     27 * and Raphael 
    2828 */ 
    2929var Ruler = TimesideArray.extend({ 
     30 
    3031    //init constructor: soundDuration is IN SECONDS!!! (float) 
    3132    init: function(viewer, soundDuration){ 
     
    4344            return waveContainer; 
    4445        }; 
    45         //ts-image-canvas has width=0. Why was not the case in old code? 
    46         //BECAUSE IN OLD CODE ts-image-canvas has style="width..height" defined, and not HERE!!!! 
     46        //TODO: we dont need containerWiever here!!! 
     47        //better: it is usefult only for the canvas defined below. However... 
    4748        this.getContainerWidth =function(){ 
    4849            return waveContainer.width(); 
    4950        }; 
    50          
    51          
    5251        this.debug( 'init ruler: container width '+this.getContainerWidth()); 
    5352         
    54          
    5553        //private function used in resize() defined below 
    56          
    57  
    5854        var container = viewer.find('.' + cssPref + 'ruler'); 
    5955         
     
    6460 
    6561    resize : function(){ 
    66         //code copied from old implementation, still to get completely what is going on here... 
    67         var sectionSteps = [[5, 1], [10, 1], [20, 2], [30, 5], [60, 10], [120, 20], [300, 30], 
    68         [600, 60], [1800, 300], [3600, 600]]; 
    69         //old computeLayout code 
    70         var fullSectionDuration,sectionSubDivision, sectionsNum; 
    71         var width = this.getContainerWidth(); 
    72         var duration = this.getSoundDuration(); 
    73         var cssPref = this.cssPrefix;//defined in superclass 
    74         var fontSize = 10; 
    75         var mfloor = Math.floor; //instanciating once increases performances 
    76         var $J = this.$J; //reference to jQuery 
    77         //this.debug('container width: ' +" "+width); 
    78  
    79  
    80         var i, ii = sectionSteps.length; 
    81         var timeLabelWidth = this.textWidth('00:00', fontSize); 
    82         for (i = 0; i < ii; i++) { 
    83             var tempDuration = sectionSteps[i][0]; 
    84             var subDivision = sectionSteps[i][1]; 
    85             var labelsNum = mfloor(duration / tempDuration); 
    86             if ((i == ii - 1) || (width / labelsNum > timeLabelWidth * 2)) { 
    87                 fullSectionDuration = tempDuration; 
    88                 sectionSubDivision = subDivision; 
    89                 sectionsNum = mfloor(duration / fullSectionDuration); 
    90                 //this.debug('(in _computeLayout) this.fullSectionDuration: ' + fullSectionDuration); 
    91                 //this.debug('(in _computeLayout) sectionsNum: ' +sectionsNum); 
    92                 //this.debug('(in _computeLayout) sectionSubDivision: ' +sectionSubDivision); 
    93                 break; 
    94             } 
    95         } 
    96         //old draw() code: 
     62        var duration = this.getSoundDuration(); //in seconds 
    9763        if (!duration) { 
    9864            this.debug("Can't draw ruler with a duration of 0"); 
    9965            return; 
    10066        } 
    101         //this.debug("draw ruler, duration: " + duration); 
    102  
    103         var container = this.getRulerContainer(); 
    104         var layout = container.find("."+cssPref + 'layout'); 
    105         //REDONE: if does not exists, create it 
    106         if(!layout || !(layout.length)){ 
    107             layout = $J('<div/>') 
    108             .addClass(cssPref + 'layout') 
    109             .css({ 
    110                 position: 'relative' 
    111             }) // bugs on IE when resizing 
    112             //TODO: bind doubleclick events!!!!!! 
    113             //.bind('dblclick', this.attachWithEvent(this._onDoubleClick)) 
    114             //.bind('resize', this.attachWithEvent(this.resize)) // Can loop ? 
    115             .appendTo(container); 
    116         }else{ 
    117             //remove all elements neither pointer (or children of it) nor marker (or children of it) 
    118             layout.find(':not(a.ts-pointer,a.ts-marker,a.ts-pointer>*,a.ts-marker>*)').remove(); 
    119         } 
    120  
    121         //        if (layout && layout.length){ 
    122         //            layout.remove(); 
    123         //        } 
    124         //        layout = $J('<div/>') 
    125         //        .addClass(cssPref + 'layout') 
    126         //        .css({ 
    127         //            position: 'relative' 
    128         //        }) // bugs on IE when resizing 
    129         //        //TODO: bind doubleclick events!!!!!! 
    130         //        //.bind('dblclick', this.attachWithEvent(this._onDoubleClick)) 
    131         //        //.bind('resize', this.attachWithEvent(this.resize)) // Can loop ? 
    132         //        .appendTo(container); 
    133  
    134          
    135  
    136         //creating sections 
    137         //defining function maketimelabel 
    138         var makeTimeLabel = this.makeTimeLabel; 
    139              
    140         //defining the function createSection 
    141         var _createSection = function(timeOffset, pixelWidth,timeLabelWidth) { 
    142             var section = $J('<div/>') 
    143             .addClass(cssPref + 'section') 
    144             .css({ 
    145                 fontSize: fontSize + 'px', 
    146                 fontFamily: 'monospace', 
    147                 width: pixelWidth, 
    148                 overflow: 'hidden' 
    149             }) 
    150             .append($J('<div />').addClass(cssPref + 'canvas')); 
    151  
    152             var topDiv = $J('<div/>') 
    153             .addClass(cssPref + 'label') 
    154             .appendTo(section); 
    155             var bottomDiv = $J('<div/>') 
    156             .addClass(cssPref + 'lines') 
    157                  
    158             .appendTo(section); 
    159             var empty = $J('<span/>').css({ 
    160                 visibility: 'hidden' 
    161             }).text('&nbsp;'); 
    162             var text; 
    163  
    164             if (pixelWidth > timeLabelWidth) { 
    165                 text = $J('<span/>') 
    166                 .text(makeTimeLabel(timeOffset)) 
    167                 .bind('mousedown selectstart', function() { //WHY THIS? 
    168                     return false; 
    169                 }); 
    170             } else { 
    171                 text = empty.clone(); 
     67 
     68         
     69        //build a canvas with raphael: 
     70        //setting global attributes: 
     71        var backgroundcolor = '#333'; 
     72        var lineAttr = { 
     73                        'stroke-width':1, 
     74                        'stroke':'#eeeeee' 
     75                    }; 
     76        var rulerContainer = this.getRulerContainer(); 
     77        rulerContainer.css({'backgroundColor':backgroundcolor}); 
     78 
     79        //remove all elements not pointer or marker 
     80        rulerContainer.find(':not(a.ts-pointer,a.ts-marker,a.ts-pointer>*,a.ts-marker>*)').remove(); 
     81 
     82        //set font size (maybe this will be placed in a global or static variable) 
     83        var h = 28; //TODO: change it (global var?) 
     84        var obj = this.calculateRulerElements(rulerContainer.width(),h,duration); 
     85        consolelog(obj); 
     86 
     87        var paper = Raphael(rulerContainer[0], rulerContainer.width(), h); 
     88        var path = paper.path(obj.path); 
     89        path.attr(lineAttr); 
     90 
     91        var labels = obj.labels; 
     92        if(labels){ 
     93            var $J = this.$J; 
     94            for(var i=0; i <labels.length;i++){ 
     95                var span = $J('<span/>').html(labels[i][0]).css({'color':'white', 'display':'block','position':'absolute','top':'0', 'left':labels[i][1]+'px'}); 
     96                rulerContainer.append(span); 
    17297            } 
    173             topDiv.append(text); 
    174             bottomDiv.append(empty); 
    175             return section; 
    176         }; 
    177         //function defined, creating sections: 
    178         var sections = new Array(); 
    179         var currentWidth = 0; 
    180         var sectionDuration, sectionWidth; 
    181         for (i = 0; i <= sectionsNum; i++) { 
    182             if (i < sectionsNum) { 
    183                 sectionDuration = fullSectionDuration; 
    184                 sectionWidth = mfloor(sectionDuration / duration * width); 
    185             } else { 
    186                 sectionDuration = duration - i * fullSectionDuration; 
    187                 sectionWidth = width - currentWidth; 
    188  
    189             } 
    190             var section = _createSection(i * fullSectionDuration, sectionWidth, timeLabelWidth); 
    191             if (i > 0) { 
    192                 section.css({ 
    193                     left: currentWidth, 
    194                     top: 0, 
    195                     position: 'absolute' 
    196                 }); 
    197             } 
    198             section.duration = sectionDuration; 
    199             layout.append(section); 
    200             currentWidth += section.width(); 
    201             sections[i] = section; 
    202         } 
    203  
    204         //function to draw section rulers: 
    205         var _drawSectionRuler= function(section, drawFirstMark) { 
    206             var j; 
    207                 
    208             var jg = new jsGraphics(section.find('.' + cssPref + 'canvas').get(0)); 
    209             jg.setColor(layout.find('.' + cssPref + 'lines').css('color')); 
    210             var height = section.height(); 
    211             var ypos; 
    212             for (j = 0; j < section.duration; j += sectionSubDivision) { 
    213                 if (j == 0) { 
    214                     if (drawFirstMark) { 
    215                         ypos = 0; 
    216                     } else { 
    217                         continue; 
    218                     } 
    219                 } else { 
    220                     ypos = (j == section.duration / 2) ? 1/2 + 1/8 : 3/4; 
    221                 } 
    222                 //var x = j / this.duration * this.width; 
    223                 var x = j / duration * width; 
    224                 jg.drawLine(x, height * ypos, x, height - 1); 
    225             } 
    226             jg.paint(); 
    227         }; 
    228         //draw section rulers 
    229         for (i = 0; i <= sectionsNum; i++) { 
    230             _drawSectionRuler(sections[i], (i > 0)); 
    231         } 
    232  
    233         
     98        } 
     99 
    234100        var pointer = undefined; 
    235101        if('getPointer' in this){ 
     
    249115        }); 
    250116 
     117    }, 
     118 
     119    /** 
     120     * returns an object with the following properties: 
     121     * path: (string) the path of the ruler to be drawn 
     122     * labels (array) an array of arrays ['text',x,y] 
     123     */ 
     124    calculateRulerElements: function(w,h){ 
     125        var fontSize = 10; 
     126        var duration = this.getSoundDuration(); 
     127         
     128        //the fontSize is actually a measure og height, seo we can set: 
     129        var fontMargin = 2; 
     130 
     131 
     132        var timeLabelWidth = this.textWidth('00:00', fontSize); 
     133        var timeLabelDuration = timeLabelWidth*duration/w; 
     134 
     135        //determine the ticks: 
     136        var sectionDurations = [1,2,5,10,30,60,120,300,1800,3600,7200,18000,36000]; 
     137        //sectionDurations in seconds. Note that 60=1 minute, 3600=1 hour (so the maximum sectionDuration is 36000=10hours) 
     138        var i=0; 
     139        var len = sectionDurations.length; 
     140        while(i<len && timeLabelDuration>sectionDurations[i]){ 
     141            i++; 
     142        } 
     143        var sectionDuration = sectionDurations[i]; 
     144        var sectionNums = parseInt(0.5+(duration/sectionDurations[i])); //ceil 
     145        var sectionWidth = w*sectionDuration/duration; 
     146 
     147        var tickCounts = [10,5,2,1]; 
     148        i=0; 
     149        var tickCount = tickCounts[0]; 
     150        while(i<tickCounts.length-1 && tickCounts[i]*2>sectionWidth){ 
     151            i++; 
     152        } 
     153        var tickAtHalfSectionWidthHigher = i==0 || i==2; //draw tick at half section higher if ticks are even 
     154        tickCount = tickCounts[i]; 
     155        var tickWidth = sectionWidth/tickCount; 
     156        var makeTimeLabel = this.makeTimeLabel; 
     157        var h_1 = h-1; //TODO: use line tickness instead of 1 
     158        var path = new Array(parseInt(0.5+(w/tickWidth))); 
     159        consolelog(path.length); 
     160        path[0] = ['M 0 '+h_1]; 
     161        len = path.length; 
     162        for(i=0;  i < len; i+=tickCount){ 
     163            for(var j=1; j<tickCount+1; j++){ 
     164                var k = i+j; 
     165                var x = (k*tickWidth); 
     166                //consolelog(k+') = '+x+' ; '+i+' * '+sectionWidth+' + '+j+' * '+tickWidth); 
     167                //if(x<w){ 
     168                    var y = (j==tickCount ? 0 : tickAtHalfSectionWidthHigher && j==(tickCount)/2 ? .5*h : .75*h); 
     169                    var baseline = ' L '+x+' '+h_1; 
     170                    path[k] = baseline; 
     171                    path[k] += ' L '+x+' '+y; 
     172                    path[k] += baseline; 
     173                //} 
     174            } 
     175        } 
     176        var labels = new Array(sectionNums); 
     177        for(i=0; i<sectionNums; i++){ 
     178            labels[i] = [makeTimeLabel(sectionDuration*i),fontMargin+i*sectionWidth]; 
     179        } 
     180        return {'path': path.join('')+' z', 'labels':labels}; 
    251181    }, 
    252182 
     
    303233        var layout = container.find("."+this.cssPrefix + 'layout'); 
    304234        var $J = this.$J; 
    305         var pointer = new RulerMarker($J(layout.get(0)),this.getWaveContainer(),markerClass); 
     235//        var pointer = new RulerMarker($J(layout.get(0)),this.getWaveContainer(),markerClass); 
     236 
     237         
     238        var pointer = new RulerMarker(this.getRulerContainer(),this.getWaveContainer(),markerClass); 
     239 
     240         
     241 
    306242        //call super constructor 
    307243        //if it is a pointer, dont add it 
     
    359295            var newPos = startPos; 
    360296            doc.bind('mousemove.'+eventId, function(evt){ 
    361                 var x = evt.pageX;  
     297                var x = evt.pageX; 
    362298                newPos = startPos+(x-startX); 
    363299                pointer.move(newPos); 
  • telemeta/htdocs/timeside/js/rulermarker.js

    r7c48145 r18b63a6  
    3030var RulerMarker = TimesideClass.extend({ 
    3131 
    32     init: function(rulerLayout, viewer, className) { 
     32    class2CanvasColor: { 
     33        'pointer':'#a10006', 
     34        'marker':'#e65911' 
     35    }, 
     36 
     37    init: function(rulerDiv, waveImgDiv, className) { 
    3338        this._super(); 
    3439        var $J = this.$J; 
     
    3742            return fontSize; 
    3843        } 
     44 
    3945        var zIndex = 1000; 
    4046        var tooltip = ''; 
    41         //TODO: why viewer get(0) ? more than one? check and maybe simplify 
    42         var painter = new jsGraphics(viewer.get(0)); 
    43         //from create (oldCode) 
     47 
    4448        var cssPref = this.cssPrefix; 
    45         var y = rulerLayout.find('.' + cssPref + 'label').outerHeight(); 
    46         //added by me:================ 
    47         if(className == "pointer"){ 
    48             y = 0; 
    49         } 
    50         //========================== 
     49 
    5150        var label = $J('<a/>') 
    5251        .css({ 
    5352            display: 'block', 
    54             width: '10px', 
     53            width: fontSize +'px', 
    5554            textAlign: 'center', 
    5655            position: 'absolute', 
    5756            fontSize: fontSize + 'px', 
    5857            fontFamily: 'monospace', 
    59             top: y + 'px' 
     58            top: 0 
    6059        }) 
    6160        .attr('href', '#') 
    6261        .addClass(cssPref + className) 
    63         .append('<span />') 
    64         //.hide(); 
    65  
     62        .html('<span>0</span>'); //the text inside the span is FUNDAMENTAL, although it will be replaced later, 
     63        //to calculate now the label position (see below *) 
     64        
     65         
    6666        if (tooltip){ 
    6767            label.attr('title', tooltip); 
    6868        } 
    6969 
    70         rulerLayout.append(label); 
    71          
    72         var height = viewer.height(); 
    73         var x = 0; 
    74         painter.drawLine(x, 0, x, height); 
    75          
    76         x     = [-4, 4, 0]; 
    77         y = [0, 0, 4]; 
    78  
    79         painter.fillPolygon(x, y); 
    80         painter.paint(); 
    81         var nodes = $J(painter.cnv).children(); 
    82  
     70        if(rulerDiv.css('position')!='relative'){ 
     71            rulerDiv.css({ 
     72                'position':'relative' 
     73            }); 
     74        } 
     75        rulerDiv.append(label); 
     76 
     77        
     78        if(className != "pointer"){ 
     79            label.css('top',rulerDiv.height()-label.outerHeight()); 
     80        } 
     81         
    8382        var style = {}; 
    8483        if (zIndex) { 
     
    8685            label.css(style); 
    8786        } 
    88         style.backgroundColor = ''; 
    89         //nodes.hide(); 
    90         nodes.css(style).addClass(cssPref + className) 
    91         .each(function(i, node) { 
    92             node.originalPosition = parseInt($J(node).css('left')); 
    93         }); 
    94  
     87         
    9588        //set the index, 
    9689        var index = -1; 
     
    108101            return label; 
    109102        } 
    110          
    111         this.getViewer = function(){ 
    112             return viewer; 
    113         } 
    114         this.getPainter = function(){ 
    115             return painter; 
     103 
     104 
     105        this.getRulerWidth = function(){ 
     106            return rulerDiv.width(); 
     107        } 
     108        this.getWaveHeight = function(){ 
     109            return waveImgDiv.height(); 
    116110        } 
    117111 
     
    119113        this.positionAsViewerRatio = 0; 
    120114 
     115        var tW = 2*((fontSize - 1) >>> 1)+1; //if fontsize:10 or 9, tW:9, if fontSize:8 or 7, tW:7, and so on 
     116         
     117        var fillColor = this.class2CanvasColor[className]; 
     118        var canvas = undefined; 
     119        if(this.isSvgSupported()){ 
     120            canvas = this.createCanvasSvg(waveImgDiv, tW); 
     121            var path = canvas.childNodes[0]; //note that $J(canvas).find('path') does not work in FF at least 3.5 
     122            path.setAttributeNS(null,'fill',fillColor); 
     123            path.setAttributeNS(null,'stroke-width',0); 
     124            this.moveCanvas = function(pixelOffset){ 
     125                //consolelog(pixelOffset); 
     126                canvas.setAttributeNS( null, "transform", "translate("+pixelOffset+",0)"); 
     127            } 
     128            this.jQueryCanvas = $J(canvas); 
     129        }else{ 
     130            canvas = this.createCanvasVml(waveImgDiv, tW); 
     131            this.jQueryCanvas = $J(canvas.node); 
     132            var attributes = { 
     133                'stroke-width':'0', 
     134                'fill':fillColor 
     135            }; 
     136            canvas.attr(attributes); //Raphael method 
     137            this.moveCanvas = function(pixelOffset){ 
     138                //for some reason, coordinates inside the VML object are stored by raphael with a zoom of 10: 
     139                this.jQueryCanvas.css('left',(10*pixelOffset)+'px'); 
     140            } 
     141            //apparently, when resizing the markers loose their attributes. Therefore: 
     142            var r = this.refreshPosition; //reference to current refreshPosition 
     143            this.refreshPosition = function(){ 
     144                r.apply(this); 
     145                canvas.attr(attributes); 
     146            } 
     147        } 
    121148    }, 
    122149 
     
    144171 
    145172    getNodes: function(){ 
    146         return this.$J(this.getPainter().cnv).children(); 
     173        return this.$J([]); 
     174    //return this.$J(this.getPainter().cnv).children(); 
    147175    }, 
    148176    //these methods are executed only if marker is movable (see Ruler.js) 
    149177 
    150178    move : function(pixelOffset) { 
    151         var width =  this.getViewer().width(); 
     179        var width =  this.getRulerWidth(); 
    152180        if (this.positionInPixels != pixelOffset) { 
    153181            if (pixelOffset < 0) { 
     
    156184                pixelOffset = width - 1; 
    157185            } 
    158             var nodes = this.getNodes(); 
    159             var $J = this.$J; 
    160             var mRound = this.mRound; 
    161             nodes.each(function(i, node) { 
    162                 $J(node).css('left', mRound(node.originalPosition + pixelOffset) + 'px'); 
    163             }); 
     186           //defined in the conmstructor (it depends on wehter the current browser supports SVG or not) 
     187            this.moveCanvas(pixelOffset); 
     188            
    164189            this.positionInPixels = pixelOffset; 
    165190            this.refreshLabelPosition(width); 
     
    172197    refreshLabelPosition : function(optionalContainerWidth){ 
    173198        if(!(optionalContainerWidth)){ 
    174             optionalContainerWidth = this.getViewer().width(); 
     199            optionalContainerWidth = this.getRulerWidth(); 
    175200        } 
    176201        var label = this.getLabel(); 
     
    192217    //function called on ruler.resize. Instead of recreating all markers, simply redraw them 
    193218    refreshPosition : function(){ 
    194         var width =  this.getViewer().width(); 
     219        var width =  this.getRulerWidth(); 
    195220        //store relativePosition: 
    196221        var rp = this.positionAsViewerRatio; 
     
    199224        //but in move might have been rounded: 
    200225        this.positionAsViewerRatio = rp; 
    201         //last thing: resize the vertical line. 
    202         //Assumptions (having a look at the web page element with a debugger and the code above 
    203         //which uses jsgraphics): 
    204         //The line is the first item (see drawLine above) 
    205         //not only the height, but also the height of the clip property must be set 
    206         var h = this.getViewer().height(); 
    207         var nodes = this.getNodes(); 
     226    }, 
     227 
     228     
     229    remove : function() { 
     230        var label = this.getLabel(); 
     231        label.remove(); 
     232        this.jQueryCanvas.remove(); //defined in the constructor 
     233        return this; 
     234    }, 
     235 
     236 
     237    createCanvasSvg: function(container, arrowBaseWidth){ 
     238        //<path fill="#0000ff" stroke="#000000" d="M0,0L9,0L4.5,5Z" style="stroke-width: 0px; left: 100px; position: absolute;" stroke-width="0" x="100px"></path> 
    208239        var $J = this.$J; 
    209         $J(nodes[0]).css({ 
    210             'height':h+'px', 
    211             'clip': 'rect(0px 1px '+h+'px 0px)' 
    212         }); 
    213     }, 
    214  
    215     remove : function() { 
    216         var $J = this.$J; 
    217         var painter = this.getPainter(); 
    218         var label = this.getLabel(); 
    219         painter.clear(); 
    220         $J(painter.cnv).remove(); 
    221         label.remove(); 
    222         return this; 
    223     }, 
    224  
     240        var svgNS = "http://www.w3.org/2000/svg"; 
     241        var d = document; 
     242        var svg = undefined; 
     243        if(container.children().length>0){ 
     244            svg = container.children().get(0); 
     245        }else{ 
     246            svg = d.createElementNS(svgNS, "svg:svg"); 
     247            container.append($J(svg)); 
     248        } 
     249            var group = d.createElementNS(svgNS, "svg:g"); 
     250            group.setAttributeNS( null, "transform", "translate(0,0)"); 
     251 
     252            var path = d.createElementNS(svgNS, "svg:path"); 
     253            path.setAttributeNS( null, "d", this.createCanvasPath(0,arrowBaseWidth)); 
     254             
     255            group.appendChild(path); 
     256            svg.appendChild(group); 
     257        
     258        return group; 
     259    //return $J('<path/>').attr('fill',fillColor).attr('style','fill:'+fillColor+';strokeWidth:0'); 
     260    }, 
     261 
     262    createCanvasVml: function(container, arrowBaseWidth){ 
     263        //for creating a vml object, we make use of raphael to avoid a pain in the ... implementing a non standard Microsoft syntax 
     264        //(which, after a glance, it's even syntactically a mess) 
     265        //unfotunately (and this is a real lack not even planned to be fixed, see raphael forums), 
     266        //raphael does not allow to wrap existing object, so we have to register in this.elementToPaperMap (see timeside.js) 
     267        //which is a map where to each container is associated a raphael paper: 
     268        var paper = this.elementToPaperMap && this.elementToPaperMap[container.get(0)]; 
     269        if(!paper){  
     270            var obj = this.elementToPaperMap; 
     271            if(!obj){ 
     272                this.elementToPaperMap = {}; 
     273                obj = this.elementToPaperMap; 
     274            } 
     275            paper = Raphael(container.get(0),container.width(),container.height()); 
     276            obj[container.get(0)] = paper; 
     277            //paper canvas is a div with weird dimensions. You can check it by printing paper.canvas.outerHTML in IE. 
     278            //We set them to 100% so we dont have clipping regions when resizing (maximizing) 
     279            paper.canvas.style.width='100%'; 
     280            paper.canvas.style.height='100%'; 
     281            paper.canvas.width='100%'; 
     282            paper.canvas.height='100%'; 
     283        //apparently, there is also a clip style declaration. The following code trhows an error in IE7: 
     284        //paper.canvas.style.clip = 'auto'; 
     285        //however, even leaving the clip style declaration as it is, it seems to work (the div spans the whole width) 
     286        } 
     287         
     288         
     289        var shape = paper.path(this.createCanvasPath(0, arrowBaseWidth)); 
     290        return shape; 
     291    }, 
     292 
     293    //w must be odd. Cause le central line must be centered. Example: 
     294    // 
     295    //      xxxxx 
     296    //       xxx 
     297    //        x 
     298    //        x 
     299    //        x 
     300    // 
     301    createCanvasPath: function(x,w){ 
     302        var halfW = w >>> 1; 
     303        var h = this.$J(window).height(); 
     304        return 'M '+(x-halfW)+' 0 L '+(x)+' '+(halfW)+' L '+x+' '+h+ 
     305        ' L '+ (x+1)+' '+h+' L '+(x+1)+ ' '+(halfW)+' L '+(x+halfW+1)+' 0 z'; 
     306    }, 
     307 
     308    //used for faster lookup 
    225309    mRound: Math.round 
    226310 
  • telemeta/htdocs/timeside/js/timeside.js

    r7c48145 r18b63a6  
    155155//Basically we store here static methods which must be accessible in several timside sub-classes 
    156156var TimesideClass = Class.extend({ 
     157    /** 
     158     * Returns whether SVG is supported. If it is the case, this property can simply return true. 
     159     * For a more clean code, one should remove this property, elementToPaperMap (see below), 
     160     * check where we call isSvgSupported (ruler.js and rulermarker.js) and eventually 
     161     * remove the vml methods in ruler.js and rulermarker.js  
     162     */ 
     163    isSvgSupported : function(){return Raphael.svg}, 
     164    /** 
     165     * Raphael unfortunately does not allow to wrap existing elements, which is a big lack not even planned to be implemented in 
     166     * future releases (see raphael forum). Therefore, we store here a map which binds html elements -> Raphael paper object 
     167     * This property can be deleted if svg is supported 
     168     */ 
     169    elementToPaperMap: {}, 
    157170 
    158171    /** 
  • telemeta/templates/telemeta_default/mediaitem_detail.html

    r5701e7f9 r18b63a6  
    6262    setTimeout(function(){ 
    6363        if(jQuery('#loading_span').length>0){ 
    64             playerError('SoundManager error. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser'); 
     64            playerError('SoundManager is not responding. Try to:\n - Reload the page\n - Empty the cache (see browser preferences) and reload the page\n - Restart the browser'); 
    6565        } 
    6666    },10000); 
     
    7272    {% endfor %} 
    7373     
    74     var scripts = ["{% url telemeta-timeside "js/wz_jsgraphics.js" %}", "{% url telemeta-timeside "js/timeside.js" %}","{% url telemeta-timeside "js/playerLoader.js" %}"]; 
     74    var scripts = ["{% url telemeta-timeside "js/raphael-min.js" %}","{% url telemeta-timeside "js/wz_jsgraphics.js" %}", "{% url telemeta-timeside "js/timeside.js" %}","{% url telemeta-timeside "js/playerLoader.js" %}"]; 
    7575 
    7676    jQuery(window).ready(function(){ 
Note: See TracChangeset for help on using the changeset viewer.