15 height: 10 |
17 height: 10 |
16 }; |
18 }; |
17 |
19 |
18 IriSP.Widgets.Segments.prototype.template = |
20 IriSP.Widgets.Segments.prototype.template = |
19 '<div class="Ldt-Segments-List">{{#segments}}' |
21 '<div class="Ldt-Segments-List">{{#segments}}' |
20 + '<div class="Ldt-Segments-Segment" segment-id="{{id}}" segment-text="{{text}}" segment-color="{{color}}" center-pos="{{center}}" style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>' |
22 + '<div class="Ldt-Segments-Segment" segment-id="{{id}}" segment-text="{{text}}" segment-color="{{color}}" center-pos="{{center}}" begin-seconds="{{beginseconds}}"' |
|
23 + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>' |
21 + '{{/segments}}</div>' |
24 + '{{/segments}}</div>' |
22 + '<div class="Ldt-Segments-Position"></div>'; |
25 + '<div class="Ldt-Segments-Position"></div>'; |
23 |
26 |
24 IriSP.Widgets.Segments.prototype.draw = function() { |
27 IriSP.Widgets.Segments.prototype.draw = function() { |
25 var _list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations(), |
28 this.bindPopcorn("IriSP.search", "onSearch"); |
|
29 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
|
30 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
|
31 this.bindPopcorn("timeupdate", "onTimeupdate"); |
|
32 |
|
33 var _list = this.getWidgetAnnotations(), |
26 _this = this, |
34 _this = this, |
27 _scale = this.width / this.source.getDuration(); |
35 _scale = this.width / this.source.getDuration(); |
28 this.$.css({ |
36 this.$.css({ |
29 width : this.width + "px", |
37 width : this.width + "px", |
30 height : this.height + "px" |
38 height : (this.height - 2) + "px", |
|
39 margin : "1px 0" |
31 }); |
40 }); |
32 this.$.append(Mustache.to_html(this.template, { |
41 this.$.append(Mustache.to_html(this.template, { |
33 segments : _list.map(function(_annotation, _k) { |
42 segments : _list.map(function(_annotation, _k) { |
34 var _left = _annotation.begin * _scale, |
43 var _left = _annotation.begin * _scale, |
35 _width = ( _annotation.end - _annotation.begin ) * _scale, |
44 _width = ( _annotation.end - _annotation.begin ) * _scale, |
36 _center = _left + _width / 2; |
45 _center = _left + _width / 2; |
37 return { |
46 return { |
38 text : _annotation.title + ( _annotation.description ? '<br />' + _annotation.description.replace(/(^.{120,140})[\s].+$/,'$1…') : ''), |
47 text : _annotation.title + ( _annotation.description ? '<br />' + _annotation.description.replace(/(^.{120,140})[\s].+$/,'$1…') : ''), |
39 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
48 color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), |
|
49 beginseconds : _annotation.begin.getSeconds() , |
40 left : Math.floor( _left ), |
50 left : Math.floor( _left ), |
41 width : Math.floor( _width ), |
51 width : Math.floor( _width ), |
42 center : Math.floor( _center ), |
52 center : Math.floor( _center ), |
43 id : _annotation.namespacedId.name |
53 id : _annotation.namespacedId.name |
44 } |
54 } |
45 }) |
55 }) |
46 })); |
56 })); |
47 var _seglist = this.$.find('.Ldt-Segments-Segment'); |
57 this.$segments = this.$.find('.Ldt-Segments-Segment'); |
48 |
58 |
49 _seglist.mouseover(function() { |
59 this.$segments.mouseover(function() { |
50 var _el = IriSP.jQuery(this); |
60 var _el = IriSP.jQuery(this); |
51 _seglist.removeClass("active").addClass("inactive"); |
61 _this.$segments.removeClass("active").addClass("inactive"); |
52 _this.tooltip.show( _el.attr("center-pos"), 0, _el.attr("segment-text"), _el.attr("segment-color")); |
62 _this.tooltip.show( _el.attr("center-pos"), 0, _el.attr("segment-text"), _el.attr("segment-color")); |
53 _el.removeClass("inactive").addClass("active"); |
63 _el.removeClass("inactive").addClass("active"); |
54 }).mouseout(function() { |
64 }) |
55 _seglist.removeClass("inactive active"); |
65 .mouseout(function() { |
|
66 _this.tooltip.hide(); |
|
67 _this.$segments.removeClass("inactive active"); |
|
68 }) |
|
69 .click(function() { |
|
70 var _el = IriSP.jQuery(this); |
|
71 _this.player.popcorn.currentTime(_el.attr("begin-seconds")); |
56 }); |
72 }); |
57 } |
73 } |
58 |
74 |
59 IriSP.Widgets.Segments.prototype.searchHandler = function(searchString) { |
75 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { |
60 |
76 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
77 var _found = 0, |
|
78 _re = IriSP.Model.regexpFromTextOrArray(searchString); |
|
79 if (this.searchString) { |
|
80 this.$segments.each(function() { |
|
81 var _el = IriSP.jQuery(this); |
|
82 if (_re.test(_el.attr("segment-text"))) { |
|
83 _el.removeClass("unfound").addClass("found"); |
|
84 _found++; |
|
85 } else { |
|
86 _el.removeClass("found").addClass("unfound"); |
|
87 } |
|
88 }); |
|
89 if (_found) { |
|
90 this.player.popcorn.trigger("IriSP.search.matchFound"); |
|
91 } else { |
|
92 this.player.popcorn.trigger("IriSP.search.noMatchFound"); |
|
93 } |
|
94 } else { |
|
95 this.$segments.removeClass("found unfound"); |
|
96 } |
61 } |
97 } |
|
98 |
|
99 IriSP.Widgets.Segments.prototype.onTimeupdate = function() { |
|
100 var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); |
|
101 this.$.find('.Ldt-Segments-Position').css({ |
|
102 left: _x + "px" |
|
103 }) |
|
104 } |