From c6d1a1da9e7cdf477daf32410d80691eb1e828d5 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 31 Jan 2012 13:54:35 -0800
Subject: Montage Native Widgets: Cleanup of current components

Cleaning up the current components support files:
- Clean the component tree
- Clean the app delegate and panel

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/data/pi/pi-data.js                              |  4 +++
 js/panels/Components/Components.xml                | 22 -------------
 .../ComponentsPanelBase.js                         | 36 +++++++++++++---------
 3 files changed, 26 insertions(+), 36 deletions(-)

(limited to 'js')

diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index f162e919..189d1dae 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -505,6 +505,10 @@ exports.PiData = Montage.create( Montage, {
                 ]
             }
         ]
+    },
+
+    componentPi: {
+        value: []
     }
 });
 
diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
index b3056330..e076602e 100644
--- a/js/panels/Components/Components.xml
+++ b/js/panels/Components/Components.xml
@@ -2,27 +2,5 @@
 <tree id="Components">
     <folder id="montageComponents" label="Montage Components">
         <leaf id="Button" label="Button" />
-        <leaf id="Checkbox" label="Checkbox" />
-        <leaf id="DynamicText" label="Dynamic Text" />
-        <leaf id="FlowController" label="FlowController" />
-        <leaf id="HotText" label="HotText" />
-        <leaf id="HotTextUnit" label="HotTextUnit" />
-        <leaf id="ImageContainer" label="Image Container" />
-        <leaf id="Progress" label="Progress" />
-        <leaf id="Scrollview" label="Scrollview" />
-        <leaf id="Slider" label="Slider" />
-        <leaf id="TextArea" label="TextArea" />
-        <leaf id="Textfield" label="Textfield" />
-        <leaf id="Toggle" label="Toggle" />
-    </folder>
-    <folder id="metaComponents" label="Meta Components">
-        <leaf id="Condition" label="Condition" />
-        <leaf id="Repetition" label="Repetition" />
-        <leaf id="Slot" label="Slot" />
-        <leaf id="Substitution" label="Substitution" />
-    </folder>
-    <folder id="htmlPresets" label="HTML Components">
-        <leaf id="html_button" label="Button" />
-        <leaf id="html_input" label="Text Input" />
     </folder>
 </tree>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..c8624b29 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -59,15 +59,20 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     addComponentToStage:{
         value:function(componentType, dropX, dropY){
-            var compW = 100,
-                compH = 100,
-                elementType = "div",
-                componentContainer,
-                componentElement;
+//            var compW = 100,
+//                compH = 100,
+//                elementType = "div",
+//                componentContainer,
+//                componentElement;
+            var componentEl;
 
             if(componentType == "Button"){
-                compW = 118;
-                compH = 52;
+                componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
+                componentEl.setAttribute("type", "button");
+                componentEl.innerHTML = "Button";
+                console.log(componentEl);
+//                compW = 118;
+//                compH = 52;
             }else if(componentType == "Checkbox"){
                 compW = 53;
                 compH = 53;
@@ -117,28 +122,31 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 compH = 25;
             }
 
+
+            /*
             componentContainer = NJUtils.makeNJElement("div", componentType, "component");
             componentContainer.elementModel.isComponent = true;
-
+            */
             var styles = {
                 'position': 'absolute',
                 'top'       : dropY + 'px',
                 'left'      : dropX + 'px',
-                'width'     : compW + 'px',
-                'height'    : compH + 'px',
+//                'width'     : compW + 'px',
+//                'height'    : compH + 'px',
                 '-webkit-transform-style' : 'preserve-3d',
                 '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
             };
 
 
-            componentElement = NJUtils.makeNJElement(elementType, "ComponentDiv", "block");
-
-            componentContainer.appendChild(componentElement);
+            //componentElement = NJUtils.makeNJElement(elementType, "ComponentDiv", "block");
 
-            NJevent("elementAdding", {"el": componentContainer, "data":styles});
+            //componentContainer.appendChild(componentElement);
 
+            NJevent("elementAdding", {"el": componentEl, "data":styles});
+            /*
             var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType);
             this.application.ninja.currentDocument._userComponentSet[componentContainer.uuid] = componentRef;
+            */
 
         }
     }
-- 
cgit v1.2.3


From d26a13de2aca25c36cb35f85604de1ac2b9befbb Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 1 Feb 2012 14:37:30 -0800
Subject: Simple button native widget test. Added a controller, pi and panel
 code.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/controllers/elements/component-controller.js    | 23 +++++++++++
 js/data/pi/pi-data.js                              | 18 ++++++++-
 js/io/document/html-document.js                    | 47 +++++++++++++---------
 .../ComponentsPanelBase.js                         | 33 ++++++---------
 4 files changed, 80 insertions(+), 41 deletions(-)

