src/widgets/Slider.js
branchnew-model
changeset 1019 3ab36f402b0c
parent 909 aa0e42229784
child 1020 198c2b79f5e1
--- a/src/widgets/Slider.js	Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/Slider.js	Thu Jan 02 16:40:25 2014 +0100
@@ -10,17 +10,21 @@
 
 IriSP.Widgets.Slider.prototype.defaults = {
     minimized_height : 4,
-    maximized_height : 10,
+    maximized_height : 4,
     minimize_timeout : 1500 /*  time before minimizing slider after mouseout,
                                 set to zero for fixed slider */
 };
 
+IriSP.Widgets.Slider.prototype.template =
+    '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';
+
 IriSP.Widgets.Slider.prototype.draw = function() {
     
-    this.$slider = IriSP.jQuery('<div>')
-        .addClass("Ldt-Slider");
+    this.renderTemplate();
     
-    this.$.append(this.$slider);
+    this.$time = this.$.find(".Ldt-Slider-Time");
+    
+    this.$slider = this.$.find(".Ldt-Slider");
     
     var _this = this;
     
@@ -30,35 +34,42 @@
         min: 0,
         max: this.source.getDuration().milliseconds,
         slide: function(event, ui) {
-            _this.player.popcorn.currentTime(ui.value / 1000);
-            _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");
+            _this.media.setCurrentTime(ui.value);
+            _this.player.trigger("Mediafragment.setHashToTime");
         }
     });
     
     this.$handle = this.$slider.find('.ui-slider-handle');
     
-    this.bindPopcorn("timeupdate","onTimeupdate");
-    this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
-    this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");
+    this.onMediaEvent("timeupdate","onTimeupdate");
+    this.onMdpEvent("Player.MouseOver","onMouseover");
+    this.onMdpEvent("Player.MouseOut","onMouseout");
     
     if (this.minimize_timeout) {
         this.$slider.css(this.calculateSliderCss(this.minimized_height));
         this.$handle.css(this.calculateHandleCss(this.minimized_height));
         
-        this.$
-            .mouseover(this.functionWrapper("onMouseover"))
-            .mouseout(this.functionWrapper("onMouseout"));
-        
         this.maximized = false;
         this.timeoutId = false;
     }
+    
+    this.$
+        .mouseover(function() {
+            _this.$time.show();
+            _this.onMouseover();
+        })
+        .mouseout(this.functionWrapper("onMouseout"))
+        .mousemove(function(_e) {
+            var _x = _e.pageX - _this.$.offset().left,
+                _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width);
+            _this.$time.text(_t.toString()).css("left",_x);
+        });
 };
 
-IriSP.Widgets.Slider.prototype.onTimeupdate = function() {
-    var _time = 1000 * this.player.popcorn.currentTime();
+IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) {
     this.$slider.slider("value",_time);
-    this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time});
-}
+    this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});
+};
 
 IriSP.Widgets.Slider.prototype.onMouseover = function() {
     if (this.minimize_timeout) {
@@ -71,9 +82,10 @@
            this.maximized = true;
         }
     }
-}
+};
 
 IriSP.Widgets.Slider.prototype.onMouseout = function() {
+    this.$time.hide();
     if (this.minimize_timeout) {
         if (this.timeoutId) {
             window.clearTimeout(this.timeoutId);
@@ -88,7 +100,7 @@
             _this.timeoutId = false;
         }, this.minimize_timeout);
     }
-}
+};
 
 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {
     this.$slider.stop().animate(
@@ -103,19 +115,19 @@
         function() {
             IriSP.jQuery(this).css("overflow","visible");
         });
-}
+};
 
 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {
     return {
         height: _size + "px",
         "margin-top": (this.minimized_height - _size) + "px"
     };
-}
+};
 
 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {
     return {
         height: (2 + _size) + "px",
         width: (2 + _size) + "px",
         "margin-left": -Math.ceil(2 + _size / 2) + "px" 
-    }
-}
\ No newline at end of file
+    };
+};
\ No newline at end of file