143 width: this.width + "px", |
143 width: this.width + "px", |
144 height: this.height + "px", |
144 height: this.height + "px", |
145 position: "relative" |
145 position: "relative" |
146 }); |
146 }); |
147 |
147 |
148 var _x = 0, |
148 var _x = 0; |
149 _html = ''; |
149 |
150 |
150 function displayAnnotation(_elx, _ely, _pol, _col, _annotation) { |
151 function displayElement(_x, _y, _color, _id, _title, _polemic) { |
151 var _html = Mustache.to_html( |
152 _html += Mustache.to_html( |
152 '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" polemic-color="{{color}}"' |
153 '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" annotation-id="{{id}}" tweet-title="{{title}}" pos-x="{{posx}}" pos-y="{{top}}" polemic-color="{{color}}"' |
153 + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
154 + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>', |
|
155 { |
154 { |
156 id: _id, |
155 id: _annotation.id, |
157 media_id: _this.source.currentMedia.id, |
156 media_id: _this.source.currentMedia.id, |
158 polemic: _polemic, |
157 polemic: _pol, |
159 title: _title, |
158 left: _elx, |
160 posx: Math.floor(_x + (_this.element_width - 1) / 2), |
159 top: _ely, |
161 left: _x, |
160 color: _col, |
162 top: _y, |
|
163 color: _color, |
|
164 width: (_this.element_width-1), |
161 width: (_this.element_width-1), |
165 height: _this.element_height |
162 height: _this.element_height, |
166 }); |
163 title: _annotation.title |
|
164 }); |
|
165 var _el = IriSP.jQuery(_html); |
|
166 _el.mouseover(function() { |
|
167 _annotation.trigger("select"); |
|
168 }).mouseout(function() { |
|
169 _annotation.trigger("unselect"); |
|
170 }).click(function() { |
|
171 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id); |
|
172 _this.player.popcorn.trigger("IriSP.Tweet.show", _annotation.id); |
|
173 }); |
|
174 _annotation.on("select", function() { |
|
175 _this.tooltip.show( |
|
176 Math.floor(_elx + (_this.element_width - 1) / 2), |
|
177 _ely, |
|
178 _annotation.title, |
|
179 _col |
|
180 ); |
|
181 _this.$tweets.each(function() { |
|
182 var _e = IriSP.jQuery(this); |
|
183 _e.css( |
|
184 "opacity", |
|
185 ( _e.attr("annotation-id") == _annotation.id ? 1 : .3 ) |
|
186 ); |
|
187 }); |
|
188 }); |
|
189 _annotation.on("unselect", function() { |
|
190 _this.tooltip.hide(); |
|
191 _this.$tweets.css("opacity",1); |
|
192 }); |
|
193 _this.$zone.append(_el); |
167 } |
194 } |
168 |
195 |
169 IriSP._(_slices).forEach(function(_slice) { |
196 IriSP._(_slices).forEach(function(_slice) { |
170 var _y = _this.height; |
197 var _y = _this.height; |
171 _slice.annotations.forEach(function(_annotation) { |
198 _slice.annotations.forEach(function(_annotation) { |
172 _y -= _this.element_height; |
199 _y -= _this.element_height; |
173 displayElement(_x, _y, _this.defaultcolor, _annotation.id, _annotation.title, "none"); |
200 displayAnnotation(_x, _y, "none", _this.defaultcolor, _annotation); |
174 }); |
201 }); |
175 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
202 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) { |
176 var _color = _this.polemics[_j].color, |
203 var _color = _this.polemics[_j].color, |
177 _polemic = _this.polemics[_j].name; |
204 _polemic = _this.polemics[_j].name; |
178 _annotations.forEach(function(_annotation) { |
205 _annotations.forEach(function(_annotation) { |
179 _y -= _this.element_height; |
206 _y -= _this.element_height; |
180 displayElement(_x, _y, _color, _annotation.id, _annotation.title, _polemic); |
207 displayAnnotation(_x, _y, _polemic, _color, _annotation); |
181 }); |
208 }); |
182 }); |
209 }); |
183 _x += _this.element_width; |
210 _x += _this.element_width; |
184 }); |
211 }); |
185 |
212 |
186 this.$zone.append(_html); |
213 this.$zone.append(_html); |
187 |
214 |
188 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
215 this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); |
189 |
|
190 this.$tweets |
|
191 .mouseover(function() { |
|
192 var _el = IriSP.jQuery(this); |
|
193 _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color")); |
|
194 }) |
|
195 .mouseout(function() { |
|
196 _this.tooltip.hide(); |
|
197 }) |
|
198 .click(function() { |
|
199 var _id = IriSP.jQuery(this).attr("annotation-id"); |
|
200 _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _id); |
|
201 _this.player.popcorn.trigger("IriSP.Tweet.show", _id); |
|
202 }); |
|
203 |
216 |
204 this.bindPopcorn("IriSP.search", "onSearch"); |
217 this.bindPopcorn("IriSP.search", "onSearch"); |
205 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
218 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
206 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
219 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
207 |
220 |