src/js/widgets/segmentsWidget.js
branchpopcorn-port
changeset 334 e20f97514d44
parent 321 21d840371c6b
child 336 8da13562cfea
equal deleted inserted replaced
333:a597f3c04b3f 334:e20f97514d44
    15 IriSP.SegmentsWidget.prototype.draw = function() {
    15 IriSP.SegmentsWidget.prototype.draw = function() {
    16 
    16 
    17   var self = this;
    17   var self = this;
    18   var annotations = this._serializer._data.annotations;
    18   var annotations = this._serializer._data.annotations;
    19 
    19 
       
    20   this.selector.addClass("Ldt-SegmentsWidget");
       
    21 
    20   /* in case we have different types of annotations, we want to display only the first type */
    22   /* in case we have different types of annotations, we want to display only the first type */
    21   /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either
    23   /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either
    22      null or undefined.
    24      null or undefined.
    23   */
    25   */
    24   var view;
    26   var view;
    30 
    32 
    31   if(typeof(view) !== "undefined" && typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
    33   if(typeof(view) !== "undefined" && typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
    32           view_type = view.annotation_types[0];
    34           view_type = view.annotation_types[0];
    33   }
    35   }
    34  
    36  
    35   this.selector.css("overflow", "auto"); // clear the floats - FIXME : to refactor ?
       
    36   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
    37   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
    37   
    38   
    38   this.positionMarker = this.selector.children(":first");
    39   this.positionMarker = this.selector.children(":first");
    39   
    40   
    40   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
    41   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater));
    41   
    42   
    42   this.selector.after("<div class='cleaner'></div>"); // we need to do this because the segments are floated                                                      
       
    43   
    43   
    44   var i = 0;
    44   var i = 0;
    45   var totalWidth = this.selector.width();
    45   var totalWidth = this.selector.width();
    46   var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
    46   var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
    47  
    47  
    91     IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
    91     IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
    92 
    92 
    93     IriSP.jQuery("#" + id).fadeTo(0, 0.3);
    93     IriSP.jQuery("#" + id).fadeTo(0, 0.3);
    94 
    94 
    95     IriSP.jQuery("#" + id).mouseover(function() {
    95     IriSP.jQuery("#" + id).mouseover(function() {
    96       IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
    96       IriSP.jQuery(this).animate({opacity: 0.6}, 5);
    97     }).mouseout(function(){
    97     }).mouseout(function(){
    98       IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
    98       IriSP.jQuery(this).animate({opacity: 0.3}, 5);
    99     });
    99     });
   100 
   100 
   101     IriSP.jQuery("#" + id).click(function(_this, annotation) {
   101     IriSP.jQuery("#" + id).click(function(_this, annotation) {
   102                                     return function() { _this.clickHandler(annotation)};
   102                                     return function() { _this.clickHandler(annotation)};
   103                                  }(this, annotation));
   103                                  }(this, annotation));