src/widgets/Segments.js
changeset 1013 392ddcd212d7
parent 996 c472984db275
child 1026 420608a77566
equal deleted inserted replaced
1012:7e18d953a1f8 1013:392ddcd212d7
    21     + '<div class="Ldt-Segments-Position"></div>'
    21     + '<div class="Ldt-Segments-Position"></div>'
    22     + '<div class="Ldt-Segments-Tooltip"></div>';
    22     + '<div class="Ldt-Segments-Tooltip"></div>';
    23 
    23 
    24 IriSP.Widgets.Segments.prototype.annotationTemplate =
    24 IriSP.Widgets.Segments.prototype.annotationTemplate =
    25     '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
    25     '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
    26     + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>'
    26     + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>';
    27 
    27 
    28 
    28 
    29 IriSP.Widgets.Segments.prototype.draw = function() {
    29 IriSP.Widgets.Segments.prototype.draw = function() {
    30     this.onMediaEvent("timeupdate", "onTimeupdate");
    30     this.onMediaEvent("timeupdate", "onTimeupdate");
    31     this.renderTemplate();
    31     this.renderTemplate();
    56             _width = ( _annotation.getDuration() ) * _scale,
    56             _width = ( _annotation.getDuration() ) * _scale,
    57             _center = Math.floor( _left + _width / 2 ),
    57             _center = Math.floor( _left + _width / 2 ),
    58             _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
    58             _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
    59             line = IriSP._(lines).find(function(line) {
    59             line = IriSP._(lines).find(function(line) {
    60                 return !IriSP._(line.annotations).find(function(a) {
    60                 return !IriSP._(line.annotations).find(function(a) {
    61                     return a.begin < _annotation.end && a.end > _annotation.begin
    61                     return a.begin < _annotation.end && a.end > _annotation.begin;
    62                 });
    62                 });
    63             });
    63             });
    64         if (!line) {
    64         if (!line) {
    65             line = { index: lines.length, annotations: []};
    65             line = { index: lines.length, annotations: []};
    66             lines.push(line); 
    66             lines.push(line); 
   163         _this.$segments.each(function() {
   163         _this.$segments.each(function() {
   164             var _segment = IriSP.jQuery(this);
   164             var _segment = IriSP.jQuery(this);
   165             _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");
   165             _segment.css("background", _segment.attr("data-medium-color")).removeClass("found");
   166         });
   166         });
   167     });
   167     });
   168 }
   168 };
   169 
   169 
   170 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
   170 IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
   171     var _x = Math.floor( this.width * _time / this.media.duration);
   171     var _x = Math.floor( this.width * _time / this.media.duration);
   172     this.$.find('.Ldt-Segments-Position').css({
   172     this.$.find('.Ldt-Segments-Position').css({
   173         left: _x + "px"
   173         left: _x + "px"
   174     })
   174     });
   175 }
   175 };