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