|
598
|
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 |
}; |
|
|
8 |
|
|
|
9 |
IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget(); |
|
|
10 |
|
|
|
11 |
IriSP.Widgets.Slider.prototype.defaults = { |
|
|
12 |
minimized_height : 4, |
|
|
13 |
maximized_height : 10, |
|
638
|
14 |
minimize_timeout : 1500 /* time before minimizing slider after mouseout, |
|
|
15 |
set to zero for fixed slider */ |
|
598
|
16 |
}; |
|
|
17 |
|
|
|
18 |
IriSP.Widgets.Slider.prototype.draw = function() { |
|
|
19 |
|
|
|
20 |
this.$slider = IriSP.jQuery('<div>') |
|
638
|
21 |
.addClass("Ldt-Slider"); |
|
598
|
22 |
|
|
|
23 |
this.$.append(this.$slider); |
|
|
24 |
|
|
|
25 |
var _this = this; |
|
|
26 |
|
|
|
27 |
this.$slider.slider({ |
|
|
28 |
range: "min", |
|
|
29 |
value: 0, |
|
|
30 |
min: 0, |
|
623
|
31 |
max: this.source.getDuration().milliseconds, |
|
598
|
32 |
slide: function(event, ui) { |
|
623
|
33 |
_this.player.popcorn.currentTime(ui.value / 1000); |
|
598
|
34 |
_this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime"); |
|
|
35 |
} |
|
|
36 |
}); |
|
|
37 |
|
|
|
38 |
this.$handle = this.$slider.find('.ui-slider-handle'); |
|
|
39 |
|
|
638
|
40 |
this.bindPopcorn("timeupdate","onTimeupdate"); |
|
|
41 |
this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover"); |
|
|
42 |
this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout"); |
|
598
|
43 |
|
|
638
|
44 |
if (this.minimize_timeout) { |
|
|
45 |
this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
|
|
46 |
this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
|
|
47 |
|
|
|
48 |
this.$ |
|
|
49 |
.mouseover(this.functionWrapper("onMouseover")) |
|
|
50 |
.mouseout(this.functionWrapper("onMouseout")); |
|
|
51 |
|
|
|
52 |
this.maximized = false; |
|
|
53 |
this.timeoutId = false; |
|
|
54 |
} |
|
598
|
55 |
}; |
|
|
56 |
|
|
|
57 |
IriSP.Widgets.Slider.prototype.onTimeupdate = function() { |
|
623
|
58 |
var _time = 1000 * this.player.popcorn.currentTime(); |
|
598
|
59 |
this.$slider.slider("value",_time); |
|
623
|
60 |
this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); |
|
598
|
61 |
} |
|
|
62 |
|
|
|
63 |
IriSP.Widgets.Slider.prototype.onMouseover = function() { |
|
638
|
64 |
if (this.minimize_timeout) { |
|
|
65 |
if (this.timeoutId) { |
|
|
66 |
window.clearTimeout(this.timeoutId); |
|
|
67 |
this.timeoutId = false; |
|
|
68 |
} |
|
|
69 |
if (!this.maximized) { |
|
|
70 |
this.animateToHeight(this.maximized_height); |
|
|
71 |
this.maximized = true; |
|
|
72 |
} |
|
598
|
73 |
} |
|
|
74 |
} |
|
|
75 |
|
|
|
76 |
IriSP.Widgets.Slider.prototype.onMouseout = function() { |
|
638
|
77 |
if (this.minimize_timeout) { |
|
|
78 |
if (this.timeoutId) { |
|
|
79 |
window.clearTimeout(this.timeoutId); |
|
|
80 |
this.timeoutId = false; |
|
|
81 |
} |
|
|
82 |
var _this = this; |
|
|
83 |
this.timeoutId = window.setTimeout(function() { |
|
|
84 |
if (_this.maximized) { |
|
|
85 |
_this.animateToHeight(_this.minimized_height); |
|
|
86 |
_this.maximized = false; |
|
|
87 |
} |
|
|
88 |
_this.timeoutId = false; |
|
|
89 |
}, this.minimize_timeout); |
|
598
|
90 |
} |
|
|
91 |
} |
|
|
92 |
|
|
|
93 |
IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) { |
|
|
94 |
this.$slider.stop().animate( |
|
|
95 |
this.calculateSliderCss(_height), |
|
|
96 |
500, |
|
|
97 |
function() { |
|
|
98 |
IriSP.jQuery(this).css("overflow","visible"); |
|
|
99 |
}); |
|
|
100 |
this.$handle.stop().animate( |
|
|
101 |
this.calculateHandleCss(_height), |
|
|
102 |
500, |
|
|
103 |
function() { |
|
|
104 |
IriSP.jQuery(this).css("overflow","visible"); |
|
|
105 |
}); |
|
|
106 |
} |
|
|
107 |
|
|
|
108 |
IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) { |
|
|
109 |
return { |
|
|
110 |
height: _size + "px", |
|
|
111 |
"margin-top": (this.minimized_height - _size) + "px" |
|
|
112 |
}; |
|
|
113 |
} |
|
|
114 |
|
|
|
115 |
IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) { |
|
|
116 |
return { |
|
|
117 |
height: (2 + _size) + "px", |
|
|
118 |
width: (2 + _size) + "px", |
|
|
119 |
"margin-left": -Math.ceil(2 + _size / 2) + "px" |
|
|
120 |
} |
|
|
121 |
} |