(limited to 'js')

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 458e6b46..7a8acb3a 100644
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -9,4 +9,27 @@ var Montage = require("montage/core/core").Montage,
 
 exports.ComponentController = Montage.create(ElementController, {
 
+    getProperty: {
+        value: function(el, prop) {
+            switch(prop) {
+                case "label":
+                    return this.application.ninja.currentDocument.getComponentFromElement(el).label;
+                    break;
+                default:
+                    return ElementController.getProperty(el, prop);
+            }
+        }
+    },
+
+    setProperty: {
+        value: function(el, p, value) {
+            switch(p) {
+                case "label":
+                    this.application.ninja.currentDocument.getComponentFromElement(el).label = value;
+                    break;
+                default:
+                    ElementController.setProperty(el, p, value);
+            }
+        }
+    }
 });
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 189d1dae..30b1f60d 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -508,7 +508,23 @@ exports.PiData = Montage.create( Montage, {
     },
 
     componentPi: {
-        value: []
+        value: [
+            {
+                label: "Button",
+
+                Section: [
+                    [
+                        {
+                            type: "textbox",
+                            id: "Label",
+                            prop: "label",
+                            defaultValue: "Button",
+                            label: "Label"
+                        }
+                    ]
+                ]
+            }
+        ]
     }
 });
 
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js
index c44dfe75..a8e06c69 100644
--- a/js/io/document/html-document.js
+++ b/js/io/document/html-document.js
@@ -27,6 +27,7 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
     _initialUserDocument: { value: null, enumerable: false },
     _htmlSource: {value: "<html></html>", enumerable: false},
     _glData: {value: null, enumerable: false },
+    _userComponents: { value: {}, enumarable: false},
 
     _elementCounter: { value: 1, enumerable: false },
     _snapping : { value: true, enumerable: false },
@@ -108,23 +109,11 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
         }
     },
 
-    _userComponentSet: {
-        value: {},
-        writable: true,
-        enumerable:true
+    userComponents: {
+        get: function() {
+            return this._userComponents;
+        }
     },
-
-//    userComponentSet:{
-//        enumerable: true,
-//        get: function() {
-//            return this._userComponentSet;
-//        },
-//        set: function(value) {
-//            this._userComponentSet = value;
-//            this._drawUserComponentsOnOpen();
-//        }
-//    },
-//
 //    _drawUserComponentsOnOpen:{
 //        value:function(){
 //            for(var i in this._userComponentSet){
@@ -191,6 +180,29 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
         set: function(value) { this._zoomFactor = value; }
     },
 
+    /**
+     * Add a reference to a component instance to the userComponents hash using the
+     * element UUID
+     */
+    setComponentInstance: {
+        value: function(instance, el) {
+            this.userComponents[el.uuid] = instance;
+        }
+    },
+
+    /**
+     * Returns the component instance obj from the element
+     */
+    getComponentFromElement: {
+        value: function(el) {
+            if(el) {
+                if(el.uuid) return this.userComponents[el.uuid];
+            } else {
+                return null;
+            }
+        }
+    },
+
     //****************************************//
     // PUBLIC METHODS
     initialize: {
@@ -353,9 +365,6 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
                         this.callback(this);
                     }
                 }.bind(this), 50);
-                
-                // TODO - Not sure where this goes
-                this._userComponentSet = {};
             } else {
                 this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
                 this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index c8624b29..58a798d8 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -27,18 +27,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             this.eventManager.addEventListener( "executeAddComponent", this, false);
     	}
     },
