42 + '</div></div></div></div>'; |
43 + '</div></div></div></div>'; |
43 |
44 |
44 IriSP.Widgets.Annotation.prototype.defaults = { |
45 IriSP.Widgets.Annotation.prototype.defaults = { |
45 annotation_type : "chap", |
46 annotation_type : "chap", |
46 start_minimized: false, |
47 start_minimized: false, |
47 show_top_border : false, |
48 show_arrow : true, |
48 site_name : "Lignes de Temps" |
49 site_name : "Lignes de Temps", |
|
50 search_on_tag_click: true |
49 } |
51 } |
50 |
52 |
51 IriSP.Widgets.Annotation.prototype.draw = function() { |
53 IriSP.Widgets.Annotation.prototype.draw = function() { |
|
54 |
|
55 var _this = this; |
|
56 |
|
57 function timeupdate(_time) { |
|
58 var _list = _this.getWidgetAnnotationsAtTime(); |
|
59 if (!_list.length) { |
|
60 _this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty"); |
|
61 if (_this.arrow) { |
|
62 _this.arrow.moveToTime(_time); |
|
63 } |
|
64 _this.bounds = [ _time, _time ]; |
|
65 _this.sendBounds(); |
|
66 } |
|
67 } |
|
68 |
|
69 function drawAnnotation(_annotation) { |
|
70 var _url = (typeof _annotation.url !== "undefined" |
|
71 ? _annotation.url |
|
72 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)), |
|
73 _text = _this.l10n.watching + _annotation.title + (_this.site_name ? _this.l10n.on_site + _this.site_name : ''), |
|
74 _tags = _annotation.getTags(), |
|
75 _tagblock = _this.$.find(".Ldt-Annotation-Tags"); |
|
76 if (_tags.length) { |
|
77 _this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock"); |
|
78 _tags.forEach(function(_tag) { |
|
79 var _trimmedTitle = _tag.title.replace(/(^\s+|\s+$)/g,''); |
|
80 if (_trimmedTitle) { |
|
81 var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle)); |
|
82 _el.click(function() { |
|
83 if (_this.search_on_tag_click) { |
|
84 _this.player.trigger("search.triggeredSearch",_trimmedTitle); |
|
85 } |
|
86 _tag.trigger("click"); |
|
87 }); |
|
88 _tagblock.append(_el); |
|
89 } |
|
90 }); |
|
91 } else { |
|
92 _this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock"); |
|
93 } |
|
94 _this.$.find(".Ldt-Annotation-Title").html(_annotation.title); |
|
95 var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,''); |
|
96 if (_desc) { |
|
97 _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock"); |
|
98 _this.$.find(".Ldt-Annotation-Description").html(_desc); |
|
99 } else { |
|
100 _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock"); |
|
101 } |
|
102 _this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString()); |
|
103 _this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString()); |
|
104 if (_annotation.elementType === "mashedAnnotation") { |
|
105 _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup"); |
|
106 _this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title); |
|
107 _this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString()); |
|
108 _this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString()); |
|
109 } else { |
|
110 _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup"); |
|
111 } |
|
112 if (typeof _this.socialWidget !== "undefined") { |
|
113 _this.socialWidget.updateUrls(_url, _text); |
|
114 } else { |
|
115 setTimeout(function() { |
|
116 if (typeof _this.socialWidget !== "undefined") { |
|
117 _this.socialWidget.updateUrls(_url, _text); |
|
118 } |
|
119 },800); |
|
120 } |
|
121 _this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty"); |
|
122 _this.bounds = [ _annotation.begin, _annotation.end ]; |
|
123 if (_this.arrow) { |
|
124 _this.arrow.moveToTime((_annotation.begin + _annotation.end)/2); |
|
125 } |
|
126 _this.sendBounds(); |
|
127 } |
|
128 |
52 this.renderTemplate(); |
129 this.renderTemplate(); |
53 this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), "socialWidget", { type: "Social" }); |
130 this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget"); |
54 this.bindPopcorn("timeupdate","onTimeupdate"); |
131 this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow" }, "arrow"); |
55 this.bindPopcorn("IriSP.Annotation.hide","hide"); |
132 this.onMediaEvent("timeupdate",timeupdate); |
56 this.bindPopcorn("IriSP.Annotation.show","show"); |
133 this.onMdpEvent("Annotation.hide","hide"); |
57 this.bindPopcorn("IriSP.Annotation.minimize","minimize"); |
134 this.onMdpEvent("Annotation.show","show"); |
58 this.bindPopcorn("IriSP.Annotation.maximize","maximize"); |
135 this.onMdpEvent("Annotation.minimize","minimize"); |
59 this.bindPopcorn("IriSP.Annotation.getBounds","sendBounds"); |
136 this.onMdpEvent("Annotation.maximize","maximize"); |
|
137 this.onMdpEvent("Annotation.getBounds","sendBounds"); |
60 this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize")); |
138 this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize")); |
61 this.onTimeupdate(); |
139 this.getWidgetAnnotations().forEach(function(_a) { |
62 } |
140 _a.on("enter", function() { |
63 |
141 drawAnnotation(_a) |
64 IriSP.Widgets.Annotation.prototype.onTimeupdate = function() { |
142 }); |
65 var _time = Math.floor(this.player.popcorn.currentTime() * 1000), |
143 }); |
66 _list = this.getWidgetAnnotationsAtTime(); |
|
67 if (_list.length) { |
|
68 if (_list[0].id !== this.lastAnnotation) { |
|
69 this.drawAnnotation(_list[0]); |
|
70 this.bounds = [ _list[0].begin.valueOf(), _list[0].end.valueOf() ]; |
|
71 } |
|
72 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2}); |
|
73 } |
|
74 else { |
|
75 this.lastAnnotation = false; |
|
76 this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty"); |
|
77 this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); |
|
78 this.bounds = [ _time, _time ]; |
|
79 } |
|
80 this.sendBounds(); |
|
81 } |
144 } |
82 |
145 |
83 IriSP.Widgets.Annotation.prototype.sendBounds = function() { |
146 IriSP.Widgets.Annotation.prototype.sendBounds = function() { |
84 this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",this.bounds); |
147 this.player.trigger("Annotation.boundsChanged",this.bounds); |
85 } |
148 } |
86 |
149 |
87 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { |
150 IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { |
88 this.lastAnnotation = _annotation.id; |
151 this.lastAnnotation = _annotation.id; |
89 var _url = (typeof _annotation.url !== "undefined" |
152 |
90 ? _annotation.url |
|
91 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)); |
|
92 var _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''); |
|
93 var _tags = _annotation.getTagTexts(); |
|
94 if (_tags.length) { |
|
95 var _html = IriSP._(_tags).map(function(_tag) { |
|
96 return '<li class="Ldt-Annotation-TagLabel"><span>' + _tag + '</span></li>'; |
|
97 }).join(""); |
|
98 this.$.find(".Ldt-Annotation-Tags").html(_html); |
|
99 this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock"); |
|
100 |
|
101 /* Correct the empty tag bug */ |
|
102 this.$.find('.Ldt-Annotation-TagLabel').each(function() { |
|
103 var _el = IriSP.jQuery(this); |
|
104 if (!_el.text().replace(/(^\s+|\s+$)/g,'')) { |
|
105 _el.detach(); |
|
106 } |
|
107 }); |
|
108 |
|
109 this.$.find('.Ldt-Annotation-TagLabel').click(function() { |
|
110 _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
|
111 }); |
|
112 } else { |
|
113 this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock"); |
|
114 } |
|
115 this.$.find(".Ldt-Annotation-Title").html(_annotation.title); |
|
116 var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,''); |
|
117 if (_desc) { |
|
118 this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock"); |
|
119 this.$.find(".Ldt-Annotation-Description").html(_desc); |
|
120 } else { |
|
121 this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock"); |
|
122 } |
|
123 this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString()); |
|
124 this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString()); |
|
125 if (_annotation.elementType === "mashedAnnotation") { |
|
126 this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup"); |
|
127 this.$.find(".Ldt-Annotation-MashupMedia").html(_annotation.getMedia().title); |
|
128 this.$.find(".Ldt-Annotation-MashupBegin").html(_annotation.annotation.begin.toString()); |
|
129 this.$.find(".Ldt-Annotation-MashupEnd").html(_annotation.annotation.end.toString()); |
|
130 } else { |
|
131 this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup"); |
|
132 } |
|
133 if (typeof this.socialWidget !== "undefined") { |
|
134 this.socialWidget.updateUrls(_url, _text); |
|
135 } |
|
136 this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty"); |
|
137 } |
153 } |
138 |
154 |
139 IriSP.Widgets.Annotation.prototype.hide = function() { |
155 IriSP.Widgets.Annotation.prototype.hide = function() { |
140 this.$.slideUp(); |
156 this.$.slideUp(); |
141 } |
157 } |