src/widgets/Segments.js
changeset 1044 d8339b45edc4
parent 1033 c20df1c080e6
child 1058 ded3cd1312c1
--- a/src/widgets/Segments.js	Fri Sep 18 14:02:21 2015 +0200
+++ b/src/widgets/Segments.js	Tue Sep 01 15:10:17 2015 +0200
@@ -14,8 +14,10 @@
     overlap: .25,
     found_color: "#FF00FC",
     faded_found_color: "#ff80fc",
-    // Display creator info in segment tooltip
-    show_creator: true
+    selected_color: "#74d600",
+    faded_selected_color: "#baf9b5",
+    no_tooltip: false,
+    use_timerange: false,
 };
 
 IriSP.Widgets.Segments.prototype.template =
@@ -79,7 +81,7 @@
             color : color,
             medcolor: medcolor,
             lowcolor: lowcolor,
-            text: ((_this.show_creator && _annotation.creator) ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
+            text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
             left : _left,
             width : _width,
             top: _top,
@@ -91,17 +93,40 @@
         };
         var _html = Mustache.to_html(_this.annotationTemplate, _data),
             _el = IriSP.jQuery(_html);
-            _el.mouseover(function() {
+        _el.mouseover(function() {
                 _annotation.trigger("select");
-                _this.player.trigger('annotation-select', _annotation);
             })
             .mouseout(function() {
                 _annotation.trigger("unselect");
-                _this.player.trigger('annotation-unselect', _annotation);
             })
             .click(function() {
+                if(_this.use_timerange){
+                    if(!_this.media.getTimeRange()){
+                        _this.media.setTimeRange(_annotation.begin, _annotation.end)              
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                        })
+                        _el.css("background", _this.selected_color).addClass("selected");
+                    }
+                    else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){
+                        _this.media.resetTimeRange();
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                            _annotation.trigger("select");
+                        })
+                    }
+                    else {
+                        _this.media.setTimeRange(_annotation.begin, _annotation.end);
+                        _this.$segments.each(function(){
+                            var _segment = IriSP.jQuery(this);
+                            _segment.css("background", lowcolor).removeClass("selected");
+                        })
+                        _el.css("background", _this.selected_color).addClass("selected");
+                    }
+                }
                 _annotation.trigger("click");
-                _this.player.trigger('annotation-click', _annotation);
             })
             .appendTo(list_$);
         IriSP.attachDndData(_el, {
@@ -118,9 +143,13 @@
                 _segment.css({
                     background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
                 });
+                _segment.css({
+                    background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")
+                })
             });
             _el.css({
                 background: _el.hasClass("found") ? _this.found_color: color,
+                background: _el.hasClass("selected") ? _this.selected_color: color,
                 "z-index": ++zindex
             });
             if (_this.tooltip) {
@@ -134,6 +163,7 @@
             _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"));
+                _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
             });
         });
         _annotation.on("found", function() {
@@ -150,15 +180,17 @@
         background : this.background,
         margin: "1px 0"
     });
-    this.insertSubwidget(
-        this.$.find(".Ldt-Segments-Tooltip"),
-        {
-            type: "Tooltip",
-            min_x: 0,
-            max_x: this.width
-        },
-        "tooltip"
-    );
+    if (!this.no_tooltip){
+        this.insertSubwidget(
+            this.$.find(".Ldt-Segments-Tooltip"),
+            {
+                type: "Tooltip",
+                min_x: 0,
+                max_x: this.width
+            },
+            "tooltip"
+        );
+    }
     this.$segments = this.$.find('.Ldt-Segments-Segment');
     this.source.getAnnotations().on("search", function() {
         searching = true;
@@ -172,9 +204,10 @@
     });
 };
 
-IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
+IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {    
     var _x = Math.floor( this.width * _time / this.media.duration);
     this.$.find('.Ldt-Segments-Position').css({
         left: _x + "px"
     });
 };
+