aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Span.reel/Span.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Span.reel/Span.js')
-rw-r--r--js/panels/Timeline/Span.reel/Span.js78
1 files changed, 75 insertions, 3 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index bfa6aab8..e5894500 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -13,10 +13,10 @@ var Span = exports.Span = Montage.create(Component, {
13 value: true 13 value: true
14 }, 14 },
15 15
16 // BEGIN: Models
16 _spanWidth:{ 17 _spanWidth:{
17 value:0 18 value:0
18 }, 19 },
19
20 spanWidth:{ 20 spanWidth:{
21 serializable:true, 21 serializable:true,
22 get:function () { 22 get:function () {
@@ -27,16 +27,88 @@ var Span = exports.Span = Montage.create(Component, {
27 this.needsDraw = true; 27 this.needsDraw = true;
28 } 28 }
29 }, 29 },
30 30
31 _isHighlighted: {
32 value: false
33 },
34 isHighlighted: {
35 get: function() {
36 return this._isHighlighted;
37 },
38 set: function(newVal) {
39 if (newVal !== this._isHighlighted) {
40 this._isHighlighted = newVal;
41 this.needsDraw = true;
42 }
43 }
44 },
45
46 _areChoicesVisible: {
47 value: false
48 },
49 areChoicesVisible: {
50 get: function() {
51 return this._areChoicesVisible;
52 },
53 set: function(newVal) {
54 if (newVal !== this._areChoicesVisible) {
55 this._areChoicesVisible = newVal;
56 this.needsDraw = true;
57 }
58 }
59 },
60
61 // BEGIN: draw cycle
62 prepareForDraw: {
63 value: function() {
64 this.init();
65 }
66 },
67
31 draw:{ 68 draw:{
32 value: function(){ 69 value: function(){
33 this.element.style.width = this.spanWidth + "px"; 70 this.element.style.width = this.spanWidth + "px";
71
72 // Highlight the span?
73 if (this.isHighlighted === true) {
74 this.element.classList.add("spanHighlight");
75 } else {
76 this.element.classList.remove("spanHighlight");
77 }
78
79 // Hide or show the choices menu?
80 if (this.areChoicesVisible === true) {
81 this.easing_choices.style.display = "block";
82 } else {
83 this.easing_choices.style.display = "none";
84 }
34 } 85 }
35 }, 86 },
36 87
88 // BEGIN: Controllers
89 init: {
90 value: function() {
91 this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false);
92 this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false);
93 }
94 },
95
37 highlightSpan:{ 96 highlightSpan:{
38 value: function(){ 97 value: function(){
39 this.element.classList.add("spanHighlight"); 98 // Class add/remove should only be done in draw cycle.
99 // this.element.classList.add("spanHighlight");
100 this.isHighlighted = true;
40 } 101 }
102 },
103
104 handleEasingChoiceClick: {
105 value: function(event) {
106 this.areChoicesVisible = true;
107 }
108 },
109 handleEasingChoicesClick: {
110 value: function(event) {
111 this.areChoicesVisible = false;
112 }
41 } 113 }
42}); 114});