aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Style.reel/Style.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Style.reel/Style.js')
-rw-r--r--js/panels/Timeline/Style.reel/Style.js648
1 files changed, 0 insertions, 648 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
deleted file mode 100644
index e6e03901..00000000
--- a/js/panels/Timeline/Style.reel/Style.js
+++ /dev/null
@@ -1,648 +0,0 @@
1/*
2 * Style component: Edits and manages a single style rule for a Layer in the Timeline.
3 * Public Properties:
4 * editorProperty: The CSS property for the style.
5 * editorValue: The value for the editorProperty.
6 * whichView: Which view to show, the hintable view (where a new property can be typed in)
7 * or the propval view (where the property's value can be set with the tweener).
8 * Valid values are "hintable" and "propval", defaults to "hintable".
9 *
10 */
11
12var Montage = require("montage/core/core").Montage;
13var Component = require("montage/ui/component").Component;
14
15var LayerStyle = exports.LayerStyle = Montage.create(Component, {
16
17 hasTemplate:{
18 value: true
19 },
20
21 /* === BEGIN: Models === */
22 // isSelected: whether or not the style is selected
23 _isSelected: {
24 serializable: true,
25 value: false
26 },
27 isSelected: {
28 serializable: true,
29 get: function() {
30 return this._isSelected;
31 },
32 set: function(newVal) {
33 if (newVal !== this._isSelected) {
34 this._isSelected = newVal;
35 this.needsDraw = true;
36 }
37 }
38 },
39
40 /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with
41 * parent Layer.
42 */
43 _isActive: {
44 value: false
45 },
46 isActive: {
47 get: function() {
48 return this._isActive;
49 },
50 set: function(newVal) {
51 this._isActive = newVal;
52 }
53 },
54
55 // Property for this editor
56 _editorProperty: {
57 serializable: true,
58 value: ""
59 },
60 editorProperty: {
61 serializable: true,
62 get: function() {
63 return this._editorProperty;
64 },
65 set: function(newVal) {
66 this._editorProperty = newVal;
67 this.needsDraw = true;
68 }
69 },
70
71 // Value for the property for this editor.
72 _editorValue: {
73 serializable: true,
74 value: ""
75 },
76 editorValue: {
77 serializable: true,
78 get: function() {
79 return this._editorValue;
80 },
81 set: function(newVal) {
82 this._editorValue = newVal;
83 this.needsDraw = true;
84 }
85 },
86
87 // The tweener used to change the value for this property.
88 _ruleTweener: {
89 serializable: true,
90 value: false
91 },
92 ruleTweener: {
93 serializable: true,
94 get: function() {
95 return this._ruleTweener;
96 },
97 set: function(newVal) {
98 this._ruleTweener = newVal;
99 this.needsDraw = true;
100 }
101 },
102
103 // The hintable we use to change the Property
104 _myHintable: {
105 value: ""
106 },
107 myHintable: {
108 get: function() {
109 return this._myHintable;
110 },
111 set: function(newVal) {
112 this._myHintable = newVal;
113 }
114 },
115 _myHintableValue : {
116 value: null
117 },
118 myHintableValue: {
119 get: function() {
120 return this._myHintableValue;
121 },
122 set: function(newVal) {
123 this._myHintableValue = newVal;
124 }
125 },
126
127 // swapViews: Is a view swap happening?
128 _swapViews : {
129 value: true
130 },
131
132 // whichView: which view should we show: hintable or propval
133 _whichView : {
134 serializable: true,
135 value: "hintable"
136 },
137 whichView: {
138 serializable: true,
139 get: function() {
140 return this._whichView;
141 },
142 set: function(newVal) {
143 if (this._whichView !== newVal) {
144 if ((newVal !== "hintable") && (newVal !== "propval")) {
145 this.log("Error: Unknown view -"+newVal+"- requested for style.js.");
146 return;
147 }
148 this._whichView = newVal;
149 this._swapViews = true;
150 this.needsDraw = true;
151 }
152 }
153 },
154
155 // styleID: the id for this style;
156 // Used to publish events
157 _styleID : {
158 serializable: true,
159 value: null
160 },
161 styleID: {
162 serializable: true,
163 get: function() {
164 return this._styleID;
165 },
166 set: function(newVal) {
167 this._styleID = newVal;
168 this.needsDraw = true;
169 }
170 },
171
172 handleMousedown: {
173 value: function(event) {
174 this.isActive = true;
175 }
176 },
177
178 /* === END: Models === */
179
180 /* === BEGIN : Draw cycle === */
181 prepareForDraw: {
182 value: function() {
183 this.init();
184 }
185 },
186 draw: {
187 value: function() {
188
189 if (this._swapViews === true) {
190 // Show the right thing
191 this._showView();
192 }
193 if (this.isSelected) {
194 this.element.classList.add("selected");
195 } else {
196 this.element.classList.remove("selected");
197 }
198 }
199 },
200 didDraw: {
201 value: function() {
202 if (this._swapViews === true) {
203 // View swap has been completed.
204 this._swapViews === false;
205 }
206 }
207 },
208 /* === END: Draw cycle === */
209
210 /* === BEGIN: controllers === */
211
212 // handleStylePropertyDblClick: What happens when the user double-clicks on the style property
213 handleStylePropertyDblclick: {
214 value: function(event) {
215 this.whichView = "hintable";
216 }
217 },
218
219 // handleHintableStop: What happens when the hintable issues its stop event
220 handleHintableStop: {
221 value: function(event) {
222 // this should be handled via binding, but somehow is not. Setting manually for now.
223 this.editorProperty = this.myHintable.value;
224
225 // Change views.
226 this.whichView = "propval";
227 }
228 },
229
230 // Init: Initialize the component with some useful selectors and other defaults.
231 init : {
232 value: function() {
233
234 var arrHints = [],