22 } |
22 } |
23 } |
23 } |
24 |
24 |
25 IriSP.Widgets.Annotation.prototype.template = |
25 IriSP.Widgets.Annotation.prototype.template = |
26 '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">' |
26 '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">' |
27 + '<div class="Ldt-Annotation-Inner"></div></div>'; |
27 + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty"><div class="Ldt-Annotation-ShareIcons Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty">' |
|
28 + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>' |
|
29 + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>' |
|
30 + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>' |
|
31 + '</div><h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">' |
|
32 + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>' |
|
33 + '<p class="Ldt-Annotation-Description Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></p>' |
|
34 + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-NoTags">{{l10n.tags}}<ul class="Ldt-Annotation-Tags"></ul></div></div></div>'; |
28 |
35 |
29 IriSP.Widgets.Annotation.prototype.defaults = { |
36 IriSP.Widgets.Annotation.prototype.defaults = { |
30 annotation_type : "chap", |
37 annotation_type : "chap", |
31 show_top_border : false, |
38 show_top_border : false, |
32 site_name : "Lignes de Temps" |
39 site_name : "Lignes de Temps" |
33 } |
40 } |
34 |
41 |
35 IriSP.Widgets.Annotation.prototype.draw = function() { |
42 IriSP.Widgets.Annotation.prototype.draw = function() { |
36 this.renderTemplate(); |
43 this.renderTemplate(); |
37 this.bindPopcorn("timeupdate","onTimeupdate"); |
44 this.bindPopcorn("timeupdate","onTimeupdate"); |
|
45 this.bindPopcorn("IriSP.Annotation.hide","hide"); |
|
46 this.bindPopcorn("IriSP.Annotation.show","show"); |
|
47 this.bindPopcorn("IriSP.Annotation.minimize","minimize"); |
|
48 this.bindPopcorn("IriSP.Annotation.maximize","maximize"); |
38 this.onTimeupdate(); |
49 this.onTimeupdate(); |
39 } |
50 } |
40 |
51 |
41 IriSP.Widgets.Annotation.prototype.onTimeupdate = function() { |
52 IriSP.Widgets.Annotation.prototype.onTimeupdate = function() { |
42 var _time = Math.floor(this.player.popcorn.currentTime() * 1000), |
53 var _time = Math.floor(this.player.popcorn.currentTime() * 1000), |
44 return _annotation.begin <= _time && _annotation.end > _time; |
55 return _annotation.begin <= _time && _annotation.end > _time; |
45 }); |
56 }); |
46 if (_list.length) { |
57 if (_list.length) { |
47 if (_list[0].id !== this.lastAnnotation) { |
58 if (_list[0].id !== this.lastAnnotation) { |
48 this.drawAnnotation(_list[0]); |
59 this.drawAnnotation(_list[0]); |
|
60 this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]); |
49 } |
61 } |
|
62 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2}); |
50 } |
63 } |
51 else { |
64 else { |
52 this.$.find('.Ldt-Annotation-Inner').html(''); |
65 this.lastAnnotation = false; |
|
66 this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty"); |
|
67 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); |
|
68 this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]); |
53 } |
69 } |
54 } |
70 } |
55 |
71 |
56 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { |
72 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { |
57 this.lastAnnotation = _annotation.id; |
73 this.lastAnnotation = _annotation.id; |
58 console.log(_annotation); |
|
59 var _url = (typeof _annotation.url !== "undefined" |
74 var _url = (typeof _annotation.url !== "undefined" |
60 ? _annotation.url |
75 ? _annotation.url |
61 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.namespacedId.name)), |
76 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.namespacedId.name)); |
62 _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''), |
77 var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''); |
63 _tmpl = '<div class="Ldt-Annotation-ShareIcons">' |
78 var _tags = _annotation.getTagTexts(); |
64 + '<a href="{{fb_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb" title="{{l10n.share_on}} Facebook"></a>' |
79 if (_tags.length) { |
65 + '<a href="{{twitter_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter" title="{{l10n.share_on}} Twitter"></a>' |
80 var _html = IriSP._(_tags).map(function(_tag) { |
66 + '<a href="{{gplus_url}}" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus" title="{{l10n.share_on}} Google+"></a>' |
81 return '<li class="Ldt-Annotation-TagLabel">' + _tag + '</li>'; |
67 + '</div>' |
82 }).join(""); |
68 + '<h3><span class="Ldt-Annotation-Title">{{title}}</span> ( <span class="Ldt-Annotation-Time">{{begin}} - {{end}}</span> )</h3>' |
83 this.$.find(".Ldt-Annotation-Tags").html(_html); |
69 + '<p class="Ldt-Annotation-Description">{{description}}</p>' |
84 this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-NoTags"); |
70 + '{{#tags.length}}<ul class="Ldt-Annotation-Tags"><li class="Ldt-Annotation-TagLabel">{{l10n.tags}}</li>{{#tags}}<li>{{.}}</li>{{/tags}}</ul>{{/tags.length}}', |
85 } else { |
71 _attr = { |
86 this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags"); |
72 title: _annotation.title, |
87 } |
73 description: _annotation.description, |
88 this.$.find(".Ldt-Annotation-Title").html(_annotation.title); |
74 begin: _annotation.begin.toString(), |
89 this.$.find(".Ldt-Annotation-Description").html(_annotation.description); |
75 end: _annotation.end.toString(), |
90 this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString()); |
76 tags: _annotation.getTagTexts(), |
91 this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString()); |
77 l10n: this.l10n |
92 this.$.find(".Ldt-Annotation-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text })); |
78 } |
93 this.$.find(".Ldt-Annotation-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text })); |
79 _attr.fb_url = "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }); |
94 this.$.find(".Ldt-Annotation-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text })); |
80 _attr.twitter_url = "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }); |
95 this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty"); |
81 _attr.gplus_url = "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }); |
|
82 this.$.find('.Ldt-Annotation-Inner').html(Mustache.to_html(_tmpl, _attr)); |
|
83 } |
96 } |
|
97 |
|
98 IriSP.Widgets.Annotation.prototype.hide = function() { |
|
99 this.$.slideUp(); |
|
100 } |
|
101 |
|
102 IriSP.Widgets.Annotation.prototype.show = function() { |
|
103 this.$.slideDown(); |
|
104 } |
|
105 |
|
106 IriSP.Widgets.Annotation.prototype.minimize = function() { |
|
107 this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized"); |
|
108 } |
|
109 |
|
110 IriSP.Widgets.Annotation.prototype.maximize = function() { |
|
111 this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized"); |
|
112 } |