1 /*

     2  The Slider Widget fits right under the video

     3  */

     4 

     5 IriSP.Widgets.Slider = function(player, config) {

     6     IriSP.Widgets.Widget.call(this, player, config);

     7     this.bindPopcorn("timeupdate","onTimeupdate");

     8     this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");

     9     this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");

    10 };

    11 

    12 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget();

    13 

    14 IriSP.Widgets.Slider.prototype.defaults = {

    15     minimized_height : 4,

    16     maximized_height : 10,

    17     minimize_timeout : 1500 // time before minimizing slider after mouseout

    18 };

    19 

    20 IriSP.Widgets.Slider.prototype.draw = function() {

    21     

    22     this.$slider = IriSP.jQuery('<div>')

    23         .addClass("Ldt-Slider")

    24         .css(this.calculateSliderCss(this.minimized_height));

    25     

    26     this.$.append(this.$slider);

    27     

    28     var _this = this;

    29     

    30     this.$slider.slider({

    31         range: "min",

    32         value: 0,

    33         min: 0,

    34         max: this.source.getDuration().getSeconds(),

    35         slide: function(event, ui) {

    36             _this.player.popcorn.currentTime(ui.value);

    37             _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime");

    38         }

    39     });

    40     

    41     this.$handle = this.$slider.find('.ui-slider-handle');

    42     

    43     this.$handle.css(this.calculateHandleCss(this.minimized_height));

    44     

    45     this.$

    46         .mouseover(this.functionWrapper("onMouseover"))

    47         .mouseout(this.functionWrapper("onMouseout"));

    48     

    49     this.maximized = false;

    50     this.timeoutId = false;

    51 };

    52 

    53 IriSP.Widgets.Slider.prototype.onTimeupdate = function() {

    54     var _time = this.player.popcorn.currentTime();

    55     this.$slider.slider("value",_time);

    56     this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: 1000 * _time});

    57 }

    58 

    59 IriSP.Widgets.Slider.prototype.onMouseover = function() {

    60     if (this.timeoutId) {

    61         window.clearTimeout(this.timeoutId);

    62         this.timeoutId = false;

    63     }

    64     if (!this.maximized) {

    65        this.animateToHeight(this.maximized_height);

    66        this.maximized = true;

    67     }

    68 }

    69 

    70 IriSP.Widgets.Slider.prototype.onMouseout = function() {

    71     if (this.timeoutId) {

    72         window.clearTimeout(this.timeoutId);

    73         this.timeoutId = false;

    74     }

    75     var _this = this;

    76     this.timeoutId = window.setTimeout(function() {

    77         if (_this.maximized) {

    78             _this.animateToHeight(_this.minimized_height);

    79             _this.maximized = false;

    80         }

    81         _this.timeoutId = false;

    82     }, this.minimize_timeout);

    83     

    84 }

    85 

    86 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {

    87     this.$slider.stop().animate(

    88         this.calculateSliderCss(_height),

    89         500,

    90         function() {

    91             IriSP.jQuery(this).css("overflow","visible");

    92         });

    93     this.$handle.stop().animate(

    94         this.calculateHandleCss(_height),

    95         500,

    96         function() {

    97             IriSP.jQuery(this).css("overflow","visible");

    98         });

    99 }

   100 

   101 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {

   102     return {

   103         height: _size + "px",

   104         "margin-top": (this.minimized_height - _size) + "px"

   105     };

   106 }

   107 

   108 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {

   109     return {

   110         height: (2 + _size) + "px",

   111         width: (2 + _size) + "px",

   112         "margin-left": -Math.ceil(2 + _size / 2) + "px" 

   113     }

   114 }