8 }; |
8 }; |
9 |
9 |
10 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget(); |
10 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget(); |
11 |
11 |
12 IriSP.Widgets.Slice.prototype.defaults = { |
12 IriSP.Widgets.Slice.prototype.defaults = { |
13 show_arrow: false |
13 start_visible : false, |
|
14 live_update : true, |
|
15 /* Shall the bounds change each time |
|
16 the Annotation Widget sends an update (true) |
|
17 or only when "show" is triggered (false) ? |
|
18 - true is to be recommended when the widget is permanently displayed. |
|
19 */ |
|
20 override_bounds : true |
|
21 /* Can the Annotation Widget bounds be overriden ? */ |
14 }; |
22 }; |
15 |
|
16 IriSP.Widgets.Slice.prototype.template = |
|
17 '<div class="Ldt-Slice"></div>' |
|
18 + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}'; |
|
19 |
23 |
20 IriSP.Widgets.Slice.prototype.draw = function() { |
24 IriSP.Widgets.Slice.prototype.draw = function() { |
21 |
25 |
22 this.renderTemplate(); |
26 this.$slider = IriSP.jQuery('<div>') |
|
27 .addClass("Ldt-Slice") |
23 |
28 |
24 this.$slider = this.$.find(".Ldt-Slice"); |
29 this.$.append(this.$slider); |
25 |
|
26 if (this.show_arrow) { |
|
27 this.insertSubwidget(this.$.find(".Ldt-Slice-Arrow"), { type: "Arrow" },"arrow"); |
|
28 } |
|
29 |
30 |
30 this.min = 0; |
31 this.min = 0; |
31 this.max = this.media.duration.valueOf(); |
32 this.max = this.source.getDuration().valueOf(); |
32 |
33 |
33 var _this = this, |
34 var _this = this, |
34 _currentTime; |
35 _currentTime; |
35 |
36 |
36 this.$slider.slider({ |
37 this.$slider.slider({ |
37 range: true, |
38 range: true, |
38 values: [0, this.max], |
39 values: [0, 0], |
39 min: 0, |
40 min: 0, |
40 max: this.max, |
41 max: this.max, |
41 change: function(event, ui) { |
42 change: function(event, ui) { |
42 if (_this.arrow) { |
43 _this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{ |
43 _this.arrow.moveToTime((ui.values[0]+ui.values[1])/2); |
44 widget:_this.type, |
44 } |
45 time:Math.floor((ui.values[0]+ui.values[1])/2) |
45 if (_this.onBoundsChanged) { |
46 }); |
46 _this.onBoundsChanged(ui.values[0],ui.values[1]); |
47 _this.player.popcorn.trigger("IriSP.Slice.boundsChanged",[ui.values[0], ui.values[1]]); |
47 } |
|
48 }, |
48 }, |
49 start: function() { |
49 start: function() { |
50 _this.sliding = true; |
50 _this.sliding = true; |
51 if (!_this.media.getPaused()) { |
51 if (!_this.player.popcorn.media.paused) { |
52 _this.media.pause(); |
52 _this.player.popcorn.pause(); |
53 } |
53 } |
54 _currentTime = _this.media.getCurrentTime(); |
54 _currentTime = _this.player.popcorn.currentTime(); |
55 }, |
55 }, |
56 slide: function(event, ui) { |
56 slide: function(event, ui) { |
57 _this.media.setCurrentTime(ui.value); |
57 if (!_this.override_bounds && (ui.value < _this.min || ui.value > _this.max)) { |
|
58 return false; |
|
59 } |
|
60 _this.player.popcorn.currentTime(ui.value / 1000); |
58 }, |
61 }, |
59 stop: function() { |
62 stop: function() { |
60 _this.sliding = false; |
63 _this.sliding = false; |
61 _this.media.setCurrentTime(_currentTime); |
64 _this.player.popcorn.currentTime(_currentTime); |
62 } |
65 } |
63 }); |
66 }); |
64 |
|
65 this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle"); |
67 this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle"); |
66 this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle"); |
68 this.$slider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle"); |
67 |
69 if (this.start_visible) { |
68 this.getWidgetAnnotations().forEach(function(_a) { |
70 this.show(); |
69 _a.on("enter", function() { |
71 } else { |
70 _this.$slider.slider("values",[_a.begin, _a.end]); |
72 this.hide(); |
71 }); |
73 } |
72 }); |
74 this.bindPopcorn("IriSP.Slice.show","show"); |
|
75 this.bindPopcorn("IriSP.Slice.hide","hide"); |
|
76 this.bindPopcorn("IriSP.Annotation.boundsChanged","storeBounds"); |
|
77 this.player.popcorn.trigger("IriSP.Annotation.getBounds"); |
73 }; |
78 }; |
74 |
79 |
75 IriSP.Widgets.Slice.prototype.show = function() { |
80 IriSP.Widgets.Slice.prototype.show = function() { |
76 this.$slider.show(); |
81 this.$slider.show(); |
77 }; |
82 this.player.popcorn.trigger("IriSP.Arrow.takeover",this.type); |
|
83 this.$slider.slider("values", [this.min, this.max]); |
|
84 } |
78 |
85 |
79 IriSP.Widgets.Slice.prototype.hide = function() { |
86 IriSP.Widgets.Slice.prototype.hide = function() { |
80 this.$slider.hide(); |
87 this.$slider.hide(); |
81 }; |
88 this.player.popcorn.trigger("IriSP.Arrow.release"); |
|
89 } |
|
90 |
|
91 IriSP.Widgets.Slice.prototype.storeBounds = function(_values) { |
|
92 if (!this.player.popcorn.media.paused && (this.min != _values[0] || this.max != _values[1])) { |
|
93 this.min = _values[0]; |
|
94 this.max = _values[1]; |
|
95 if (this.live_update && !this.sliding) { |
|
96 this.$slider.slider("values", [this.min, this.max]); |
|
97 } |
|
98 } |
|
99 } |