-    willDraw: {
-    	enumerable: false,
-    	value: function() {
-
-    	}
-    },
-    draw: {
-    	enumerable: false,
-    	value: function() {
-
-    	}
-    },
 
     _loadXMLDoc: {
         value:function(dname) {
@@ -61,18 +49,17 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value:function(componentType, dropX, dropY){
 //            var compW = 100,
 //                compH = 100,
-//                elementType = "div",
-//                componentContainer,
-//                componentElement;
-            var componentEl;
+//
+            var componentEl, componentInstance;
 
             if(componentType == "Button"){
                 componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
                 componentEl.setAttribute("type", "button");
-                componentEl.innerHTML = "Button";
-                console.log(componentEl);
-//                compW = 118;
-//                compH = 52;
+                //componentEl.innerHTML = "Button";
+
+                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"});
+
+
             }else if(componentType == "Checkbox"){
                 compW = 53;
                 compH = 53;
@@ -142,12 +129,16 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
             //componentContainer.appendChild(componentElement);
 
+            this.application.ninja.currentDocument.setComponentInstance(componentInstance, componentEl);
+
             NJevent("elementAdding", {"el": componentEl, "data":styles});
             /*
             var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType);
-            this.application.ninja.currentDocument._userComponentSet[componentContainer.uuid] = componentRef;
+
             */
 
+
+
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 7ccadc20c96539988290999982d7483e013732f9 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 2 Feb 2012 14:49:34 -0800
Subject: adding a componentController and callback for lazy loading.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.html                       | 11 ++++++++
 .../ComponentsPanelBase.js                         | 29 +++++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

(limited to 'js')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..1e040e35 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,6 +11,17 @@
 
         <script type="text/montage-serialization">
         {
+            "componentController": {
+                "module": "montage/ui/controller/array-controller",
+                "name": "ArrayController",
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "components"
+                    }
+                }
+            },
+
             "owner": {
                 "module": "js/panels/Components/ComponentsPanelBase.reel",
                 "name": "ComponentsPanelBase",
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 58a798d8..9b5b755c 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -11,10 +11,25 @@ var Montage = require("montage/core/core").Montage,
 var treeControlModule = require("js/components/tree.reel");
 
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
-    _hasFocus: {
-    	enumerable: false,
-    	value: false
+
+    components: {
+        value: null
+    },
+
+    didCreate: {
+        value: function() {
+            this._loadComponents();
+        }
+    },
+
+    _loadComponents: {
+        value: function() {
+            this.photos = [
+                {component: "Button", data: "montage/ui/button.reel/button.json"}
+            ];
+        }
     },
+
     prepareForDraw: {
     	enumerable: false,
     	value: function() {
@@ -57,7 +72,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 componentEl.setAttribute("type", "button");
                 //componentEl.innerHTML = "Button";
 
-                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"});
+                componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}, this.callback);
 
 
             }else if(componentType == "Checkbox"){
@@ -139,6 +154,12 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
 
 
+        }
+    },
+
+    callback: {
+        value: function() {
+            console.log("the callback");
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 197ae04f7677b7a5890a589ba572e750a229c502 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 2 Feb 2012 18:28:29 -0800
Subject: Using async to load the required component.

---
 .../ComponentsPanelBase.js                         | 93 +++++++++++++++++++---
 1 file changed, 83 insertions(+), 10 deletions(-)

(limited to 'js')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 9b5b755c..ec092604 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -16,6 +16,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: null
     },
 
+    _testButtonJson: {
+        value: {
+            "component": "button",
+
+            "module": "montage/ui/button.reel",
+
+            "name": "Button",
+
+            "properties": [
+                {
+                    "name": "label",
+                    "type": "string",
+                    "default": "Button"
+                }
+            ]
+        }
+    },
+
     didCreate: {
         value: function() {
             this._loadComponents();
@@ -24,7 +42,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     _loadComponents: {
         value: function() {
-            this.photos = [
+            this.components = [
                 {component: "Button", data: "montage/ui/button.reel/button.json"}
             ];
         }
@@ -54,14 +72,75 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
+    _stash: {
+        value: {}
+    },
+
     handleExecuteAddComponent: {
         value: function(evt) {
-            this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY)
+            //var component = evt.detail.component;
+            // Get the data from the event detail component
+            var component = this._testButtonJson;
+            this._stash.dropx = evt.detail.dropX;
+            this._stash.dropy = evt.detail.dropY;
+            this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY);
+        }
+    },
+
+    /**
+     * Send a request to add a component to the user document and waits for a callback to continue
+     */
+    addComponentToStage: {
+        value: function(component) {
+            var that = this;
+            var element = this.makeComponent(component.component);
+            this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
+
+                var styles = {
+                                'position': 'absolute',
+                                'top'       : that._stash.dropx + 'px',
+                                'left'      : that._stash.dropy + 'px',
+                                '-webkit-transform-style' : 'preserve-3d',
+                                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+                            };
+
+                that.application.ninja.currentDocument.setComponentInstance(instance, element);
+
+                NJevent("elementAdding", {"el": element, "data":styles});
+            });
+        }
+    },
+
+    callback: {
+        value: function(instance, element) {
+            console.log(instance);
+
+            var styles = {
+                'position': 'absolute',
+                'top'       : this._stash.dropx + 'px',
+                'left'      : this._stash.dropy + 'px',
+                '-webkit-transform-style' : 'preserve-3d',
+                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+            };
+
+            this.application.ninja.currentDocument.setComponentInstance(instance, element);
+
+            NJevent("elementAdding", {"el": element, "data":styles});
+
         }
     },
 
-    addComponentToStage:{
-        value:function(componentType, dropX, dropY){
+    makeComponent: {
+        value: function(name) {
+            var el;
+            el = NJUtils.makeNJElement(name, "Button", "component");
+            el.setAttribute("type", "button");
+            return el;
+        }
+    },
+
+    ___addComponentToStage:{
+        value:function(component, dropX, dropY){
 //            var compW = 100,
 //                compH = 100,
 //
@@ -154,12 +233,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
 
 
-        }
-    },
-
-    callback: {
-        value: function() {
-            console.log("the callback");
         }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3


From 7950424cf704bb221971f4645406b01e6979db18 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 3 Feb 2012 00:38:13 -0800
Subject: Fix the main user component to create distinct instance of component.

- Create a distinct instance of button
- Cleanup.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.reel/ComponentsPanelBase.js        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'js')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index ec092604..8c81b3ab 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -97,12 +97,13 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             this.application.ninja.currentDocument._window.addComponent(element, {type: "Button", path: component.module, name: "Button"}, function(instance, element) {
 
                 var styles = {
-                                'position': 'absolute',
-                                'top'       : that._stash.dropx + 'px',
-                                'left'      : that._stash.dropy + 'px',
-                                '-webkit-transform-style' : 'preserve-3d',
-                                '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
-                            };
+                    'position': 'absolute',
+                    'top'       : that._stash.dropy + 'px',
+                    'left'      : that._stash.dropx + 'px',
+                    '-webkit-transform-style' : 'preserve-3d',
+                    '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
+                };
+
 
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
@@ -134,6 +135,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: function(name) {
             var el;
             el = NJUtils.makeNJElement(name, "Button", "component");
+            //el.elementModel.pi = "buttonPi";
             el.setAttribute("type", "button");
             return el;
         }
-- 
cgit v1.2.3


From dbd3a60478db35b0b12baa2ca54a0712d880951f Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 3 Feb 2012 15:50:35 -0800
Subject: button component using json data

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/controllers/elements/component-controller.js    |  8 ++-
 js/data/pi/pi-data.js                              | 20 --------
 .../ComponentsPanelBase.js                         | 60 +++++++++++++++++++---
 3 files changed, 59 insertions(+), 29 deletions(-)

(limited to 'js')

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 7a8acb3a..1b0591be 100644
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -15,8 +15,11 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "label":
                     return this.application.ninja.currentDocument.getComponentFromElement(el).label;
                     break;
+                case "enabled":
+                    return this.application.ninja.currentDocument.getComponentFromElement(el).enabled;
+                    break;
                 default:
-                    return ElementController.getProperty(el, prop);
+                    return ElementController.getProperty(el, prop, true);
             }
         }
     },
@@ -27,6 +30,9 @@ exports.ComponentController = Montage.create(ElementController, {
                 case "label":
                     this.application.ninja.currentDocument.getComponentFromElement(el).label = value;
                     break;
+                case "enabled":
+                    this.application.ninja.currentDocument.getComponentFromElement(el).enabled = value;
+                    break;
                 default:
                     ElementController.setProperty(el, p, value);
             }
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 9edb0399..de5cd34d 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -525,26 +525,6 @@ exports.PiData = Montage.create( Montage, {
                 ]
             }
         ]
-    },
-
-    componentPi: {
-        value: [
-            {
-                label: "Button",
-
-                Section: [
-                    [
-                        {
-                            type: "textbox",
-                            id: "Label",
-                            prop: "label",
-                            defaultValue: "Button",
-                            label: "Label"
-                        }
-                    ]
-                ]
-            }
-        ]
     }
 });
 
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 8c81b3ab..d9decd2c 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,11 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component,
-    NJUtils = require("js/lib/NJUtils").NJUtils;
+var Montage     = require("montage/core/core").Montage,
+    Component   = require("montage/ui/component").Component,
+    NJUtils     = require("js/lib/NJUtils").NJUtils;
 
-var treeControlModule = require("js/components/tree.reel");
+var treeControlModule   = require("js/components/tree.reel");
+var PIData              = require("js/data/pi/pi-data").PiData;
 
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
@@ -29,6 +30,11 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                     "name": "label",
                     "type": "string",
                     "default": "Button"
+                },
+                {
+                    "name": "enabled",
+                    "type": "boolean",
+                    "default": "true"
                 }
             ]
         }
