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