1 /* |
1 /* |
2 * Widget that ties AnnotationList and CreateAnnotation together |
2 * Widget that ties AnnotationList and CreateAnnotation together |
3 * using buttons to hide/show AnnotationList and CreateAnnotation widgets. |
3 * using buttons to hide/show AnnotationList and CreateAnnotation widgets. |
4 * |
4 * |
5 */ |
5 */ |
6 |
6 import annotationsControllerStyles from "./AnnotationsController.module.css"; |
7 IriSP.Widgets.AnnotationsController = function(player, config){ |
7 |
8 IriSP.Widgets.Widget.call(this, player, config); |
8 const AnnotationsController = function (ns) { |
9 }; |
9 return class extends ns.Widgets.Widget { |
10 |
10 constructor(player, config) { |
11 IriSP.Widgets.AnnotationsController.prototype = new IriSP.Widgets.Widget(); |
11 super(player, config); |
12 |
12 } |
13 IriSP.Widgets.AnnotationsController.prototype.defaults = { |
13 |
14 // If true, displaying AnnotationList will hide CreateAnnotation and vice versa. |
14 static defaults = { |
15 display_or_write: false, |
15 // If true, displaying AnnotationList will hide CreateAnnotation and vice versa. |
16 toggle_widgets: false, |
16 display_or_write: false, |
17 starts_hidden: false, |
17 toggle_widgets: false, |
18 hide_without_segment: false, |
18 starts_hidden: false, |
19 hide_when_writing: true, |
19 hide_without_segment: false, |
20 starting_widget: false, |
20 hide_when_writing: true, |
21 always_show_widget: false, |
21 starting_widget: false, |
22 segments_annotation_type: "chap", |
22 always_show_widget: false, |
23 custom_write_text: false, |
23 segments_annotation_type: "chap", |
24 custom_display_text: false, |
24 custom_write_text: false, |
25 }; |
25 custom_display_text: false, |
26 |
26 }; |
27 IriSP.Widgets.AnnotationsController.prototype.template = |
27 |
28 "<div class='Ldt-AnnotationsController'>" |
28 static template = |
29 + "<div class='Ldt-AnnotationsController-ButtonsContainer'>" |
29 "<div class='Ldt-AnnotationsController'>" + |
30 + " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{#custom_write_text}}{{/custom_write_text}}{{custom_write_text}}{{^custom_write_text}}{{l10n.write}}{{/custom_write_text}}</div>" |
30 "<div class='Ldt-AnnotationsController-ButtonsContainer'>" + |
31 + " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{#custom_display_text}}{{/custom_display_text}}{{custom_display_text}}{{^custom_display_text}}{{l10n.display}}{{/custom_display_text}}</div>" |
31 " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{#custom_write_text}}{{/custom_write_text}}{{custom_write_text}}{{^custom_write_text}}{{l10n.write}}{{/custom_write_text}}</div>" + |
32 + "</div>" |
32 " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{#custom_display_text}}{{/custom_display_text}}{{custom_display_text}}{{^custom_display_text}}{{l10n.display}}{{/custom_display_text}}</div>" + |
33 + "</div>" |
33 "</div>" + |
34 |
34 "</div>"; |
35 IriSP.Widgets.AnnotationsController.prototype.messages = { |
35 |
36 en : { |
36 static messages = { |
37 write : "Write", |
37 en: { |
38 display : "Display", |
38 write: "Write", |
39 }, |
39 display: "Display", |
40 fr : { |
40 }, |
41 write : "Ecrire", |
41 fr: { |
42 display : "Voir" |
42 write: "Ecrire", |
43 } |
43 display: "Voir", |
44 }; |
44 }, |
45 |
45 }; |
46 IriSP.Widgets.AnnotationsController.prototype.draw = function() { |
46 |
47 this.renderTemplate(); |
47 draw() { |
48 var _this = this; |
48 this.renderTemplate(); |
49 this.element_$ = this.$.find(".Ldt-AnnotationsController") |
49 var _this = this; |
50 |
50 this.element_$ = this.$.find(".Ldt-AnnotationsController"); |
51 this.displayButton_$ = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton"); |
51 |
52 this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton"); |
52 this.displayButton_$ = this.$.find( |
53 |
53 ".Ldt-AnnotationsController-ShowAnnotationsListButton" |
54 this.writeButton_$.click(function(){ |
54 ); |
55 if (!_this.writeButton_$.hasClass("selected")){ |
55 this.writeButton_$ = this.$.find( |
56 _this.player.trigger("CreateAnnotation.show") |
56 ".Ldt-AnnotationsController-ShowCreateAnnotationButton" |
57 if (_this.display_or_write){ |
57 ); |
58 _this.player.trigger("AnnotationsList.hide"); |
58 |
59 } |
59 this.writeButton_$.click(function () { |
60 } |
60 if (!_this.writeButton_$.hasClass("selected")) { |
61 else { |
61 _this.player.trigger("CreateAnnotation.show"); |
62 _this.player.trigger("CreateAnnotation.hide") |
62 if (_this.display_or_write) { |
63 if (_this.toggle_widgets){ |
63 _this.player.trigger("AnnotationsList.hide"); |
64 _this.player.trigger("AnnotationsList.show") |
64 } |
65 } |
65 } else { |
66 else if (_this.display_or_write){ |
66 _this.player.trigger("CreateAnnotation.hide"); |
67 _this.player.trigger("AnnotationsList.hide"); |
67 if (_this.toggle_widgets) { |
68 } |
68 _this.player.trigger("AnnotationsList.show"); |
69 } |
69 } else if (_this.display_or_write) { |
70 }); |
70 _this.player.trigger("AnnotationsList.hide"); |
71 this.displayButton_$.click(function(){ |
71 } |
72 if (!_this.displayButton_$.hasClass("selected")){ |
72 } |
73 _this.player.trigger("AnnotationsList.show") |
73 }); |
74 if (_this.display_or_write){ |
74 this.displayButton_$.click(function () { |
75 _this.player.trigger("CreateAnnotation.hide"); |
75 if (!_this.displayButton_$.hasClass("selected")) { |
76 } |
76 _this.player.trigger("AnnotationsList.show"); |
77 } |
77 if (_this.display_or_write) { |
78 else { |
78 _this.player.trigger("CreateAnnotation.hide"); |
79 _this.player.trigger("AnnotationsList.hide") |
79 } |
80 if (_this.toggle_widgets){ |
80 } else { |
81 _this.player.trigger("CreateAnnotation.show") |
81 _this.player.trigger("AnnotationsList.hide"); |
82 } |
82 if (_this.toggle_widgets) { |
83 else if (_this.display_or_write){ |
83 _this.player.trigger("CreateAnnotation.show"); |
84 _this.player.trigger("CreateAnnotation.hide"); |
84 } else if (_this.display_or_write) { |
85 } |
85 _this.player.trigger("CreateAnnotation.hide"); |
86 } |
86 } |
87 |
87 } |
88 }) |
88 }); |
89 |
89 |
90 if(this.hide_without_segment){ |
90 if (this.hide_without_segment) { |
91 this.onMediaEvent("timeupdate", function(){ |
91 this.onMediaEvent("timeupdate", function () { |
92 _this.refresh(); |
92 _this.refresh(); |
93 }) |
93 }); |
94 this.onMediaEvent("settimerange", function(_timeRange){ |
94 this.onMediaEvent("settimerange", function (_timeRange) { |
95 _this.refresh(_timeRange); |
95 _this.refresh(_timeRange); |
96 }) |
96 }); |
97 this.segments = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type) |
97 this.segments = this.source.getAnnotationsByTypeTitle( |
98 this.currentSegment = false |
98 this.segments_annotation_type |
99 } |
99 ); |
100 |
100 this.currentSegment = false; |
101 |
101 } |
102 this.createAnnotationEnabled = false; |
102 |
103 this.onMdpEvent("CreateAnnotation.hide", function(){ |
103 this.createAnnotationEnabled = false; |
104 if (_this.hide_when_writing){ |
104 this.onMdpEvent("CreateAnnotation.hide", function () { |
105 _this.show() |
105 if (_this.hide_when_writing) { |
|
106 _this.show(); |
106 } |
107 } |
107 _this.createAnnotationEnabled = false; |
108 _this.createAnnotationEnabled = false; |
108 _this.writeButton_$.toggleClass("selected", false); |
109 _this.writeButton_$.toggleClass("selected", false); |
109 }) |
110 }); |
110 this.onMdpEvent("CreateAnnotation.show", function(){ |
111 this.onMdpEvent("CreateAnnotation.show", function () { |
111 if (_this.hide_when_writing){ |
112 if (_this.hide_when_writing) { |
112 _this.hide() |
113 _this.hide(); |
113 } |
114 } |
114 _this.createAnnotationEnabled = true; |
115 _this.createAnnotationEnabled = true; |
115 _this.writeButton_$.toggleClass("selected", true); |
116 _this.writeButton_$.toggleClass("selected", true); |
116 }) |
117 }); |
117 this.onMdpEvent("AnnotationsList.hide", function(){ |
118 this.onMdpEvent("AnnotationsList.hide", function () { |
118 _this.displayButton_$.toggleClass("selected", false); |
119 _this.displayButton_$.toggleClass("selected", false); |
119 }) |
120 }); |
120 this.onMdpEvent("AnnotationsList.show", function(){ |
121 this.onMdpEvent("AnnotationsList.show", function () { |
121 _this.displayButton_$.toggleClass("selected", true); |
122 _this.displayButton_$.toggleClass("selected", true); |
122 }) |
123 }); |
123 |
124 |
124 if (this.starts_hidden) { |
125 if (this.starts_hidden) { |
125 this.visible = true |
126 this.visible = true; |
126 this.hide(); |
127 this.hide(); |
127 } |
128 } else { |
128 else{ |
129 this.visible = false; |
129 this.visible = false |
|
130 this.show(); |
130 this.show(); |
131 } |
131 } |
132 |
132 |
133 if (this.starting_widget && this.visible){ |
133 if (this.starting_widget && this.visible) { |
134 if (this.starting_widget == "AnnotationsList"){ |
134 if (this.starting_widget == "AnnotationsList") { |
135 this.player.trigger("AnnotationsList.show") |
135 this.player.trigger("AnnotationsList.show"); |
136 } |
136 } else if (this.starting_widget == "CreateAnnotation") { |
137 else if (this.starting_widget == "CreateAnnotation"){ |
137 this.player.trigger("CreateAnnotation.show"); |
138 this.player.trigger("CreateAnnotation.show") |
138 } |
139 } |
139 } |
140 } |
140 } |
141 |
141 |
142 }; |
142 refresh(_timeRange) { |
143 |
143 _timeRange = typeof _timeRange !== "undefined" ? _timeRange : false; |
144 IriSP.Widgets.AnnotationsController.prototype.refresh = function(_timeRange){ |
144 |
145 _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ; |
145 if (!_timeRange) { |
146 |
146 if (this.media.getTimeRange()) { |
147 if(!_timeRange){ |
147 _timeRange = this.media.getTimeRange(); |
148 if (this.media.getTimeRange()){ |
148 } |
149 _timeRange = this.media.getTimeRange(); |
149 } |
150 } |
150 |
151 } |
151 if (this.hide_without_segment) { |
152 |
152 if (!_timeRange && !this.media.getTimeRange()) { |
153 if (this.hide_without_segment){ |
153 _currentTime = this.media.getCurrentTime(); |
154 if (!_timeRange && !this.media.getTimeRange()){ |
154 _currentSegments = this.segments.filter(function (_segment) { |
155 _currentTime = this.media.getCurrentTime() |
155 return ( |
156 _currentSegments = this.segments.filter(function(_segment){ |
156 _currentTime >= _segment.begin && _currentTime <= _segment.end |
157 return (_currentTime >= _segment.begin && _currentTime <= _segment.end) |
157 ); |
158 }); |
158 }); |
159 if(_currentSegments.length > 0){ |
159 if (_currentSegments.length > 0) { |
160 currentSegment = true; |
160 currentSegment = true; |
|
161 } else { |
|
162 currentSegment = false; |
|
163 } |
|
164 } else { |
|
165 var _timeRangeBegin = _timeRange[0], |
|
166 _timeRangeEnd = _timeRange[1]; |
|
167 _currentSegments = this.segments.filter(function (_segment) { |
|
168 return ( |
|
169 _timeRangeBegin == _segment.begin && _timeRangeEnd == _segment.end |
|
170 ); |
|
171 }); |
|
172 if (_currentSegments.length > 0) { |
|
173 currentSegment = true; |
|
174 } else { |
|
175 currentSegment = false; |
|
176 } |
|
177 } |
|
178 if (!currentSegment && _currentSegments.length == 0) { |
|
179 if (this.visible || this.hide_when_writing) { |
|
180 this.writeButton_$.toggleClass("selected", false); |
|
181 this.displayButton_$.toggleClass("selected", false); |
|
182 this.player.trigger("CreateAnnotation.hide"); |
|
183 this.player.trigger("AnnotationsList.hide"); |
|
184 this.hide(); |
|
185 } |
|
186 } else { |
|
187 if (!this.visible) { |
|
188 if (!this.createAnnotationEnabled) { |
|
189 this.show(); |
161 } |
190 } |
162 else { |
191 this.writeButton_$.toggleClass("selected", false); |
163 currentSegment = false; |
192 this.displayButton_$.toggleClass("selected", false); |
|
193 if (this.starting_widget == "AnnotationsList") { |
|
194 this.player.trigger("AnnotationsList.show"); |
164 } |
195 } |
165 } |
196 if (this.starting_widget == "CreateAnnotation") { |
166 else { |
197 this.player.trigger("CreateAnnotation.show"); |
167 var _timeRangeBegin = _timeRange[0], |
|
168 _timeRangeEnd = _timeRange[1]; |
|
169 _currentSegments = this.segments.filter(function(_segment){ |
|
170 return (_timeRangeBegin == _segment.begin && _timeRangeEnd == _segment.end) |
|
171 }); |
|
172 if(_currentSegments.length > 0){ |
|
173 currentSegment = true; |
|
174 } |
198 } |
175 else { |
199 } |
176 currentSegment = false; |
200 } |
177 } |
201 } |
178 } |
202 } |
179 if (!currentSegment && _currentSegments.length == 0){ |
203 |
180 if (this.visible || this.hide_when_writing){ |
204 hide() { |
181 this.writeButton_$.toggleClass("selected", false); |
205 if (this.visible) { |
182 this.displayButton_$.toggleClass("selected", false); |
|
183 this.player.trigger("CreateAnnotation.hide"); |
|
184 this.player.trigger("AnnotationsList.hide"); |
|
185 this.hide(); |
|
186 } |
|
187 } |
|
188 else { |
|
189 if (!this.visible){ |
|
190 if (!this.createAnnotationEnabled){ |
|
191 this.show(); |
|
192 } |
|
193 this.writeButton_$.toggleClass("selected", false); |
|
194 this.displayButton_$.toggleClass("selected", false); |
|
195 if (this.starting_widget == "AnnotationsList"){ |
|
196 this.player.trigger("AnnotationsList.show") |
|
197 } |
|
198 if (this.starting_widget == "CreateAnnotation"){ |
|
199 this.player.trigger("CreateAnnotation.show") |
|
200 } |
|
201 } |
|
202 |
|
203 } |
|
204 } |
|
205 } |
|
206 |
|
207 IriSP.Widgets.AnnotationsController.prototype.hide = function() { |
|
208 if (this.visible){ |
|
209 this.visible = false; |
206 this.visible = false; |
210 this.element_$.hide(); |
207 this.element_$.hide(); |
211 } |
208 } |
212 } |
209 } |
213 |
210 |
214 IriSP.Widgets.AnnotationsController.prototype.show = function() { |
211 show() { |
215 if(!this.visible){ |
212 if (!this.visible) { |
216 this.visible = true; |
213 this.visible = true; |
217 this.element_$.show(); |
214 this.element_$.show(); |
218 } |
215 } |
219 } |
216 } |
|
217 }; |
|
218 }; |
|
219 |
|
220 export { AnnotationsController, annotationsControllerStyles }; |