1 IriSP.Widgets.Arrow = function(player, config) { |
1 IriSP.Widgets.Arrow = function(player, config) { |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 IriSP.Widgets.Widget.call(this, player, config); |
|
3 this.current_pilot_widget = this.pilot_widget |
3 }; |
4 }; |
4 |
5 |
5 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget(); |
6 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget(); |
6 |
7 |
7 IriSP.Widgets.Arrow.prototype.defaults = { |
8 IriSP.Widgets.Arrow.prototype.defaults = { |
8 arrow_height : 16, |
9 arrow_height : 16, |
9 arrow_width : 24, |
10 arrow_width : 24, |
10 base_height : 2, |
11 base_height : 0, |
11 base_curve : 0, |
12 base_curve : 0, |
12 fill_url: IriSP.widgetsDir + '/img/pinstripe.png', |
13 fill_url: IriSP.widgetsDir + '/img/pinstripe.png', |
13 fill_color: "#ffffff", |
14 fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black |
14 inner_stroke_color: "#ffffff", |
15 stroke_color: "#b7b7b7", |
15 inner_stroke_width: 4, |
16 stroke_width: 1.5, |
16 outer_stroke_color: "#B6B8B8", |
|
17 outer_stroke_width: 1, |
|
18 animation_speed: 20, |
17 animation_speed: 20, |
19 follow_current_time: false, |
18 pilot_widget: "Annotation" |
20 annotation_type: "chap" |
|
21 } |
19 } |
22 |
20 |
23 IriSP.Widgets.Arrow.prototype.draw = function() { |
21 IriSP.Widgets.Arrow.prototype.draw = function() { |
24 this.height = this.arrow_height + this.base_height; |
22 this.height = this.arrow_height + this.base_height; |
25 this.$.addClass("Ldt-Arrow").css("height", this.height + "px"); |
23 this.$.addClass("Ldt-Arrow").css("height", this.height + "px"); |
26 this.paper = new Raphael(this.container, this.width, this.height ); |
24 this.paper = new Raphael(this.container, this.width, this.height ); |
27 window.myArrow = this; |
25 window.myArrow = this; |
28 this.innerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height); |
26 this.svgArrow = 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); |
27 this.svgArrow.attr({ |
30 this.innerArrow.attr({ |
28 stroke: this.stroke_color, |
31 stroke: this.inner_stroke_color, |
29 "stroke-width": this.stroke_width, |
32 "stroke-width": this.inner_stroke_width, |
|
33 fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color |
30 fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color |
34 }); |
31 }); |
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); |
32 this.moveTo(0); |
41 this.bindPopcorn("timeupdate","onTimeupdate"); |
33 this.bindPopcorn("IriSP.Arrow.updatePosition","onUpdatePosition"); |
|
34 this.bindPopcorn("IriSP.Arrow.takeover","onTakeover"); |
|
35 this.bindPopcorn("IriSP.Arrow.release","onRelease"); |
42 } |
36 } |
43 |
37 |
44 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) { |
38 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) { |
45 _x = Math.floor(Math.max(0, Math.min(_x, this.width))); |
39 _x = Math.floor(Math.max(0, Math.min(_x, this.width))); |
46 var _d = 'M0,' + this.height |
40 var _d = 'M0,' + this.height |
54 + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + this.arrow_height |
48 + '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 |
49 + '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 |
50 + 'Q' + this.width + ',' + this.arrow_height |
57 + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve) |
51 + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve) |
58 + 'L' + this.width + ',' + this.height; |
52 + 'L' + this.width + ',' + this.height; |
59 this.innerArrow.attr({ |
53 this.svgArrow.attr({ |
60 path: _d |
|
61 }); |
|
62 this.outerArrow.attr({ |
|
63 path: _d |
54 path: _d |
64 }); |
55 }); |
65 } |
56 } |
66 |
57 |
67 IriSP.Widgets.Arrow.prototype.moveTo = function(_x) { |
58 IriSP.Widgets.Arrow.prototype.moveTo = function(_x) { |
90 this.animInterval = undefined; |
81 this.animInterval = undefined; |
91 } |
82 } |
92 this.drawAt(this.currentX); |
83 this.drawAt(this.currentX); |
93 } |
84 } |
94 |
85 |
95 IriSP.Widgets.Arrow.prototype.onTimeupdate = function() { |
86 IriSP.Widgets.Arrow.prototype.onUpdatePosition = function(_param) { |
96 var _list = [], |
87 if (_param.widget === this.current_pilot_widget) { |
97 _time = Math.floor(this.player.popcorn.currentTime() * 1000); |
88 if (typeof _param.x !== "undefined") { |
98 if (!this.follow_current_time) { |
89 this.moveTo(_param.x); |
99 _list = this.getWidgetAnnotations().filter(function(_annotation) { |
90 } else { |
100 return _annotation.begin <= _time && _annotation.end > _time; |
91 this.moveTo(this.width * _param.time / this.source.getDuration()); |
101 }); |
92 } |
102 } |
93 } |
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 } |
94 } |
|
95 |
|
96 IriSP.Widgets.Arrow.prototype.onTakeover = function(_widget) { |
|
97 this.current_pilot_widget = _widget; |
|
98 } |
|
99 |
|
100 IriSP.Widgets.Arrow.prototype.onRelease = function(_widget) { |
|
101 this.current_pilot_widget = this.pilot_widget; |
|
102 } |