diff options
Diffstat (limited to 'js/panels/Timeline/Span.reel/Span.js')
-rw-r--r-- | js/panels/Timeline/Span.reel/Span.js | 270 |
1 files changed, 135 insertions, 135 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 0d013fe5..7c959fad 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js | |||
@@ -29,7 +29,7 @@ POSSIBILITY OF SUCH DAMAGE. | |||
29 | </copyright> */ | 29 | </copyright> */ |
30 | 30 | ||
31 | var Montage = require("montage/core/core").Montage, | 31 | var Montage = require("montage/core/core").Montage, |
32 | Component = require("montage/ui/component").Component; | 32 | Component = require("montage/ui/component").Component; |
33 | 33 | ||
34 | var Span = exports.Span = Montage.create(Component, { | 34 | var Span = exports.Span = Montage.create(Component, { |
35 | 35 | ||
@@ -37,7 +37,7 @@ var Span = exports.Span = Montage.create(Component, { | |||
37 | value: true | 37 | value: true |
38 | }, | 38 | }, |
39 | 39 | ||
40 | // BEGIN: Models | 40 | // BEGIN: Models |
41 | _spanWidth:{ | 41 | _spanWidth:{ |
42 | value:0 | 42 | value:0 |
43 | }, | 43 | }, |
@@ -51,185 +51,185 @@ var Span = exports.Span = Montage.create(Component, { | |||
51 | this.needsDraw = true; | 51 | this.needsDraw = true; |
52 | } | 52 | } |
53 | }, | 53 | }, |
54 | 54 | ||
55 | _isHighlighted: { | 55 | _isHighlighted: { |
56 | value: false | 56 | value: false |
57 | }, | 57 | }, |
58 | isHighlighted: { | 58 | isHighlighted: { |
59 | get: function() { | 59 | get: function() { |
60 | return this._isHighlighted; | 60 | return this._isHighlighted; |
61 | }, | 61 | }, |
62 | set: function(newVal) { | 62 | set: function(newVal) { |
63 | if (newVal !== this._isHighlighted) { | 63 | if (newVal !== this._isHighlighted) { |
64 | this._isHighlighted = newVal; | 64 | this._isHighlighted = newVal; |
65 | this.needsDraw = true; | 65 | this.needsDraw = true; |
66 | } | 66 | } |
67 | } | 67 | } |
68 | }, | 68 | }, |
69 | 69 | ||
70 | _areChoicesVisible: { | 70 | _areChoicesVisible: { |
71 | value: false | 71 | value: false |
72 | }, | 72 | }, |
73 | areChoicesVisible: { | 73 | areChoicesVisible: { |
74 | get: function() { | 74 | get: function() { |
75 | return this._areChoicesVisible; | 75 | return this._areChoicesVisible; |
76 | }, | 76 | }, |
77 | set: function(newVal) { | 77 | set: function(newVal) { |
78 | if (newVal !== this._areChoicesVisible) { | 78 | if (newVal !== this._areChoicesVisible) { |
79 | this._areChoicesVisible = newVal; | 79 | this._areChoicesVisible = newVal; |
80 | this.needsDraw = true; | 80 | this.needsDraw = true; |
81 | } | 81 | } |
82 | } | 82 | } |
83 | }, | 83 | }, |
84 | 84 | ||
85 | _easing: { | 85 | _easing: { |
86 | value: "none" | 86 | value: "none" |
87 | }, | 87 | }, |
88 | easing: { | 88 | easing: { |
89 | get: function() { | 89 | get: function() { |
90 | return this._easing; | 90 | return this._easing; |
91 | }, | 91 | }, |
92 | set: function(newVal) { | 92 | set: function(newVal) { |
93 | if (newVal !== this._easing) { | 93 | if (newVal !== this._easing) { |
94 | if (typeof(newVal) === "undefined") { | 94 | if (typeof(newVal) === "undefined") { |
95 | newVal = "none"; | 95 | newVal = "none"; |
96 | } | 96 | } |
97 | this._easing = newVal; | 97 | this._easing = newVal; |
98 | this.parentComponent.easing = this.easing; | 98 | this.parentComponent.easing = this.easing; |
99 | this.parentComponent.tweenData.easing = this.easing; | 99 | this.parentComponent.tweenData.easing = this.easing; |
100 | this.parentComponent.setKeyframeEase(newVal); | 100 | this.parentComponent.setKeyframeEase(newVal); |
101 | this.needsDraw = true; | 101 | this.needsDraw = true; |
102 | } | 102 | } |
103 | } | 103 | } |
104 | }, | ||
105 | |||
106 | // BEGIN: draw cycle | ||
107 | prepareForDraw: { | ||
108 | value: function() { | ||
109 | this.init(); | ||
110 | } | ||
104 | }, | 111 | }, |
105 | 112 | ||
106 | // BEGIN: draw cycle | ||
107 | prepareForDraw: { | ||
108 | value: function() { | ||
109 | this.init(); | ||
110 | } | ||
111 | }, | ||
112 | |||
113 | draw:{ | 113 | draw:{ |
114 | value: function(){ | 114 | value: function(){ |
115 | this.element.style.width = this.spanWidth + "px"; | 115 | this.element.style.width = this.spanWidth + "px"; |
116 | 116 | ||
117 | if ((this.spanWidth <= 70) && (this.spanWidth >0)) { | 117 | if ((this.spanWidth <= 70) && (this.spanWidth >0)) { |
118 | var containerWidth = this.spanWidth -18, | 118 | var containerWidth = this.spanWidth -18, |
119 | choiceWidth; | 119 | choiceWidth; |
120 | if (containerWidth < 0) { | 120 | if (containerWidth < 0) { |
121 | containerWidth = 0; | 121 | containerWidth = 0; |
122 | } | 122 | } |
123 | choiceWidth = containerWidth -3; | 123 | choiceWidth = containerWidth -3; |
124 | if (choiceWidth < 0) { | 124 | if (choiceWidth < 0) { |
125 | choiceWidth = 0; | 125 | choiceWidth = 0; |
126 | } | 126 | } |
127 | this.container_easing.style.width = containerWidth + "px"; | 127 | this.container_easing.style.width = containerWidth + "px"; |
128 | this.easing_choice.style.width = choiceWidth + "px"; | 128 | this.easing_choice.style.width = choiceWidth + "px"; |
129 | this.easing_choice.style.overflow = "hidden"; | 129 | this.easing_choice.style.overflow = "hidden"; |
130 | } | 130 | } |
131 | if (this.spanWidth > 70) { | 131 | if (this.spanWidth > 70) { |
132 | this.container_easing.setAttribute("style", ""); | 132 | this.container_easing.setAttribute("style", ""); |
133 | this.easing_choice.setAttribute("style", ""); | 133 | this.easing_choice.setAttribute("style", ""); |
134 | } | 134 | } |
135 | 135 | ||
136 | // Highlight the span? | 136 | // Highlight the span? |
137 | if (this.isHighlighted === true) { | 137 | if (this.isHighlighted === true) { |
138 | this.element.classList.add("spanHighlight"); | 138 | this.element.classList.add("spanHighlight"); |
139 | } else { | 139 | } else { |
140 | this.element.classList.remove("spanHighlight"); | 140 | this.element.classList.remove("spanHighlight"); |
141 | } | 141 | } |
142 | 142 | ||
143 | /* | 143 | /* |
144 | // Hide or show the choices menu? | 144 | // Hide or show the choices menu? |
145 | if (this.areChoicesVisible === true) { | 145 | if (this.areChoicesVisible === true) { |
146 | this.easing_choices.style.display = "block"; | 146 | this.easing_choices.style.display = "block"; |
147 | } else { | 147 | } else { |
148 | this.easing_choices.style.display = "none"; | 148 | this.easing_choices.style.display = "none"; |
149 | } | 149 | } |
150 | */ | 150 | */ |
151 | 151 | ||
152 | // Change easing? | 152 | // Change easing? |
153 | if (this.easing_choice.innerText !== this.easing) { | 153 | if (this.easing_choice.innerText !== this.easing) { |
154 | this.easing_choice.innerText = this.easing; | 154 | this.easing_choice.innerText = this.easing; |
155 | } | 155 | } |
156 | 156 | ||
157 | } | 157 | } |
158 | }, | 158 | }, |
159 | 159 | ||
160 | // BEGIN: Controllers | 160 | // BEGIN: Controllers |
161 | init: { | 161 | init: { |
162 | value: function() { | 162 | value: function() { |
163 | this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); | 163 | this.easing_choice.addEventListener("click", this.handleEasingChoiceClick.bind(this), false); |
164 | //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); | 164 | //this.easing_choices.addEventListener("click", this.handleEasingChoicesClick.bind(this), false); |
165 | |||
166 | } | ||
167 | }, | ||
165 | 168 | ||
166 | } | ||
167 | }, | ||
168 | |||
169 | highlightSpan:{ | 169 | highlightSpan:{ |
170 | value: function(){ | 170 | value: function(){ |
171 | // Class add/remove should only be done in draw cycle. | 171 | // Class add/remove should only be done in draw cycle. |
172 | // this.element.classList.add("spanHighlight"); | 172 | // this.element.classList.add("spanHighlight"); |
173 | this.isHighlighted = true; | 173 | this.isHighlighted = true; |
174 | } | 174 | } |
175 | }, | 175 | }, |
176 | 176 | ||
177 | handleEasingChoiceClick: { | 177 | handleEasingChoiceClick: { |
178 | value: function(event) { | 178 | value: function(event) { |
179 | event.stopPropagation(); | 179 | event.stopPropagation(); |
180 | //this.areChoicesVisible = true; | 180 | //this.areChoicesVisible = true; |
181 |