diff options
author | Ananya Sen | 2012-07-23 17:01:14 -0700 |
---|---|---|
committer | Ananya Sen | 2012-07-23 17:01:14 -0700 |
commit | 48d9ed19573a07c68da305d14ca6ab3a04d31d64 (patch) | |
tree | b4bf6c48c7fdade2cf531d84cac3359489d38405 /js/panels/Timeline/Style.reel/Style.js | |
parent | c07a7a9d11bc8299fa9686544b18840cc8e640c2 (diff) | |
parent | afc7ad4f240fdf7890a79c2d4d7f8eb2e7c30a34 (diff) | |
download | ninja-48d9ed19573a07c68da305d14ca6ab3a04d31d64.tar.gz |
Merge branch 'refs/heads/Jose-Document' into Document
Diffstat (limited to 'js/panels/Timeline/Style.reel/Style.js')
-rw-r--r-- | js/panels/Timeline/Style.reel/Style.js | 695 |
1 files changed, 353 insertions, 342 deletions
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index bfa6f930..9785ba74 100644 --- a/js/panels/Timeline/Style.reel/Style.js +++ b/js/panels/Timeline/Style.reel/Style.js | |||
@@ -32,200 +32,240 @@ POSSIBILITY OF SUCH DAMAGE. | |||
32 | /* | 32 | /* |
33 | * 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. |
34 | * Public Properties: | 34 | * Public Properties: |
35 | * editorProperty: The CSS property for the style. | 35 | * editorProperty: The CSS property for the style. |
36 | * editorValue: The value for the editorProperty. | 36 | * editorValue: The value for the editorProperty. |
37 | * 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) |
38 | * 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). |
39 | * Valid values are "hintable" and "propval", defaults to "hintable". | 39 | * Valid values are "hintable" and "propval", defaults to "hintable". |
40 | * | 40 | * |
41 | */ | 41 | */ |
42 | 42 | ||
43 | var Montage = require("montage/core/core").Montage; | 43 | var Montage = require("montage/core/core").Montage; |
44 | var Component = require("montage/ui/component").Component; | 44 | var Component = require("montage/ui/component").Component; |
45 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator | 45 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator |
46 | 46 | ||
47 | 47 | ||
48 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { | 48 | var LayerStyle = exports.LayerStyle = Montage.create(Component, { |
49 | |||
50 | styleContainer: { | ||
51 | value: null, | ||
52 | serializable: true | ||
53 | }, | ||
54 | |||
55 | styleHintable: { | ||
56 | value: null, | ||
57 | serializable: true | ||
58 | }, | ||
59 | |||
60 | styleProperty: { | ||
61 | value: null, | ||
62 | serializable: true | ||
63 | }, | ||
64 | |||
65 | valueEditorHottext: { | ||
66 | value: null, | ||
67 | serializable: true | ||
68 | }, | ||
69 | |||
70 | dtextProperty: { | ||
71 | value: null, | ||
72 | serializable: true | ||
73 | }, | ||
74 | |||
75 | /* === BEGIN: Models === */ | 49 | /* === BEGIN: Models === */ |
76 | // isSelected: whether or not the style is selected | 50 | _parentLayerComponent: { |
77 | _isSelected: { | 51 | value: null |
78 | value: false | 52 | }, |
79 | }, | 53 | |
80 | isSelected: { | 54 | _styleContainer: { |
55 | value: null | ||
56 | }, | ||
57 | styleContainer: { | ||
81 | serializable: true, | 58 | serializable: true, |
82 | get: function() { | 59 | get: function() { |
83 | return this._isSelected; | 60 | return this._styleContainer; |
84 | }, | 61 | }, |
85 | set: function(newVal) { | 62 | set: function(newVal) { |
86 | 63 | this._styleContainer = newVal; | |
87 | if (newVal !== this._isSelected) { | ||
88 | this._isSelected = newVal; | ||
89 | this.needsDraw = true; | ||
90 | } | ||
91 | } | 64 | } |
92 | }, | 65 | }, |
93 | 66 | ||
94 | /* isActive: Whether or not the user is actively clicking within the style; used to communicate state with | 67 | _styleHintable: { |
95 | * parent Layer. | 68 | value: null |
96 | */ | 69 | }, |
97 | _isActive: { | 70 | styleHintable: { |
98 | value: false | 71 | serializable: true, |
99 | }, | ||
100 | isActive: { | ||
101 | get: function() { | 72 | get: function() { |
102 | return this._isActive; | 73 | return this._styleHintable; |
103 | }, | 74 | }, |
104 | set: function(newVal) { | 75 | set: function(newVal) { |
105 | this._isActive = newVal; | 76 | this._styleHintable = newVal; |
106 | } | 77 | } |
107 | }, | 78 | }, |
108 | 79 | ||
109 | // Property for this editor | 80 | _styleProperty: { |
110 | _editorProperty: { | 81 | value: null |
111 | value: "" | 82 | }, |
112 | }, | 83 | styleProperty: { |
113 | editorProperty: { | ||
114 | serializable: true, | 84 | serializable: true, |
115 | get: function() { | 85 | get: function() { |
116 | return this._editorProperty; | 86 | return this._styleProperty; |
117 | }, | 87 | }, |
118 | set: function(newVal) { | 88 | set: function(newVal) { |
119 | this._editorProperty = newVal; | 89 | this._styleProperty = newVal; |
120 | this.needsDraw = true; | ||
121 | } | 90 | } |
122 | }, | 91 | }, |
123 | 92 | ||
124 | // Value for the property for this editor. | 93 | _valueEditorHottext: { |
125 | _editorValue: { | 94 | value: null |
126 | value: "" | 95 | }, |
127 | }, | 96 | valueEditorHottext: { |
128 | editorValue: { | ||
129 | serializable: true, | 97 | serializable: true, |
130 | get: function() { | 98 | get: function() { |
131 | return this._editorValue; | 99 | return this._valueEditorHottext; |
132 | }, | 100 | }, |
133 | set: function(newVal) { | 101 | set: function(newVal) { |
134 | this._editorValue = newVal; | 102 | this._valueEditorHottext = newVal; |
135 | this.needsDraw = true; | ||
136 | } | 103 | } |
137 | }, | 104 | }, |
138 | 105 | ||
139 | // The tweener used to change the value for this property. | 106 | _dtextProperty: { |
140 | _ruleTweener: { | 107 | value: null |
141 | value: false | 108 | }, |
142 | }, | 109 | dtextProperty: { |
143 | ruleTweener: { | ||
144 | serializable: true, | 110 | serializable: true, |
145 | get: function() { | 111 | get: function() { |
146 | return this._ruleTweener; | 112 | return this._dtextProperty; |
147 | }, | 113 | }, |
148 | set: function(newVal) { | 114 | set: function(newVal) { |
149 | this._ruleTweener = newVal; | 115 | this._dtextProperty = newVal; |
150 | this.needsDraw = true; | ||
151 | } | 116 | } |
152 | }, | 117 | }, |
153 | 118 | ||
119 | _isSelected: { | ||
120 | value: false | ||
121 | }, | ||
122 | isSelected: { | ||
123 | serializable: true, | ||
124 | get: function() { | ||
125 | return this._isSelected; | ||
126 | }, | ||
127 | set: function(newVal) { | ||
128 | |||
129 | if (newVal !== this._isSelected) { | ||
130 | this._isSelected = newVal; | ||
131 | this.needsDraw = true; | ||
132 | } | ||
133 | } | ||
134 | }, | ||
135 | |||
136 | _isActive: { | ||
137 | value: false | ||
138 | }, | ||
139 | isActive: { | ||
140 | get: function() { | ||
141 | return this._isActive; | ||
142 | }, | ||
143 | set: function(newVal) { | ||
144 | this._isActive = newVal; | ||
145 | } | ||
146 | }, | ||
147 | |||
148 | // Property for this editor | ||
149 | _editorProperty: { | ||
150 | value: "" | ||
151 | }, | ||
152 | editorProperty: { | ||
153 | serializable: true, | ||
154 | get: function() { | ||
155 | return this._editorProperty; | ||
156 | }, | ||
157 | set: function(newVal) { | ||
158 | this._editorProperty = newVal; | ||
159 | this.needsDraw = true; | ||
160 | } | ||
161 | }, | ||
162 | |||
163 | // Value for the property for this editor. | ||
164 | _editorValue: { | ||
165 | value: "" | ||
166 | }, | ||
167 | editorValue: { | ||
168 | serializable: true, | ||
169 | get: function() { | ||
170 | return this._editorValue; | ||
171 | }, | ||
172 | set: function(newVal) { | ||
173 | this._editorValue = newVal; | ||