src/widgets/Polemic.js
branchnew-model
changeset 1020 198c2b79f5e1
parent 1019 3ab36f402b0c
--- a/src/widgets/Polemic.js	Thu Jan 02 16:40:25 2014 +0100
+++ b/src/widgets/Polemic.js	Thu Jan 02 16:49:20 2014 +0100
@@ -15,12 +15,11 @@
         _to_: " to ",
         _annotations: " annotation(s)"
     }
-};
-
+}
 IriSP.Widgets.Polemic.prototype.defaults = {
     element_width : 5,
     element_height : 5,
-    max_elements: 20,
+    max_elements : 15,
     annotation_type : "tweet",
     defaultcolor : "#585858",
     foundcolor : "#fc00ff",
@@ -48,9 +47,45 @@
     ]
 };
 
+IriSP.Widgets.Polemic.prototype.onSearch = function(searchString) {
+    this.searchString = typeof searchString !== "undefined" ? searchString : '';
+    var _found = 0,
+        _re = IriSP.Model.regexpFromTextOrArray(searchString, true),
+        _this = this;
+    this.$tweets.each(function() {
+        var _el = IriSP.jQuery(this);
+        if (_this.searchString) {
+            if (_re.test(_el.attr("tweet-title"))) {
+                _el.css({
+                    "background" : _this.foundcolor,
+                    "opacity" : 1
+                });
+                _found++;
+            } else {
+                _el.css({
+                    "background" : _el.attr("polemic-color"),
+                    "opacity" : .3
+                });
+            }
+        } else {
+            _el.css({
+                "background" : _el.attr("polemic-color"),
+                "opacity" : 1
+            });
+        }
+    });
+    if (this.searchString) {
+        if (_found) {
+            this.player.popcorn.trigger("IriSP.search.matchFound");
+        } else {
+            this.player.popcorn.trigger("IriSP.search.noMatchFound");
+        }
+    }
+}
+
 IriSP.Widgets.Polemic.prototype.draw = function() {
     
-    this.onMediaEvent("timeupdate", "onTimeupdate");
+    this.bindPopcorn("timeupdate", "onTimeupdate");
     this.$zone = IriSP.jQuery('<div>');
     this.$zone.addClass("Ldt-Polemic");
     this.$.append(this.$zone);
@@ -67,7 +102,6 @@
         
     this.$zone.append(this.$elapsed);
     
-    // we don't filter with null duration anymore
     var _slices = [],
         _slice_count = Math.floor( this.width / this.element_width ),
         _duration = this.source.getDuration(),
@@ -83,10 +117,10 @@
                 begin : _begin.toString(),
                 end : _end.toString(),
                 annotations : _list.filter(function(_annotation) {
-                    return _annotation.begin >= _begin && _annotation.begin < _end;
+                    return _annotation.begin >= _begin && _annotation.end < _end;
                 }),
                 polemicStacks : []
-            };
+            }
             
         for (var _j = 0; _j < this.polemics.length; _j++) {
             var _polemic = _res.annotations.searchByDescription(this.polemics[_j].keywords);
@@ -115,7 +149,7 @@
             
             function displayAnnotation(_elx, _ely, _pol, _col, _annotation) {
                 var _html = Mustache.to_html(
-                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"'
+                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" polemic-color="{{color}}"'
                     + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
                 {
                     id: _annotation.id,
@@ -126,8 +160,7 @@
                     color: _col,
                     width: (_this.element_width-1),
                     height: _this.element_height,
-                    title: _annotation.title,
-                    time: _annotation.begin.toString()
+                    title: _annotation.title
                 });
                 var _el = IriSP.jQuery(_html);
                 _el.mouseover(function() {
@@ -135,34 +168,16 @@
                 }).mouseout(function() {
                     _annotation.trigger("unselect");
                 }).click(function() {
-                    _annotation.trigger("click");
-                    return false;
-                });
-                IriSP.attachDndData(_el, {
-                	title: _annotation.title,
-                	description: _annotation.description,
-                	image: _annotation.thumbnail,
-                	uri: (typeof _annotation.url !== "undefined" 
-		                ? _annotation.url
-		                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id))
+                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id);
+                    _this.player.popcorn.trigger("IriSP.Tweet.show", _annotation.id);
                 });
