root / trunk / web / dojo / dojox / av / widget / ProgressSlider.js @ 13
History | View | Annotate | Download (2.94 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.ProgressSlider"]){ |
| 9 |
dojo._hasResource["dojox.av.widget.ProgressSlider"]=true; |
| 10 |
dojo.provide("dojox.av.widget.ProgressSlider");
|
| 11 |
dojo.require("dijit._Widget");
|
| 12 |
dojo.require("dijit._Templated");
|
| 13 |
dojo.declare("dojox.av.widget.ProgressSlider",[dijit._Widget,dijit._Templated],{templateString:dojo.cache("dojox.av.widget","resources/ProgressSlider.html","<div class=\"Progress\" dojoAttachEvent=\"mousedown:startDrag\">\n \n <div class=\"ProgressLoaded\" dojoAttachPoint=\"progressLoaded\"></div>\n <div class=\"ProgressPosition\" dojoAttachPoint=\"progressPosition\"></div>\n\t<div class=\"ProgressHandle\" dojoAttachPoint=\"handle\" dojoAttachEvent=\"mouseover:handleOver, mouseout:handleOut\"></div>\n</div>\n"),postCreate:function(){ |
| 14 |
this.seeking=false; |
| 15 |
this.handleWidth=dojo.marginBox(this.handle).w; |
| 16 |
var _1=dojo.coords(this.domNode); |
| 17 |
this.finalWidth=_1.w;
|
| 18 |
this.width=_1.w-this.handleWidth; |
| 19 |
this.x=_1.x;
|
| 20 |
dojo.setSelectable(this.domNode,false); |
| 21 |
dojo.setSelectable(this.handle,false); |
| 22 |
},setMedia:function(_2,_3){ |
| 23 |
this.playerWidget=_3;
|
| 24 |
this.media=_2;
|
| 25 |
dojo.connect(this.media,"onMetaData",this,function(_4){ |
| 26 |
if(_4&&_4.duration){
|
| 27 |
this.duration=_4.duration;
|
| 28 |
} |
| 29 |
}); |
| 30 |
dojo.connect(this.media,"onEnd",this,function(){ |
| 31 |
dojo.disconnect(this.posCon);
|
| 32 |
this.setHandle(this.duration); |
| 33 |
}); |
| 34 |
dojo.connect(this.media,"onStart",this,function(){ |
| 35 |
this.posCon=dojo.connect(this.media,"onPosition",this,"setHandle"); |
| 36 |
}); |
| 37 |
dojo.connect(this.media,"onDownloaded",this,function(_5){ |
| 38 |
this.setLoadedPosition(_5*0.01); |
| 39 |
this.width=this.finalWidth*0.01*_5; |
| 40 |
}); |
| 41 |
},onDrag:function(_6){ |
| 42 |
var x=_6.clientX-this.x; |
| 43 |
if(x<0){ |
| 44 |
x=0;
|
| 45 |
} |
| 46 |
if(x>this.width-this.handleWidth){ |
| 47 |
x=this.width-this.handleWidth; |
| 48 |
} |
| 49 |
var p=x/this.finalWidth; |
| 50 |
this.media.seek(this.duration*p); |
| 51 |
dojo.style(this.handle,"marginLeft",x+"px"); |
| 52 |
dojo.style(this.progressPosition,"width",x+"px"); |
| 53 |
},startDrag:function(){ |
| 54 |
dojo.setSelectable(this.playerWidget.domNode,false); |
| 55 |
this.seeking=true; |
| 56 |
this.cmove=dojo.connect(dojo.doc,"mousemove",this,"onDrag"); |
| 57 |
this.cup=dojo.connect(dojo.doc,"mouseup",this,"endDrag"); |
| 58 |
},endDrag:function(){ |
| 59 |
dojo.setSelectable(this.playerWidget.domNode,true); |
| 60 |
this.seeking=false; |
| 61 |
if(this.cmove){ |
| 62 |
dojo.disconnect(this.cmove);
|
| 63 |
} |
| 64 |
if(this.cup){ |
| 65 |
dojo.disconnect(this.cup);
|
| 66 |
} |
| 67 |
this.handleOut();
|
| 68 |
},setHandle:function(_7){ |
| 69 |
if(!this.seeking){ |
| 70 |
var w=this.width-this.handleWidth; |
| 71 |
var p=_7/this.duration; |
| 72 |
var x=p*w;
|
| 73 |
dojo.style(this.handle,"marginLeft",x+"px"); |
| 74 |
dojo.style(this.progressPosition,"width",x+"px"); |
| 75 |
} |
| 76 |
},setLoadedPosition:function(_8){ |
| 77 |
dojo.style(this.progressLoaded,"width",(this.finalWidth*_8)+"px"); |
| 78 |
},handleOver:function(){ |
| 79 |
dojo.addClass(this.handle,"over"); |
| 80 |
},handleOut:function(){ |
| 81 |
if(!this.seeking){ |
| 82 |
dojo.removeClass(this.handle,"over"); |
| 83 |
} |
| 84 |
},onResize:function(_9){ |
| 85 |
var _a=dojo.coords(this.domNode); |
| 86 |
this.finalWidth=_a.w;
|
| 87 |
}}); |
| 88 |
} |