dojox/av/widget/ProgressSlider.js

  • Provides:

    • dojox.av.widget.ProgressSlider

  • Requires:

    • dijit._Widget in common in project dijit
    • dijit._Templated in common in project dijit

  • dojox.av.widget.ProgressSlider

    • type
      Function
    • chains:
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
      • dijit._Templated: (call)
    • mixins:
      • dijit._Templated.prototype: (prototype)
    • summary
      A custom slider widget to use with dojox.av.widget.Player.
    • description
      Displays the current playhead position of the media. Has two
progress bars: one for playhead position, and one for download
progress.

  • dojox.av.widget.ProgressSlider.templateString

    • summary
  • dojox.av.widget.ProgressSlider.postCreate
       
    • type
      Function
    • source: [view] 
                    
      

                      this.seeking = false;
        this.handleWidth = dojo.marginBox(this.handle).w;
        var dim = dojo.coords(this.domNode);
        this.finalWidth = dim.w
        this.width = dim.w-this.handleWidth;
        this.x = dim.x;

        
        dojo.setSelectable(this.domNode, false);
        dojo.setSelectable(this.handle, false);
                    
      
                    
    • summary
      Initialize slider.
  • dojox.av.widget.ProgressSlider.setMedia
       
    • type
      Function
    • parameters: 
      • med: (typeof Object)
      • playerWidget: (typeof )
    • source: [view] 
                    
      

                      this.playerWidget = playerWidget;
        this.media = med;
        dojo.connect(this.media, "onMetaData", this, function(data){
         if(data && data.duration){
          this.duration = data.duration;
         }
        });
        dojo.connect(this.media, "onEnd", this,  function(){
         dojo.disconnect(this.posCon);
         this.setHandle(this.duration);
        });
        dojo.connect(this.media, "onStart", this, function(){
         this.posCon = dojo.connect(this.media, "onPosition", this, "setHandle");
        });

        
        dojo.connect(this.media, "onDownloaded", this, function(percent){
         this.setLoadedPosition(percent*.01);
         this.width = this.finalWidth * .01 * percent;
        });
                    
      
                    
    • summary
      A common method to set the media in all Player widgets.
May do connections and initializations.
  • dojox.av.widget.ProgressSlider.onDrag
       
    • type
      Function
    • parameters: 
      • evt: (typeof HTMLEvent)
    • source: [view] 
                    
      

                      var x = evt.clientX - this.x;
        if(x<0) x = 0;
        if(x>this.width-this.handleWidth) x=this.width-this.handleWidth;

        
        var p = x/this.finalWidth;
        this.media.seek( this.duration * p );
        dojo.style(this.handle, "marginLeft", x+"px");
        dojo.style(this.progressPosition, "width", x+"px");
                    
      
                    
    • summary
      Fired when the mouse is moved. Sets the slider.
  • dojox.av.widget.ProgressSlider.startDrag
       
    • type
      Function
    • source: [view] 
                    
      

                      dojo.setSelectable(this.playerWidget.domNode, false);
        this.seeking = true;
        this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag");
        this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag");
                    
      
                    
    • summary
      Fired onmousedown of the slider handle.
  • dojox.av.widget.ProgressSlider.endDrag
       
    • type
      Function
    • source: [view] 
                    
      

                      dojo.setSelectable(this.playerWidget.domNode, true);
        this.seeking = false;
        if(this.cmove) dojo.disconnect(this.cmove);
        if(this.cup) dojo.disconnect(this.cup);
        this.handleOut();
                    
      
                    
    • summary
      Fired on document.onmouseup.
  • dojox.av.widget.ProgressSlider.setHandle
       
    • type
      Function
    • parameters: 
      • time: (typeof )
    • source: [view] 
                    
      

                      if(!this.seeking){
         var w = this.width-this.handleWidth;
         var p = time/this.duration;
         var x = p*w;

         
         dojo.style(this.handle, "marginLeft", x+"px");
         dojo.style(this.progressPosition, "width", x+"px");
        }
                    
      
                    
    • summary
      Sets the slider handle (when it is not being dragged)
  • dojox.av.widget.ProgressSlider.setLoadedPosition
       
    • type
      Function
    • parameters: 
      • decimal: (typeof )
    • source: [view] 
                    
      

                      dojo.style(this.progressLoaded, "width", (this.finalWidth*decimal)+"px");
                    
      
                    
    • summary
      Sets the download progress bar to the percentage of how much
the media has been downloaded.
  • dojox.av.widget.ProgressSlider.handleOver
       
    • type
      Function
    • source: [view] 
                    
      

                      dojo.addClass(this.handle, "over");
                    
      
                    
    • summary
      Highlights the slider handle on mouseover, and
stays highlighted during drag.
  • dojox.av.widget.ProgressSlider.handleOut
       
    • type
      Function
    • source: [view] 
                    
      

                      if(!this.seeking){
         dojo.removeClass(this.handle, "over");
        }
                    
      
                    
    • summary
      Unhighlights handle onmouseover, or on endDrag.
  • dojox.av.widget.ProgressSlider.onResize
       
    • type
      Function
    • parameters: 
      • playerDimensions: (typeof )
    • source: [view] 
                    
      

                      var dim = dojo.coords(this.domNode);
        this.finalWidth = dim.w;
                    
      
                    
    • summary
      Handles player resize. Need to recalculate the width of
position an download bars.
  • dojox.av.widget.ProgressSlider.seeking
       
    • summary
  • dojox.av.widget.ProgressSlider.handleWidth
       
    • summary
  • dojox.av.widget.ProgressSlider.finalWidth
       
    • summary
  • dojox.av.widget.ProgressSlider.width
       
    • summary
  • dojox.av.widget.ProgressSlider.x
       
    • summary
  • dojox.av.widget.ProgressSlider.playerWidget
       
    • summary
  • dojox.av.widget.ProgressSlider.media
       
    • summary
  • dojox.av.widget.ProgressSlider.duration
       
    • summary
  • dojox.av.widget.ProgressSlider.posCon
       
    • summary
  • dojox.av.widget.ProgressSlider.cmove
       
    • summary
  • dojox.av.widget.ProgressSlider.cup
       
    • summary
  • dojox.av.widget
       
    • type
      Object
    • summary
  • dojox.av
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary