11 editable_segments: false, |
11 editable_segments: false, |
12 empty_message: false, |
12 empty_message: false, |
13 project_id: false, |
13 project_id: false, |
14 api_serializer: "ldt_annotate", |
14 api_serializer: "ldt_annotate", |
15 api_method: "PUT", |
15 api_method: "PUT", |
16 api_endpoint_template: "" |
16 api_endpoint_template: "", |
|
17 new_tag_button: true, |
17 }; |
18 }; |
18 |
19 |
19 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = |
20 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = |
20 '<div class="Ldt-CurrentSegmentInfobox">' |
21 '<div class="Ldt-CurrentSegmentInfobox">' |
21 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>' |
22 + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>' |
39 '<div class="Ldt-CurrentSegmentInfobox">' |
40 '<div class="Ldt-CurrentSegmentInfobox">' |
40 + '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>' |
41 + '<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-CancelButton">{{cancel}}</div>' |
42 + '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>' |
43 + '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>' |
43 + '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>' |
44 + '<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-Element Ldt-CurrentSegmentInfobox-Tags">' |
|
46 + '{{#new_tag_button}}' |
45 + '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>' |
47 + '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>' |
|
48 + '{{/new_tag_button}}' |
|
49 + '{{^new_tag_button}}' |
|
50 + '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>' |
|
51 + '{{/new_tag_button}}' |
46 + '{{#tags.length}}' |
52 + '{{#tags.length}}' |
47 + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
53 + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' |
48 + '{{#tags}}' |
54 + '{{#tags}}' |
49 + '{{#.}}' |
55 + '{{#.}}' |
50 + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
56 + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
88 _segmentEnd = _timeRange[1], |
94 _segmentEnd = _timeRange[1], |
89 _list = _this.segments.filter(function(_segment){ |
95 _list = _this.segments.filter(function(_segment){ |
90 return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds |
96 return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds |
91 }); |
97 }); |
92 if (_list.length >0){ |
98 if (_list.length >0){ |
|
99 _this.$.toggleClass("editing", false); |
93 if (_this.currentSegment.id != _list[0].id){ |
100 if (_this.currentSegment.id != _list[0].id){ |
94 _this.currentSegment = _list[0]; |
101 _this.currentSegment = _list[0]; |
95 _data = { |
102 _data = { |
96 title: _this.currentSegment.title, |
103 title: _this.currentSegment.title, |
97 description : _this.currentSegment.description, |
104 description : _this.currentSegment.description, |
109 this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
116 this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
110 } |
117 } |
111 } |
118 } |
112 |
119 |
113 IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() { |
120 IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() { |
|
121 var _this = this; |
114 if(this.currentSegment){ |
122 if(this.currentSegment){ |
115 _data = { |
123 _data = { |
116 title: this.currentSegment.title, |
124 title: this.currentSegment.title, |
117 description : this.currentSegment.description, |
125 description : this.currentSegment.description, |
118 tags : this.currentSegment.getTagTexts(), |
126 tags : this.currentSegment.getTagTexts(), |
119 submit : this.l10n.submit, |
127 submit : this.l10n.submit, |
120 cancel : this.l10n.cancel, |
128 cancel : this.l10n.cancel, |
121 new_tag : this.l10n.new_tag, |
129 new_tag : this.l10n.new_tag, |
122 delete_tag : this.l10n.delete_tag |
130 delete_tag : this.l10n.delete_tag, |
123 } |
131 new_tag_button : this.new_tag_button, |
|
132 } |
|
133 this.$.toggleClass("editing", true); |
124 this.$.html(Mustache.to_html(this.editTemplate, _data)); |
134 this.$.html(Mustache.to_html(this.editTemplate, _data)); |
125 this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode")); |
135 this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode")); |
126 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput")); |
136 if (this.new_tag_button){ |
|
137 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput")); |
|
138 } else { |
|
139 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress")); |
|
140 } |
127 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
141 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
128 this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit")) |
142 this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit")) |
129 } |
143 } |
130 } |
144 } |
131 |
145 |
134 data = { |
148 data = { |
135 title: this.currentSegment.title, |
149 title: this.currentSegment.title, |
136 description : this.currentSegment.description, |
150 description : this.currentSegment.description, |
137 tags : this.currentSegment.getTagTexts() |
151 tags : this.currentSegment.getTagTexts() |
138 } |
152 } |
|
153 this.$.toggleClass("editing", false); |
139 this.$.html(Mustache.to_html(this.template, _data)); |
154 this.$.html(Mustache.to_html(this.template, _data)); |
140 this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); |
155 this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); |
141 } |
156 } |
142 } |
157 } |
143 |
158 |
149 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
164 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
150 +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>' |
165 +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>' |
151 +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>' |
166 +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>' |
152 +'</li>'); |
167 +'</li>'); |
153 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
168 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
|
169 } |
|
170 |
|
171 IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) { |
|
172 var keycode = (event.keyCode ? event.keyCode : event.which); |
|
173 if(keycode == '13'){ |
|
174 if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){ |
|
175 this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>') |
|
176 } |
|
177 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append( |
|
178 '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' |
|
179 +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>' |
|
180 +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>' |
|
181 +'</li>'); |
|
182 this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput")); |
|
183 this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val(""); |
|
184 return false; |
|
185 } |
154 } |
186 } |
155 |
187 |
156 IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) { |
188 IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) { |
157 $(clickEvent.currentTarget).parent().remove(); |
189 $(clickEvent.currentTarget).parent().remove(); |
158 } |
190 } |
222 } |
254 } |
223 _this.$.html(Mustache.to_html(_this.template, _data)) |
255 _this.$.html(Mustache.to_html(_this.template, _data)) |
224 if(_this.editable_segments&&_this.currentSegment){ |
256 if(_this.editable_segments&&_this.currentSegment){ |
225 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
257 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode")); |
226 } |
258 } |
|
259 _this.$.toggleClass("editing", false); |
227 _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ |
260 _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */ |
228 }, |
261 }, |
229 error: function(_xhr, _error, _thrown) { |
262 error: function(_xhr, _error, _thrown) { |
230 IriSP.log("Error when sending annotation", _thrown); |
263 IriSP.log("Error when sending annotation", _thrown); |
231 _export.getAnnotations().removeElement(_annotation, true); |
264 _export.getAnnotations().removeElement(_annotation, true); |