dojox/av/widget/VolumeButton.js

• Provides:

  • dojox.av.widget.VolumeButton

• Requires:

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

• dojox.av.widget.VolumeButton

  • type

    Function

  • chains:
    • dijit._Widget: (prototype)
    • dijit._Widget: (call)
    • dijit._Templated: (call)
  • mixins:
    • dijit._Templated.prototype: (prototype)
  • summary

    A volume widget to use with dojox.av.widget.Player

  • description

    Controls and displays the volume of the media. This widget
    opens a slider on click that is used to adjust the volume.
    The icon changes according to the volume level.

• dojox.av.widget.VolumeButton.templateString

  • summary

• dojox.av.widget.VolumeButton.postCreate

  • type

    Function

  • source: [view]
      this.handleWidth = dojo.marginBox(this.handle).w;
      this.width = dojo.marginBox(this.volumeSlider).w;
      this.slotWidth = 100;
      dojo.setSelectable(this.handle, false);
      this.volumeSlider = this.domNode.removeChild(this.volumeSlider);
  • summary

    Initialize the widget.

• dojox.av.widget.VolumeButton.setMedia

  • type

    Function

  • parameters:
    • med: (typeof Object)
  • source: [view]
      this.media = med;
      this.updateIcon();
  • summary

    A common method to set the media in all Player widgets.
    May do connections and initializations.

• dojox.av.widget.VolumeButton.updateIcon

  • type

    Function

  • parameters:
    • vol: (typeof Float)
  • source: [view]
      vol = (vol===undefined) ? this.media.volume() : vol;
      if(vol===0){
       dojo.attr(this.domNode, "class", "Volume mute");
      }else if(vol<.334){
       dojo.attr(this.domNode, "class", "Volume low");
      }else if(vol<.667){
       dojo.attr(this.domNode, "class", "Volume med");
      }else{
       dojo.attr(this.domNode, "class", "Volume high");
      }
  • summary

    Changes the icon on the button according to volume level.

• dojox.av.widget.VolumeButton.onShowVolume

  • type

    Function

  • parameters:
    • evt: (typeof DOMEvent)
  • source: [view]
      if(this.showing==undefined){
       dojo.body().appendChild(this.volumeSlider);
       this.showing = false;
      }
      if(!this.showing){
    
       
       var TOPMARG = 2;
       var LEFTMARG = 7;
       var vol = this.media.volume();
       var dim = this._getVolumeDim();
       var hand = this._getHandleDim();
       this.x = dim.x - this.width;
    
       
    
       
    
       
       dojo.style(this.volumeSlider, "display", "");
       dojo.style(this.volumeSlider, "top", dim.y+"px");
       dojo.style(this.volumeSlider, "left", (this.x)+"px");
    
       
       var x = (this.slotWidth * vol);
    
       
       dojo.style(this.handle, "top", (TOPMARG+(hand.w/2))+"px");
       dojo.style(this.handle, "left", (x+LEFTMARG+(hand.h/2))+"px");
    
       
       this.showing = true;
       //this.startDrag();
    
       
       this.clickOff = dojo.connect(dojo.doc, "onmousedown", this, "onDocClick");
      }else{
       this.onHideVolume();
      }
  • summary

    Shows the volume slider.

• dojox.av.widget.VolumeButton.onDocClick

  • type

    Function

  • parameters:
    • evt: (typeof DOMEvent)
  • source: [view]
      if(!dojo.isDescendant(evt.target, this.domNode) && !dojo.isDescendant(evt.target, this.volumeSlider)){
       this.onHideVolume();
      }
  • summary

    Fired on document.onmousedown. Checks if clicked inside
    of this widget or not.

• dojox.av.widget.VolumeButton.onHideVolume

  • type

    Function

  • source: [view]
      this.endDrag();
      dojo.style(this.volumeSlider, "display", "none");
      this.showing = false;
  • summary

    Hides volume slider.

• dojox.av.widget.VolumeButton.onDrag

  • type

    Function

  • parameters:
    • evt: (typeof DOMEvent)
  • source: [view]
      var beg = this.handleWidth/2;
      var end = beg + this.slotWidth
      var x = evt.clientX - this.x;
      if(x  if(x>end) x=end;
      dojo.style(this.handle, "left", (x)+"px");
    
      
      var p = (x-beg)/(end-beg);
      this.media.volume(p);
      this.updateIcon(p);
  • summary

    Fired on mousemove. Updates volume and position of
    slider handle.

• dojox.av.widget.VolumeButton.startDrag

  • type

    Function

  • source: [view]
      this.isDragging = true;
      this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag");
      this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag");
  • summary

    Fired on mousedown of the slider handle.

• dojox.av.widget.VolumeButton.endDrag

  • type

    Function

  • source: [view]
      this.isDragging = false;
      if(this.cmove) dojo.disconnect(this.cmove);
      if(this.cup) dojo.disconnect(this.cup);
      this.handleOut();
  • summary

    Fired on mouseup of the slider handle.

• dojox.av.widget.VolumeButton.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.VolumeButton.handleOut

  • type

    Function

  • source: [view]
      if(!this.isDragging){
       dojo.removeClass(this.handle, "over");
      }
  • summary

    Unhighlights handle onmouseover, or on endDrag.

• dojox.av.widget.VolumeButton._getVolumeDim

  • type

    Function

  • source: [view]
      if(this._domCoords){
       return this._domCoords;
      }
      this._domCoords = dojo.coords(this.domNode);
      return this._domCoords;
  • summary

    Gets dimensions of slider background node.
    Only uses dojo.coords once, unless the page
    or player is resized.

• dojox.av.widget.VolumeButton._getHandleDim

  • type

    Function

  • source: [view]
      if(this._handleCoords){
       return this._handleCoords;
      }
      this._handleCoords = dojo.marginBox(this.handle);
      return this._handleCoords;
  • summary

    Gets dimensions of slider handle.
    Only uses dojo.marginBox once.

• dojox.av.widget.VolumeButton.onResize

  • type

    Function

  • parameters:
    • playerDimensions: (typeof Object)
  • source: [view]
      this.onHideVolume();
      this._domCoords = null;
  • summary

    Fired on player resize. Zeros dimensions
    so that it can be calculated again.

• dojox.av.widget.VolumeButton.handleWidth

  • summary

• dojox.av.widget.VolumeButton.width

  • summary

• dojox.av.widget.VolumeButton.slotWidth

  • summary

• dojox.av.widget.VolumeButton.volumeSlider

  • summary

• dojox.av.widget.VolumeButton.media

  • summary

• dojox.av.widget.VolumeButton.showing

  • summary

• dojox.av.widget.VolumeButton.x

  • summary

• dojox.av.widget.VolumeButton.clickOff

  • summary

• dojox.av.widget.VolumeButton.isDragging

  • summary

• dojox.av.widget.VolumeButton.cmove

  • summary

• dojox.av.widget.VolumeButton.cup

  • summary

• dojox.av.widget.VolumeButton._domCoords

  • summary

• dojox.av.widget.VolumeButton._handleCoords

  • summary

• dojox.av.widget

  • type

    Object

  • summary

• dojox.av

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary