8 |
8 |
9 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget(); |
9 IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget(); |
10 |
10 |
11 IriSP.Widgets.Slider.prototype.defaults = { |
11 IriSP.Widgets.Slider.prototype.defaults = { |
12 minimized_height : 4, |
12 minimized_height : 4, |
13 maximized_height : 10, |
13 maximized_height : 4, |
14 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 */ |
15 set to zero for fixed slider */ |
16 }; |
16 }; |
17 |
17 |
|
18 IriSP.Widgets.Slider.prototype.template = |
|
19 '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>'; |
|
20 |
18 IriSP.Widgets.Slider.prototype.draw = function() { |
21 IriSP.Widgets.Slider.prototype.draw = function() { |
19 |
22 |
20 this.$slider = IriSP.jQuery('<div>') |
23 this.renderTemplate(); |
21 .addClass("Ldt-Slider"); |
|
22 |
24 |
23 this.$.append(this.$slider); |
25 this.$time = this.$.find(".Ldt-Slider-Time"); |
|
26 |
|
27 this.$slider = this.$.find(".Ldt-Slider"); |
24 |
28 |
25 var _this = this; |
29 var _this = this; |
26 |
30 |
27 this.$slider.slider({ |
31 this.$slider.slider({ |
28 range: "min", |
32 range: "min", |
29 value: 0, |
33 value: 0, |
30 min: 0, |
34 min: 0, |
31 max: this.source.getDuration().milliseconds, |
35 max: this.source.getDuration().milliseconds, |
32 slide: function(event, ui) { |
36 slide: function(event, ui) { |
33 _this.player.popcorn.currentTime(ui.value / 1000); |
37 _this.media.setCurrentTime(ui.value); |
34 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToTime"); |
38 _this.player.trigger("Mediafragment.setHashToTime"); |
35 } |
39 } |
36 }); |
40 }); |
37 |
41 |
38 this.$handle = this.$slider.find('.ui-slider-handle'); |
42 this.$handle = this.$slider.find('.ui-slider-handle'); |
39 |
43 |
40 this.bindPopcorn("timeupdate","onTimeupdate"); |
44 this.onMediaEvent("timeupdate","onTimeupdate"); |
41 this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover"); |
45 this.onMdpEvent("Player.MouseOver","onMouseover"); |
42 this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout"); |
46 this.onMdpEvent("Player.MouseOut","onMouseout"); |
43 |
47 |
44 if (this.minimize_timeout) { |
48 if (this.minimize_timeout) { |
45 this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
49 this.$slider.css(this.calculateSliderCss(this.minimized_height)); |
46 this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
50 this.$handle.css(this.calculateHandleCss(this.minimized_height)); |
47 |
51 |
48 this.$ |
|
49 .mouseover(this.functionWrapper("onMouseover")) |
|
50 .mouseout(this.functionWrapper("onMouseout")); |
|
51 |
|
52 this.maximized = false; |
52 this.maximized = false; |
53 this.timeoutId = false; |
53 this.timeoutId = false; |
54 } |
54 } |
|
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 }); |
55 }; |
67 }; |
56 |
68 |
57 IriSP.Widgets.Slider.prototype.onTimeupdate = function() { |
69 IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) { |
58 var _time = 1000 * this.player.popcorn.currentTime(); |
|
59 this.$slider.slider("value",_time); |
70 this.$slider.slider("value",_time); |
60 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); |
71 this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time}); |
61 } |
72 }; |
62 |
73 |
63 IriSP.Widgets.Slider.prototype.onMouseover = function() { |
74 IriSP.Widgets.Slider.prototype.onMouseover = function() { |
64 if (this.minimize_timeout) { |
75 if (this.minimize_timeout) { |
65 if (this.timeoutId) { |
76 if (this.timeoutId) { |
66 window.clearTimeout(this.timeoutId); |
77 window.clearTimeout(this.timeoutId); |
101 this.calculateHandleCss(_height), |
113 this.calculateHandleCss(_height), |
102 500, |
114 500, |
103 function() { |
115 function() { |
104 IriSP.jQuery(this).css("overflow","visible"); |
116 IriSP.jQuery(this).css("overflow","visible"); |
105 }); |
117 }); |
106 } |
118 }; |
107 |
119 |
108 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) { |
120 IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) { |
109 return { |
121 return { |
110 height: _size + "px", |
122 height: _size + "px", |
111 "margin-top": (this.minimized_height - _size) + "px" |
123 "margin-top": (this.minimized_height - _size) + "px" |
112 }; |
124 }; |
113 } |
125 }; |
114 |
126 |
115 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) { |
127 IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) { |
116 return { |
128 return { |
117 height: (2 + _size) + "px", |
129 height: (2 + _size) + "px", |
118 width: (2 + _size) + "px", |
130 width: (2 + _size) + "px", |
119 "margin-left": -Math.ceil(2 + _size / 2) + "px" |
131 "margin-left": -Math.ceil(2 + _size / 2) + "px" |
120 } |
132 }; |
121 } |
133 }; |