4 }; |
4 }; |
5 |
5 |
6 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); |
6 IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); |
7 |
7 |
8 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
8 IriSP.Widgets.CreateAnnotation.prototype.defaults = { |
9 single_time_mode : false, |
9 show_title_field : false, |
10 show_title_field : true, |
10 user_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png", |
11 user_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png" |
11 tags : false, |
|
12 max_tags : 8, |
|
13 polemics : [{ |
|
14 keyword: "++", |
|
15 background_color: "#00a000", |
|
16 text_color: "#ffffff" |
|
17 },{ |
|
18 keyword: "--", |
|
19 background_color: "#c00000", |
|
20 text_color: "#ffffff" |
|
21 },{ |
|
22 keyword: "??", |
|
23 background_color: "#0000e0", |
|
24 text_color: "#ffffff" |
|
25 },{ |
|
26 keyword: "==", |
|
27 background_color: "#f0e000", |
|
28 text_color: "#000000" |
|
29 }], |
|
30 annotation_type: "Contributions", |
|
31 creator_name: "", |
|
32 api_serializer: "ldt_annotate" |
12 /* |
33 /* |
13 tags : [ |
34 |
14 { |
|
15 id: "digitalstudies", |
|
16 meta: { |
|
17 description: "#digital-studies" |
|
18 } |
|
19 }, |
|
20 { |
|
21 id: "amateur", |
|
22 meta: { |
|
23 description: "#amateur" |
|
24 }, |
|
25 } |
|
26 ], |
|
27 remote_tags : false, |
35 remote_tags : false, |
28 random_tags : false, |
36 random_tags : false, |
29 show_from_field : false, |
37 show_from_field : false, |
30 disable_share : false, |
38 disable_share : false, |
31 polemic_mode : true, // enable polemics |
39 polemic_mode : true, // enable polemics |
96 |
102 |
97 IriSP.Widgets.CreateAnnotation.prototype.template = |
103 IriSP.Widgets.CreateAnnotation.prototype.template = |
98 '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
104 '<div class="Ldt-CreateAnnotation"><div class="Ldt-CreateAnnotation-Inner">' |
99 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' |
105 + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">' |
100 + '<h3>{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' |
106 + '<h3>{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}' |
101 + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}}</span>{{/show_title_field}}' |
107 + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}' |
102 + ' <span class="Ldt-CreateAnnotation-Times">{{#single_time_mode}}{{l10n.at_time}}{{/single_time_mode}}' |
108 + ' <span class="Ldt-CreateAnnotation-Times">{{l10n.from_time}} <span class="Ldt-CreateAnnotation-Begin"></span>' |
103 + '{{^single_time_mode}}{{l10n.from_time}}{{/single_time_mode}} <span class="Ldt-CreateAnnotation-Begin"></span>' |
109 + ' {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End"></span></span></h3>' |
104 + ' {{^single_time_mode}}{{l10n.to_time}} <span class="Ldt-CreateAnnotation-End"></span>{{/single_time_mode}}</span></h3>' |
110 + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>' |
105 + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{type_description}}"></textarea>' |
111 + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{user_avatar}}"></img></div>' |
106 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" />' |
112 + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />' |
|
113 + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">' |
|
114 + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}' |
|
115 + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">' |
|
116 + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}' |
107 + '</form>' |
117 + '</form>' |
108 + '</div></div>'; |
118 + '<div style="clear: both;"></div></div></div>'; |
109 |
119 |
110 IriSP.Widgets.CreateAnnotation.prototype.draw = function() { |
120 IriSP.Widgets.CreateAnnotation.prototype.draw = function() { |
|
121 if (!this.tags) { |
|
122 this.tags = this.source.getTags() |
|
123 .sortBy(function (_tag) { |
|
124 return -_tag.getAnnotations().length; |
|
125 }) |
|
126 .slice(0, this.max_tags) |
|
127 .map(function(_tag) { |
|
128 return _tag; |
|
129 }); |
|
130 // We have to use the map function because Mustache doesn't like our tags object |
|
131 } |
111 this.renderTemplate(); |
132 this.renderTemplate(); |
|
133 var _this = this; |
|
134 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").click(function() { |
|
135 _this.addKeyword(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
|
136 return false; |
|
137 }); |
|
138 this.$.find(".Ldt-CreateAnnotation-Description").bind("change keyup input paste", this.functionWrapper("onDescriptionChange")); |
|
139 if (this.show_title_field) { |
|
140 this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange")); |
|
141 } |
|
142 |
|
143 this.$.hide(); |
|
144 this.hide(); |
|
145 this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); |
|
146 this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); |
|
147 this.begin = new IriSP.Model.Time(); |
|
148 this.end = this.source.getDuration(); |
|
149 this.$.find("form").submit(this.functionWrapper("onSubmit")); |
|
150 } |
|
151 |
|
152 IriSP.Widgets.CreateAnnotation.prototype.show = function() { |
|
153 this.visible = true; |
|
154 this.$.slideDown(); |
|
155 this.player.popcorn.trigger("IriSP.Annotation.minimize"); |
|
156 this.player.popcorn.trigger("IriSP.Slice.show"); |
|
157 } |
|
158 |
|
159 IriSP.Widgets.CreateAnnotation.prototype.hide = function() { |
|
160 this.visible = false; |
|
161 this.$.slideUp(); |
|
162 this.player.popcorn.trigger("IriSP.Annotation.maximize"); |
|
163 this.player.popcorn.trigger("IriSP.Slice.hide"); |
|
164 } |
|
165 |
|
166 IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { |
|
167 if (this.visible) { |
|
168 this.hide(); |
|
169 } else { |
|
170 this.show(); |
|
171 } |
|
172 } |
|
173 |
|
174 IriSP.Widgets.CreateAnnotation.prototype.onBoundsChanged = function(_values) { |
|
175 this.begin = new IriSP.Model.Time(_values[0]); |
|
176 this.end = new IriSP.Model.Time(_values[1]); |
|
177 this.$.find(".Ldt-CreateAnnotation-Begin").html(this.begin.toString()); |
|
178 this.$.find(".Ldt-CreateAnnotation-End").html(this.end.toString()); |
|
179 } |
|
180 |
|
181 IriSP.Widgets.CreateAnnotation.prototype.addKeyword = function(_keyword) { |
|
182 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
|
183 _rx = IriSP.Model.regexpFromTextOrArray(_keyword), |
|
184 _contents = _field.val(); |
|
185 _contents = ( _rx.test(_contents) |
|
186 ? _contents.replace(_rx,"") |
|
187 : _contents + " " + _keyword |
|
188 ); |
|
189 _field.val(_contents.replace(/\s{2,}/g,' ').replace(/(^\s+|\s+$)/g,'')); |
|
190 this.onDescriptionChange(); |
|
191 } |
|
192 |
|
193 IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() { |
|
194 var _field = this.$.find(".Ldt-CreateAnnotation-Description"), |
|
195 _contents = _field.val(); |
|
196 _field.css("border-color", !!_contents ? "#666666" : "#c00000"); |
|
197 this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").each(function() { |
|
198 var _rx = IriSP.Model.regexpFromTextOrArray(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
|
199 if (_rx.test(_contents)) { |
|
200 IriSP.jQuery(this).addClass("selected"); |
|
201 } else { |
|
202 IriSP.jQuery(this).removeClass("selected"); |
|
203 } |
|
204 }); |
|
205 return !!_contents; |
|
206 } |
|
207 |
|
208 IriSP.Widgets.CreateAnnotation.prototype.onTitleChange = function() { |
|
209 var _field = this.$.find(".Ldt-CreateAnnotation-Title"), |
|
210 _contents = _field.val(); |
|
211 _field.css("border-color", !!_contents ? "#666666" : "#c00000"); |
|
212 return !!_contents; |
|
213 } |
|
214 |
|
215 IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() { |
|
216 if (!this.onDescriptionChange() || (!this.onTitleChange() && this.show_title_field)) { |
|
217 return; |
|
218 } |
|
219 |
|
220 var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager); |
|
221 _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), |
|
222 _annotation = new IriSP.Model.Annotation(false, _export), |
|
223 _annotationType = new IriSP.Model.AnnotationType(false, _export); |
|
224 |
|
225 _annotationType.title = this.annotation_type; |
|
226 _annotation.setBegin(this.begin); |
|
227 _annotation.setEnd(this.end); |
|
228 _annotation.setMedia(this.source.currentMedia.id); |
|
229 _annotation.setAnnotationType(_annotationType.id); |
|
230 if (this.show_title_field) { |
|
231 _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val() |
|
232 } |
|
233 _annotation.created = new Date(); |
|
234 _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); |
|
235 _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected").map(function() { return IriSP.jQuery(this).attr("tag-id")})); |
|
236 |
|
237 _export.creator = this.creator; |
|
238 _export.created = new Date(); |
|
239 _exportedAnnotations.push(_annotation); |
|
240 _export.addList("annotation",_exportedAnnotations); |
|
241 console.log(_export.serialize()); |
|
242 |
|
243 return false; |
112 } |
244 } |
113 |
245 |
114 /* |
246 /* |
115 + ' <div class="Ldt-CreateAnnotation-Screen Ldt-createAnnotation-startScreen">' |
247 + ' <div class="Ldt-CreateAnnotation-Screen Ldt-createAnnotation-startScreen">' |
116 + ' <div style="margin-bottom: 7px; overflow: auto;">' |
248 + ' <div style="margin-bottom: 7px; overflow: auto;">' |