Upgrade and downgrade components from wiring editor

src/wirecloud/commons/static/js/StyledElements/Container.js

@@ -83,92 +83,61 @@
             },
 
             /**
+             * Insert the `newElement` either to the end of this Container
+             * or after the `refElement` given.
+             * @since 0.5
+             *
+             * @param {(StyledElements.StyledElement|Node|String)} newElement
+             *     An element to insert into this Container.
+             * @param {(StyledElements.StyledElement|Node)} [refElement]
+             *     Optional. An element after which `newElement` is inserted.
+             *
+             * @returns {StyledElements.Container}
+             *     The instance on which the member is called.
              */
-            remove: function remove(childElement) {
-                var index;
-
-                if (childElement == null) {
-                    return this.superMember(se.StyledElement, 'remove', childElement);
-                }
-
-                if (childElement instanceof se.StyledElement) {
-                    if ((index = this.children.indexOf(childElement)) === -1) {
-                        return this;
-                    }
-
-                    this.children.splice(index, 1);
-                    childElement.parentElement = null;
-
-                    // Get the DOM element
-                    childElement = childElement.get();
-                }
-
-                if (childElement.parentElement === this.get()) {
-                    this.get().removeChild(childElement);
-                }
-
+            appendChild: function appendChild(newElement, refElement) {
+                utils.appendChild(this, newElement, refElement).forEach(addChild.bind(this));
+                orderbyIndex.call(this);
                 return this;
             },
 
             /**
-             * Insert an element at the end of this container or before the
-             * refElement if provided.
+             * Inserts the `newElement` to the beginning of this Container
+             * or before the `refElement` given.
+             * @since 0.7
+             *
+             * @param {(StyledElements.StyledElement|Node|String)} newElement
+             *     An element to insert into this Container.
+             * @param {(StyledElements.StyledElement|Node)} [refElement]
+             *     Optional. An element before which `newElement` is inserted.
              *
-             * @since 0.5
-             * @param {StyledElements.StyledElement|HTMLElement|String} newElement
-             *      An element to insert into the wrapperElement.
-             * @param {StyledElements.StyledElement|HTMLElement} [refElement]
-             *      Optional. An element after which newElement is inserted.
              * @returns {StyledElements.Container}
              *      The instance on which the member is called.
              */
-            appendChild: function appendChild(element, refElement) {
-                if (element instanceof StyledElements.StyledElement) {
-                    element.insertInto(this.wrapperElement, refElement);
-                    element.parentElement = this;
-                    this.children.push(element);
-
-                    return this;
-                }
-
-                if (typeof element === "string") {
-                    element = document.createTextNode(element);
-                }
-
-                if (refElement instanceof StyledElements.StyledElement) {
-                    refElement = refElement.get();
-                }
-
-                if (refElement != null) {
-                    this.wrapperElement.insertBefore(element, refElement);
-                } else {
-                    this.wrapperElement.appendChild(element);
-                }
-
+            prependChild: function prependChild(newElement, refElement) {
+                utils.prependChild(this, newElement, refElement).forEach(addChild.bind(this));
+                orderbyIndex.call(this);
                 return this;
             },
 
             /**
-             * Inserts a new element to the beginning of this Container
-             * @since 0.6
+             * Removes the `childElement` from this Container.
+             * @since 0.5
+             *
+             * @param {(StyledElements.StyledElement|Node)} childElement
+             *     An element to remove from this Container.
              *
-             * @param {StyledElement|HTMLElement|String} newElement
-             *      An element to insert into the wrapperElement.
-             * @param {StyledElement|HTMLElement} [refElement]
-             *      Optional. An element before which newElement is inserted.
-             * @returns {StyledElement}
+             * @returns {StyledElements.Container}
              *      The instance on which the member is called.
              */
-            prependChild: function prependChild(newElement, refElement) {
-                return this.appendChild(newElement, this.get().firstChild);
-            },
+            removeChild: function removeChild(childElement) {
+                utils.removeChild(this, childElement);
 
-            removeChild: function removeChild(element) {
-                if (element == null) {
-                    throw new TypeError('missing element parameter');
+                if (childElement instanceof se.StyledElement) {
+                    this.children.splice(this.children.indexOf(childElement), 1);
                 }
 
-                return this.remove(element);
+                return this;
             },
 
             repaint: function repaint(temporal) {
@@ -260,4 +229,34 @@
         useFullHeight: false
     };
 
+    var addChild = function addChild(newElement) {
+        /* jshint validthis: true */
+
+        if (newElement instanceof se.StyledElement) {
+            var index = this.children.indexOf(newElement);
+
+            if (index === -1) {
+                this.children.push(newElement);
+            }
+        }
+    };
+
+    var orderbyIndex = function orderbyIndex() {
+        /* jshint validthis: true */
+        var children = [];
+
+        Array.prototype.forEach.call(this.get().childNodes, function (childNode) {
+            var i, elementFound = false;
+
+            for (i = 0; i < this.children.length && !elementFound; i++) {
+                if (this.children[i].get() === childNode) {
+                    children.push(this.children.splice(i, 1)[0]);
+                    elementFound = true;
+                }
+            }
+        }.bind(this));
+
+        this.children = children;
+    };
+
 })(StyledElements, StyledElements.Utils);

src/wirecloud/commons/static/js/StyledElements/Fragment.js

@@ -1,5 +1,5 @@
 /*
- *     Copyright (c) 2012-2015 CoNWeT Lab., Universidad Politécnica de Madrid
+ *     Copyright (c) 2012-2016 CoNWeT Lab., Universidad Politécnica de Madrid
  *
  *     This file is part of Wirecloud Platform.
  *
@@ -19,66 +19,124 @@
  *
  */
 
+
 /*globals StyledElements */
 
-(function () {
+
+(function (se, utils) {
 
     "use strict";
 
+    // ==================================================================================
+    // CLASS DEFINITION
+    // ==================================================================================
+
     /**
+     * Creates a new instance of Fragment.
+     * @name StyledElements.Fragment
+     * @since 0.5
      *
+     * @constructor
+     * @extends {StyledElements.StyledElement}
+     *
+     * @param {(Array|String|Node|StyledElement)} newElement
+     *     An element or list of elements.
+     * 
      */
-    var Fragment = function Fragment(elements) {
-        var tmp_element;
-
-        if (Array.isArray(elements)) {
-            this.elements = elements;
-        } else if (typeof elements === 'string') {
-            tmp_element = document.createElement('div');
-            tmp_element.innerHTML = elements;
-            this.elements = Array.prototype.slice.call(tmp_element.childNodes);
+    se.Fragment = function Fragment(newElement) {
+        this.superClass();
+
+        /**
+         * The list of elements stored.
+         * @since 0.7
+         *
+         * @memberof StyledElements.Fragment#
+         * @type {Array.<(Node|StyledElements.StyledElement)>}
+         */
+        this.children = [];
+
+        if (Array.isArray(newElement)) {
+            newElement.forEach(function (childElement) {
+                this.appendChild(childElement);
+            }.bind(this));
         } else {
-            this.elements = [];
+            this.appendChild(newElement);
         }
+
+        Object.defineProperties(this, {
+            elements: {
+                get: function get() {return this.children;}
+            }
+        });
     };
-    Fragment.prototype = new StyledElements.StyledElement();
 
-    /*
-     * @override
-     */
-    Fragment.prototype.insertInto = function insertInto(element, refElement) {
-        var i, currentElement;
+    // ==================================================================================
+    // PUBLIC MEMBERS
+    // ==================================================================================
 
-        if (refElement instanceof StyledElements.StyledElement) {
-            refElement = refElement.wrapperElement;
-        }
+    utils.inherit(se.Fragment, se.StyledElement, /** @lends StyledElements.Fragment.prototype */{
+
+        /**
+         * Insert the `newElement` to the end of this Fragment.
+         * @since 0.5
+         *
+         * @param {(Node|String|StyledElements.StyledElement)} newElement
+         *     An element to insert into this Fragment.
+         *
+         * @returns {StyledElements.Fragment}
+         *     The instance on which the member is called.
+         */
+        appendChild: function appendChild(newElement) {
 
-        for (i = 0; i < this.elements.length; i += 1) {
-            currentElement = this.elements[i];
-            if (currentElement instanceof StyledElements.StyledElement) {
-                currentElement.insertInto(element, refElement);
+            if (newElement == null) {
+                return this;
+            }
+
+            if (typeof newElement === 'string') {
+                this.children = this.children.concat(getChildrenFromText(newElement));
+            } else if (newElement instanceof se.Fragment) {
+                this.children = this.children.concat(newElement.children);
             } else {
-                element.insertBefore(currentElement, refElement);
+                this.children.push(newElement);
             }
-        }
-    };
 
-    Fragment.prototype.repaint = function repaint() {
-        var i;
+            return this;
+        },
 
-        for (i = 0; i < this.elements.length; i++) {
-            if (typeof this.elements[i].repaint === 'function') {
-                this.elements[i].repaint();
-            }
+        /*
+         * @override
+         */
+        appendTo: function appendTo(parentElement, refElement) {
+            this.children.forEach(function (childElement) {
+                utils.appendChild(parentElement, childElement, refElement);
+            });
+            return this;
+        },
+
+        /*
+         * @override
+         */
+        repaint: function repaint() {
+            this.children.forEach(function (childElement) {
+                if (typeof childElement.repaint === 'function') {
+                    childElement.repaint();
+                }
+            })
+            return this;
         }
-        return this;
-    };
 
-    Fragment.prototype.appendChild = function appendChild(element) {
-        this.elements.push(element);
+    });
+
+    var getChildrenFromText = function getChildrenFromText(text) {
+        var targetElement, children = [];
+
+        if (text.length) {
+            targetElement = document.createElement('div');
+            targetElement.innerHTML = text;
+            children = Array.prototype.slice.call(targetElement.childNodes);
+        }
 
-        return this;
+        return children;
     };
 
-    StyledElements.Fragment = Fragment;
-})();
+})(StyledElements, StyledElements.Utils);

src/wirecloud/commons/static/js/StyledElements/Panel.js

@@ -71,8 +71,7 @@
             }
 
             if (options.subtitle) {
-                this.subtitle = new se.Container({extraClass: "panel-subtitle"});
-                this.heading.appendChild(this.subtitle.appendChild(options.subtitle));
+                this.setSubtitle(options.subtitle);
             }
 
             if (!options.noBody) {
@@ -141,6 +140,18 @@
 
                 this.heading.title.clear().appendChild(title);
 
+                return this;
+            },
+
+            setSubtitle: function setSubtitle(subtitle) {
+
+                if (this.heading.subtitle == null) {
+                    this.heading.subtitle = new se.Container({extraClass: "panel-subtitle"});
+                    this.heading.appendChild(this.heading.subtitle);
+                }
+
+                this.heading.subtitle.clear().appendChild(subtitle);
+
                 return this;
             }