diff options
Diffstat (limited to 'js/dojo-1.6/dojox/av/widget/ProgressSlider.js')
| -rw-r--r-- | js/dojo-1.6/dojox/av/widget/ProgressSlider.js | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/js/dojo-1.6/dojox/av/widget/ProgressSlider.js b/js/dojo-1.6/dojox/av/widget/ProgressSlider.js new file mode 100644 index 0000000..967ba78 --- /dev/null +++ b/js/dojo-1.6/dojox/av/widget/ProgressSlider.js @@ -0,0 +1,143 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.av.widget.ProgressSlider"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.av.widget.ProgressSlider"] = true;
+dojo.provide("dojox.av.widget.ProgressSlider");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.av.widget.ProgressSlider", [dijit._Widget, dijit._Templated], {
+ // summary:
+ // A custom slider widget to use with dojox.av.widget.Player.
+ // description:
+ // Displays the current playhead position of the media. Has two
+ // progress bars: one for playhead position, and one for download
+ // progress.
+ //
+ templateString: dojo.cache("dojox.av.widget", "resources/ProgressSlider.html", "<div class=\"Progress\" dojoAttachEvent=\"mousedown:startDrag\">\r\n \r\n <div class=\"ProgressLoaded\" dojoAttachPoint=\"progressLoaded\"></div>\r\n <div class=\"ProgressPosition\" dojoAttachPoint=\"progressPosition\"></div>\r\n\t<div class=\"ProgressHandle\" dojoAttachPoint=\"handle\" dojoAttachEvent=\"mouseover:handleOver, mouseout:handleOut\"></div>\r\n</div>\r\n"),
+ postCreate: function(){
+ // summary:
+ // Initialize slider.
+ //
+ this.seeking = false;
+ this.handleWidth = dojo.marginBox(this.handle).w;
+ var dim = dojo.coords(this.domNode);
+ this.finalWidth = dim.w
+ this.width = dim.w-this.handleWidth;
+ this.x = dim.x;
+
+ dojo.setSelectable(this.domNode, false);
+ dojo.setSelectable(this.handle, false);
+ },
+ setMedia: function(/* Object */med, playerWidget){
+ // summary:
+ // A common method to set the media in all Player widgets.
+ // May do connections and initializations.
+ //
+ this.playerWidget = playerWidget;
+ this.media = med;
+ dojo.connect(this.media, "onMetaData", this, function(data){
+ if(data && data.duration){
+ this.duration = data.duration;
+ }
+ });
+ dojo.connect(this.media, "onEnd", this, function(){
+ dojo.disconnect(this.posCon);
+ this.setHandle(this.duration);
+ });
+ dojo.connect(this.media, "onStart", this, function(){
+ this.posCon = dojo.connect(this.media, "onPosition", this, "setHandle");
+ });
+
+ dojo.connect(this.media, "onDownloaded", this, function(percent){
+ this.setLoadedPosition(percent*.01);
+ this.width = this.finalWidth * .01 * percent;
+ });
+
+ },
+ onDrag: function(/* HTMLEvent */ evt){
+ // summary:
+ // Fired when the mouse is moved. Sets the slider.
+ //
+ var x = evt.clientX - this.x;
+ if(x<0) x = 0;
+ if(x>this.width-this.handleWidth) x=this.width-this.handleWidth;
+
+ var p = x/this.finalWidth;
+ this.media.seek( this.duration * p );
+ dojo.style(this.handle, "marginLeft", x+"px");
+ dojo.style(this.progressPosition, "width", x+"px");
+ },
+ startDrag: function(){
+ // summary:
+ // Fired onmousedown of the slider handle.
+ //
+ dojo.setSelectable(this.playerWidget.domNode, false);
+ this.seeking = true;
+ this.cmove = dojo.connect(dojo.doc, "mousemove", this, "onDrag");
+ this.cup = dojo.connect(dojo.doc, "mouseup", this, "endDrag");
+ },
+ endDrag: function(){
+ // summary:
+ // Fired on document.onmouseup.
+ //
+ dojo.setSelectable(this.playerWidget.domNode, true);
+ this.seeking = false;
+ if(this.cmove) dojo.disconnect(this.cmove);
+ if(this.cup) dojo.disconnect(this.cup);
+ this.handleOut();
+ },
+
+ setHandle: function(time){
+ // summary:
+ // Sets the slider handle (when it is not being dragged)
+ //
+ if(!this.seeking){
+ var w = this.width-this.handleWidth;
+ var p = time/this.duration;
+ var x = p*w;
+
+ dojo.style(this.handle, "marginLeft", x+"px");
+ dojo.style(this.progressPosition, "width", x+"px");
+ }
+ },
+
+ setLoadedPosition: function(decimal){
+ // summary:
+ // Sets the download progress bar to the percentage of how much
+ // the media has been downloaded.
+ dojo.style(this.progressLoaded, "width", (this.finalWidth*decimal)+"px");
+ },
+
+ 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.seeking){
+ dojo.removeClass(this.handle, "over");
+ }
+ },
+ onResize: function(playerDimensions){
+ // summary:
+ // Handles player resize. Need to recalculate the width of
+ // position an download bars.
+ var dim = dojo.coords(this.domNode);
+ this.finalWidth = dim.w;
+
+ }
+
+});
+
+}
|