2 The Slider Widget fits right under the video |
2 The Slider Widget fits right under the video |
3 */ |
3 */ |
4 |
4 |
5 IriSP.Widgets.Slider = function(player, config) { |
5 IriSP.Widgets.Slider = function(player, config) { |
6 IriSP.Widgets.Widget.call(this, 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 }; |
7 }; |
11 |
8 |
12 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget(); |
9 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget(); |
13 |
10 |
14 IriSP.Widgets.Slider.prototype.defaults = { |
11 IriSP.Widgets.Slider.prototype.defaults = { |
15 minimized_height : 4, |
12 minimized_height : 4, |
16 maximized_height : 10, |
13 maximized_height : 10, |
17 minimize_timeout : 1500 // time before minimizing slider after mouseout |
14 minimize_timeout : 1500 /* time before minimizing slider after mouseout, |
|
15 set to zero for fixed slider */ |
18 }; |
16 }; |
19 |
17 |
20 IriSP.Widgets.Slider.prototype.draw = function() { |
18 IriSP.Widgets.Slider.prototype.draw = function() { |
21 |
19 |
22 this.$slider = IriSP.jQuery('<div>') |
20 this.$slider = IriSP.jQuery('<div>') |
23 .addClass("Ldt-Slider") |
21 .addClass("Ldt-Slider"); |
24 .css(this.calculateSliderCss(this.minimized_height)); |
|
25 |
22 |
26 this.$.append(this.$slider); |
23 this.$.append(this.$slider); |
27 |
24 |
28 var _this = this; |
25 var _this = this; |
29 |
26 |
38 } |
35 } |
39 }); |
36 }); |
40 |
37 |
41 this.$handle = this.$slider.find('.ui-slider-handle'); |
38 this.$handle = this.$slider.find('.ui-slider-handle'); |
42 |
39 |
43 this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
40 this.bindPopcorn("timeupdate","onTimeupdate"); |
|
41 this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover"); |
|
42 this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout"); |
44 |
43 |
45 this.$ |
44 if (this.minimize_timeout) { |
46 .mouseover(this.functionWrapper("onMouseover")) |
45 this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
47 .mouseout(this.functionWrapper("onMouseout")); |
46 this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
48 |
47 |
49 this.maximized = false; |
48 this.$ |
50 this.timeoutId = false; |
49 .mouseover(this.functionWrapper("onMouseover")) |
|
50 .mouseout(this.functionWrapper("onMouseout")); |
|
51 |
|
52 this.maximized = false; |
|
53 this.timeoutId = false; |
|
54 } |
51 }; |
55 }; |
52 |
56 |
53 IriSP.Widgets.Slider.prototype.onTimeupdate = function() { |
57 IriSP.Widgets.Slider.prototype.onTimeupdate = function() { |
54 var _time = 1000 * this.player.popcorn.currentTime(); |
58 var _time = 1000 * this.player.popcorn.currentTime(); |
55 this.$slider.slider("value",_time); |
59 this.$slider.slider("value",_time); |
56 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); |
60 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); |
57 } |
61 } |
58 |
62 |
59 IriSP.Widgets.Slider.prototype.onMouseover = function() { |
63 IriSP.Widgets.Slider.prototype.onMouseover = function() { |
60 if (this.timeoutId) { |
64 if (this.minimize_timeout) { |
61 window.clearTimeout(this.timeoutId); |
65 if (this.timeoutId) { |
62 this.timeoutId = false; |
66 window.clearTimeout(this.timeoutId); |
63 } |
67 this.timeoutId = false; |
64 if (!this.maximized) { |
68 } |
65 this.animateToHeight(this.maximized_height); |
69 if (!this.maximized) { |
66 this.maximized = true; |
70 this.animateToHeight(this.maximized_height); |
|
71 this.maximized = true; |
|
72 } |
67 } |
73 } |
68 } |
74 } |
69 |
75 |
70 IriSP.Widgets.Slider.prototype.onMouseout = function() { |
76 IriSP.Widgets.Slider.prototype.onMouseout = function() { |
71 if (this.timeoutId) { |
77 if (this.minimize_timeout) { |
72 window.clearTimeout(this.timeoutId); |
78 if (this.timeoutId) { |
73 this.timeoutId = false; |
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); |
74 } |
90 } |
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 } |
91 } |
85 |
92 |
86 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) { |
93 IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) { |
87 this.$slider.stop().animate( |
94 this.$slider.stop().animate( |
88 this.calculateSliderCss(_height), |
95 this.calculateSliderCss(_height), |