equal
deleted
inserted
replaced
1 /* |
1 /* |
2 The Slider Widget shows time position and allows seek |
2 The Slider Widget shows time position and allows seek |
3 */ |
3 */ |
|
4 import sliceStyles from "./Slice.module.css"; |
4 |
5 |
5 IriSP.Widgets.Slice = function(player, config) { |
6 const Slice = function(ns) { |
6 IriSP.Widgets.Widget.call(this, player, config); |
7 return class extends ns.Widgets.Widget { |
|
8 constructor(player, config) { |
|
9 super(player, config); |
7 this.sliding = false; |
10 this.sliding = false; |
8 }; |
11 }; |
9 |
12 |
10 IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget(); |
13 static defaults = { |
11 |
|
12 IriSP.Widgets.Slice.prototype.defaults = { |
|
13 show_arrow: false |
14 show_arrow: false |
14 }; |
15 }; |
15 |
16 |
16 IriSP.Widgets.Slice.prototype.template = |
17 static template = |
17 '<div class="Ldt-Slice"></div>' |
18 '<div class="Ldt-Slice"></div>' |
18 + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}'; |
19 + '{{#show_arrow}}<div class="Ldt-Slice-Arrow"></div>{{/show_arrow}}'; |
19 |
20 |
20 IriSP.Widgets.Slice.prototype.draw = function() { |
21 draw() { |
21 |
22 |
22 this.renderTemplate(); |
23 this.renderTemplate(); |
23 |
24 |
24 this.$slider = this.$.find(".Ldt-Slice"); |
25 this.$slider = this.$.find(".Ldt-Slice"); |
25 |
26 |
73 this.player.on("annotation-click", function(_a) { |
74 this.player.on("annotation-click", function(_a) { |
74 _this.setBounds(_a.begin, _a.end); |
75 _this.setBounds(_a.begin, _a.end); |
75 }); |
76 }); |
76 }; |
77 }; |
77 |
78 |
78 IriSP.Widgets.Slice.prototype.setBounds = function(begin, end) { |
79 setBounds(begin, end) { |
79 this.$slider.slider("values", [ begin, end ]); |
80 this.$slider.slider("values", [ begin, end ]); |
80 }; |
81 }; |
81 |
82 |
82 IriSP.Widgets.Slice.prototype.show = function() { |
83 show() { |
83 this.$slider.show(); |
84 this.$slider.show(); |
84 }; |
85 }; |
85 |
86 |
86 IriSP.Widgets.Slice.prototype.hide = function() { |
87 hide() { |
87 this.$slider.hide(); |
88 this.$slider.hide(); |
88 }; |
89 }; |
|
90 |
|
91 }} |
|
92 |
|
93 export { Slice, sliceStyles }; |