1 IriSP.Widgets.Arrow = function(player, config) {

     2     IriSP.Widgets.Widget.call(this, player, config);

     3 };

     4 

     5 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget();

     6 

     7 IriSP.Widgets.Arrow.prototype.defaults = {

     8     arrow_height : 16,

     9     arrow_width : 24,

    10     base_height : 2,

    11     base_curve : 0,

    12     fill_url: IriSP.widgetsDir + '/img/pinstripe.png',

    13     fill_color: "#ffffff",

    14     inner_stroke_color: "#ffffff",

    15     inner_stroke_width: 4,

    16     outer_stroke_color: "#B6B8B8",

    17     outer_stroke_width: 1,

    18     animation_speed: 20,

    19     follow_current_time: false,

    20     annotation_type: "chap"

    21 }

    22 

    23 IriSP.Widgets.Arrow.prototype.draw = function() {

    24     this.height = this.arrow_height + this.base_height;

    25     this.$.addClass("Ldt-Arrow").css("height", this.height + "px");

    26     this.paper = new Raphael(this.container, this.width, this.height );

    27     window.myArrow = this;

    28     this.innerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);

    29     this.outerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height);

    30     this.innerArrow.attr({

    31         stroke: this.inner_stroke_color,

    32         "stroke-width": this.inner_stroke_width,

    33         fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color

    34     });

    35     this.outerArrow.attr({

    36         stroke: this.outer_stroke_color,

    37         "stroke-width": this.outer_stroke_width,

    38         fill: "none"

    39     });

    40     this.moveTo(0);

    41     this.bindPopcorn("timeupdate","onTimeupdate");

    42 }

    43 

    44 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) {

    45     _x = Math.floor(Math.max(0, Math.min(_x, this.width)));

    46     var _d = 'M0,' + this.height

    47         + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve)

    48         + 'Q0,' + this.arrow_height

    49         + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height

    50         + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height

    51         + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * _x / this.arrow_width)

    52         + 'L' + _x + ',0'

    53         + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * ( this.width - _x ) / this.arrow_width)

    54         + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + this.arrow_height

    55         + 'L' + Math.min(this.width, Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)) + ',' + this.arrow_height

    56         + 'Q' + this.width + ',' + this.arrow_height

    57         + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve)

    58         + 'L' + this.width + ',' + this.height;

    59     this.innerArrow.attr({

    60         path: _d

    61     });

    62     this.outerArrow.attr({

    63         path: _d

    64     });

    65 }

    66 

    67 IriSP.Widgets.Arrow.prototype.moveTo = function(_x) {

    68     this.targetX = Math.floor(Math.max(0, Math.min(_x, this.width)));

    69     if (typeof this.animInterval === "undefined") {

    70         this.animInterval = window.setInterval(

    71             this.functionWrapper("increment"),

    72             40

    73         )

    74     }

    75     this.increment();

    76 }

    77 

    78 IriSP.Widgets.Arrow.prototype.increment = function() {

    79     if (typeof this.currentX === "undefined") {

    80         this.currentX = this.targetX;

    81     }

    82     if (this.currentX < this.targetX) {

    83         this.currentX = Math.min(this.targetX, this.currentX + this.animation_speed);

    84     }

    85     if (this.currentX > this.targetX) {

    86         this.currentX = Math.max(this.targetX, this.currentX - this.animation_speed);

    87     }

    88     if (this.currentX === this.targetX) {

    89         window.clearInterval(this.animInterval);

    90         this.animInterval = undefined;

    91     }

    92     this.drawAt(this.currentX);

    93 }

    94 

    95 IriSP.Widgets.Arrow.prototype.onTimeupdate = function() {

    96     var _list = [],

    97         _time = Math.floor(this.player.popcorn.currentTime() * 1000);

    98     if (!this.follow_current_time) {

    99         _list = this.getWidgetAnnotations().filter(function(_annotation) {

   100             return _annotation.begin <= _time && _annotation.end > _time;

   101         });

   102     }

   103     if (_list.length) {

   104         _time = ( _list[0].begin + _list[0].end ) / 2;

   105     }

   106     var _x = this.width * _time / this.source.getDuration();

   107     this.moveTo(_x);

   108 }