-            	// test if annotation has several colors.
-            	var colAr = [];
-            	for (var _j = 0; _j < _this.polemics.length; _j++) {
-            		if( IriSP.Model.regexpFromTextOrArray( _this.polemics[_j].keywords ).test( _annotation.title ) ){
-            			colAr.push(_this.polemics[_j].color);
-            		}
-                }
-            	// display annotation
                 _annotation.on("select", function() {
-                    if (_this.tooltip) {
-                        _this.tooltip.show(
-                            + Math.floor(_elx + (_this.element_width - 1) / 2),
-                            + _ely,
-                            _annotation.title,
-                            ( (colAr.length>1) ? colAr : _col )
-                        );
-                    }
+                    _this.tooltip.show(
+                        Math.floor(_elx + (_this.element_width - 1) / 2),
+                        _ely,
+                        _annotation.title,
+                        _col
+                    );
                     _this.$tweets.each(function() {
                         var _e = IriSP.jQuery(this);
                         _e.css(
@@ -172,23 +187,9 @@
                     });
                 });
                 _annotation.on("unselect", function() {
-                    if (_this.tooltip) {
-                        _this.tooltip.hide();
-                    }
+                    _this.tooltip.hide();
                     _this.$tweets.css("opacity",1);
                 });
-                _annotation.on("found", function() {
-                    _el.css({
-                        "background" : _this.foundcolor,
-                        "opacity" : 1
-                    });
-                });
-                _annotation.on("not-found", function() {
-                    _el.css({
-                        "background" : _col,
-                        "opacity" : .3
-                    });
-                });
                 _this.$zone.append(_el);
             }
             
@@ -213,15 +214,9 @@
             
             this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
             
-            this.source.getAnnotations().on("search-cleared", function() {
-                _this.$tweets.each(function() {
-                    var _el = IriSP.jQuery(this);
-                    _el.css({
-                        "background" : _el.attr("polemic-color"),
-                        "opacity" : 1
-                    });
-                });
-            });
+            this.bindPopcorn("IriSP.search", "onSearch");
+            this.bindPopcorn("IriSP.search.closed", "onSearch");
+            this.bindPopcorn("IriSP.search.cleared", "onSearch");
             
         } else {
             this.$zone.hide();
@@ -262,7 +257,7 @@
         IriSP._(_slices).forEach(function(_slice) {
             var _y = _this.height,
                 _nums = _slice.annotations.length + "," + IriSP._(_slice.polemicStacks).map(function(_annotations) {
-                    return _annotations.length;
+                    return _annotations.length
                 }).join(",");
             if (_slice.annotations.length) {
                 var _h = Math.ceil(_scale * _slice.annotations.length);
@@ -292,19 +287,15 @@
                     _html = '<p>' + _this.l10n.from_ + _el.attr("begin-time") + _this.l10n._to_ + _el.attr("end-time") + '</p>';
                 for (var _i = 0; _i <= _this.polemics.length; _i++) {
                     var _color = _i ? _this.polemics[_i - 1].color : _this.defaultcolor;
-                    _html += '<div class="Ldt-Tooltip-AltColor" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>';
+                    _html += '<div class="Ldt-Tooltip-Color" style="background: ' + _color + '"></div><p>' + _nums[_i] + _this.l10n._annotations + '</p>'
                 }
-                if (_this.tooltip) {
-                    _this.tooltip.show(+ _el.attr("pos-x"), + _el.attr("pos-y"), _html);
-                }
+                _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html);
             })
             .mouseout(function() {
-                if (_this.tooltip) {
-                    _this.tooltip.hide();
-                }
-            });
+                _this.tooltip.hide();
+            })
             
-    };
+    }
     
     this.$position = IriSP.jQuery('<div>').addClass("Ldt-Polemic-Position");
         
@@ -312,28 +303,20 @@
     
     this.$zone.click(function(_e) {
         var _x = _e.pageX - _this.$zone.offset().left;
-        _this.media.setCurrentTime(_this.media.duration * _x / _this.width);
+        _this.player.popcorn.currentTime(_this.source.getDuration().getSeconds() * _x / _this.width);
     });
     
     this.$.append('<div class="Ldt-Polemic-Tooltip"></div>');
     
-    this.insertSubwidget(
-        this.$.find(".Ldt-Polemic-Tooltip"),
-        {
-            type: "Tooltip",
-            min_x: 0,
-            max_x: this.width
-        },
-        "tooltip"
-    );
-};
+    this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), "tooltip", { type: "Tooltip" });
+}
 
-IriSP.Widgets.Polemic.prototype.onTimeupdate = function(_time) {
-    var _x = Math.floor( this.width * _time / this.media.duration);
+IriSP.Widgets.Polemic.prototype.onTimeupdate = function() {
+    var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds());
     this.$elapsed.css({
         width:  _x + "px"
     });
     this.$position.css({
         left: _x + "px"
-    });
-};
+    })
+}