You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
4.8 KiB
JavaScript
187 lines
4.8 KiB
JavaScript
dojo.provide("dojox.av.widget.VolumeButton");
|
|
dojo.require("dijit._Widget");
|
|
dojo.require("dijit._Templated");
|
|
dojo.require("dijit.form.Button");
|
|
|
|
dojo.declare("dojox.av.widget.VolumeButton", [dijit._Widget, dijit._Templated], {
|
|
// 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.
|
|
//
|
|
templatePath: dojo.moduleUrl("dojox.av.widget","resources/VolumeButton.html"),
|
|
//
|
|
postCreate: function(){
|
|
// summary:
|
|
// Initialize the widget.
|
|
//
|
|
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);
|
|
},
|
|
setMedia: function(/* Object */med){
|
|
// summary:
|
|
// A common method to set the media in all Player widgets.
|
|
// May do connections and initializations.
|
|
//
|
|
this.media = med;
|
|
this.updateIcon();
|
|
},
|
|
updateIcon: function(/*Float*/ vol){
|
|
// summary:
|
|
// Changes the icon on the button according to volume level.
|
|
//
|
|
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");
|
|
}
|
|
},
|
|
|
|
onShowVolume: function(/*DOMEvent*/evt){
|
|
// summary:
|
|
// Shows the volume slider.
|
|
//
|
|
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();
|
|
}
|
|
},
|
|
onDocClick: function(/*DOMEvent*/evt){
|
|
// summary:
|
|
// Fired on document.onmousedown. Checks if clicked inside
|
|
// of this widget or not.
|
|
//
|
|
if(!dojo.isDescendant(evt.target, this.domNode) && !dojo.isDescendant(evt.target, this.volumeSlider)){
|
|
this.onHideVolume();
|
|
}
|
|
},
|
|
|
|
onHideVolume: function(){
|
|
// summary:
|
|
// Hides volume slider.
|
|
//
|
|
this.endDrag();
|
|
dojo.style(this.volumeSlider, "display", "none");
|
|
this.showing = false;
|
|
},
|
|
|
|
onDrag: function(/*DOMEvent*/evt){
|
|
// summary:
|
|
// Fired on mousemove. Updates volume and position of
|
|
// slider handle.
|
|
var beg = this.handleWidth/2;
|
|
var end = beg + this.slotWidth
|
|
var x = evt.clientX - this.x;
|
|
if(x<beg) x = beg;
|
|
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);
|
|
},
|
|
startDrag: function(){
|
|
// summary:
|
|
// Fired on mousedown of the slider handle.
|
|
//
|
|
this.isDragging = true;
|
|
this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag");
|
|
this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag");
|
|
},
|
|
endDrag: function(){
|
|
// summary:
|
|
// Fired on mouseup of the slider handle.
|
|
//
|
|
this.isDragging = false;
|
|
if(this.cmove) dojo.disconnect(this.cmove);
|
|
if(this.cup) dojo.disconnect(this.cup);
|
|
this.handleOut();
|
|
},
|
|
|
|
handleOver: function(){
|
|
// summary:
|
|
// Highlights the slider handle on mouseover, and
|
|
// stays highlighted during drag.
|
|
//
|
|
dojo.addClass(this.handle, "over");
|
|
},
|
|
handleOut: function(){
|
|
// summary:
|
|
// Unhighlights handle onmouseover, or on endDrag.
|
|
//
|
|
if(!this.isDragging){
|
|
dojo.removeClass(this.handle, "over");
|
|
}
|
|
},
|
|
|
|
_getVolumeDim: function(){
|
|
// summary:
|
|
// Gets dimensions of slider background node.
|
|
// Only uses dojo.coords once, unless the page
|
|
// or player is resized.
|
|
//
|
|
if(this._domCoords){
|
|
return this._domCoords;
|
|
}
|
|
this._domCoords = dojo.coords(this.domNode);
|
|
return this._domCoords;
|
|
},
|
|
_getHandleDim: function(){
|
|
// summary:
|
|
// Gets dimensions of slider handle.
|
|
// Only uses dojo.marginBox once.
|
|
if(this._handleCoords){
|
|
return this._handleCoords;
|
|
}
|
|
this._handleCoords = dojo.marginBox(this.handle);
|
|
return this._handleCoords;
|
|
},
|
|
|
|
onResize: function(/*Object*/playerDimensions){
|
|
// summary:
|
|
// Fired on player resize. Zeros dimensions
|
|
// so that it can be calculated again.
|
|
//
|
|
this.onHideVolume();
|
|
this._domCoords = null;
|
|
}
|
|
});
|