@@ -43,8 +49,48 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     _loadComponents: {
         value: function() {
             this.components = [
-                {component: "Button", data: "montage/ui/button.reel/button.json"}
+                {name: "Button", data: "montage/ui/button.reel/button.json"}
             ];
+
+            // Build the PI objects for each component
+            for(var i = 0, component; component = this.components[i]; i++) {
+                var piIdentifier = component.name + "Pi";
+                var piObj = [];
+                var section = {};
+
+
+                section.label = component.name + " Properties";
+                section.Section = [];
+
+                for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) {
+                    var row = {};
+                    row.type = this.getControlType(props.type);
+                    row.id = props.name;
+                    row.prop = props.name;
+                    row.defaultValue = props["default"];
+                    row.label = props.name;
+
+                    section.Section.push([row]);
+                }
+
+                PIData[piIdentifier] = [];
+                PIData[piIdentifier].push(section);
+
+            }
+
+        }
+    },
+
+    getControlType: {
+        value: function(type) {
+            switch(type) {
+                case "string":
+                    return "textbox";
+                case "boolean":
+                    return "checkbox";
+                default:
+                    alert("Conversion not implemented for ", type);
+            }
         }
     },
 
@@ -135,7 +181,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         value: function(name) {
             var el;
             el = NJUtils.makeNJElement(name, "Button", "component");
-            //el.elementModel.pi = "buttonPi";
+            el.elementModel.pi = "ButtonPi";
             el.setAttribute("type", "button");
             return el;
         }
@@ -151,11 +197,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             if(componentType == "Button"){
                 componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"});
                 componentEl.setAttribute("type", "button");
-                //componentEl.innerHTML = "Button";
 
                 componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}, this.callback);
 
