root / trunk / web / dojo / dojox / av / widget / ProgressSlider.js @ 10
History | View | Annotate | Download (2.94 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.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 | } |