|
872
|
1 |
IriSP.PolemicNewWidget = function(player, config) { |
|
|
2 |
IriSP.Widget.call(this, player, config); |
|
|
3 |
this.bindPopcorn("IriSP.search", "searchHandler"); |
|
|
4 |
this.bindPopcorn("IriSP.search.closed", "searchHandler"); |
|
|
5 |
this.bindPopcorn("IriSP.search.cleared", "searchHandler"); |
|
|
6 |
this.bindPopcorn("timeupdate", "onTimeupdate"); |
|
|
7 |
this.sliceCount = Math.floor( this.width / this.element_width ); |
|
|
8 |
this.$zone = IriSP.jQuery('<div>'); |
|
|
9 |
this.$.append(this.$zone); |
|
|
10 |
}; |
|
|
11 |
|
|
|
12 |
IriSP.PolemicNewWidget.prototype = new IriSP.Widget(); |
|
|
13 |
|
|
|
14 |
IriSP.PolemicNewWidget.prototype.searchHandler = function(searchString) { |
|
|
15 |
this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
|
16 |
var _found = 0, |
|
|
17 |
_re = IriSP.Model.regexpFromTextOrArray(searchString) |
|
|
18 |
_this = this; |
|
|
19 |
this.$tweets.each(function() { |
|
|
20 |
var _el = IriSP.jQuery(this); |
|
|
21 |
if (_this.searchString) { |
|
|
22 |
if (_re.test(_el.attr("title"))) { |
|
|
23 |
_el.css({ |
|
|
24 |
"background" : _this.foundcolor, |
|
|
25 |
"opacity" : 1 |
|
|
26 |
}); |
|
|
27 |
_found++; |
|
|
28 |
} else { |
|
|
29 |
_el.css({ |
|
|
30 |
"background" : _el.attr("polemic-color"), |
|
|
31 |
"opacity" : .6 |
|
|
32 |
}); |
|
|
33 |
} |
|
|
34 |
} else { |
|
|
35 |
_el.css({ |
|
|
36 |
"background" : _el.attr("polemic-color"), |
|
|
37 |
"opacity" : 1 |
|
|
38 |
}); |
|
|
39 |
} |
|
|
40 |
}); |
|
|
41 |
if (this.searchString) { |
|
|
42 |
if (_found) { |
|
|
43 |
this.player.popcorn.trigger("IriSP.search.matchFound"); |
|
|
44 |
} else { |
|
|
45 |
this.player.popcorn.trigger("IriSP.search.noMatchFound"); |
|
|
46 |
} |
|
|
47 |
} |
|
|
48 |
} |
|
|
49 |
|
|
|
50 |
IriSP.PolemicNewWidget.prototype.draw = function() { |
|
|
51 |
var _slices = [], |
|
|
52 |
_duration = this.source.getDuration(), |
|
|
53 |
_max = 0, |
|
|
54 |
_list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations(); |
|
|
55 |
|
|
|
56 |
for (var _i = 0; _i < this.sliceCount; _i++) { |
|
|
57 |
var _begin = new IriSP.Model.Time(_i*_duration/this.sliceCount), |
|
|
58 |
_end = new IriSP.Model.Time((_i+1)*_duration/this.sliceCount), |
|
|
59 |
_count = 0, |
|
|
60 |
_res = { |
|
|
61 |
annotations : _list.filter(function(_annotation) { |
|
|
62 |
return _annotation.begin >= _begin && _annotation.end < _end; |
|
|
63 |
}), |
|
|
64 |
polemicStacks : [] |
|
|
65 |
} |
|
|
66 |
|
|
|
67 |
for (var _j = 0; _j < this.tags.length; _j++) { |
|
|
68 |
var _polemic = _res.annotations.searchByDescription(this.tags[_j].keywords); |
|
|
69 |
_count += _polemic.length; |
|
|
70 |
_res.polemicStacks.push(_polemic); |
|
|
71 |
} |
|
|
72 |
for (var _j = 0; _j < this.tags.length; _j++) { |
|
|
73 |
_res.annotations.removeElements(_res.polemicStacks[_j]); |
|
|
74 |
} |
|
|
75 |
_count += _res.annotations.length; |
|
|
76 |
_max = Math.max(_max, _count); |
|
|
77 |
_slices.push(_res); |
|
|
78 |
} |
|
|
79 |
this.height = (_max ? (_max + 2) * this.element_height : 0); |
|
|
80 |
console.log(this.height); |
|
|
81 |
this.$zone.css({ |
|
|
82 |
width: this.width + "px", |
|
|
83 |
height: this.height + "px", |
|
|
84 |
position: "relative" |
|
|
85 |
}); |
|
|
86 |
|
|
|
87 |
this.$elapsed = IriSP.jQuery('<div>') |
|
|
88 |
.css({ |
|
|
89 |
background: '#cccccc', |
|
|
90 |
position: "absolute", |
|
|
91 |
top: 0, |
|
|
92 |
left: 0, |
|
|
93 |
width: 0, |
|
|
94 |
height: "100%" |
|
|
95 |
}); |
|
|
96 |
|
|
|
97 |
this.$zone.append(this.$elapsed); |
|
|
98 |
|
|
|
99 |
var _x = 0, |
|
|
100 |
_this = this; |
|
|
101 |
|
|
|
102 |
function displayElement(_x, _y, _color, _id, _title) { |
|
|
103 |
var _el = IriSP.jQuery('<div>') |
|
|
104 |
.attr({ |
|
|
105 |
title : _title, |
|
|
106 |
"pos-x" : _x, |
|
|
107 |
"pos-y" : _y, |
|
|
108 |
"polemic-color" : _color, |
|
|
109 |
"annotation-id" : _id |
|
|
110 |
}) |
|
|
111 |
.css({ |
|
|
112 |
position: "absolute", |
|
|
113 |
width: (_this.element_width-1) + "px", |
|
|
114 |
height: _this.element_height + "px", |
|
|
115 |
left: _x + "px", |
|
|
116 |
top: _y + "px", |
|
|
117 |
background: _color |
|
|
118 |
}) |
|
|
119 |
.addClass("Ldt-Polemic-TweetDiv"); |
|
|
120 |
_this.$zone.append(_el); |
|
|
121 |
return _el; |
|
|
122 |
} |
|
|
123 |
|
|
|
124 |
IriSP._(_slices).forEach(function(_slice) { |
|
|
125 |
var _y = _this.height; |
|
|
126 |
_slice.annotations.forEach(function(_annotation) { |
|
|
127 |
_y -= _this.element_height; |
|
|
128 |
displayElement(_x, _y, _this.defaultcolor, _annotation.namespacedId.name, _annotation.title); |
|
|
129 |
}); |
|
|
130 |
IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
|
|
131 |
var _color = _this.tags[_j].color; |
|
|
132 |
_annotations.forEach(function(_annotation) { |
|
|
133 |
_y -= _this.element_height; |
|
|
134 |
displayElement(_x, _y, _color, _annotation.namespacedId.name, _annotation.title); |
|
|
135 |
}); |
|
|
136 |
}); |
|
|
137 |
_x += _this.element_width; |
|
|
138 |
}); |
|
|
139 |
|
|
|
140 |
this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
|
|
141 |
|
|
|
142 |
this.$position = IriSP.jQuery('<div>') |
|
|
143 |
.css({ |
|
|
144 |
background: '#fc00ff', |
|
|
145 |
position: "absolute", |
|
|
146 |
top: 0, |
|
|
147 |
left: "-1px", |
|
|
148 |
width: "2px", |
|
|
149 |
height: "100%" |
|
|
150 |
}); |
|
|
151 |
|
|
|
152 |
this.$zone.append(this.$position); |
|
|
153 |
|
|
|
154 |
this.$tweets.click(function(_e) { |
|
|
155 |
//TODO: Display Tweet in Tweet Widget |
|
|
156 |
}); |
|
|
157 |
|
|
|
158 |
//TODO: Mouseover a tweet to display tooltip |
|
|
159 |
|
|
|
160 |
this.$zone.click(function(_e) { |
|
|
161 |
var _x = _e.pageX - _this.$zone.offset().left; |
|
|
162 |
_this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width); |
|
|
163 |
}); |
|
|
164 |
} |
|
|
165 |
|
|
|
166 |
IriSP.PolemicNewWidget.prototype.onTimeupdate = function() { |
|
|
167 |
var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); |
|
|
168 |
this.$elapsed.css({ |
|
|
169 |
width: _x + "px" |
|
|
170 |
}); |
|
|
171 |
this.$position.css({ |
|
|
172 |
left: (_x - 1) + "px" |
|
|
173 |
}) |
|
|
174 |
} |