-
             }else if(componentType == "Checkbox"){
                 compW = 53;
                 compH = 53;
-- 
cgit v1.2.3


From 08eafdff4ec25d34e2e76b386145a9fd122431dc Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 6 Feb 2012 14:32:11 -0800
Subject: Moving the data files to a separate folder for now until montage
 provides the final files.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.js                         | 28 +++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'js')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index d9decd2c..51822150 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -43,17 +43,34 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     didCreate: {
         value: function() {
             this._loadComponents();
+
+//            var req = new XMLHttpRequest();
+//            req.identifier = "searchRequest";
+//            req.open("GET", url);
+//            req.addEventListener("load", this, false);
+//            req.addEventListener("error", this, false);
+//            req.send();
+
         }
     },
 
     _loadComponents: {
         value: function() {
             this.components = [
-                {name: "Button", data: "montage/ui/button.reel/button.json"}
+                {name: "Button", data: "node_modules/components-data/button.json"},
+                {name: "Textfield", data: "node_modules/components-data/textfield.json"}
             ];
 
             // Build the PI objects for each component
             for(var i = 0, component; component = this.components[i]; i++) {
+                var req = new XMLHttpRequest();
+                //req.identifier = "searchRequest";
+                req.open("GET", component.data);
+                req.addEventListener("load", this, false);
+                req.addEventListener("error", this, false);
+                req.send();
+
+/*
                 var piIdentifier = component.name + "Pi";
                 var piObj = [];
                 var section = {};
@@ -75,12 +92,21 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
                 PIData[piIdentifier] = [];
                 PIData[piIdentifier].push(section);
+                */
 
             }
 
         }
     },
 
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
+            console.log(response);
+
+        }
+    },
+
     getControlType: {
         value: function(type) {
             switch(type) {
-- 
cgit v1.2.3


From 8802043dc2acab5f669a68c02464a6b7792af1bb Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 1 Feb 2012 16:50:59 -0800
Subject: Styles Controller - First stab at group styling

Split "createOverrideRule" into two methods --> now has createOverrideSelector. Also took first stab at creating a group style.
---
 js/controllers/styles-controller.js | 102 ++++++++++++++++++++++++++++++------
 1 file changed, 86 insertions(+), 16 deletions(-)

(limited to 'js')

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index afd298c9..8fc90e7d 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -171,7 +171,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             if(argType === 'string') {
                 ruleText += '{' + declaration + '}';
             } else if(argType === 'object') {
-                ruleText += '{' + nj.cssFromObject(declaration) + '}';
+                ruleText += '{' + this.cssFromObject(declaration) + '}';
             }
             
             stylesheet.insertRule(ruleText, index);
@@ -199,25 +199,42 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             
             ///// Locally-scoped function to de-clutter variable declarations
             function getSelector(el, rule) {
-
                 return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
             }
 
             var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),
-                tokens             = selectorToOverride.split(/\s/),
-                newClass           = this.generateClassName(element.nodeName),
-                lastToken, pseudoSplit, base, pseudo, newToken, newSelector, rule;
+                overrideData, rule;
+
+            ///// Get the overriding selector and className
+            overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName);
+
+            ///// Create new rule with selector and insert it after the rule we're overriding
+            rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
+            
+            return {
+                className : overrideData.className,
+                rule      : rule
+            };
+            
+        }
+    },
+
+    createOverrideSelector : {
+        value: function(selectorToOverride, classPrefix, className) {
+            var tokens = selectorToOverride.split(/\s/),
+                newClass = className || this.generateClassName(classPrefix, true),
+                lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
 
             ///// Creating an overriding selector by replacing the last
             ///// class, attribute or type selector in passed-in rule's selector
-            
+
             ///// Grab the last token
             lastToken   = tokens[tokens.length-1];
             pseudoSplit = lastToken.split(':');
             ///// The last token can have pseudo class. Let's preserve it
             base   = pseudoSplit[0];
             pseudo = (pseudoSplit[1]) ? ':'+pseudoSplit[1] : '';
-            
+
             ///// Now, all we want to do is replace the last token with a
             ///// generated class name, except if the last token is an ID selector,
             ///// in which case we append the generated class name to the ID selector
@@ -231,18 +248,15 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 ///// Append the generated class
                 newToken += '.' + newClass + pseudo;
             }
-            
+
             ///// Now we can build the new selector by replacing the last token
             tokens[tokens.length-1] = newToken;
             newSelector = tokens.join(' ');
-            
-            rule = this.addRule(newSelector + ' { }', this.getRuleIndex(ruleToOverride)+1);
-            
+
             return {
                 className : newClass,
-                rule      : rule
+                selector  : newSelector
             };
-            
         }
     },
     
