1 /* Widget displays info on the current segment, with possibility of config for editing description and tags */ |
1 /* Widget displays info on the current segment, with possibility of config for editing description and tags */ |
2 |
2 // CurrentSegmentInfobox |
3 IriSP.Widgets.CurrentSegmentInfobox = function(player, config){ |
3 |
4 IriSP.Widgets.Widget.call(this, player, config); |
4 import currentSegmentInfoboxStyles from "./CurrentSegmentInfobox.module.css"; |
5 }; |
5 import Mustache from "mustache"; |
6 |
6 import _ from "lodash"; |
7 IriSP.Widgets.CurrentSegmentInfobox.prototype = new IriSP.Widgets.Widget(); |
7 |
8 |
8 const CurrentSegmentInfobox = function (ns) { |
9 IriSP.Widgets.CurrentSegmentInfobox.prototype.defaults = { |
9 return class extends ns.Widgets.Widget { |
10 annotation_type: "chap", |
10 constructor(player, config) { |
11 editable_segments: false, |
11 super(player, config); |
12 empty_message: false, |
12 } |
13 project_id: false, |
13 |
14 api_serializer: "ldt_annotate", |
14 static defaults = { |
15 api_method: "PUT", |
15 annotation_type: "chap", |
16 api_endpoint_template: "", |
16 editable_segments: false, |
17 new_tag_button: true, |
17 empty_message: false, |
18 show_headers: false, |
18 project_id: false, |
19 custom_edit_text: false, |
19 api_serializer: "ldt_annotate", |
20 empty_description_placeholder: false, |
20 api_method: "PUT", |
21 }; |
21 api_endpoint_template: "", |
22 |
22 new_tag_button: true, |
23 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = |
23 show_headers: false, |
24 '<div class="Ldt-CurrentSegmentInfobox">' |
24 custom_edit_text: false, |
25 + '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">' |
25 empty_description_placeholder: false, |
26 + '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}' |
26 }; |
27 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>' |
27 |
28 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' |
28 static template = |
29 + '{{^description}}{{^tags.length}}{{#description_placeholder}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description-placeholder">{{description_placeholder}}</div>{{/description_placeholder}}{{/tags.length}}{{/description}}' |
29 '<div class="Ldt-CurrentSegmentInfobox">' + |
30 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' |
30 '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">' + |
31 + '{{#tags.length}}' |
31 '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}' + |
32 + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
32 '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>' + |
33 + '{{#tags}}' |
33 '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' + |
34 + '{{#.}}' |
34 '{{^description}}{{^tags.length}}{{#description_placeholder}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description-placeholder">{{description_placeholder}}</div>{{/description_placeholder}}{{/tags.length}}{{/description}}' + |
35 + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
35 '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' + |
36 + '<span>{{.}}</span>' |
36 "{{#tags.length}}" + |
37 + '</li>' |
37 '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' + |
38 + '{{/.}}' |
38 "{{#tags}}" + |
39 + '{{/tags}}' |
39 "{{#.}}" + |
40 + '</ul>' |
40 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' + |
41 + '{{/tags.length}}' |
41 "<span>{{.}}</span>" + |
42 + '</div>' |
42 "</li>" + |
43 + '</div>' |
43 "{{/.}}" + |
44 + '</div>' |
44 "{{/tags}}" + |
45 |
45 "</ul>" + |
46 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = |
46 "{{/tags.length}}" + |
47 '<div class="Ldt-CurrentSegmentInfobox">' |
47 "</div>" + |
48 + '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">' |
48 "</div>" + |
49 + '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}' |
49 "</div>"; |
50 + '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>' |
50 |
51 + '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>' |
51 static editTemplate = |
52 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' |
52 '<div class="Ldt-CurrentSegmentInfobox">' + |
53 + '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}' |
53 '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">' + |
54 + '{{#new_tag_button}}' |
54 '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}' + |
55 + '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>' |
55 '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>' + |
56 + '{{/new_tag_button}}' |
56 '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>' + |
57 + '{{^new_tag_button}}' |
57 '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' + |
58 + '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>' |
58 '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}' + |
59 + '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>' |
59 "{{#new_tag_button}}" + |
60 + '{{/new_tag_button}}' |
60 '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>' + |
61 + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
61 "{{/new_tag_button}}" + |
62 + '{{#tags}}' |
62 "{{^new_tag_button}}" + |
63 + '{{#.}}' |
63 '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>' + |
64 + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
64 '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>' + |
65 + '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>' |
65 "{{/new_tag_button}}" + |
66 + '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>' |
66 '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' + |
67 + '</li>' |
67 "{{#tags}}" + |
68 + '{{/.}}' |
68 "{{#.}}" + |
69 + '{{/tags}}' |
69 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' + |
70 + '</ul>' |
70 '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>' + |
71 + '</div>' |
71 '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>' + |
72 + '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>' |
72 "</li>" + |
73 + '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>' |
73 "{{/.}}" + |
74 + '</div>' |
74 "{{/tags}}" + |
75 + '</div>' |
75 "</ul>" + |
76 |
76 "</div>" + |
77 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = { |
77 '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>' + |
78 fr : { |
78 '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>' + |
79 submit : "Soumettre", |
79 "</div>" + |
80 cancel : "Annuler", |
80 "</div>"; |
81 edit : "Editer", |
81 |
82 new_tag : "Nouveau tag", |
82 static messages = { |
83 delete_tag : "Supprimer", |
83 fr: { |
84 fields_header : "Commentaire associé à ce segment", |
84 submit: "Soumettre", |
85 tags_header : "Mots-clés associés à ce segment", |
85 cancel: "Annuler", |
86 empty : "Le player vidéo ne lit actuellement aucun segment" |
86 edit: "Editer", |
87 }, |
87 new_tag: "Nouveau tag", |
88 en: { |
88 delete_tag: "Supprimer", |
89 submit : "Submit", |
89 fields_header: "Commentaire associé à ce segment", |
90 cancel : "Cancel", |
90 tags_header: "Mots-clés associés à ce segment", |
91 edit : "Edit", |
91 empty: "Le player vidéo ne lit actuellement aucun segment", |
92 new_tag : "New tag", |
92 }, |
93 delete_tag : "Delete tag", |
93 en: { |
94 fields_header : "Current segment content", |
94 submit: "Submit", |
95 tags_header : "Current segment tags", |
95 cancel: "Cancel", |
96 empty : "The player currently doesn't read any segment" |
96 edit: "Edit", |
97 } |
97 new_tag: "New tag", |
98 } |
98 delete_tag: "Delete tag", |
99 |
99 fields_header: "Current segment content", |
100 IriSP.Widgets.CurrentSegmentInfobox.prototype.draw = function() { |
100 tags_header: "Current segment tags", |
101 var _this = this; |
101 empty: "The player currently doesn't read any segment", |
102 this.segments = this.getWidgetAnnotations(); |
102 }, |
103 this.renderTemplate(); |
103 }; |
104 this.currentSegment = false; |
104 |
105 this.clearBox(); |
105 draw() { |
106 this.refresh(); |
106 var _this = this; |
107 this.onMediaEvent("timeupdate", "refresh"); |
107 this.segments = this.getWidgetAnnotations(); |
108 this.onMediaEvent("settimerange", function(_timeRange){ |
108 this.renderTemplate(); |
|
109 this.currentSegment = false; |
|
110 this.clearBox(); |
|
111 this.refresh(); |
|
112 this.onMediaEvent("timeupdate", "refresh"); |
|
113 this.onMediaEvent("settimerange", function (_timeRange) { |
109 var _segmentBegin = _timeRange[0], |
114 var _segmentBegin = _timeRange[0], |
110 _segmentEnd = _timeRange[1], |
115 _segmentEnd = _timeRange[1], |
111 _list = _this.segments.filter(function(_segment){ |
116 _list = _this.segments.filter(function (_segment) { |
112 return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds |
117 return ( |
113 }); |
118 _segment.begin.milliseconds == _segmentBegin.milliseconds && |
114 if (_list.length >0){ |
119 _segment.end.milliseconds == _segmentEnd.milliseconds |
115 _this.$.toggleClass("editing", false); |
120 ); |
116 if (_this.currentSegment.id != _list[0].id){ |
121 }); |
117 _this.currentSegment = _list[0]; |
122 if (_list.length > 0) { |
118 _data = { |
123 _this.$.toggleClass("editing", false); |
119 editable_segments: _this.editable_segments, |
124 if (_this.currentSegment.id != _list[0].id) { |
120 edit: _this.custom_edit_text ? _this.custom_edit_text : _this.l10n.edit, |
125 _this.currentSegment = _list[0]; |
121 title: _this.currentSegment.title, |
126 _data = { |
122 description : _this.currentSegment.description, |
127 editable_segments: _this.editable_segments, |
123 description_placeholder : _this.empty_description_placeholder, |
128 edit: _this.custom_edit_text |
124 tags : _this.currentSegment.getTagTexts() |
129 ? _this.custom_edit_text |
125 } |
130 : _this.l10n.edit, |
126 _this.$.html(Mustache.to_html(_this.template, _data)) |
131 title: _this.currentSegment.title, |
127 if(_this.editable_segments&&_this.currentSegment){ |
132 description: _this.currentSegment.description, |
128 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
133 description_placeholder: _this.empty_description_placeholder, |
129 } |
134 tags: _this.currentSegment.getTagTexts(), |
|
135 }; |
|
136 _this.$.html(Mustache.render(_this.template, _data)); |
|
137 if (_this.editable_segments && _this.currentSegment) { |
|
138 _this.$.find(".Ldt-CurrentSegmentInfobox").click( |
|
139 _this.functionWrapper("enableEditMode") |
|
140 ); |
130 } |
141 } |
131 } |
142 } |
132 }); |
143 } |
133 |
144 }); |
134 if(this.editable_segments&&this.currentSegment){ |
145 |
135 this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
146 if (this.editable_segments && this.currentSegment) { |
136 } |
147 this.$.find(".Ldt-CurrentSegmentInfobox").click( |
137 } |
148 _this.functionWrapper("enableEditMode") |
138 |
149 ); |
139 IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() { |
150 } |
140 var _this = this; |
151 } |
141 if(this.currentSegment){ |
152 |
|
153 enableEditMode() { |
|
154 var _this = this; |
|
155 if (this.currentSegment) { |
142 _data = { |
156 _data = { |
143 title: this.currentSegment.title, |
157 title: this.currentSegment.title, |
144 description : this.currentSegment.description, |
158 description: this.currentSegment.description, |
145 tags : this.currentSegment.getTagTexts(), |
159 tags: this.currentSegment.getTagTexts(), |
146 submit : this.l10n.submit, |
160 submit: this.l10n.submit, |
147 cancel : this.l10n.cancel, |
161 cancel: this.l10n.cancel, |
148 headers : this.show_headers, |
162 headers: this.show_headers, |
149 tags_header : this.custom_tags_header ? this.custom_tags_header : this.l10n.tags_header, |
163 tags_header: this.custom_tags_header |
150 fields_header : this.custom_fields_header ? this.custom_fields_header : this.l10n.fields_header, |
164 ? this.custom_tags_header |
151 new_tag : this.l10n.new_tag, |
165 : this.l10n.tags_header, |
152 delete_tag : this.l10n.delete_tag, |
166 fields_header: this.custom_fields_header |
153 new_tag_button : this.new_tag_button, |
167 ? this.custom_fields_header |
154 } |
168 : this.l10n.fields_header, |
|
169 new_tag: this.l10n.new_tag, |
|
170 delete_tag: this.l10n.delete_tag, |
|
171 new_tag_button: this.new_tag_button, |
|
172 }; |
155 this.$.toggleClass("editing", true); |
173 this.$.toggleClass("editing", true); |
156 this.$.html(Mustache.to_html(this.editTemplate, _data)); |
174 this.$.html(Mustache.render(this.editTemplate, _data)); |
157 this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode")); |
175 this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click( |
158 if (this.new_tag_button){ |
176 this.functionWrapper("disableEditMode") |
159 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput")); |
177 ); |
|
178 if (this.new_tag_button) { |
|
179 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click( |
|
180 this.functionWrapper("insertTagInput") |
|
181 ); |
160 } else { |
182 } else { |
161 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress")); |
183 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress( |
162 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput-Add").click(this.functionWrapper("insertTagInputKeypress")); |
184 this.functionWrapper("insertTagInputKeypress") |
163 } |
185 ); |
164 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
186 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput-Add").click( |
165 this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit")) |
187 this.functionWrapper("insertTagInputKeypress") |
166 } |
188 ); |
167 } |
189 } |
168 |
190 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click( |
169 IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() { |
191 this.functionWrapper("deleteTagInput") |
170 if(this.currentSegment){ |
192 ); |
|
193 this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click( |
|
194 this.functionWrapper("onSubmit") |
|
195 ); |
|
196 } |
|
197 } |
|
198 |
|
199 disableEditMode() { |
|
200 if (this.currentSegment) { |
171 _data = { |
201 _data = { |
172 editable_segments: this.editable_segments, |
202 editable_segments: this.editable_segments, |
173 edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit, |
203 edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit, |
174 title: this.currentSegment.title, |
204 title: this.currentSegment.title, |
175 description : this.currentSegment.description, |
205 description: this.currentSegment.description, |
176 description_placeholder : this.empty_description_placeholder, |
206 description_placeholder: this.empty_description_placeholder, |
177 tags : this.currentSegment.getTagTexts() |
207 tags: this.currentSegment.getTagTexts(), |
178 } |
208 }; |
179 this.$.toggleClass("editing", false); |
209 this.$.toggleClass("editing", false); |
180 this.$.html(Mustache.to_html(this.template, _data)); |
210 this.$.html(Mustache.render(this.template, _data)); |
181 this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); |
211 this.$.find(".Ldt-CurrentSegmentInfobox").click( |
182 } |
212 this.functionWrapper("enableEditMode") |
183 } |
213 ); |
184 |
214 } |
185 IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInput = function() { |
215 } |
186 if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){ |
216 |
187 this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>') |
217 insertTagInput() { |
188 } |
218 if ( |
189 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append( |
219 !this.currentSegment.getTagTexts().length && |
190 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
220 !this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length |
191 +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>' |
221 ) { |
192 +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>' |
222 this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend( |
193 +'</li>'); |
223 '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>' |
194 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
224 ); |
195 } |
225 } |
196 |
226 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append( |
197 IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) { |
227 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' + |
198 var keycode = (event.keyCode ? event.keyCode : event.which); |
228 '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>' + |
199 if(keycode == '13' || event.type == 'click'){ |
229 '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">' + |
200 if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){ |
230 this.l10n.delete_tag + |
201 this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>') |
231 "</div>" + |
|
232 "</li>" |
|
233 ); |
|
234 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click( |
|
235 this.functionWrapper("deleteTagInput") |
|
236 ); |
|
237 } |
|
238 |
|
239 insertTagInputKeypress(event) { |
|
240 var keycode = event.keyCode ? event.keyCode : event.which; |
|
241 if (keycode == "13" || event.type == "click") { |
|
242 if ( |
|
243 !this.currentSegment.getTagTexts().length && |
|
244 !this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length |
|
245 ) { |
|
246 this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend( |
|
247 '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>' |
|
248 ); |
202 } |
249 } |
203 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append( |
250 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append( |
204 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
251 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' + |
205 +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>' |
252 '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="' + |
206 +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>' |
253 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() + |
207 +'</li>'); |
254 '"></input>' + |
208 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
255 '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">' + |
|
256 this.l10n.delete_tag + |
|
257 "</div>" + |
|
258 "</li>" |
|
259 ); |
|
260 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click( |
|
261 this.functionWrapper("deleteTagInput") |
|
262 ); |
209 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val(""); |
263 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val(""); |
210 return false; |
264 return false; |
211 } |
265 } |
212 } |
266 } |
213 |
267 |
214 IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) { |
268 deleteTagInput(clickEvent) { |
215 $(clickEvent.currentTarget).parent().remove(); |
269 $(clickEvent.currentTarget).parent().remove(); |
216 } |
270 } |
217 |
271 |
218 IriSP.Widgets.CurrentSegmentInfobox.prototype.onSubmit = function() { |
272 onSubmit() { |
219 new_tags_titles = this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-Input").map(function(){ |
273 new_tags_titles = this.$.find( |
220 if($(this).val()){ |
274 ".Ldt-CurrentSegmentInfobox-Tags-Li-Input" |
221 return $(this).val() |
275 ).map(function () { |
222 } |
276 if ($(this).val()) { |
223 }); |
277 return $(this).val(); |
224 new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val() |
278 } |
225 new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val() |
279 }); |
226 |
280 new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val(); |
227 var _this = this, |
281 new_description = this.$.find( |
228 _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create an Annotations List to send to the server */ |
282 ".Ldt-CurrentSegmentInfobox-DescriptionInput" |
229 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */ |
283 ).val(); |
230 _annotation = new IriSP.Model.Annotation(this.currentSegment.id, _export); /* We create an annotation in the source with a generated ID (param. false) */ |
284 |
231 |
285 var _this = this, |
232 _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id); |
286 _exportedAnnotations = new ns.Model.List( |
233 _annotation.setMedia(this.currentSegment.getMedia().id); |
287 this.player.sourceManager |
234 _annotation.setBegin(this.currentSegment.begin); |
288 ) /* We create an Annotations List to send to the server */, |
235 _annotation.setEnd(this.currentSegment.end); |
289 _export = this.player.sourceManager.newLocalSource({ |
236 _annotation.created = this.currentSegment.created; |
290 serializer: ns.serializers[this.api_serializer], |
237 _annotation.creator = this.currentSegment.creator; |
291 }) /* We create a source object using a specific serializer for export */, |
238 _annotation.title = new_title /* Title field */ |
292 _annotation = new ns.Model.Annotation( |
239 _annotation.description = new_description /* Description field */ |
293 this.currentSegment.id, |
240 var _tagIds = IriSP._(new_tags_titles).map(function(_title) { |
294 _export |
|
295 ); /* We create an annotation in the source with a generated ID (param. false) */ |
|
296 |
|
297 _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id); |
|
298 _annotation.setMedia(this.currentSegment.getMedia().id); |
|
299 _annotation.setBegin(this.currentSegment.begin); |
|
300 _annotation.setEnd(this.currentSegment.end); |
|
301 _annotation.created = this.currentSegment.created; |
|
302 _annotation.creator = this.currentSegment.creator; |
|
303 _annotation.title = new_title; /* Title field */ |
|
304 _annotation.description = new_description; /* Description field */ |
|
305 var _tagIds = _(new_tags_titles).map(function (_title) { |
241 var _tags = _this.source.getTags(true).searchByTitle(_title, true); |
306 var _tags = _this.source.getTags(true).searchByTitle(_title, true); |
242 if (_tags.length) { |
307 if (_tags.length) { |
243 var _tag = _tags[0]; |
308 var _tag = _tags[0]; |
244 } |
309 } else { |
245 else { |
310 _tag = new ns.Model.Tag(_title.replace(/\W/g, "_"), _this.source); |
246 _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'), _this.source); |
311 _tag.title = _title; |
247 _tag.title = _title; |
312 _this.source.getTags().push(_tag); |
248 _this.source.getTags().push(_tag); |
|
249 } |
313 } |
250 return _tag.id; |
314 return _tag.id; |
251 }); |
315 }).value(); |
252 _annotation.setTags(_tagIds); |
316 _annotation.setTags(_tagIds); |
253 _annotation.project_id = this.project_id; |
317 _annotation.project_id = this.project_id; |
254 |
318 |
255 _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */ |
319 _exportedAnnotations.push( |
256 _export.addList("annotation",_exportedAnnotations); /* We add the list to the source object */ |
320 _annotation |
257 |
321 ); /* We add the annotation in the list to export */ |
258 _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.currentSegment.id}); |
322 _export.addList( |
259 |
323 "annotation", |
260 IriSP.jQuery.ajax({ |
324 _exportedAnnotations |
|
325 ); /* We add the list to the source object */ |
|
326 |
|
327 _url = Mustache.render(this.api_endpoint_template, { |
|
328 annotation_id: this.currentSegment.id, |
|
329 }); |
|
330 |
|
331 ns.jQuery.ajax({ |
261 url: _url, |
332 url: _url, |
262 type: this.api_method, |
333 type: this.api_method, |
263 contentType: 'application/json', |
334 contentType: "application/json", |
264 data: _export.serialize(), /* Source is serialized */ |
335 data: _export.serialize() /* Source is serialized */, |
265 success: function(_data) { |
336 success: function (_data) { |
266 _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */ |
337 _export |
267 _export.deSerialize(_data); /* Data deserialization */ |
338 .getAnnotations() |
268 _this.source.merge(_export); /* We merge the deserialized data with the current source data */ |
339 .removeElement( |
269 _this.segments.forEach(function(_segment){ |
340 _annotation, |
270 if (_segment.id == _annotation.id){ |
341 true |
271 _this.segments.removeElement(_segment) |
342 ); /* We delete the sent annotation to avoid redundancy */ |
272 } |
343 _export.deSerialize(_data); /* Data deserialization */ |
273 }) |
344 _this.source.merge( |
274 _this.segments.push(_annotation) |
345 _export |
275 _this.currentSegment = _annotation |
346 ); /* We merge the deserialized data with the current source data */ |
|
347 _this.segments.forEach(function (_segment) { |
|
348 if (_segment.id == _annotation.id) { |
|
349 _this.segments.removeElement(_segment); |
|
350 } |
|
351 }); |
|
352 _this.segments.push(_annotation); |
|
353 _this.currentSegment = _annotation; |
|
354 _data = { |
|
355 editable_segments: _this.editable_segments, |
|
356 edit: _this.custom_edit_text |
|
357 ? _this.custom_edit_text |
|
358 : _this.l10n.edit, |
|
359 title: _this.currentSegment.title, |
|
360 description: _this.currentSegment.description, |
|
361 description_placeholder: _this.empty_description_placeholder, |
|
362 tags: _this.currentSegment.getTagTexts(), |
|
363 }; |
|
364 _this.$.html(Mustache.render(_this.template, _data)); |
|
365 if (_this.editable_segments && _this.currentSegment) { |
|
366 _this.$.find(".Ldt-CurrentSegmentInfobox").click( |
|
367 _this.functionWrapper("enableEditMode") |
|
368 ); |
|
369 } |
|
370 _this.$.toggleClass("editing", false); |
|
371 }, |
|
372 error: function (_xhr, _error, _thrown) { |
|
373 ns.log("Error when sending annotation", _thrown); |
|
374 _export.getAnnotations().removeElement(_annotation, true); |
|
375 }, |
|
376 }); |
|
377 } |
|
378 |
|
379 refresh() { |
|
380 if (!this.media.getTimeRange()) { |
|
381 var _currentTime = this.media.getCurrentTime(); |
|
382 var _list = this.segments.filter(function (_segment) { |
|
383 return _segment.begin <= _currentTime && _segment.end >= _currentTime; |
|
384 }); |
|
385 |
|
386 if (_list.length > 0) { |
|
387 if (this.currentSegment.id != _list[0].id) { |
|
388 this.currentSegment = _list[0]; |
276 _data = { |
389 _data = { |
277 editable_segments: _this.editable_segments, |
390 editable_segments: this.editable_segments, |
278 edit: _this.custom_edit_text ? _this.custom_edit_text : _this.l10n.edit, |
391 edit: this.custom_edit_text |
279 title: _this.currentSegment.title, |
392 ? this.custom_edit_text |
280 description : _this.currentSegment.description, |
393 : this.l10n.edit, |
281 description_placeholder : _this.empty_description_placeholder, |
394 title: this.currentSegment.title, |
282 tags : _this.currentSegment.getTagTexts() |
395 description: this.currentSegment.description, |
283 } |
396 description_placeholder: this.empty_description_placeholder, |
284 _this.$.html(Mustache.to_html(_this.template, _data)) |
397 tags: this.currentSegment.getTagTexts(), |
285 if(_this.editable_segments&&_this.currentSegment){ |
398 }; |
286 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
399 this.$.html(Mustache.render(this.template, _data)); |
|
400 if (this.editable_segments && this.currentSegment) { |
|
401 this.$.find(".Ldt-CurrentSegmentInfobox").click( |
|
402 this.functionWrapper("enableEditMode") |
|
403 ); |
287 } |
404 } |
288 _this.$.toggleClass("editing", false); |
405 } |
289 }, |
406 } else { |
290 error: function(_xhr, _error, _thrown) { |
407 this.currentSegment = false; |
291 IriSP.log("Error when sending annotation", _thrown); |
408 this.clearBox(); |
292 _export.getAnnotations().removeElement(_annotation, true); |
409 } |
293 } |
410 } |
294 }); |
411 } |
295 } |
412 |
296 |
413 clearBox() { |
297 IriSP.Widgets.CurrentSegmentInfobox.prototype.refresh = function() { |
414 var _empty_message = this.l10n.empty; |
298 if(!this.media.getTimeRange()){ |
415 if (this.empty_message) { |
299 var _currentTime = this.media.getCurrentTime(); |
416 _empty_message = this.empty_message; |
300 var _list = this.segments.filter(function(_segment){ |
417 } |
301 return (_segment.begin <= _currentTime && _segment.end >= _currentTime); |
418 this.$.find(".Ldt-CurrentSegmentInfobox").html( |
302 }) |
419 "<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>" + |
303 |
420 _empty_message + |
304 if (_list.length > 0){ |
421 "</div>" |
305 if (this.currentSegment.id != _list[0].id){ |
422 ); |
306 this.currentSegment = _list[0]; |
423 } |
307 _data = { |
424 }; |
308 editable_segments: this.editable_segments, |
425 }; |
309 edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit, |
426 |
310 title: this.currentSegment.title, |
427 export { CurrentSegmentInfobox, currentSegmentInfoboxStyles }; |
311 description : this.currentSegment.description, |
|
312 description_placeholder : this.empty_description_placeholder, |
|
313 tags : this.currentSegment.getTagTexts() |
|
314 } |
|
315 this.$.html(Mustache.to_html(this.template, _data)) |
|
316 if(this.editable_segments&&this.currentSegment){ |
|
317 this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); |
|
318 } |
|
319 } |
|
320 } |
|
321 else { |
|
322 this.currentSegment = false; |
|
323 this.clearBox(); |
|
324 } |
|
325 } |
|
326 } |
|
327 |
|
328 IriSP.Widgets.CurrentSegmentInfobox.prototype.clearBox = function(){ |
|
329 var _empty_message = this.l10n.empty |
|
330 if (this.empty_message) { |
|
331 _empty_message = this.empty_message |
|
332 } |
|
333 this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>"); |
|
334 } |
|