|
880
|
1 |
// TODO: Open share links in a small window - Migrate Timeupdate functions to Extract |
|
876
|
2 |
|
|
|
3 |
IriSP.Widgets.Annotation = function(player, config) { |
|
|
4 |
IriSP.Widgets.Widget.call(this, player, config); |
|
|
5 |
this.lastAnnotation = false; |
|
|
6 |
}; |
|
|
7 |
|
|
|
8 |
IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget(); |
|
|
9 |
|
|
|
10 |
IriSP.Widgets.Annotation.prototype.messages = { |
|
|
11 |
"fr": { |
|
|
12 |
share_on: "Partager sur", |
|
|
13 |
watching: "Je regarde ", |
|
|
14 |
on_site: " sur ", |
|
|
15 |
tags: "Mots-clés :" |
|
|
16 |
}, |
|
|
17 |
"en": { |
|
|
18 |
share_on: "Share on", |
|
|
19 |
watching: "I'm watching ", |
|
|
20 |
on_site: " on ", |
|
|
21 |
tags: "Keywords:" |
|
|
22 |
} |
|
|
23 |
} |
|
|
24 |
|
|
|
25 |
IriSP.Widgets.Annotation.prototype.template = |
|
|
26 |
'<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">' |
|
880
|
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>'; |
|
876
|
35 |
|
|
|
36 |
IriSP.Widgets.Annotation.prototype.defaults = { |
|
|
37 |
annotation_type : "chap", |
|
|
38 |
show_top_border : false, |
|
|
39 |
site_name : "Lignes de Temps" |
|
|
40 |
} |
|
|
41 |
|
|
|
42 |
IriSP.Widgets.Annotation.prototype.draw = function() { |
|
|
43 |
this.renderTemplate(); |
|
|
44 |
this.bindPopcorn("timeupdate","onTimeupdate"); |
|
880
|
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"); |
|
876
|
49 |
this.onTimeupdate(); |
|
|
50 |
} |
|
|
51 |
|
|
|
52 |
IriSP.Widgets.Annotation.prototype.onTimeupdate = function() { |
|
|
53 |
var _time = Math.floor(this.player.popcorn.currentTime() * 1000), |
|
|
54 |
_list = this.getWidgetAnnotations().filter(function(_annotation) { |
|
|
55 |
return _annotation.begin <= _time && _annotation.end > _time; |
|
|
56 |
}); |
|
|
57 |
if (_list.length) { |
|
|
58 |
if (_list[0].id !== this.lastAnnotation) { |
|
|
59 |
this.drawAnnotation(_list[0]); |
|
880
|
60 |
this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]); |
|
876
|
61 |
} |
|
880
|
62 |
this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2}); |
|
876
|
63 |
} |
|
|
64 |
else { |
|
880
|
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 ]); |
|
876
|
69 |
} |
|
|
70 |
} |
|
|
71 |
|
|
|
72 |
IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { |
|
|
73 |
this.lastAnnotation = _annotation.id; |
|
|
74 |
var _url = (typeof _annotation.url !== "undefined" |
|
|
75 |
? _annotation.url |
|
880
|
76 |
: (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.namespacedId.name)); |
|
|
77 |
var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''); |
|
|
78 |
var _tags = _annotation.getTagTexts(); |
|
|
79 |
if (_tags.length) { |
|
|
80 |
var _html = IriSP._(_tags).map(function(_tag) { |
|
|
81 |
return '<li class="Ldt-Annotation-TagLabel">' + _tag + '</li>'; |
|
|
82 |
}).join(""); |
|
|
83 |
this.$.find(".Ldt-Annotation-Tags").html(_html); |
|
|
84 |
this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-NoTags"); |
|
|
85 |
} else { |
|
|
86 |
this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags"); |
|
|
87 |
} |
|
|
88 |
this.$.find(".Ldt-Annotation-Title").html(_annotation.title); |
|
|
89 |
this.$.find(".Ldt-Annotation-Description").html(_annotation.description); |
|
|
90 |
this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString()); |
|
|
91 |
this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString()); |
|
|
92 |
this.$.find(".Ldt-Annotation-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text })); |
|
|
93 |
this.$.find(".Ldt-Annotation-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text })); |
|
|
94 |
this.$.find(".Ldt-Annotation-Gplus").attr("href", "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text })); |
|
|
95 |
this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty"); |
|
876
|
96 |
} |
|
880
|
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 |
} |