@@ -370,7 +384,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// from which an overriding rule can be created.
 
     getDominantRuleForGroup : {
-        value : function(elements, property) {
+        value : function(elements, property, forceOverride) {
             var selectorsToOverride = [],
                 commonRules, dominantRules, useImportant;
 
@@ -639,7 +653,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     },
     
     ///// Get Most Specific Selector For Element
-    ///// Given a selector+specificty array, find the most specific
+    ///// Given a selector+specificity array, find the most specific
     ///// selector for the passed-in element
     
     _getMostSpecificSelectorForElement : {
@@ -721,7 +735,11 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// Calculate specificity
     ///// Returns the specificity value of passed-in selector
     ///// WARNING: Do not pass in grouped selectors!
-    ///// Helpful for determining precedence of style rules   
+    ///// Helpful for determining precedence of style rules
+    ///// Calculation javascript code courtesy of David Owens:
+    ///// http://gbradley.com/2009/10/02/css-specificity-in-javascript
+    ///// Used with author's permission
+
     calculateSpecificity : {
         value : function(selector) {
             var s   = selector.replace(/\([^\)]+\)/,''),
@@ -922,6 +940,43 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
         }
     },
+
+    setGroupStyles : {
+        value : function(elements, styles) {
+            var properties = Object.keys(styles),
+                newClass = this.generateClassName(null, true),
+                selectors;
+
+            ///// TODO: move this: Locally-scoped function to de-clutter variable declarations
+            function getSelector(el, rule) {
+                return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
+            }
+
+            selectors = elements.map(function(el) {
+                ///// for each element, we want to find the most specific selector
+                var matchingRules = this.getMatchingRules(el, true);
+
+                this.addClass(el, newClass);
+
+                if(matchingRules.length === 0) {
+                    return null;
+                }
+
+                var mostSpecificRule = matchingRules[0], // TODO: iterate over properties to find most specific
+                    selectorToOverride = getSelector.bind(this)(el, mostSpecificRule),
+                    override = this.createOverrideSelector(selectorToOverride, null, newClass);
+
+                return override.selector;
+
+            }, this);
+
+            selectors.filter(function(item) {
+                return item !== null;
+            });
+
+            this.addRule(selectors.join(', '), styles);
+        }
+    },
     
     ///// Get Element Style
     ///// Gets the style value that is currently applied to the element
@@ -1058,6 +1113,21 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    ///// CSS From Object
+    ///// Returns css text from object with key/value pairs
+    ///// representing css styles
+
+    cssFromObject : {
+        value : function(obj) {
+            var cssText = '';
+            ///// For each key/value pair, create css text
+            for(var prop in obj) {
+                cssText += prop + ':' + obj[prop] + ';';
+            }
+            return cssText;
+        }
+    },
+
     /* ----------------- Element model (rule cache) related methods ----------------- */
 
     ///// Get Cached Rule For Property
-- 
cgit v1.2.3


From 82579a7aa6fc75e4a8cebde6628fc43275740079 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 16:55:34 -0800
Subject: Styles Controller - Add code to remove cache items from history (not
 just nullifying them)

---
 js/controllers/styles-controller.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

(limited to 'js')

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 8fc90e7d..6ba24aa6 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -736,7 +736,6 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// Returns the specificity value of passed-in selector
     ///// WARNING: Do not pass in grouped selectors!
     ///// Helpful for determining precedence of style rules
-    ///// Calculation javascript code courtesy of David Owens:
     ///// http://gbradley.com/2009/10/02/css-specificity-in-javascript
     ///// Used with author's permission
 
@@ -1177,15 +1176,24 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     _clearCache: {
         value: function(element) {
-            var itemsToClear = this._cacheHistory;
+            var itemsToNullify = this._cacheHistory,
+                itemsToRemove = [],
+                i;
+
 
+            ///// If clearing the cache for an element, filter by element
+            ///// and keep track of indices to remove from cache
             if(element) {
-                itemsToClear = itemsToClear.filter(function(item) {
-                    return item.element === element;
+                itemsToNullify = itemsToNullify.filter(function(item, index) {
+                    if(item.element === element) {
+                        itemsToRemove.push(index);
+                        return true;
+                    }
+                    return false;
                 });
             }
 
-            itemsToClear.forEach(function(item) {
+            itemsToNullify.forEach(function(item) {
                 //var identifier = item.element.nodeName;
                 //identifier += '#'+item.element.id || '.'+item.element.className;
                 //console.log("clearing cache for \"" + item.property +"\" and element \"" + identifier+ "");
@@ -1194,6 +1202,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 }
             });
 
+            ///// Remove the nullified items from the cache
+            ///// Start at the end to not mess up index references
+            for(i = itemsToRemove.length-1; i >= 0; i--) {
+                this._cacheHistory.splice(itemsToRemove[i], 1);
+            }
+
+            if(!element) {
+                this._cacheHistory = null;
+                this._cacheHistory = [];
+            }
+
         }
     },
     _removeCachedRuleForProperty : {
-- 
cgit v1.2.3


From 34bb4763344f14c8055bc45ea01e5307c424c1c0 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 16:56:57 -0800
Subject: Styles Controller - Correct author attribution for specificity
 calculation

---
 js/controllers/styles-controller.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'js')

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 6ba24aa6..1dd91c8d 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -736,6 +736,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// Returns the specificity value of passed-in selector
     ///// WARNING: Do not pass in grouped selectors!
     ///// Helpful for determining precedence of style rules
+    ///// Calculation javascript code courtesy of Graham Bradley:
     ///// http://gbradley.com/2009/10/02/css-specificity-in-javascript
     ///// Used with author's permission
 
-- 
cgit v1.2.3


From c8c78a82aa4ec8ad8b53c6240f3b144ca113cf05 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 16:57:33 -0800
Subject: Styles Controller - Add some methods for modifying css keyframe rules

---
 js/controllers/styles-controller.js | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

(limited to 'js')

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 1dd91c8d..21024125 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -804,7 +804,34 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             return browserValues;
         }
     },
-    
+
+    ///// Set Keyframe Style
+    ///// For a given CSSKeyframesRule, we may add a style to the keyframe at
+    ///// given index.
+
+    setKeyframeStyle : {
+        value : function(rule, keyframeIndex, property, value, useImportant) {
+            return this.setStyle(rule.cssRules[keyframeIndex], property, value, useImportant);
+        }
+    },
+
+    ///// Set Keyframe Styles
+    ///// For a given CSSKeyframesRule, we may add styles to the keyframe at
+    ///// given index.
+
+    setKeyframeStyle : {
+        value : function(rule, keyframeIndex, property, value, useImportant) {
+            return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant);
+        }
+    },
+
+    insertKeyframe : {
+        value : function() {
+
+        }
+    },
+
+
     ///// Delete style
     ///// Removes the property from the style declaration/rule
     ///// Returns the rule
-- 
cgit v1.2.3


From 22274815452d2add21b53466c7d49d07e90bfcc3 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 6 Feb 2012 17:43:58 -0800
Subject: initial integration of new tree components

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../ComponentsPanelBase.html                       |  37 +++++-
 .../ComponentsPanelBase.js                         | 127 ++++++++++++++++-----
 2 files changed, 131 insertions(+), 33 deletions(-)

(limited to 'js')

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index 1e040e35..a9dda673 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,7 +11,7 @@
 
         <script type="text/montage-serialization">
         {
-            "componentController": {
+            "componentControllerArrayTemp": {
                 "module": "montage/ui/controller/array-controller",
                 "name": "ArrayController",
                 "bindings": {
@@ -28,6 +28,38 @@
                 "properties": {
                     "element": {"#": "components_panel"}
                 }
+            },
+
+            "componentsController" : {
+                "module": "js/components/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "data2"
+                    }
+                }
+            },
+
+            "componentsTree" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "componentsContainer"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "componentsController"},
+                    "showRoot" : false
+                }
+            },
+
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
             }
         }
         </script>
@@ -37,8 +69,9 @@
     
     	<div id="components_panel" class="components_panel">
             <div class="treeHolder">
-                <ul id="comp_tree"></ul>
+               <ul id="comp_tree"></ul>
             </div>
