11 colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"], |
11 colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"], |
12 height: 10 |
12 height: 10 |
13 }; |
13 }; |
14 |
14 |
15 IriSP.Widgets.Segments.prototype.template = |
15 IriSP.Widgets.Segments.prototype.template = |
16 '<div class="Ldt-Segments-List">{{#segments}}' |
16 '<div class="Ldt-Segments-List"></div>' |
17 + '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-id="{{id}}" segment-text="{{text}}" segment-color="{{color}}" center-pos="{{center}}" begin-seconds="{{beginseconds}}"' |
|
18 + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>' |
|
19 + '{{/segments}}</div>' |
|
20 + '<div class="Ldt-Segments-Position"></div>' |
17 + '<div class="Ldt-Segments-Position"></div>' |
21 + '<div class="Ldt-Segments-Tooltip"></div>'; |
18 + '<div class="Ldt-Segments-Tooltip"></div>'; |
|
19 |
|
20 IriSP.Widgets.Segments.prototype.annotationTemplate = |
|
21 '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"' |
|
22 + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>' |
|
23 |
22 |
24 |
23 IriSP.Widgets.Segments.prototype.draw = function() { |
25 IriSP.Widgets.Segments.prototype.draw = function() { |
24 this.bindPopcorn("IriSP.search", "onSearch"); |
26 this.bindPopcorn("IriSP.search", "onSearch"); |
25 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
27 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
26 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
28 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
27 this.bindPopcorn("timeupdate", "onTimeupdate"); |
29 this.bindPopcorn("timeupdate", "onTimeupdate"); |
|
30 |
|
31 this.renderTemplate(); |
28 |
32 |
29 var _list = this.getWidgetAnnotations(), |
33 var _list = this.getWidgetAnnotations(), |
30 _this = this, |
34 _this = this, |
31 _scale = this.width / this.source.getDuration(); |
35 _scale = this.width / this.source.getDuration(); |
32 this.$.css({ |
36 this.$.css({ |
33 width : this.width + "px", |
37 width : this.width + "px", |
34 height : (this.height - 2) + "px", |
38 height : (this.height - 2) + "px", |
35 margin : "1px 0" |
39 margin : "1px 0" |
36 }); |
40 }); |
37 this.$.append(Mustache.to_html(this.template, { |
41 this.list_$ = this.$.find('.Ldt-Segments-List'); |
38 segments : _list.map(function(_annotation, _k) { |
42 |
39 var _left = _annotation.begin * _scale, |
43 _list.forEach(function(_annotation, _k) { |
40 _width = ( _annotation.end - _annotation.begin ) * _scale, |
44 var _left = _annotation.begin * _scale, |
41 _center = _left + _width / 2, |
45 _width = ( _annotation.getDuration() ) * _scale, |
42 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ); |
46 _center = Math.floor( _left + _width / 2 ), |
43 return { |
47 _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ), |
44 text : _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
48 _beginseconds = _annotation.begin.getSeconds(); |
45 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
49 var _data = { |
46 beginseconds : _annotation.begin.getSeconds() , |
50 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
47 left : Math.floor( _left ), |
51 text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'), |
48 width : Math.floor( _width ), |
52 left : Math.floor( _left ), |
49 center : Math.floor( _center ), |
53 width : Math.floor( _width ), |
50 id : _annotation.id, |
54 id : _annotation.id, |
51 media_id : _annotation.getMedia().id |
55 media_id : _annotation.getMedia().id |
52 } |
56 }; |
53 }) |
57 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
54 })); |
58 _el = IriSP.jQuery(_html); |
|
59 _el.mouseover(function() { |
|
60 _annotation.trigger("select"); |
|
61 }) |
|
62 .mouseout(function() { |
|
63 _annotation.trigger("unselect"); |
|
64 }) |
|
65 .click(function() { |
|
66 _this.player.popcorn.currentTime(_beginseconds); |
|
67 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id); |
|
68 }) |
|
69 .appendTo(_this.list_$) |
|
70 _annotation.on("select", function() { |
|
71 _this.$segments.removeClass("active").addClass("inactive"); |
|
72 _this.tooltip.show( _center, 0, _data.text, _data.color ); |
|
73 _el.removeClass("inactive").addClass("active"); |
|
74 }); |
|
75 _annotation.on("unselect", function() { |
|
76 _this.tooltip.hide(); |
|
77 _this.$segments.removeClass("inactive active"); |
|
78 }); |
|
79 }); |
55 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" }); |
80 this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" }); |
56 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
81 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
57 |
|
58 this.$segments.mouseover(function() { |
|
59 var _el = IriSP.jQuery(this); |
|
60 _this.$segments.removeClass("active").addClass("inactive"); |
|
61 _this.tooltip.show( _el.attr("center-pos"), 0, _el.attr("segment-text"), _el.attr("segment-color")); |
|
62 _el.removeClass("inactive").addClass("active"); |
|
63 }) |
|
64 .mouseout(function() { |
|
65 _this.tooltip.hide(); |
|
66 _this.$segments.removeClass("inactive active"); |
|
67 }) |
|
68 .click(function() { |
|
69 var _el = IriSP.jQuery(this); |
|
70 _this.player.popcorn.currentTime(_el.attr("begin-seconds")); |
|
71 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _el.attr("segment-id")); |
|
72 }); |
|
73 } |
82 } |
74 |
83 |
75 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { |
84 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { |
76 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
85 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
77 var _found = 0, |
86 var _found = 0, |