--- 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) {