root / trunk / web / dojo / dojox / av / widget / VolumeButton.js @ 10
History | View | Annotate | Download (3.59 KB)
| 1 | 9 | andrej.cim | /*
|
|---|---|---|---|
| 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 | } |