src/widgets/Segments.js
changeset 983 97fef7a4b189
parent 982 cfcbac34d020
child 986 f9d51dd4a3fe
--- a/src/widgets/Segments.js	Fri Nov 16 17:36:56 2012 +0100
+++ b/src/widgets/Segments.js	Wed Nov 21 16:33:51 2012 +0100
@@ -11,7 +11,9 @@
     colors: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
     line_height: 8,
     background: "#e0e0e0",
-    overlap: .25
+    overlap: .25,
+    found_color: "#FF00FC",
+    faded_found_color: "#ff80fc"
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -25,21 +27,18 @@
 
 
 IriSP.Widgets.Segments.prototype.draw = function() {
-    this.onMdpEvent("search", "onSearch");
-    this.onMdpEvent("search.closed", "onSearch");
-    this.onMdpEvent("search.cleared", "onSearch");
     this.onMediaEvent("timeupdate", "onTimeupdate");
-    
     this.renderTemplate();
     
     var _list = this.getWidgetAnnotations().filter(function(_ann) {
             return _ann.getDuration() > 0;
         }),
         _this = this,
-        _scale = this.width / this.source.getDuration();
-    var list_$ = this.$.find('.Ldt-Segments-List'),
+        _scale = this.width / this.source.getDuration(),
+        list_$ = this.$.find('.Ldt-Segments-List'),
         lines = [],
-        zindex = 1;
+        zindex = 1,
+        searching = false;
     
     function saturate(r, g, b, s) {
         function satcomp(c) {
@@ -52,14 +51,6 @@
         return "#" + res;
     }
     
-    function unselect() {
-        _this.tooltip.hide();
-        _this.$segments.each(function() {
-            var _segment = IriSP.jQuery(this);
-            _segment.css("background", _segment.attr("data-medium-color"));
-        });
-    }
-    
     _list.forEach(function(_annotation, _k) {
         var _left = _annotation.begin * _scale,
             _width = ( _annotation.getDuration() ) * _scale,
@@ -110,16 +101,28 @@
             _this.$segments.each(function() {
                 var _segment = IriSP.jQuery(this);
                 _segment.css({
-                    background: _segment.attr("data-low-color")
+                    background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
                 });
             });
+            _el.css({
+                background: _el.hasClass("found") ? _this.found_color: color,
+                "z-index": ++zindex
+            });
             _this.tooltip.show( _center, _top, _data.text, _data.color );
-            _el.css({
-                background: color,
-                "z-index": ++zindex
+        });
+        _annotation.on("unselect", function() {
+            _this.tooltip.hide();
+            _this.$segments.each(function() {
+                var _segment = IriSP.jQuery(this);
+                _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
             });
         });
-        _annotation.on("unselect", unselect);
+        _annotation.on("found", function() {
+            _el.css("background", _this.found_color).addClass("found");
+        });
+        _annotation.on("not-found", function() {
+            _el.css("background", lowcolor).removeClass("found");
+        });
     });
     
     this.$.css({
@@ -130,33 +133,16 @@
     });
     this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip");
     this.$segments = this.$.find('.Ldt-Segments-Segment');
-}
-
-IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {
-    this.searchString = typeof searchString !== "undefined" ? searchString : '';
-    var _found = 0,
-        _re = IriSP.Model.regexpFromTextOrArray(searchString, true);
-    if (this.searchString) {
-        this.$segments.each(function() {
-            var _el = IriSP.jQuery(this);
-            if (_re.test(_el.attr("segment-text"))) {
-                _el.css("background", _el.attr("data-base-color"));
-                _found++;
-            } else {
-                _el.css("background", _el.attr("data-low-color"));
-            }
-        });
-        if (_found) {
-            this.player.trigger("search.matchFound");
-        } else {
-            this.player.trigger("search.noMatchFound");
-        }
-    } else {
+    this.source.getAnnotations().on("search", function() {
+        searching = true;
+    });
+    this.source.getAnnotations().on("search-cleared", function() {
+        searching = false;
         _this.$segments.each(function() {
             var _segment = IriSP.jQuery(this);
-            _segment.css("background", _segment.attr("data-medium-color"));
+            _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");
         });
-    }
+    });
 }
 
 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {