|
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 |
|
|
694
|
18 |
IriSP.Widgets.Slider.prototype.template = |
|
|
19 |
'<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>' |
|
|
20 |
|
|
598
|
21 |
IriSP.Widgets.Slider.prototype.draw = function() { |
|
|
22 |
|
|
694
|
23 |
this.renderTemplate(); |
|
598
|
24 |
|
|
694
|
25 |
this.$time = this.$.find(".Ldt-Slider-Time"); |
|
|
26 |
|
|
|
27 |
this.$slider = this.$.find(".Ldt-Slider"); |
|
598
|
28 |
|
|
|
29 |
var _this = this; |
|
|
30 |
|
|
|
31 |
this.$slider.slider({ |
|
|
32 |
range: "min", |
|
|
33 |
value: 0, |
|
|
34 |
min: 0, |
|
623
|
35 |
max: this.source.getDuration().milliseconds, |
|
598
|
36 |
slide: function(event, ui) { |
|
694
|
37 |
_this.media.setCurrentTime(ui.value); |
|
|
38 |
_this.player.trigger("Mediafragment.setHashToTime"); |
|
598
|
39 |
} |
|
|
40 |
}); |
|
|
41 |
|
|
|
42 |
this.$handle = this.$slider.find('.ui-slider-handle'); |
|
|
43 |
|
|
694
|
44 |
this.onMediaEvent("timeupdate","onTimeupdate"); |
|
|
45 |
this.onMdpEvent("Player.MouseOver","onMouseover"); |
|
|
46 |
this.onMdpEvent("Player.MouseOut","onMouseout"); |
|
598
|
47 |
|
|
638
|
48 |
if (this.minimize_timeout) { |
|
|
49 |
this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
|
|
50 |
this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
|
|
51 |
|
|
|
52 |
this.maximized = false; |
|
|
53 |
this.timeoutId = false; |
|
|
54 |
} |
|
694
|
55 |
|
|
|
56 |
this.$ |
|
|
57 |
.mouseover(function() { |
|
|
58 |
_this.$time.show(); |
|
|
59 |
_this.onMouseover(); |
|
|
60 |
}) |
|
|
61 |
.mouseout(this.functionWrapper("onMouseout")) |
|
|
62 |
.mousemove(function(_e) { |
|
|
63 |
var _x = _e.pageX - _this.$.offset().left, |
|
|
64 |
_t = new IriSP.Model.Time(_this.media.duration * _x / _this.width); |
|
|
65 |
_this.$time.text(_t.toString()).css("left",_x); |
|
|
66 |
}); |
|
598
|
67 |
}; |
|
|
68 |
|
|
694
|
69 |
IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) { |
|
598
|
70 |
this.$slider.slider("value",_time); |
|
694
|
71 |
this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time}); |
|
598
|
72 |
} |
|
|
73 |
|
|
|
74 |
IriSP.Widgets.Slider.prototype.onMouseover = function() { |
|
638
|
75 |
if (this.minimize_timeout) { |
|
|
76 |
if (this.timeoutId) { |
|
|
77 |
window.clearTimeout(this.timeoutId); |
|
|
78 |
this.timeoutId = false; |
|
|
79 |
} |
|
|
80 |
if (!this.maximized) { |
|
|
81 |
this.animateToHeight(this.maximized_height); |
|
|
82 |
this.maximized = true; |
|
|
83 |
} |
|
598
|
84 |
} |
|
|
85 |
} |
|
|
86 |
|
|
|
87 |
IriSP.Widgets.Slider.prototype.onMouseout = function() { |
|
694
|
88 |
this.$time.hide(); |
|
638
|
89 |
if (this.minimize_timeout) { |
|
|
90 |
if (this.timeoutId) { |
|
|
91 |
window.clearTimeout(this.timeoutId); |
|
|
92 |
this.timeoutId = false; |
|
|
93 |
} |
|
|
94 |
var _this = this; |
|
|
95 |
this.timeoutId = window.setTimeout(function() { |
|
|
96 |
if (_this.maximized) { |
|
|
97 |
_this.animateToHeight(_this.minimized_height); |
|
|
98 |
_this.maximized = false; |
|
|
99 |
} |
|
|
100 |
_this.timeoutId = false; |
|
|
101 |
}, this.minimize_timeout); |
|
598
|
102 |
} |
|
|
103 |
} |
|
|
104 |
|
|
|
105 |
IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) { |
|
|
106 |
this.$slider.stop().animate( |
|
|
107 |
this.calculateSliderCss(_height), |
|
|
108 |
500, |
|
|
109 |
function() { |
|
|
110 |
IriSP.jQuery(this).css("overflow","visible"); |
|
|
111 |
}); |
|
|
112 |
this.$handle.stop().animate( |
|
|
113 |
this.calculateHandleCss(_height), |
|
|
114 |
500, |
|
|
115 |
function() { |
|
|
116 |
IriSP.jQuery(this).css("overflow","visible"); |
|
|
117 |
}); |
|
|
118 |
} |
|
|
119 |
|
|
|
120 |
IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) { |
|
|
121 |
return { |
|
|
122 |
height: _size + "px", |
|
|
123 |
"margin-top": (this.minimized_height - _size) + "px" |
|
|
124 |
}; |
|
|
125 |
} |
|
|
126 |
|
|
|
127 |
IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) { |
|
|
128 |
return { |
|
|
129 |
height: (2 + _size) + "px", |
|
|
130 |
width: (2 + _size) + "px", |
|
|
131 |
"margin-left": -Math.ceil(2 + _size / 2) + "px" |
|
|
132 |
} |
|
|
133 |
} |