upgrading to Montage v0.6

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

1 files changed, 278 insertions, 14 deletions

diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js
index 30d59c22..90612f83 100755
--- a/node_modules/montage/ui/component.js
+++ b/node_modules/montage/ui/component.js
@@ -395,9 +395,12 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
     @function
     @param {Component} childComponent The childComponent
     */
-    addChildComponent: {
+    _addChildComponent: {
         value: function(childComponent) {
-            this.childComponents.push(childComponent);
+            if (this.childComponents.indexOf(childComponent) == -1) {
+                this.childComponents.push(childComponent);
+                childComponent._cachedParentComponent = this;
+            }
         }
     },
 /**
@@ -406,9 +409,22 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
     */
     attachToParentComponent: {
         value: function() {
+            this._cachedParentComponent = null;
+            
+            var parentComponent = this.parentComponent;
+            
+            if (parentComponent) {
+                parentComponent._addChildComponent(this);
+            }
+        }
+    },
+    
+    detachFromParentComponent: {
+        value: function() {
             var parentComponent = this.parentComponent;
+            
             if (parentComponent) {
-                parentComponent.addChildComponent(this);
+                parentComponent.removeChildComponent(this);
             }
         }
     },
@@ -425,6 +441,7 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
 
             if (ix > -1) {
                 childComponents.splice(ix, 1);
+                childComponent._cachedParentComponent = null;
             }
 
             if (element && element.parentNode) {
@@ -479,6 +496,85 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         enumerable: false,
         value: null
     },
+    
+    /**
+     * Remove all bindings and starts buffering the needsDraw.
+     * @function
+     */
+    cleanupDeletedComponentTree: {
+        value: function() {
+            this.needsDraw = false;
+            this.traverseComponentTree(function(component) {
+                Object.deleteBindings(component);
+                component.canDrawGate.setField("componentTreeLoaded", false);
+                component.blockDrawGate.setField("element", false);
+                component.blockDrawGate.setField("drawRequested", false);
+                component.needsDraw = false;
+            });
+        }
+    },
+    
+    originalContent: {
+        value: null
+    },
+    
+    _newContent: {
+        enumerable: false,
+        value: null
+    },
+    
+    content: {
+        get: function() {
+            return Array.prototype.slice.call(this._element.childNodes, 0);
+        },
+        set: function(value) {
+            var components = [],
+                childNodes;
+                
+            this._newContent = value;
+            this.needsDraw = true;
+            
+            if (typeof this.contentWillChange === "function") {
+                this.contentWillChange(value);
+            }
+            
+            // cleanup current content
+            components = this.childComponents;
+            for (var i = 0, component; (component = components[i]); i++) {
+                component.detachFromParentComponent();
+                component.cleanupDeletedComponentTree();
+            }
+            
+            if (value instanceof Element) {
+                findAndDetachComponents(value);
+            } else {
+                for (var i = 0; i < value.length; i++) {
+                    findAndDetachComponents(value[i]);
+                }
+            }
+            
+            // find the component fringe and detach them from the component tree
+            function findAndDetachComponents(node) {
+                var component = node.controller;
+                
+                if (component) {
+                    component.detachFromParentComponent();
+                    components.push(component);
+                } else {
+                    var childNodes = node.childNodes;
+                    for (var i = 0, childNode; (childNode = childNodes[i]); i++) {
+                        findAndDetachComponents(childNode);
+                    }
+                }
+            }
+            
+            // not sure if I can rely on _cachedParentComponent to detach the nodes instead of doing one loop for dettach and another to attach...
+            for (var i = 0, component; (component = components[i]); i++) {
+                this._addChildComponent(component);
+            }
+        }
+    },
+    
 /**
     Description TODO
     @function
@@ -486,6 +582,9 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
     deserializedFromSerialization: {
         value: function() {
             this.attachToParentComponent();
+            if (this._element) {
+                this.originalContent = Array.prototype.slice.call(this._element.childNodes, 0);
+            }
         }
     },
 
@@ -892,11 +991,13 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             // TODO: get a spec for this, what attributes should we merge?
             for (i = 0; (attribute = attributes[i]); i++) {
                 attributeName = attribute.nodeName;
-                if (attributeName === "id") {
+                if (attributeName === "id" || attributeName === "data-montage-id") {
                     continue;
+                } else {
+                    value = (template.getAttribute(attributeName) || "") + " " +
+                        attribute.nodeValue;
                 }
-                value = (template.getAttribute(attributeName) || "") + " " +
-                    attribute.nodeValue;
+                
                 template.setAttribute(attributeName, value);
             }
 
@@ -921,7 +1022,10 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             if (this._templateElement) {
                 this._replaceElementWithTemplate();
             }
-            this._element.removeAttribute("id");
+            // TODO: removeAttribute only here for backwards compatibility
+            if (!this._element.getAttribute("data-montage-id")) {
+                this._element.removeAttribute("id");
+            }
 
             // This will schedule a second draw for any component that has children
             var childComponents = this.childComponents;
@@ -949,8 +1053,30 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
 */
     _draw: {
         value: function() {
+            var contents = this._newContent,
+                element;
+            
             this._canDrawTable = {};
             this._canDrawCount = 0;
+            
+            if (contents) {
+                element = this._element;
+                
+                element.innerHTML = "";
+
+                if (contents instanceof Element) {
+                    element.appendChild(contents);
+                } else {
+                    for (var i = 0, content; (content = contents[i]); i++) {
+                        element.appendChild(content);
+                    }
+                }
+                
+                this._newContent = null;
+                if (typeof this.contentDidChange === "function") {
+                    this.contentDidChange();
+                }
+            }
         }
     },
     /**
@@ -1134,10 +1260,101 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon