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.js83
1 files changed, 42 insertions, 41 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 122c2c0a..01b4e90b 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -1,24 +1,25 @@
1/* <copyright> 1/* <copyright>
2Copyright (c) 2012, Motorola Mobility, Inc 2Copyright (c) 2012, Motorola Mobility LLC.
3All Rights Reserved. 3All Rights Reserved.
4BSD License.
5 4
6Redistribution and use in source and binary forms, with or without 5Redistribution and use in source and binary forms, with or without
7modification, are permitted provided that the following conditions are met: 6modification, are permitted provided that the following conditions are met:
8 7
9 - Redistributions of source code must retain the above copyright notice, 8* Redistributions of source code must retain the above copyright notice,
10 this list of conditions and the following disclaimer. 9 this list of conditions and the following disclaimer.
11 - Redistributions in binary form must reproduce the above copyright 10
12 notice, this list of conditions and the following disclaimer in the 11* Redistributions in binary form must reproduce the above copyright notice,
13 documentation and/or other materials provided with the distribution. 12 this list of conditions and the following disclaimer in the documentation
14 - Neither the name of Motorola Mobility nor the names of its contributors 13 and/or other materials provided with the distribution.
15 may be used to endorse or promote products derived from this software 14
16 without specific prior written permission. 15* Neither the name of Motorola Mobility LLC nor the names of its
16 contributors may be used to endorse or promote products derived from this
17 software without specific prior written permission.
17 18
18THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
19AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
20IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE 21IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
21ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE 22ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
22LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 23LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
23CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 24CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
24SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 25SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
@@ -32,11 +33,11 @@ POSSIBILITY OF SUCH DAMAGE.
32 * Style component: Edits and manages a single style rule for a Layer in the Timeline. 33 * Style component: Edits and manages a single style rule for a Layer in the Timeline.
33 * Public Properties: 34 * Public Properties:
34 * editorProperty: The CSS property for the style. 35 * editorProperty: The CSS property for the style.
35 * editorValue: The value for the editorProperty. 36 * editorValue: The value for the editorProperty.
36 * whichView: Which view to show, the hintable view (where a new property can be typed in) 37 * whichView: Which view to show, the hintable view (where a new property can be typed in)
37 * or the propval view (where the property's value can be set with the tweener). 38 * or the propval view (where the property's value can be set with the tweener).
38 * Valid values are "hintable" and "propval", defaults to "hintable". 39 * Valid values are "hintable" and "propval", defaults to "hintable".
39 * 40 *
40 */ 41 */
41 42
42var Montage = require("montage/core/core").Montage; 43var Montage = require("montage/core/core").Montage;
@@ -89,7 +90,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
89 } 90 }
90 } 91 }
91 }, 92 },
92 93
93 /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with 94 /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with
94 * parent Layer. 95 * parent Layer.
95 */ 96 */
@@ -104,7 +105,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
104 this._isActive = newVal; 105 this._isActive = newVal;
105 } 106 }
106 }, 107 },
107 108
108 // Property for this editor 109 // Property for this editor
109 _editorProperty: { 110 _editorProperty: {
110 value: "" 111 value: ""
@@ -119,7 +120,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
119 this.needsDraw = true; 120 this.needsDraw = true;
120 } 121 }
121 }, 122 },
122 123
123 // Value for the property for this editor. 124 // Value for the property for this editor.
124 _editorValue: { 125 _editorValue: {
125 value: "" 126 value: ""
@@ -134,8 +135,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
134 this.needsDraw = true; 135 this.needsDraw = true;
135 } 136 }
136 }, 137 },
137 138
138 // The tweener used to change the value for this property. 139 // The tweener used to change the value for this property.
139 _ruleTweener: { 140 _ruleTweener: {
140 value: false 141 value: false
141 }, 142 },
@@ -149,7 +150,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
149 this.needsDraw = true; 150 this.needsDraw = true;
150 } 151 }
151 }, 152 },
152 153
153 // The hintable we use to change the Property 154 // The hintable we use to change the Property
154 _myHintable: { 155 _myHintable: {
155 value: "" 156 value: ""
@@ -174,12 +175,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
174 this._myHintableValue = newVal; 175 this._myHintableValue = newVal;
175 } 176 }
176 }, 177 },
177 178
178 // swapViews: Is a view swap happening? 179 // swapViews: Is a view swap happening?
179 _swapViews : { 180 _swapViews : {
180 value: true 181 value: true
181 }, 182 },
182 183
183 // whichView: which view should we show: hintable or propval 184 // whichView: which view should we show: hintable or propval
184 _whichView : { 185 _whichView : {
185 value: "hintable" 186 value: "hintable"
@@ -201,7 +202,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
201 } 202 }
202 } 203 }
203 }, 204 },
204 205
205 // styleID: the id for this style; 206 // styleID: the id for this style;
206 // Used to publish events 207 // Used to publish events
207 _styleID : { 208 _styleID : {
@@ -259,9 +260,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
259 this.isActive = true; 260 this.isActive = true;
260 } 261 }
261 }, 262 },
262 263
263 /* === END: Models === */ 264 /* === END: Models === */
264 265
265 /* === BEGIN : Draw cycle === */ 266 /* === BEGIN : Draw cycle === */
266 prepareForDraw: { 267 prepareForDraw: {
267 value: function() { 268 value: function() {
@@ -270,7 +271,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
270 }, 271 },
271 draw: { 272 draw: {
272 value: function() { 273 value: function() {
273 274
274 if (this._swapViews === true) { 275 if (this._swapViews === true) {
275 // Show the right thing 276 // Show the right thing
276 this._showView(); 277 this._showView();
@@ -293,16 +294,16 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
293 } 294 }
294 }, 295 },
295 /* === END: Draw cycle === */ 296 /* === END: Draw cycle === */
296 297
297 /* === BEGIN: controllers === */ 298 /* === BEGIN: controllers === */
298 299
299 // handleStylePropertyDblClick: What happens when the user double-clicks on the style property 300 // handleStylePropertyDblClick: What happens when the user double-clicks on the style property
300 handleStylePropertyDblclick: { 301 handleStylePropertyDblclick: {
301 value: function(event) { 302 value: function(event) {
302 this.whichView = "hintable"; 303 this.whichView = "hintable";
303 } 304 }
304 }, 305 },
305 306
306 // handleHintableStop: What happens when the hintable issues its stop event 307 // handleHintableStop: What happens when the hintable issues its stop event
307 handleHintableStop: { 308 handleHintableStop: {
308 value: function(event) { 309 value: function(event) {
@@ -312,14 +313,14 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
312 this.whichView = "propval"; 313 this.whichView = "propval";
313 } 314 }
314 }, 315 },
315 316
316 // Init: Initialize the component with some useful selectors and other defaults. 317 // Init: Initialize the component with some useful selectors and other defaults.
317 init : { 318 init : {
318 value: function() { 319 value: function() {
319 320
320 var arrHints = [], 321 var arrHints = [],
321 i = 0; 322 i = 0;
322 323
323 // Get the array of hints from _myTweenables: 324 // Get the array of hints from _myTweenables:
324 for (i = 0; i < this._myTweenables.length; i++) { 325 for (i = 0; i < this._myTweenables.length; i++) {
325 arrHints.push(this._myTweenables[i].property) 326 arrHints.push(this._myTweenables[i].property)
@@ -328,15 +329,15 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
328 // Set useful information for the hintable 329 // Set useful information for the hintable
329 this.myHintable.editingClass = "editable2"; 330 this.myHintable.editingClass = "editable2";
330 this.myHintable.hints = arrHints; 331 this.myHintable.hints = arrHints;
331 332
332 // Bind a handler to the Hintable's change event 333 // Bind a handler to the Hintable's change event