14 annotation_type: "contribution", |
14 annotation_type: "contribution", |
15 /* |
15 /* |
16 * Set to a username if you only want to display annotations from a given user |
16 * Set to a username if you only want to display annotations from a given user |
17 */ |
17 */ |
18 show_only_annotation_from_user: false, |
18 show_only_annotation_from_user: false, |
|
19 /* |
|
20 * Displays a button that copy currently displayed annotation into CreateAnnotation input field |
|
21 */ |
|
22 copy_and_edit_button: false, |
|
23 /* |
|
24 * Allows clicks on an annotation from Annotations to display the annotation content into this widget |
|
25 */ |
|
26 selectable_annotations: false, |
19 empty_message: false, |
27 empty_message: false, |
20 starts_hidden: false, |
28 starts_hidden: false, |
|
29 show_header: false, |
|
30 custom_header: false, |
21 }; |
31 }; |
22 |
32 |
|
33 IriSP.Widgets.LatestAnnotation.prototype.messages = { |
|
34 fr : { |
|
35 copy_and_edit: "Copier et Editer", |
|
36 empty : "Aucune annotation à afficher", |
|
37 header: "Dernière annotation" |
|
38 }, |
|
39 en: { |
|
40 copy_and_edit: "Copy and Edit", |
|
41 empty: "No annotation to display", |
|
42 header: "Last annotation" |
|
43 } |
|
44 } |
|
45 |
23 IriSP.Widgets.LatestAnnotation.prototype.template = |
46 IriSP.Widgets.LatestAnnotation.prototype.template = |
24 "<div class='Ldt-LatestAnnotation'>" |
47 "{{#show_header}}" |
|
48 + "<p class='Ldt-LatestAnnotation-header'>" |
|
49 + "{{#custom_header}}{{custom_header}}{{/custom_header}}" |
|
50 + "{{^custom_header}}{{l10n.header}}{{/custom_header}}" |
|
51 + "</p>" |
|
52 + "{{/show_header}}" |
|
53 + "<div class='Ldt-LatestAnnotation'>" |
25 + "</div>"; |
54 + "</div>"; |
26 |
55 |
27 IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate = |
56 IriSP.Widgets.LatestAnnotation.prototype.annotationTemplate = |
28 "<div class='Ldt-LatestAnnotation-Box'>" |
57 "<div class='Ldt-LatestAnnotation-Box'>" |
29 + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" |
58 + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-CreationDate'>{{{annotation_created}}}</div>" |
30 + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" |
59 + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Title'>{{{annotation_creator}}}{{#annotation_title}}: {{{annotation_title}}}{{/annotation_title}}</div>" |
31 + " <div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>" |
60 + "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-Content'>" |
32 + "{{{annotation_content}}}" |
61 + "{{{annotation_content}}}" |
33 + " </div>" |
62 + "</div>" |
|
63 + "{{#copy_and_edit_button}}<div class='Ldt-LatestAnnotation-CopyEditButton'>{{button_text}}</div>{{/copy_and_edit_button}}" |
34 + "</div>" |
64 + "</div>" |
|
65 |
35 |
66 |
36 IriSP.Widgets.LatestAnnotation.prototype.draw = function(){ |
67 IriSP.Widgets.LatestAnnotation.prototype.draw = function(){ |
37 var _this = this; |
68 var _this = this; |
38 |
|
39 this.renderTemplate(); |
69 this.renderTemplate(); |
40 |
70 |
41 this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation'); |
71 this.annotationContainer_$ = this.$.find('.Ldt-LatestAnnotation'); |
42 |
72 |
43 this.onMediaEvent("timeupdate", "refresh"); |
73 if (this.selectable_annotations){ |
|
74 this.onMdpEvent("AnnotationsList.refresh", function(){ |
|
75 _this.getWidgetAnnotations().forEach(function(_annotation){ |
|
76 _annotation.off("click"); |
|
77 _annotation.on("click", function(){ |
|
78 _html = Mustache.to_html(_this.annotationTemplate, { |
|
79 annotation_created: _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString(), |
|
80 annotation_creator: _annotation.creator, |
|
81 annotation_title: _annotation.title, |
|
82 annotation_content: _annotation.description, |
|
83 copy_and_edit_button: _this.copy_and_edit_button, |
|
84 button_text: _this.l10n.copy_and_edit, |
|
85 }); |
|
86 _this.annotationContainer_$.html(_html); |
|
87 _this.selectedAnnotation = true; |
|
88 }); |
|
89 }); |
|
90 }); |
|
91 |
|
92 this.segments = _this.source.getAnnotationsByTypeTitle(this.segments_annotation_type) |
|
93 this.segments.forEach(function(_segment){ |
|
94 _segment.on("click", function(){ |
|
95 _this.selectedAnnotation = false; |
|
96 }) |
|
97 }) |
|
98 this.currentSegment = false; |
|
99 } |
|
100 |
|
101 this.onMediaEvent("timeupdate", function(){ |
|
102 _this.refresh(); |
|
103 }); |
|
104 this.onMediaEvent("settimerange", function(_timeRange){ |
|
105 _this.refresh(_timeRange); |
|
106 }) |
44 |
107 |
45 if (this.starts_hidden){ |
108 if (this.starts_hidden){ |
46 this.visible = true; |
109 this.visible = true; |
47 this.hide(); |
110 this.hide(); |
48 } |
111 } |
49 else{ |
112 else{ |
50 this.visible = false; |
113 this.visible = false; |
51 this.show(); |
114 this.show(); |
52 } |
115 } |
53 |
116 |
|
117 this.selectedAnnotation = false; // This flag tells the widget if it must display last annotation (false) or clicked annotation (true) |
|
118 this.player.trigger("AnnotationsList.refresh"); |
54 this.refresh(); |
119 this.refresh(); |
55 } |
120 } |
56 |
121 |
57 IriSP.Widgets.LatestAnnotation.prototype.messages = { |
122 |
58 fr : { |
123 IriSP.Widgets.LatestAnnotation.prototype.refresh = function(_timeRange){ |
59 empty : "Aucune annotation à afficher" |
124 _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ; |
60 }, |
125 var _this = this; |
61 en: { |
|
62 empty: "No annotation to display" |
|
63 } |
|
64 } |
|
65 |
|
66 IriSP.Widgets.LatestAnnotation.prototype.refresh = function(){ |
|
67 var _currentTime = this.media.getCurrentTime() |
|
68 var _segmentsAnnotations = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type) |
|
69 var _currentSegments = _segmentsAnnotations.filter(function(_segment){ |
|
70 return (_currentTime >= _segment.begin && _currentTime <= _segment.end) |
|
71 }); |
|
72 if (this.hide_without_segment){ |
126 if (this.hide_without_segment){ |
73 if (_currentSegments.length == 0){ |
127 if (!_timeRange && !this.media.getTimeRange()){ |
|
128 var _currentTime = this.media.getCurrentTime(); |
|
129 var _currentSegments = this.segments.filter(function(_segment){ |
|
130 return (_currentTime >= _segment.begin && _currentTime <= _segment.end) |
|
131 }); |
|
132 if (_currentSegments.length == 0){ |
|
133 this.currentSegment = false; |
|
134 this.selectedAnnotation = false; |
|
135 } |
|
136 else { |
|
137 this.currentSegment = _currentSegments[0] |
|
138 } |
|
139 } |
|
140 else { |
|
141 var _segmentBegin = _timeRange? _timeRange[0] : this.media.getTimeRange()[0], |
|
142 _segmentEnd = _timeRange? _timeRange[1] : this.media.getTimeRange()[1]; |
|
143 if ((!this.currentSegment)||(this.currentSegment.begin != _segmentBegin || this.currentSegment.end != _segmentEnd)) { |
|
144 var _currentSegments = this.segments.filter(function(_segment){ |
|
145 return _segment.begin == _segmentBegin && _segment.end == _segmentEnd |
|
146 }); |
|
147 if (_currentSegments.length > 0){ |
|
148 this.selectedAnnotation = false; |
|
149 this.currentSegment = _currentSegments[0]; |
|
150 } |
|
151 } |
|
152 } |
|
153 if (!this.currentSegment){ |
74 if (this.visible){ |
154 if (this.visible){ |
75 this.hide() |
155 this.hide(); |
76 } |
156 } |
77 } |
157 } |
78 else { |
158 else { |
79 if (!this.visible){ |
159 if (!this.visible){ |
80 this.show() |
160 this.show(); |
81 } |
161 } |
82 } |
162 } |
83 } |
163 } |
84 if (this.visible){ |
164 |
|
165 if (this.visible && !this.selectedAnnotation){ |
85 var _list = this.getWidgetAnnotations(); |
166 var _list = this.getWidgetAnnotations(); |
|
167 |
86 if(this.filter_by_segment){ |
168 if(this.filter_by_segment){ |
87 if (_currentSegments.length == 0) { |
169 if (!this.currentSegment) { |
88 _list = _list.filter(function(_annotation){ |
170 _list = _list.filter(function(_annotation){ |
89 return false; |
171 return false; |
90 }); |
172 }); |
91 } |
173 } |
92 else { |
174 else { |
93 _list = _list.filter(function(_annotation){ |
175 _list = _list.filter(function(_annotation){ |
94 _annotationTime = (_annotation.begin+_annotation.end)/2; |
176 _annotationTime = (_annotation.begin+_annotation.end)/2; |
95 return (_currentSegments[0].begin <= _annotationTime && _currentSegments[0].end >= _annotationTime); |
177 return (_this.currentSegment.begin <= _annotationTime && _this.currentSegment.end >= _annotationTime); |
96 }); |
178 }); |
97 } |
179 } |
98 _list.sortBy(function(_annotation){ |
180 } |
99 return _annotation.created; |
181 _list = _list.sortBy(function(_annotation){ |
|
182 return _annotation.created; |
|
183 }); |
|
184 |
|
185 var _latestAnnotation = false; |
|
186 var _html=""; |
|
187 if (_list.length != 0){ |
|
188 _latestAnnotation = _list.pop(); |
|
189 _html = Mustache.to_html(this.annotationTemplate, { |
|
190 annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(), |
|
191 annotation_creator: _latestAnnotation.creator, |
|
192 annotation_title: _latestAnnotation.title, |
|
193 annotation_content: _latestAnnotation.description, |
|
194 copy_and_edit_button: this.copy_and_edit_button, |
|
195 button_text: this.l10n.copy_and_edit, |
100 }); |
196 }); |
101 |
197 } |
102 var _latestAnnotation = false; |
198 else { |
103 var _html=""; |
199 var _empty_message = this.l10n.empty |
104 if (_list.length != 0){ |
200 if (this.empty_message) { |
105 _latestAnnotation = _list.pop(); |
201 _empty_message = this.empty_message |
106 _html = Mustache.to_html(this.annotationTemplate, { |
202 } |
107 annotation_created: _latestAnnotation.created.toLocaleDateString()+", "+_latestAnnotation.created.toLocaleTimeString(), |
203 _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>"; |
108 annotation_creator: _latestAnnotation.creator, |
204 } |
109 annotation_title: _latestAnnotation.title, |
205 this.annotationContainer_$.html(_html); |
110 annotation_content: _latestAnnotation.description, |
206 } |
111 }); |
207 |
112 } |
208 if(this.copy_and_edit_button){ |
113 else { |
209 this.copyAndEditButton_$ = this.$.find('.Ldt-LatestAnnotation-CopyEditButton'); |
114 var _empty_message = this.l10n.empty |
210 this.copyAndEditButton_$.click(this.functionWrapper("copy_and_edit")); |
115 if (this.empty_message) { |
211 } |
116 _empty_message = this.empty_message |
212 } |
117 } |
213 |
118 _html = "<div class='Ldt-LatestAnnotation-Element Ldt-LatestAnnotation-NoAnnotation'>"+_empty_message+"</div>"; |
214 IriSP.Widgets.LatestAnnotation.prototype.copy_and_edit = function(){ |
119 } |
215 this.player.trigger("CreateAnnotation.show"); |
120 this.annotationContainer_$.html(_html); |
216 this.player.trigger("AnnotationsList.hide"); |
121 |
217 annotationText = $('.Ldt-LatestAnnotation-Content').get(0).innerHTML; |
122 } |
218 |
123 } |
219 $('.Ldt-CreateAnnotation-Description').removeClass('empty'); |
|
220 $('.Ldt-CreateAnnotation-Description').val(annotationText); |
124 } |
221 } |
125 |
222 |
126 IriSP.Widgets.LatestAnnotation.prototype.hide = function() { |
223 IriSP.Widgets.LatestAnnotation.prototype.hide = function() { |
127 if (this.visible){ |
224 if (this.visible){ |
128 this.visible = false; |
225 this.visible = false; |
|
226 this.$.find('.Ldt-LatestAnnotation-header').hide(); |
129 this.annotationContainer_$.hide() |
227 this.annotationContainer_$.hide() |
130 } |
228 } |
131 } |
229 } |
132 |
230 |
133 IriSP.Widgets.LatestAnnotation.prototype.show = function() { |
231 IriSP.Widgets.LatestAnnotation.prototype.show = function() { |
134 if(!this.visible){ |
232 if(!this.visible){ |
135 this.visible = true; |
233 this.visible = true; |
|
234 this.$.find('.Ldt-LatestAnnotation-header').show(); |
136 this.annotationContainer_$.show() |
235 this.annotationContainer_$.show() |
137 } |
236 } |
138 } |
237 } |