root / trunk / web / dojo / dojox / av / widget / VolumeButton.js @ 13
History | View | Annotate | Download (3.59 KB)
| 1 |
/*
|
|---|---|
| 2 |
Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
| 3 |
Available via Academic Free License >= 2.1 OR the modified BSD license.
|
| 4 |
see: http://dojotoolkit.org/license for details
|
| 5 |
*/
|
| 6 |
|
| 7 |
|
| 8 |
if(!dojo._hasResource["dojox.av.widget.VolumeButton"]){ |
| 9 |
dojo._hasResource["dojox.av.widget.VolumeButton"]=true; |
| 10 |
dojo.provide("dojox.av.widget.VolumeButton");
|
| 11 |
dojo.require("dijit._Widget");
|
| 12 |
dojo.require("dijit._Templated");
|
| 13 |
dojo.require("dijit.form.Button");
|
| 14 |
dojo.declare("dojox.av.widget.VolumeButton",[dijit._Widget,dijit._Templated],{templateString:dojo.cache("dojox.av.widget","resources/VolumeButton.html","<div class=\"Volume\" dojoAttachEvent=\"mousedown:onShowVolume\">\n\t<div class=\"VolumeSlider\" dojoAttachPoint=\"volumeSlider\">\n \t<div class=\"VolumeSliderBack\" dojoAttachPoint=\"volumeSliderBack\"></div>\n \t<div class=\"VolumeSliderHandle\" dojoAttachPoint=\"handle\" dojoAttachEvent=\"mousedown:startDrag, mouseup:endDrag, mouseover:handleOver, mouseout:handleOut\"></div>\t\n </div>\n <div class=\"icon\"></div>\n</div>\n"),postCreate:function(){ |
| 15 |
this.handleWidth=dojo.marginBox(this.handle).w; |
| 16 |
this.width=dojo.marginBox(this.volumeSlider).w; |
| 17 |
this.slotWidth=100; |
| 18 |
dojo.setSelectable(this.handle,false); |
| 19 |
this.volumeSlider=this.domNode.removeChild(this.volumeSlider); |
| 20 |
},setMedia:function(_1){ |
| 21 |
this.media=_1;
|
| 22 |
this.updateIcon();
|
| 23 |
},updateIcon:function(_2){ |
| 24 |
_2=(_2===undefined)?this.media.volume():_2; |
| 25 |
if(_2===0){ |
| 26 |
dojo.attr(this.domNode,"class","Volume mute"); |
| 27 |
}else{
|
| 28 |
if(_2<0.334){ |
| 29 |
dojo.attr(this.domNode,"class","Volume low"); |
| 30 |
}else{
|
| 31 |
if(_2<0.667){ |
| 32 |
dojo.attr(this.domNode,"class","Volume med"); |
| 33 |
}else{
|
| 34 |
dojo.attr(this.domNode,"class","Volume high"); |
| 35 |
} |
| 36 |
} |
| 37 |
} |
| 38 |
},onShowVolume:function(_3){ |
| 39 |
if(this.showing==undefined){ |
| 40 |
dojo.body().appendChild(this.volumeSlider);
|
| 41 |
this.showing=false; |
| 42 |
} |
| 43 |
if(!this.showing){ |
| 44 |
var _4=2; |
| 45 |
var _5=7; |
| 46 |
var _6=this.media.volume(); |
| 47 |
var _7=this._getVolumeDim(); |
| 48 |
var _8=this._getHandleDim(); |
| 49 |
this.x=_7.x-this.width; |
| 50 |
dojo.style(this.volumeSlider,"display",""); |
| 51 |
dojo.style(this.volumeSlider,"top",_7.y+"px"); |
| 52 |
dojo.style(this.volumeSlider,"left",(this.x)+"px"); |
| 53 |
var x=(this.slotWidth*_6); |
| 54 |
dojo.style(this.handle,"top",(_4+(_8.w/2))+"px"); |
| 55 |
dojo.style(this.handle,"left",(x+_5+(_8.h/2))+"px"); |
| 56 |
this.showing=true; |
| 57 |
this.clickOff=dojo.connect(dojo.doc,"onmousedown",this,"onDocClick"); |
| 58 |
}else{
|
| 59 |
this.onHideVolume();
|
| 60 |
} |
| 61 |
},onDocClick:function(_9){ |
| 62 |
if(!dojo.isDescendant(_9.target,this.domNode)&&!dojo.isDescendant(_9.target,this.volumeSlider)){ |
| 63 |
this.onHideVolume();
|
| 64 |
} |
| 65 |
},onHideVolume:function(){ |
| 66 |
this.endDrag();
|
| 67 |
dojo.style(this.volumeSlider,"display","none"); |
| 68 |
this.showing=false; |
| 69 |
},onDrag:function(_a){ |
| 70 |
var _b=this.handleWidth/2; |
| 71 |
var _c=_b+this.slotWidth; |
| 72 |
var x=_a.clientX-this.x; |
| 73 |
if(x<_b){
|
| 74 |
x=_b; |
| 75 |
} |
| 76 |
if(x>_c){
|
| 77 |
x=_c; |
| 78 |
} |
| 79 |
dojo.style(this.handle,"left",(x)+"px"); |
| 80 |
var p=(x-_b)/(_c-_b);
|
| 81 |
this.media.volume(p);
|
| 82 |
this.updateIcon(p);
|
| 83 |
},startDrag:function(){ |
| 84 |
this.isDragging=true; |
| 85 |
this.cmove=dojo.connect(dojo.doc,"mousemove",this,"onDrag"); |
| 86 |
this.cup=dojo.connect(dojo.doc,"mouseup",this,"endDrag"); |
| 87 |
},endDrag:function(){ |
| 88 |
this.isDragging=false; |
| 89 |
if(this.cmove){ |
| 90 |
dojo.disconnect(this.cmove);
|
| 91 |
} |
| 92 |
if(this.cup){ |
| 93 |
dojo.disconnect(this.cup);
|
| 94 |
} |
| 95 |
this.handleOut();
|
| 96 |
},handleOver:function(){ |
| 97 |
dojo.addClass(this.handle,"over"); |
| 98 |
},handleOut:function(){ |
| 99 |
if(!this.isDragging){ |
| 100 |
dojo.removeClass(this.handle,"over"); |
| 101 |
} |
| 102 |
},_getVolumeDim:function(){ |
| 103 |
if(this._domCoords){ |
| 104 |
return this._domCoords; |
| 105 |
} |
| 106 |
this._domCoords=dojo.coords(this.domNode); |
| 107 |
return this._domCoords; |
| 108 |
},_getHandleDim:function(){ |
| 109 |
if(this._handleCoords){ |
| 110 |
return this._handleCoords; |
| 111 |
} |
| 112 |
this._handleCoords=dojo.marginBox(this.handle); |
| 113 |
return this._handleCoords; |
| 114 |
},onResize:function(_d){ |
| 115 |
this.onHideVolume();
|
| 116 |
this._domCoords=null; |
| 117 |
}}); |
| 118 |
} |