6 |
6 |
7 IriSP.Widgets.CurrentSegmentInfobox.prototype = new IriSP.Widgets.Widget(); |
7 IriSP.Widgets.CurrentSegmentInfobox.prototype = new IriSP.Widgets.Widget(); |
8 |
8 |
9 IriSP.Widgets.CurrentSegmentInfobox.prototype.defaults = { |
9 IriSP.Widgets.CurrentSegmentInfobox.prototype.defaults = { |
10 annotation_type: "chap", |
10 annotation_type: "chap", |
11 readonly: true, |
11 editable_segments: false, |
12 empty_message: false |
12 empty_message: false, |
|
13 project_id: false, |
|
14 api_serializer: "ldt_annotate", |
|
15 api_method: "PUT", |
|
16 api_endpoint_template: "" |
13 }; |
17 }; |
14 |
18 |
15 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = |
19 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = |
16 "<div class='Ldt-CurrentSegmentInfobox'>" |
20 '<div class="Ldt-CurrentSegmentInfobox">' |
17 + " <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title'>{{title}}</div>" |
21 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>' |
18 + " <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description'>{{description}}</div>" |
22 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' |
19 + " <div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags'>" |
23 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' |
20 + ' {{#tags.length}}' |
24 + '{{#tags.length}}' |
21 + ' <ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
25 + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
22 + ' {{#tags}}' |
26 + '{{#tags}}' |
23 + ' {{#.}}' |
27 + '{{#.}}' |
24 + ' <li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
28 + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
25 + ' <span>{{.}}</span>' |
29 + '<span>{{.}}</span>' |
26 + ' </li>' |
30 + '</li>' |
27 + ' {{/.}}' |
31 + '{{/.}}' |
28 + ' {{/tags}}' |
32 + '{{/tags}}' |
29 + ' </ul>' |
33 + '</ul>' |
30 + ' {{/tags.length}}' |
34 + '{{/tags.length}}' |
31 + " </div>" |
35 + '</div>' |
32 + "</div>" |
36 + '</div>' |
33 |
37 |
|
38 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = |
|
39 '<div class="Ldt-CurrentSegmentInfobox">' |
|
40 + '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>' |
|
41 + '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>' |
|
42 + '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>' |
|
43 + '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>' |
|
44 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' |
|
45 + '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>' |
|
46 + '{{#tags.length}}' |
|
47 + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
|
48 + '{{#tags}}' |
|
49 + '{{#.}}' |
|
50 + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
|
51 + '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>' |
|
52 + '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>' |
|
53 + '</li>' |
|
54 + '{{/.}}' |
|
55 + '{{/tags}}' |
|
56 + '</ul>' |
|
57 + '{{/tags.length}}' |
|
58 + '</div>' |
|
59 + '</div>' |
|
60 |
34 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = { |
61 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = { |
35 fr : { |
62 fr : { |
|
63 submit : "Soumettre", |
|
64 cancel : "Annuler", |
|
65 new_tag : "Nouveau tag", |
|
66 delete_tag : "Supprimer", |
36 empty : "Le player vidéo ne lit actuellement aucun segment" |
67 empty : "Le player vidéo ne lit actuellement aucun segment" |
37 }, |
68 }, |
38 en: { |
69 en: { |
39 empty: "The player currently doesn't read any segment" |
70 submit : "Submit", |
|
71 cancel : "Cancel", |
|
72 new_tag : "New tag", |
|
73 delete_tag : "Delete tag", |
|
74 empty : "The player currently doesn't read any segment" |
40 } |
75 } |
41 } |
76 } |
42 |
77 |
43 IriSP.Widgets.CurrentSegmentInfobox.prototype.draw = function() { |
78 IriSP.Widgets.CurrentSegmentInfobox.prototype.draw = function() { |
44 var _this = this; |
79 var _this = this; |
45 this.segments = this.getWidgetAnnotations(); |
80 this.segments = this.getWidgetAnnotations(); |
46 |
|
47 this.renderTemplate(); |
81 this.renderTemplate(); |
|
82 this.currentSegment = false; |
|
83 this.clearBox(); |
48 this.refresh(); |
84 this.refresh(); |
49 |
|
50 this.onMediaEvent("timeupdate", "refresh"); |
85 this.onMediaEvent("timeupdate", "refresh"); |
|
86 this.onMediaEvent("settimerange", function(_timeRange){ |
|
87 var _segmentBegin = _timeRange[0], |
|
88 _segmentEnd = _timeRange[1], |
|
89 _list = _this.segments.filter(function(_segment){ |
|
90 return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds |
|
91 }); |
|
92 if (_list.length >0){ |
|
93 if (_this.currentSegment.id != _list[0].id){ |
|
94 _this.currentSegment = _list[0]; |
|
95 _data = { |
|
96 title: _this.currentSegment.title, |
|
97 description : _this.currentSegment.description, |
|
98 tags : _this.currentSegment.getTagTexts() |
|
99 } |
|
100 _this.$.html(Mustache.to_html(_this.template, _data)) |
|
101 if(_this.editable_segments&&_this.currentSegment){ |
|
102 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
|
103 } |
|
104 } |
|
105 } |
|
106 }); |
|
107 |
|
108 if(this.editable_segments&&this.currentSegment){ |
|
109 this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
|
110 } |
|
111 } |
|
112 |
|
113 IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() { |
|
114 if(this.currentSegment){ |
|
115 _data = { |
|
116 title: this.currentSegment.title, |
|
117 description : this.currentSegment.description, |
|
118 tags : this.currentSegment.getTagTexts(), |
|
119 submit : this.l10n.submit, |
|
120 cancel : this.l10n.cancel, |
|
121 new_tag : this.l10n.new_tag, |
|
122 delete_tag : this.l10n.delete_tag |
|
123 } |
|
124 this.$.html(Mustache.to_html(this.editTemplate, _data)); |
|
125 this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode")); |
|
126 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput")); |
|
127 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
|
128 this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit")) |
|
129 } |
|
130 } |
|
131 |
|
132 IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() { |
|
133 if(this.currentSegment){ |
|
134 data = { |
|
135 title: this.currentSegment.title, |
|
136 description : this.currentSegment.description, |
|
137 tags : this.currentSegment.getTagTexts() |
|
138 } |
|
139 this.$.html(Mustache.to_html(this.template, _data)); |
|
140 this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); |
|
141 } |
|
142 } |
|
143 |
|
144 IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInput = function() { |
|
145 if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){ |
|
146 this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>') |
|
147 } |
|
148 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append( |
|
149 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
|
150 +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>' |
|
151 +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>' |
|
152 +'</li>'); |
|
153 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
|
154 } |
|
155 |
|
156 IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) { |
|
157 $(clickEvent.currentTarget).parent().remove(); |
|
158 } |
|
159 |
|
160 IriSP.Widgets.CurrentSegmentInfobox.prototype.onSubmit = function() { |
|
161 new_tags_titles = this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-Input").map(function(){ |
|
162 if($(this).val()){ |
|
163 return $(this).val() |
|
164 } |
|
165 }); |
|
166 new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val() |
|
167 new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val() |
|
168 |
|
169 var _this = this, |
|
170 _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ |
|
171 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), |
|
172 _annotation = new IriSP.Model.Annotation(this.currentSegment.id, _export); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */ |
|
173 |
|
174 _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id); |
|
175 _annotation.setMedia(this.currentSegment.getMedia().id); |
|
176 _annotation.setBegin(this.currentSegment.begin); |
|
177 _annotation.setEnd(this.currentSegment.end); |
|
178 _annotation.created = this.currentSegment.created; |
|
179 _annotation.creator = this.currentSegment.creator; |
|
180 _annotation.title = new_title /* Champ titre */ |
|
181 _annotation.description = new_description /* Champ description */ |
|
182 var _tagIds = IriSP._(new_tags_titles).map(function(_title) { |
|
183 var _tags = _this.source.getTags(true).searchByTitle(_title, true); |
|
184 if (_tags.length) { |
|
185 var _tag = _tags[0]; |
|
186 } |
|
187 else { |
|
188 _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'), _this.source); |
|
189 _tag.title = _title; |
|
190 _this.source.getTags().push(_tag); |
|
191 } |
|
192 return _tag.id; |
|
193 }); |
|
194 _annotation.setTags(_tagIds); |
|
195 _annotation.project_id = this.project_id; |
|
196 |
|
197 _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */ |
|
198 _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */ |
|
199 |
|
200 _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.currentSegment.id}); |
|
201 |
|
202 IriSP.jQuery.ajax({ |
|
203 url: _url, |
|
204 type: this.api_method, |
|
205 contentType: 'application/json', |
|
206 data: _export.serialize(), /* L'objet Source est sérialisé */ |
|
207 success: function(_data) { |
|
208 _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */ |
|
209 _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */ |
|
210 _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */ |
|
211 _this.segments.forEach(function(_segment){ |
|
212 if (_segment.id == _annotation.id){ |
|
213 _this.segments.removeElement(_segment) |
|
214 } |
|
215 }) |
|
216 _this.segments.push(_annotation) |
|
217 _this.currentSegment = _annotation |
|
218 _data = { |
|
219 title: _this.currentSegment.title, |
|
220 description : _this.currentSegment.description, |
|
221 tags : _this.currentSegment.getTagTexts() |
|
222 } |
|
223 _this.$.html(Mustache.to_html(_this.template, _data)) |
|
224 if(_this.editable_segments&&_this.currentSegment){ |
|
225 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
|
226 } |
|
227 _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ |
|
228 }, |
|
229 error: function(_xhr, _error, _thrown) { |
|
230 IriSP.log("Error when sending annotation", _thrown); |
|
231 _export.getAnnotations().removeElement(_annotation, true); |
|
232 } |
|
233 }); |
51 } |
234 } |
52 |
235 |
53 IriSP.Widgets.CurrentSegmentInfobox.prototype.refresh = function() { |
236 IriSP.Widgets.CurrentSegmentInfobox.prototype.refresh = function() { |
54 var _list = this.segments; |
237 if(!this.media.getTimeRange()){ |
55 |
238 var _currentTime = this.media.getCurrentTime(); |
56 _currentTime = this.media.getCurrentTime(); |
239 var _list = this.segments.filter(function(_segment){ |
57 _list = _list.filter(function(_segment){ |
240 return (_segment.begin <= _currentTime && _segment.end >= _currentTime); |
58 return (_segment.begin <= _currentTime && _segment.end >= _currentTime); |
241 }) |
59 }) |
242 |
60 if (_list.length > 0){ |
243 if (_list.length > 0){ |
61 _currentSegment = _list[0]; |
244 if (this.currentSegment.id != _list[0].id){ |
62 _data = { |
245 this.currentSegment = _list[0]; |
63 title: _currentSegment.title, |
246 _data = { |
64 description : _currentSegment.description, |
247 title: this.currentSegment.title, |
65 tags : _currentSegment.getTagTexts() |
248 description : this.currentSegment.description, |
66 } |
249 tags : this.currentSegment.getTagTexts() |
67 this.$.html(Mustache.to_html(this.template, _data)) |
250 } |
68 } |
251 this.$.html(Mustache.to_html(this.template, _data)) |
69 else { |
252 if(this.editable_segments&&this.currentSegment){ |
70 var _empty_message = this.l10n.empty |
253 this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); |
71 if (this.empty_message) { |
254 } |
72 _empty_message = this.empty_message |
255 } |
73 } |
256 } |
74 this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>"); |
257 else { |
75 } |
258 this.currentSegment = false; |
76 } |
259 this.clearBox(); |
|
260 } |
|
261 } |
|
262 } |
|
263 |
|
264 IriSP.Widgets.CurrentSegmentInfobox.prototype.clearBox = function(){ |
|
265 var _empty_message = this.l10n.empty |
|
266 if (this.empty_message) { |
|
267 _empty_message = this.empty_message |
|
268 } |
|
269 this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>"); |
|
270 } |