4 }; |
4 }; |
5 |
5 |
6 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget(); |
6 IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget(); |
7 |
7 |
8 IriSP.Widgets.Arrow.prototype.defaults = { |
8 IriSP.Widgets.Arrow.prototype.defaults = { |
9 arrow_height : 12, |
9 arrow_height : 16, |
10 arrow_width : 20, |
10 arrow_width : 24, |
11 base_height : 0, |
11 base_height : 0, |
12 base_curve : 0, |
12 base_curve : 0, |
13 fill_url: IriSP.widgetsDir + '/img/pinstripe.png', |
13 fill_url: IriSP.widgetsDir + '/img/pinstripe.png', |
14 fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black |
14 fill_color: "#ffffff", //Gradients can be used, e.g. "90-#000-#fff" for vertical white-to-black |
15 stroke_color: "#b7b7b7", |
15 stroke_color: "#b7b7b7", |
16 stroke_width: 1.5, |
16 stroke_width: 1.5, |
17 animation_speed: 20 |
17 animation_speed: 20, |
18 }; |
18 pilot_widget: "Annotation" |
|
19 } |
19 |
20 |
20 IriSP.Widgets.Arrow.prototype.draw = function() { |
21 IriSP.Widgets.Arrow.prototype.draw = function() { |
21 this.height = this.arrow_height + this.base_height; |
22 this.height = this.arrow_height + this.base_height; |
22 this.$.addClass("Ldt-Arrow").css({ |
23 this.$.addClass("Ldt-Arrow").css({ |
23 height: (1+this.height) + "px", |
24 height: this.height + "px", |
24 "margin-top": "1px", |
25 "margin-top": "1px" |
25 overflow: "hidden" |
|
26 }); |
26 }); |
27 this.paper = new Raphael(this.container, this.width, 1+this.height ); |
27 this.paper = new Raphael(this.container, this.width, this.height ); |
28 window.myArrow = this; |
28 window.myArrow = this; |
29 this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height); |
29 this.svgArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height); |
30 this.svgArrow.attr({ |
30 this.svgArrow.attr({ |
31 stroke: this.stroke_color, |
31 stroke: this.stroke_color, |
32 "stroke-width": this.stroke_width, |
32 "stroke-width": this.stroke_width, |
33 fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color |
33 fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color |
34 }); |
34 }); |
35 this.moveToX(0); |
35 this.moveTo(0); |
36 }; |
36 this.bindPopcorn("IriSP.Arrow.updatePosition","onUpdatePosition"); |
|
37 this.bindPopcorn("IriSP.Arrow.takeover","onTakeover"); |
|
38 this.bindPopcorn("IriSP.Arrow.release","onRelease"); |
|
39 } |
37 |
40 |
38 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) { |
41 IriSP.Widgets.Arrow.prototype.drawAt = function(_x) { |
39 _x = Math.max(0, Math.min(_x, this.width)); |
42 _x = Math.floor(Math.max(0, Math.min(_x, this.width))); |
40 var _d = 'M0,' + this.height |
43 var _d = 'M0,' + this.height |
41 + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve) |
44 + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve) |
42 + 'Q0,' + this.arrow_height |
45 + 'Q0,' + this.arrow_height |
43 + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height |
46 + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height |
44 + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height |
47 + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height |
51 + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve) |
54 + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve) |
52 + 'L' + this.width + ',' + this.height; |
55 + 'L' + this.width + ',' + this.height; |
53 this.svgArrow.attr({ |
56 this.svgArrow.attr({ |
54 path: _d |
57 path: _d |
55 }); |
58 }); |
56 }; |
59 } |
57 |
60 |
58 IriSP.Widgets.Arrow.prototype.moveToX = function(_x) { |
61 IriSP.Widgets.Arrow.prototype.moveTo = function(_x) { |
59 this.targetX = Math.max(0, Math.min(_x, this.width)); |
62 this.targetX = Math.floor(Math.max(0, Math.min(_x, this.width))); |
60 if (typeof this.animInterval === "undefined") { |
63 if (typeof this.animInterval === "undefined") { |
61 this.animInterval = window.setInterval( |
64 this.animInterval = window.setInterval( |
62 this.functionWrapper("increment"), |
65 this.functionWrapper("increment"), |
63 40 |
66 40 |
64 ); |
67 ) |
65 } |
68 } |
66 this.increment(); |
69 this.increment(); |
67 }; |
70 } |
68 |
|
69 IriSP.Widgets.Arrow.prototype.moveToTime = function(_t) { |
|
70 this.moveToX(this.width * _t / this.media.duration); |
|
71 }; |
|
72 |
71 |
73 IriSP.Widgets.Arrow.prototype.increment = function() { |
72 IriSP.Widgets.Arrow.prototype.increment = function() { |
74 if (typeof this.currentX === "undefined") { |
73 if (typeof this.currentX === "undefined") { |
75 this.currentX = this.targetX; |
74 this.currentX = this.targetX; |
76 } |
75 } |
83 if (this.currentX === this.targetX) { |
82 if (this.currentX === this.targetX) { |
84 window.clearInterval(this.animInterval); |
83 window.clearInterval(this.animInterval); |
85 this.animInterval = undefined; |
84 this.animInterval = undefined; |
86 } |
85 } |
87 this.drawAt(this.currentX); |
86 this.drawAt(this.currentX); |
88 }; |
87 } |
|
88 |
|
89 IriSP.Widgets.Arrow.prototype.onUpdatePosition = function(_param) { |
|
90 if (_param.widget === this.current_pilot_widget) { |
|
91 if (typeof _param.x !== "undefined") { |
|
92 this.moveTo(_param.x); |
|
93 } else { |
|
94 this.moveTo(this.width * _param.time / this.source.getDuration()); |
|
95 } |
|
96 } |
|
97 } |
|
98 |
|
99 IriSP.Widgets.Arrow.prototype.onTakeover = function(_widget) { |
|
100 this.current_pilot_widget = _widget; |
|
101 } |
|
102 |
|
103 IriSP.Widgets.Arrow.prototype.onRelease = function(_widget) { |
|
104 this.current_pilot_widget = this.pilot_widget; |
|
105 } |