28 IriSP.Widgets.Segments.prototype.annotationTemplate = |
28 IriSP.Widgets.Segments.prototype.annotationTemplate = |
29 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"' |
29 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"' |
30 + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>'; |
30 + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>'; |
31 |
31 |
32 |
32 |
33 IriSP.Widgets.Segments.prototype.draw = function() { |
33 IriSP.Widgets.Segments.prototype.do_draw = function (isRedraw) { |
34 this.onMediaEvent("timeupdate", "onTimeupdate"); |
34 if (this.width != this.$.parent().width()) { |
35 this.renderTemplate(); |
35 // Reset width |
36 |
36 this.width = this.$.parent().width(); |
|
37 this.$.css({ width : this.width + "px" }); |
|
38 } |
37 var _list = this.getWidgetAnnotations().filter(function(_ann) { |
39 var _list = this.getWidgetAnnotations().filter(function(_ann) { |
38 return _ann.getDuration() > 0; |
40 return _ann.getDuration() > 0; |
39 }), |
41 }), |
40 _this = this, |
42 _this = this, |
41 _scale = this.width / this.source.getDuration(), |
43 _scale = this.width / this.source.getDuration(), |
42 list_$ = this.$.find('.Ldt-Segments-List'), |
44 list_$ = this.$.find('.Ldt-Segments-List'), |
43 lines = [], |
45 lines = [], |
44 zindex = 1, |
46 zindex = 1, |
52 while (res.length < 6) { |
54 while (res.length < 6) { |
53 res = "0" + res; |
55 res = "0" + res; |
54 } |
56 } |
55 return "#" + res; |
57 return "#" + res; |
56 } |
58 } |
57 |
59 |
|
60 if (isRedraw) { |
|
61 // Remove all previous elements before recreating them. Not very efficient. |
|
62 this.$.find('.Ldt-Segments-Segment').remove(); |
|
63 } |
58 _list.forEach(function(_annotation, _k) { |
64 _list.forEach(function(_annotation, _k) { |
59 var _left = _annotation.begin * _scale, |
65 var _left = _annotation.begin * _scale, |
60 _width = ( _annotation.getDuration() ) * _scale, |
66 _width = ( _annotation.getDuration() ) * _scale, |
61 _center = Math.floor( _left + _width / 2 ), |
67 _center = Math.floor( _left + _width / 2 ), |
62 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
68 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
137 title: _annotation.title, |
143 title: _annotation.title, |
138 description: _annotation.description, |
144 description: _annotation.description, |
139 uri: (typeof _annotation.url !== "undefined" |
145 uri: (typeof _annotation.url !== "undefined" |
140 ? _annotation.url |
146 ? _annotation.url |
141 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)), |
147 : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)), |
142 image: _annotation.thumbnail |
148 image: _annotation.thumbnail, |
|
149 text: '[' + _annotation.begin.toString() + '] ' + _annotation.title |
143 }); |
150 }); |
144 _annotation.on("select", function() { |
151 _annotation.on("select", function() { |
145 _this.$segments.each(function() { |
152 _this.$segments.each(function() { |
146 var _segment = IriSP.jQuery(this); |
153 var _segment = IriSP.jQuery(this); |
147 _segment.css({ |
154 _segment.css({ |
182 width : this.width + "px", |
189 width : this.width + "px", |
183 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
190 height : (((1 - this.overlap) * lines.length + this.overlap) * this.line_height) + "px", |
184 background : this.background, |
191 background : this.background, |
185 margin: "1px 0" |
192 margin: "1px 0" |
186 }); |
193 }); |
187 if (!this.no_tooltip){ |
194 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
188 this.insertSubwidget( |
195 }; |
189 this.$.find(".Ldt-Segments-Tooltip"), |
196 |
|
197 IriSP.Widgets.Segments.prototype.draw = function() { |
|
198 var widget = this; |
|
199 widget.onMediaEvent("timeupdate", "onTimeupdate"); |
|
200 widget.renderTemplate(); |
|
201 widget.do_draw(); |
|
202 if (!this.no_tooltip) { |
|
203 widget.insertSubwidget( |
|
204 widget.$.find(".Ldt-Segments-Tooltip"), |
190 { |
205 { |
191 type: "Tooltip", |
206 type: "Tooltip", |
192 min_x: 0, |
207 min_x: 0, |
193 max_x: this.width |
208 max_x: this.width |
194 }, |
209 }, |
195 "tooltip" |
210 "tooltip" |
196 ); |
211 ); |
197 } |
212 }; |
198 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
213 widget.source.getAnnotations().on("search", function() { |
199 this.source.getAnnotations().on("search", function() { |
|
200 searching = true; |
214 searching = true; |
201 }); |
215 }); |
202 this.source.getAnnotations().on("search-cleared", function() { |
216 widget.source.getAnnotations().on("search-cleared", function() { |
203 searching = false; |
217 searching = false; |
204 _this.$segments.each(function() { |
218 _this.$segments.each(function() { |
205 var _segment = IriSP.jQuery(this); |
219 var _segment = IriSP.jQuery(this); |
206 _segment.css("background", _segment.attr("data-medium-color")).removeClass("found"); |
220 _segment.css("background", _segment.attr("data-medium-color")).removeClass("found"); |
207 }); |
221 }); |
208 }); |
222 }); |
|
223 this.$.on("resize", function () { widget.do_draw(true); }); |
209 }; |
224 }; |
210 |
225 |
211 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
226 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) { |
212 var _x = Math.floor( this.width * _time / this.media.duration); |
227 var _x = Math.floor( this.width * _time / this.media.duration); |
213 this.$.find('.Ldt-Segments-Position').css({ |
228 this.$.find('.Ldt-Segments-Position').css({ |