1 IriSP.SliderWidget = function(Popcorn, config, Serializer) {

     2   IriSP.Widget.call(this, Popcorn, config, Serializer);

     3 };

     4 

     5 IriSP.SliderWidget.prototype = new IriSP.Widget();

     6 

     7 IriSP.SliderWidget.prototype.draw = function() {

     8   var self = this;

     9 

    10   this.selector.append(Mustache.to_html(IriSP.sliderWidget_template, {}));

    11   this.selector.addClass("Ldt-SliderMinimized");

    12 

    13   this.sliderBackground = this.selector.find(".Ldt-sliderBackground");

    14   this.sliderForeground = this.selector.find(".Ldt-sliderForeground");

    15   this.positionMarker = this.selector.find(".Ldt-sliderPositionMarker");

    16 

    17 

    18   // a special variable to stop methods from tinkering

    19   // with the positionMarker when the user is dragging it

    20   this.draggingOngoing = false;

    21 

    22   // another special variable used by the timeout handler to

    23   // open or close the slider.

    24   this.sliderMaximized = false;

    25   this.timeOutId = null;

    26 

    27   

    28   this.positionMarker.draggable({axis: "x",

    29   start: IriSP.wrap(this, this.positionMarkerDraggingStartedHandler),

    30   stop: IriSP.wrap(this, this.positionMarkerDraggedHandler),

    31   containment: "parent"

    32   });

    33   this.positionMarker.css("position", "absolute");

    34   

    35   this.sliderBackground.click(function(event) { self.backgroundClickHandler.call(self, event); });

    36   this.sliderForeground.click(function(event) { self.foregroundClickHandler.call(self, event); });

    37 

    38   this.selector.hover(IriSP.wrap(this, this.mouseOverHandler), IriSP.wrap(this, this.mouseOutHandler));

    39 

    40   // update the positions

    41   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));

    42 

    43   // special messages :

    44   this._Popcorn.listen("IriSP.PlayerWidget.MouseOver", IriSP.wrap(this, this.mouseOverHandler));

    45   this._Popcorn.listen("IriSP.PlayerWidget.MouseOut", IriSP.wrap(this, this.mouseOutHandler));

    46 };

    47 

    48 /* update the slider and the position marker as time passes */

    49 IriSP.SliderWidget.prototype.sliderUpdater = function() {

    50   if(this.draggingOngoing || this._disableUpdate)

    51     return;

    52   

    53   var time = this._Popcorn.currentTime();

    54 

    55   var duration = this.getDuration() / 1000;

    56   var percents = time / duration;

    57   

    58   /* we do these complicated calculations to center exactly

    59      the position Marker */

    60 

    61   var divWidth = this.selector.width();

    62   var pixels = Math.floor(this.selector.width() * percents);

    63   var positionMarker_width = this.positionMarker.width();

    64   var correction = (positionMarker_width / 2);

    65 

    66   /* check that we don't leave the left side */

    67   var newPos = pixels - correction;

    68   if (newPos <= 0)

    69     newPos = 0;

    70   

    71   /* check that we don't leave the right side */

    72   var rightEdgePos = pixels + 1 * correction;

    73 

    74   if (rightEdgePos >= divWidth)

    75     newPos = divWidth - 1 * correction - 1;

    76   

    77   this.sliderForeground.css("width", pixels + "px");

    78   this.positionMarker.css("left", newPos + "px");

    79 

    80 };

    81 

    82 IriSP.SliderWidget.prototype.backgroundClickHandler = function(event) {

    83   /* this piece of code is a little bit convoluted - here's how it works :

    84      we want to handle clicks on the progress bar and convert those to seeks in the media.

    85      However, jquery only gives us a global position, and we want a number of pixels relative

    86      to our container div, so we get the parent position, and compute an offset to this position,

    87      and finally compute the progress ratio in the media.

    88      Finally we multiply this ratio with the duration to get the correct time

    89   */

    90 

    91   var parentOffset = this.sliderBackground.parent().offset();

    92   var width = this.sliderBackground.width();

    93   var relX = event.pageX - parentOffset.left;

    94 

    95   var duration = this.getDuration() / 1000;

    96   var newTime = ((relX / width) * duration).toFixed(2);

    97 

    98   this._Popcorn.currentTime(newTime);

    99 };

   100 

   101 /* same function as the previous one, except that it handles clicks

   102    on the foreground element */

   103 IriSP.SliderWidget.prototype.foregroundClickHandler = function(event) {

   104   var parentOffset = this.sliderForeground.parent().offset();

   105   var width = this.sliderBackground.width();

   106   var relX = event.pageX - parentOffset.left;

   107 

   108   var duration = this.getDuration() / 1000;

   109   var newTime = ((relX / width) * duration).toFixed(2);

   110 

   111   this._Popcorn.currentTime(newTime);

   112 };

   113 

   114 /* handles mouse over the slider */

   115 IriSP.SliderWidget.prototype.mouseOverHandler = function(event) {

   116   

   117   if (this.timeOutId !== null) {

   118     window.clearTimeout(this.timeOutId);

   119   }

   120  

   121   this.sliderMaximized = true;

   122 

   123   this.sliderBackground.animate({"height": "9px"}, 100);

   124   this.sliderForeground.animate({"height": "9px"}, 100);

   125   this.positionMarker.animate({"height": "9px", "width": "9px"}, 100);

   126   //this.positionMarker.css("margin-top", "-4px");

   127   

   128 //  this.selector.removeClass("Ldt-SliderMinimized");

   129 //  this.selector.addClass("Ldt-SliderMaximized");

   130 };

   131 

   132 /* handles when the mouse leaves the slider */

   133 IriSP.SliderWidget.prototype.mouseOutHandler = function(event) {

   134 

   135   this.timeOutId = window.setTimeout(IriSP.wrap(this, this.minimizeOnTimeout),

   136                                      this.minimize_period);

   137 };

   138 

   139 IriSP.SliderWidget.prototype.minimizeOnTimeout = function(event) {

   140   this.sliderBackground.animate({"height": "5px"}, 100);

   141   this.sliderForeground.animate({"height": "5px"}, 100);

   142   this.positionMarker.animate({"height": "5px", "width": "5px"}, 100);

   143   this.positionMarker.css("margin-top", "0px");

   144   this.sliderMinimized = true;

   145   

   146 //  this.selector.removeClass("Ldt-SliderMaximized");

   147 //  this.selector.addClass("Ldt-SliderMinimized");

   148 

   149 };

   150 

   151 // called when the user starts dragging the position indicator

   152 IriSP.SliderWidget.prototype.positionMarkerDraggingStartedHandler = function(event, ui) {  

   153   this.draggingOngoing = true;

   154 };

   155 

   156 IriSP.SliderWidget.prototype.positionMarkerDraggedHandler = function(event, ui) {   

   157 

   158 /*  this._disableUpdate = true; // disable slider position updates while dragging is ongoing.

   159   window.setTimeout(IriSP.wrap(this, function() { this._disableUpdate = false; }), 500);

   160 */

   161   var parentOffset = this.sliderForeground.parent().offset();

   162   var width = this.sliderBackground.width();

   163   var relX = event.originalEvent.pageX - parentOffset.left;

   164 

   165   var duration = this.getDuration() / 1000;

   166   var newTime = ((relX / width) * duration).toFixed(2);

   167   this._Popcorn.currentTime(newTime);

   168   

   169   this.draggingOngoing = false;

   170 };

   171