+           <div id="componentsContainer"></div>
     	</div>
 
     </body>
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 51822150..338e7e0d 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -11,12 +11,74 @@ var Montage     = require("montage/core/core").Montage,
 var treeControlModule   = require("js/components/tree.reel");
 var PIData              = require("js/data/pi/pi-data").PiData;
 
+String.prototype.capitalizeFirstChar = function() {
+    return this.charAt(0).toUpperCase() + this.slice(1);
+};
+
+
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
     components: {
         value: null
     },
 
+    componentsToLoad: {
+        value: null
+    },
+
+    componentsLoaded: {
+        value: 0
+    },
+
+    data2: {
+            value: {
+                "text": "styles",
+                "children": [{
+                    "text": "Box Styles",
+                    "children": [
+                        {
+                            "text": "Border-Radius",
+                            "classNameBase" : "border-radius",
+                            "styles" : {
+                                "border-radius": "100px",
+                                "border" : "1px solid #333"
+                            }
+                        },
+                        {
+                            "text": "Drop Shadow",
+                            "classNameBase" : "drop-shadow",
+                            "styles" : {
+                                "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+                                "border" : "1px solid #CCC"
+                            }
+                        },
+                        {
+                            "text": "Fancy Box",
+                            "classNameBase" : "fancy-box",
+                            "styles" : {
+                                "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
+                                "border" : "1px solid #FFF",
+                                "border-radius": "30px",
+                                "background-color": "#7db9e8",
+                                "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+                            }
+                        }]
+                }, {
+                    "text": "Text Styles",
+                    "children": [
+                        { "text": "Italic" },
+                        { "text": "Text Shadow" },
+                        { "text": "Text Color" } ]
+                }, {
+                    "text": "Color Styles",
+                    "children": [
+                        { "text": "Background Gradient" },
+                        { "text": "Background Color" },
+                        { "text": "Text Highlight" } ]
+                }]
+            }
+        },
+
     _testButtonJson: {
         value: {
             "component": "button",
@@ -42,14 +104,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     didCreate: {
         value: function() {
-            this._loadComponents();
 
-//            var req = new XMLHttpRequest();
-//            req.identifier = "searchRequest";
-//            req.open("GET", url);
-//            req.addEventListener("load", this, false);
-//            req.addEventListener("error", this, false);
-//            req.send();
+            this._loadComponents();
 
         }
     },
@@ -61,6 +117,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 {name: "Textfield", data: "node_modules/components-data/textfield.json"}
             ];
 
+            this.componentsToLoad = this.components.length;
+
             // Build the PI objects for each component
             for(var i = 0, component; component = this.components[i]; i++) {
                 var req = new XMLHttpRequest();
@@ -70,39 +128,44 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                 req.addEventListener("error", this, false);
                 req.send();
 
-/*
-                var piIdentifier = component.name + "Pi";
-                var piObj = [];
-                var section = {};
+            }
+
+        }
+    },
+
+    handleLoad: {
+        value: function(evt) {
+            var response = JSON.parse(evt.target.responseText);
 
+            var component = response.component.capitalizeFirstChar();
 
-                section.label = component.name + " Properties";
-                section.Section = [];
+            var piIdentifier = component + "Pi";
+            var piObj = [];
+            var section = {};
 
-                for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) {
-                    var row = {};
-                    row.type = this.getControlType(props.type);
-                    row.id = props.name;
-                    row.prop = props.name;
-                    row.defaultValue = props["default"];
-                    row.label = props.name;
 
-                    section.Section.push([row]);
-                }
+            section.label = component + " Properties";
+            section.Section = [];
 
-                PIData[piIdentifier] = [];
-                PIData[piIdentifier].push(section);
-                */
+            for(var j = 0, props; props = response.properties[j]; j++) {
+                var row = {};
+                row.type = this.getControlType(props.type);
+                row.id = props.name;
+                row.prop = props.name;
+                row.defaultValue = props["default"];
+                row.label = props.name;
 
+                section.Section.push([row]);
             }
 
-        }
-    },
+            PIData[piIdentifier] = [];
+            PIData[piIdentifier].push(section);
 
-    handleLoad: {
-        value: function(evt) {
-            var response = JSON.parse(evt.target.responseText);
-            console.log(response);
+            this.componentsLoaded++;
+
+            if(this.componentsLoaded === this.componentsToLoad) {
+                console.log("all loaded");
+            }
 
         }
     },
@@ -123,6 +186,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     prepareForDraw: {
     	enumerable: false,
     	value: function() {
+
             var treeHolderDiv = document.getElementById("comp_tree");
             var componentsTree = treeControlModule.Tree.create();
             componentsTree.element = treeHolderDiv;
@@ -130,6 +194,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             componentsTree.needsDraw = true;
 
             this.eventManager.addEventListener( "executeAddComponent", this, false);
+
     	}
     },
 
-- 
cgit v1.2.3


From 18f687974273b5ed7374ca5ae440c797064c5d0f Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 7 Feb 2012 13:35:27 -0800
Subject: Presets Panel - Initial commit with panel content

---
 .../PanelContainer.reel/PanelContainer.js          |   4 +-
 js/panels/presets/content.reel/content.css         |  55 ++++++++++
 js/panels/presets/content.reel/content.html        |  66 ++++++++++++
 js/panels/presets/content.reel/content.js          | 106 ++++++++++++++++++
 js/panels/presets/presets-panel.js                 |  15 +++
 .../presets/style-presets.reel/style-presets.css   |   0
 .../presets/style-presets.reel/style-presets.html  |  58 ++++++++++
 .../presets/style-presets.reel/style-presets.js    | 119 +++++++++++++++++++++
 .../transitions-presets.css                        |   0
 .../transitions-presets.html                       |  58 ++++++++++
 .../transitions-presets.js                         |  67 ++++++++++++
 11 files changed, 547 insertions(+), 1 deletion(-)
 create mode 100644 js/panels/presets/content.reel/content.css
 create mode 100644 js/panels/presets/content.reel/content.html
 create mode 100644 js/panels/presets/content.reel/content.js
 create mode 100644 js/panels/presets/presets-panel.js
 create mode 100644 js/panels/presets/style-presets.reel/style-presets.css
 create mode 100644 js/panels/presets/style-presets.reel/style-presets.html
 create mode 100644 js/panels/presets/style-presets.reel/style-presets.js
 create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.css
 create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.html
 create mode 100644 js/panels/presets/transitions-presets.reel/transitions-presets.js

(limited to 'js')

diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 66333cc0..0569cc51 100644
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -15,6 +15,7 @@ var CSSPanel        = require("js/panels/CSSPanel/CSSPanel").CSSPanel;
 var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel;
 var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
 var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
+var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
 
 exports.PanelContainer = Montage.create(Component, {
     lastOffset: {
@@ -44,7 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel']
+        value: ['PresetsPanel','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel']
     },
 
     panelOrder: {
@@ -93,6 +94,7 @@ exports.PanelContainer = Montage.create(Component, {
 
 //            this.needsDraw = true;
 
+            this.addEventListener("change@appModel.PresetsPanel", this, false);
             this.addEventListener("change@appModel.PropertiesPanel", this, false);
             this.addEventListener("change@appModel.ProjectPanel", this, false);
             this.addEventListener("change@appModel.ColorPanel", this, false);
diff --git a/js/panels/presets/content.reel/content.css b/js/panels/presets/content.reel/content.css
new file mode 100644
index 00000000..a6a1545f
--- /dev/null
+++ b/js/panels/presets/content.reel/content.css
@@ -0,0 +1,55 @@
+.presetsPanel {
+    display: -webkit-box;
+    text-shadow: 1px 1px 0 #000;
+    -webkit-box-orient: vertical;
+    -webkit-box-flex: 1;
+}
+.presetsPanel .treeRoot {
+    margin: 0 8px;
+}
+.tab-bar {
+    -webkit-box-flex: 0;
+    background-color: #282828;
+    color: #FFF;
+    display: -webkit-box;
+    font-size: 12px;
+    -webkit-box-orient: horizontal;
+}
+
+.tab-bar div {
+    -webkit-box-flex: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    background-color: #474747;
+    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 3px);
+    border-top: 1px solid rgb(100, 100, 100);
+    border-left: 1px solid rgba(100, 100, 100, 0.3);
+    border-right: 1px solid rgba(100, 100, 100, 0.3);
+    padding: 4px 9px;
+    cursor: pointer;
+    opacity: 0.6;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    position: relative;
+    z-index: 999;
+}
+.tab-bar div.active-tab {
+    background-image: none;
+    box-shadow: 0 -5px 2px 3px rgba(0,0,0,0.2);
+    position: relative;
+    opacity: 1;
+    text-overflow: clip;
+    z-index: 1001;
+}
+
+.librarySlot {
+    -webkit-box-flex: 1;
+    overflow: auto;
+    background-color: #474747;
+
+    color: #FFF;
+
+    position: relative;
+    z-index: 1000;
+}
\ No newline at end of file
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
new file mode 100644
index 00000000..38de2a6d
--- /dev/null
+++ b/js/panels/presets/content.reel/content.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" href="content.css" type="text/css">
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/presets/content.reel",
+                "name" : "Content",
+                "properties" : {
+                    "element" : {"#" : "presetsPanel"},
+                    "activeTabIndex": 0,
+                    "tabBar" : {"#": "tab-bar" },
+                    "tabs" : [
+                        {"key":"styles", "tab": {"#": "styles" }},
+                        {"key":"transitions", "tab": {"#": "transitions" }}
+                    ]
+                }
+            },
+            "substitution": {
+                "module": "montage/ui/substitution.reel",
+                "name": "Substitution",
+                "properties": {
+                    "element": {"#": "librarySlot"},
+                    "switchComponents": {
+                        "styles": {"@": "stylesLibrary"},
+                        "transitions": {"@": "transitionsLibrary"}
+
+                    }
+                },
+                "bindings": {
+                    "switchValue": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "contentPanel",
+                        "oneway": true
+                    }
+                }
+            },
+            "stylesLibrary": {
+                "module": "js/panels/presets/style-presets.reel",
+                "name": "StylesLibrary"
+            },
+            "transitionsLibrary": {
+                "module": "js/panels/presets/transitions-presets.reel",
+                "name": "TransitionsLibrary"
+            }
+
+    	}
+		</script>
+</head>
+<body>
+    <section id="presetsPanel" class="presetsPanel">
+        <nav id="tab-bar" class="tab-bar">
+            <div id="styles">Style Library</div>
+            <div id="transitions">Transitions Library</div>
+        </nav>
+        <div id="librarySlot" class="librarySlot"></div>
+    </section>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/presets/content.reel/content.js b/js/panels/presets/content.reel/content.js
new file mode 100644
index 00000000..8ddb3757
--- /dev/null
+++ b/js/panels/presets/content.reel/conte