| author | hamidouk |
| Wed, 16 Nov 2011 17:04:35 +0100 | |
| branch | popcorn-port |
| changeset 259 | 7d748154f0b5 |
| parent 230 | 9b86d3c52211 |
| child 260 | 6603758fe69b |
| permissions | -rw-r--r-- |
| 226 | 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; |
|
| 259 | 9 |
|
| 226 | 10 |
|
|
229
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
11 |
this.selector.append("<div class='sliderBackground'></div>"); |
| 259 | 12 |
this.sliderBackground = this.selector.find(".sliderBackground"); |
|
229
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
13 |
|
| 259 | 14 |
this.selector.append("<div class='sliderForeground'></div>"); |
15 |
this.sliderForeground = this.selector.find(".sliderForeground"); |
|
|
229
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
16 |
|
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
17 |
this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
| 259 | 18 |
this.positionMarker = this.selector.find(".positionMarker"); |
19 |
this.positionMarker.css("height", "10px"); |
|
20 |
this.positionMarker.css("width", "10px"); |
|
21 |
this.positionMarker.css("top", "0%"); |
|
22 |
|
|
23 |
// a special variable to stop methods from tinkering |
|
24 |
// with the positionMarker when the user is dragging it |
|
25 |
this.draggingOngoing = false; |
|
26 |
|
|
27 |
this.positionMarker.draggable({axis: "x", |
|
28 |
start: IriSP.wrap(this, this.positionMarkerDraggingStartedHandler), |
|
29 |
stop: IriSP.wrap(this, this.positionMarkerDraggedHandler)}); |
|
| 226 | 30 |
|
| 230 | 31 |
this.sliderBackground.click(function(event) { self.clickHandler.call(self, event); }); |
32 |
|
|
| 259 | 33 |
this.selector.hover(IriSP.wrap(this, this.mouseOverHandler), IriSP.wrap(this, this.mouseOutHandler)); |
| 226 | 34 |
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater)); |
35 |
}; |
|
36 |
||
37 |
/* updates the slider as time passes */ |
|
| 259 | 38 |
IriSP.SliderWidget.prototype.sliderUpdater = function() { |
39 |
if(this.draggingOngoing) |
|
40 |
return; |
|
41 |
|
|
|
229
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
42 |
var time = this._Popcorn.currentTime(); |
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
43 |
|
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
44 |
var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
45 |
var percent = ((time / duration) * 100).toFixed(2); |
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
46 |
this.sliderForeground.css("width", percent + "%"); |
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
47 |
this.positionMarker.css("left", percent + "%"); |
|
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
226
diff
changeset
|
48 |
|
| 230 | 49 |
}; |
50 |
||
51 |
IriSP.SliderWidget.prototype.clickHandler = function(event) { |
|
52 |
/* this piece of code is a little bit convoluted - here's how it works : |
|
53 |
we want to handle clicks on the progress bar and convert those to seeks in the media. |
|
54 |
However, jquery only gives us a global position, and we want a number of pixels relative |
|
55 |
to our container div, so we get the parent position, and compute an offset to this position, |
|
56 |
and finally compute the progress ratio in the media. |
|
57 |
Finally we multiply this ratio with the duration to get the correct time |
|
58 |
*/ |
|
59 |
|
|
60 |
var parentOffset = this.sliderBackground.parent().offset(); |
|
61 |
var width = this.sliderBackground.width(); |
|
62 |
var relX = event.pageX - parentOffset.left; |
|
63 |
|
|
64 |
var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
65 |
var newTime = ((relX / width) * duration).toFixed(2); |
|
66 |
|
|
67 |
this._Popcorn.currentTime(newTime); |
|
| 259 | 68 |
}; |
69 |
||
70 |
/* handles mouse over the slider */ |
|
71 |
IriSP.SliderWidget.prototype.mouseOverHandler = function(event) { |
|
72 |
this.sliderBackground.animate({"padding-top": "10px"}, 100); |
|
73 |
this.sliderForeground.animate({"padding-top": "10px"}, 100); |
|
74 |
}; |
|
75 |
||
76 |
/* handles when the mouse leaves the slider */ |
|
77 |
IriSP.SliderWidget.prototype.mouseOutHandler = function(event) { |
|
78 |
this.sliderBackground.animate({"padding-top": "5px"}, 50); |
|
79 |
this.sliderForeground.animate({"padding-top": "5px"}, 50); |
|
80 |
}; |
|
81 |
||
82 |
// called when the user starts dragging the position indicator |
|
83 |
IriSP.SliderWidget.prototype.positionMarkerDraggingStartedHandler = function(event, ui) { |
|
84 |
this.draggingOngoing = true; |
|
85 |
}; |
|
86 |
|
|
87 |
IriSP.SliderWidget.prototype.positionMarkerDraggedHandler = function(event, ui) { |
|
88 |
// debugger; |
|
89 |
console.log("dragging finished"); |
|
90 |
var width = this.sliderBackground.width(); |
|
91 |
var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
|
92 |
var newTime = ((ui.offset.left / width) * duration).toFixed(2); |
|
93 |
|
|
94 |
this._Popcorn.currentTime(newTime); |
|
95 |
|
|
96 |
this.draggingOngoing = false; |
|
97 |
}; |
|
98 |