diff options
author | Jon Reid | 2012-06-20 15:05:26 -0700 |
---|---|---|
committer | Jon Reid | 2012-06-20 15:05:26 -0700 |
commit | 6e6c146f6e59c3942076b5d2f46b2962cc709926 (patch) | |
tree | aa6becc1e97aecbe6fb43aa33770def3c3de227d /node_modules/montage/ui/dynamic-element.reel/dynamic-element.js | |
parent | f887a74a7d03a2008a2c43d455a2b3e9223028af (diff) | |
parent | c9852665eadc1acb9c1c881d207c4bd9ef88805f (diff) | |
download | ninja-6e6c146f6e59c3942076b5d2f46b2962cc709926.tar.gz |
Merge remote-tracking branch 'ninja-internal/master' into timeline-local
Diffstat (limited to 'node_modules/montage/ui/dynamic-element.reel/dynamic-element.js')
-rw-r--r-- | node_modules/montage/ui/dynamic-element.reel/dynamic-element.js | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/node_modules/montage/ui/dynamic-element.reel/dynamic-element.js b/node_modules/montage/ui/dynamic-element.reel/dynamic-element.js index f0af644d..8ace6d69 100644 --- a/node_modules/montage/ui/dynamic-element.reel/dynamic-element.js +++ b/node_modules/montage/ui/dynamic-element.reel/dynamic-element.js | |||
@@ -75,6 +75,33 @@ exports.DynamicElement = Montage.create(Component, /** @lends module:"montage/ui | |||
75 | serializable: true | 75 | serializable: true |
76 | }, | 76 | }, |
77 | 77 | ||
78 | |||
79 | _classList: { | ||
80 | value: null | ||
81 | }, | ||
82 | |||
83 | _classListDirty: { | ||
84 | value: false | ||
85 | }, | ||
86 | |||
87 | /** | ||
88 | The classList of the component's element, the purpose is to mimic the element's API but to also respect the draw. | ||
89 | It can also be bound to by binding each class as a property. | ||
90 | example to toggle the complete class: "classList.complete" : { "<-" : "@owner.isCompete"} | ||
91 | @type {Property} | ||
92 | @default null | ||
93 | */ | ||
94 | classList: { | ||
95 | get: function() { | ||
96 | if (this._classList === null) { | ||
97 | var className = this.element.className; | ||
98 | this._classList = ClassList.newWithComponent(this, (className.length !== 0 ? this.element.className.split(" ") : null)); | ||
99 | } | ||
100 | return this._classList; | ||
101 | } | ||
102 | }, | ||
103 | |||
104 | |||
78 | _range: { | 105 | _range: { |
79 | value: null | 106 | value: null |
80 | }, | 107 | }, |
@@ -137,7 +164,123 @@ exports.DynamicElement = Montage.create(Component, /** @lends module:"montage/ui | |||
137 | content.data = displayValue; | 164 | content.data = displayValue; |
138 | } | 165 | } |
139 | } | 166 | } |
167 | // classList | ||
168 | if (this._classListDirty) { | ||
169 | this.classList.drawIntoComponent(); | ||
170 | this._classListDirty = false; | ||
171 | } | ||
140 | } | 172 | } |
141 | } | 173 | } |
142 | 174 | ||
143 | }); | 175 | }); |
176 | |||
177 | var ClassList = Montage.create(Montage, { | ||
178 | |||
179 | newWithComponent: { | ||
180 | value: function(component, classes) { | ||
181 | var aClassList = ClassList.create(), | ||
182 | aClass, i = 0; | ||
183 | aClassList._component = component; | ||
184 | aClassList._classes = {}; | ||
185 | if (classes !== null) { | ||
186 | while (aClass = classes[i++]) { | ||
187 | aClassList.add(aClass); | ||
188 | } | ||
189 | } | ||
190 | |||
191 | return aClassList; | ||
192 | } | ||
193 | }, | ||
194 | |||
195 | __dirty__: { | ||
196 | value: false | ||
197 | }, | ||
198 | |||
199 | _component: { | ||
200 | value: null | ||
201 | }, | ||
202 | |||
203 | _classes: { | ||
204 | value: null | ||
205 | }, | ||
206 | |||
207 | _installCssClass: { | ||
208 | value: function(key) { | ||
209 | this._classes[key] = false; | ||
210 | Montage.defineProperty(this, key, { | ||
211 | get: function() { | ||
212 | return this._classes[key]; | ||
213 | }, | ||
214 | set: function(value) { | ||
215 | value = !!value; | ||
216 | if(value !== this._classes[key]) { | ||
217 | this._classes[key] = value; | ||
218 | this._component._classListDirty = true; | ||
219 | this._component.needsDraw = true; | ||
220 | } | ||
221 | } | ||
222 | }); | ||
223 | } | ||
224 | }, | ||
225 | |||
226 | add: { | ||
227 | value: function(key) { | ||
228 | this.undefinedSet(key, true); | ||
229 | } | ||
230 | }, | ||
231 | |||
232 | remove: { | ||
233 | value: function(key) { | ||
234 | this.undefinedSet(key, false); | ||
235 | } | ||
236 | }, | ||
237 | |||
238 | toggle: { | ||
239 | value: function(key) { | ||
240 | this.undefinedSet(key, !this.undefinedGet(key)); | ||
241 | } | ||
242 | }, | ||
243 | |||
244 | contains: { | ||
245 | value: function(key) { | ||
246 | return !!this._classes[key]; | ||
247 | } | ||
248 | }, | ||
249 | |||
250 | undefinedGet: { | ||
251 | value: function(key) { | ||
252 | if (typeof this[key] === "undefined") { | ||
253 | this._installCssClass(key); | ||
254 | } | ||
255 | return this[key]; | ||
256 | } | ||
257 | }, | ||
258 | |||
259 | undefinedSet: { | ||
260 | value: function(key, value) { | ||
261 | if (typeof this[key] === "undefined") { | ||
262 | this._installCssClass(key); | ||
263 | } | ||
264 | this[key] = value; | ||
265 | } | ||
266 | }, | ||
267 | |||
268 | drawIntoComponent: { | ||
269 | value: function() { | ||
270 | var classes = this._classes, | ||
271 | classList = this._component.element.classList, | ||
272 | cssClass; | ||
273 | for (cssClass in classes) { | ||
274 | if (classes.hasOwnProperty(cssClass)) { | ||
275 | if(classes[cssClass]) { | ||
276 | classList.add(cssClass); | ||
277 | } else { | ||
278 | classList.remove(cssClass); | ||
279 | } | ||
280 | } | ||
281 | } | ||
282 | |||
283 | } | ||
284 | } | ||
285 | |||
286 | }); \ No newline at end of file | ||