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
         serializable: true
     },
 
+
+    _classList: {
+        value: null
+    },
+
+    _classListDirty: {
+        value: false
+    },
+
+    /**
+        The classList of the component's element, the purpose is to mimic the element's API but to also respect the draw.
+        It can also be bound to by binding each class as a property.
+        example to toggle the complete class: "classList.complete" : { "<-" : "@owner.isCompete"}
+        @type {Property}
+        @default null
+    */
+    classList: {
+        get: function() {
+            if (this._classList === null) {
+                var className = this.element.className;
+                this._classList = ClassList.newWithComponent(this, (className.length !== 0 ? this.element.className.split(" ") : null));
+            }
+            return this._classList;
+        }
+    },
+
+
     _range: {
         value: null
     },
@@ -137,7 +164,123 @@ exports.DynamicElement = Montage.create(Component, /** @lends module:"montage/ui
                     content.data = displayValue;
                 }
             }
+            // classList
+            if (this._classListDirty) {
+                this.classList.drawIntoComponent();
+                this._classListDirty = false;
+            }
         }
     }
 
 });
+
+var ClassList = Montage.create(Montage, {
+
+    newWithComponent: {
+        value: function(component, classes) {
+            var aClassList = ClassList.create(),
+                aClass, i = 0;
+            aClassList._component = component;
+            aClassList._classes = {};
+            if (classes !== null) {
+                while (aClass =  classes[i++]) {
+                    aClassList.add(aClass);
+                }
+            }
+
+            return aClassList;
+        }
+    },
+
+    __dirty__: {
+        value: false
+    },
+
+    _component: {
+        value: null
+    },
+
+    _classes: {
+        value: null
+    },
+
+    _installCssClass: {
+        value: function(key) {
+            this._classes[key] = false;
+            Montage.defineProperty(this, key, {
+                get: function() {
+                    return this._classes[key];
+                },
+                set: function(value) {
+                    value = !!value;
+                    if(value !== this._classes[key]) {
+                        this._classes[key] = value;
+                        this._component._classListDirty = true;
+                        this._component.needsDraw = true;
+                    }
+                }
+            });
+        }
+    },
+
+    add: {
+        value: function(key) {
+            this.undefinedSet(key, true);
+        }
+    },
+
+    remove: {
+        value: function(key) {
+            this.undefinedSet(key, false);
+        }
+    },
+
+    toggle: {
+        value: function(key) {
+            this.undefinedSet(key, !this.undefinedGet(key));
+        }
+    },
+
+    contains: {
+        value: function(key) {
+            return !!this._classes[key];
+        }
+    },
+
+    undefinedGet: {
+        value: function(key) {
+            if (typeof this[key] === "undefined") {
+                this._installCssClass(key);
+            }
+            return this[key];
+        }
+    },
+
+    undefinedSet: {
+        value: function(key, value) {
+            if (typeof this[key] === "undefined") {
+                this._installCssClass(key);
+            }
+            this[key] = value;
+        }
+    },
+
+    drawIntoComponent: {
+        value: function() {
+            var classes = this._classes,
+                classList = this._component.element.classList,
+                cssClass;
+            for (cssClass in classes) {
+                if (classes.hasOwnProperty(cssClass)) {
+                    if(classes[cssClass]) {
+                        classList.add(cssClass);
+                    } else {
+                        classList.remove(cssClass);
+                    }
+                }
+            }
+
+        }
+    }
+
+});
\ No newline at end of file