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 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 5f506542d28e12b707c3bfa41b53383519838477 Mon Sep 17 00:00:00 2001
From: Armen Kesablyan
Date: Tue, 7 Feb 2012 16:50:27 -0800
Subject: Revert "Initial Text Tool Implementation"

This reverts commit 2082fa6912eec2ffabd2081b7706e8e1b88a9711.
---
 js/panels/CSSPanel/CSSPanel.js |  6 +--
 js/stage/stage.reel/stage.html | 12 +-----
 js/stage/stage.reel/stage.js   |  7 ---
 js/tools/TextTool.js           | 96 +++---------------------------------------
 4 files changed, 10 insertions(+), 111 deletions(-)

(limited to 'js')

diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js
index cf8880a3..94860b30 100644
--- a/js/panels/CSSPanel/CSSPanel.js
+++ b/js/panels/CSSPanel/CSSPanel.js
@@ -20,9 +20,9 @@ exports.CSSPanel = Montage.create(PanelBase, {
     init : {
         enumerable:true,
         value : function (){
-            this.minHeight = 195;
-            this.contentHeight = 195;
-            this.defaultHeight= 195;
+            this.minHeight = 300;
+            this.contentHeight = 300;
+            this.defaultHeight= 300;
 
             /* OLD WAY -- Removing the temporary div
             // TODO: Remove this comment once this is tested.
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 07b823a7..49d10baf 100644
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -34,14 +34,6 @@
                     }
                 }
             },
-
-            "textTool": {
-                "module": "montage/ui/rich-text-editor.reel",
-                "name": "RichTextEditor",
-                "properties": {
-                    "element" : {"#": "textToolObject"}
-                }
-            },
             
             "owner": {
                 "module": "js/stage/stage.reel",
@@ -54,8 +46,7 @@
                     "_canvas":  {"#": "stageCanvas"},
                     "_drawingCanvas":  {"#": "drawingCanvas"},
                     "stageDeps": {"@": "StageDeps1"},
-                    "layout":   {"@": "layout1"},
-                    "textTool": {"@": "textTool"}
+                    "layout":   {"@": "layout1"}
                 },
                 "bindings": {
                     "currentDocumentStageView": {
@@ -73,7 +64,6 @@
 
     <section id="stageAndScenesContainer" class="stageAndScenesContainer">
         <section id="iframeContainer"></section>
-        <section id="textToolObject">asdasd asd asd asd asd asd </section>
         <section id="codeViewContainer"></section>
         <canvas id="layoutCanvas"></canvas>
         <canvas id="stageCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 96bfccdd..3e0b852e 100644
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -12,7 +12,6 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 exports.Stage = Montage.create(Component, {
 
-    textTool: { value: null },
     // TODO - Need to figure out how to remove this dependency
     // Needed by some tools that depend on selectionDrawn event to set up some logic
     drawNow: { value : false },
@@ -781,12 +780,6 @@ exports.Stage = Montage.create(Component, {
         }
     },
 
-    toViewportCoordinates: {
-        value: function(x,y) {
-            return [x + this._userContentLeft, y + this._userContentTop];
-        }
-    },
-
     setZoom: {
         value: function(value) {
             if(!this._firstDraw)
diff --git a/js/tools/TextTool.js b/js/tools/TextTool.js
index 8b48ff4f..538583ee 100644
--- a/js/tools/TextTool.js
+++ b/js/tools/TextTool.js
@@ -6,30 +6,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage,
     DrawingTool = require("js/tools/drawing-tool").DrawingTool;
-    RichTextEditor = require("montage/ui/rich-text-editor.reel").RichTextEditor;
 
 exports.TextTool = Montage.create(DrawingTool, {
-
-    _selectedElement: { value : null },
-
-    selectedElement: {
-        get: function() {
-            return this._selectedElement;
-        },
-        set: function(val) {
-            if(this._selectedElement !== null) {
-                
-            }
-            this._selectedElement = val;
-        }
-    },
-    
-
     drawingFeedback: { value: { mode: "Draw3D", type: "rectangle" } },
 
     HandleLeftButtonDown: {
         value: function(event) {
-            this.deselectText();
             this.startDraw(event);
         }
     },
@@ -68,88 +50,24 @@ exports.TextTool = Montage.create(DrawingTool, {
                 if(drawData) {
                     //this.insertElement(drawData);
                 }
-                
+
                 this._hasDraw = false;
                 this.endDraw(event);
             } else {
+
                 this.doSelection(event);
-                console.log("im here");
-                if (this.application.ninja.selectedElements.length !== 0 ) {
-                    this.selectedElement = this.application.ninja.selectedElements[0]._element;
-                    this.drawTextTool();
-                }
 
                 this._isDrawing = false;
             }
         }
     },
 
-    applyElementStyles : {
-        value: function(fromElement, toElement, styles) {
-            styles.forEach(function(style) {
-                var styleCamelCase = style.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
-                console.log(styleCamelCase, style, window.getComputedStyle(fromElement)[style]);
-                toElement.style[styleCamelCase] = window.getComputedStyle(fromElement)[style];
-            }, this);
-        }
-    },
-
-    drawTextTool: {
-        value: function() {
-            console.log(" now im here");
-            this.application.ninja.stage.textTool.value = this.selectedElement.innerHTML;
-            if(this.application.ninja.stage.textTool.value === "") { this.application.ninja.stage.textTool.value = " "; }
-            this.selectedElement.innerHTML = "";
-
-            //Styling Options for text tool to look identical to the text you are manipulating.
-            this.application.ninja.stage.textTool.element.style.display = "block";
-            this.application.ninja.stage.textTool.element.style.position = "absolute";
-
-            // Set Top & Left Positions
-            var textToolCoordinates = this.application.ninja.stage.toViewportCoordinates(this.selectedElement.offsetLeft, this.selectedElement.offsetTop);
-            this.application.ninja.stage.textTool.element.style.left = textToolCoordinates[0] + "px";
-            this.application.ninja.stage.textTool.element.style.top = textToolCoordinates[1] + "px";
-
-            // Set Width, Height
-            this.application.ninja.stage.textTool.element.style.width = this.selectedElement.offsetWidth + "px";
-            this.application.ninja.stage.textTool.element.style.height = this.selectedElement.offsetHeight + "px";
-
-
-            // Set font styling (Size, Style, Weight)
-
-            me = this;
-            this.application.ninja.stage.textTool.didDraw = function() {
-                me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element, ["overflow"]);
-                me.applyElementStyles(me.selectedElement, me.application.ninja.stage.textTool.element.firstChild, ["font","padding-left","padding-top","padding-right","padding-bottom", "color"]);
-                var range = document.createRange(),
-                sel   = window.getSelection();
-                sel.removeAllRanges();
-                range.selectNodeContents(this.application.ninja.stage.textTool.element.firstChild);
-                sel.addRange(range);
-                this.didDraw = function() {};
-                console.log("im drew here");
-            }
-            console.log("i end here");
-        }
-    },
-
-
-    deselectText: {
-        value: function() {
-            this.application.ninja.stage.textTool.element.style.display = "none";
-            this.selectedElement.innerHTML = this.application.ninja.stage.textTool.value;
-            this.application.ninja.stage.textTool.value = "";
-        }
-    },
-
     HandleDoubleClick: {
         value: function(e) {
-            //this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
-
-            //if (!this.application.ninja.textTool) {
-
-            //}
-
+            console.log(this.application.ninja.selectedElements[0]._element);
+            this.application.ninja.selectedElements[0]._element.setAttribute("contenteditable", true);
+            this.application.ninja.stage._iframeContainer.style.zIndex = 200;
+            this.application.ninja.selectedElements[0]._element.focus();
 
 
         }
@@ -157,12 +75,10 @@ exports.TextTool = Montage.create(DrawingTool, {
 
     Configure: {
         value: function(wasSelected) {
-            
             if(wasSelected) {
                 NJevent("enableStageMove");
                 this.application.ninja.stage.stageDeps.snapManager.setupDragPlaneFromPlane( workingPlane );
             } else {
-                this.deselectText();
                 NJevent("disableStageMove");
             }
         }
-- 
cgit v1.2.3


From e2539230b8a297fa972af6d53fe9de3ef2ad43fa Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 9 Feb 2012 00:52:39 -0800
Subject: Switching the components panel to use the new ninja tree component.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 .../treeview/ninja-leaf.reel/ninja-leaf.js         |   6 +-
 js/panels/Components/Components.xml                |   6 -
 .../ComponentsPanelBase.html                       |  19 +--
 .../ComponentsPanelBase.js                         | 172 +++++++--------------
 4 files changed, 66 insertions(+), 137 deletions(-)
 delete mode 100644 js/panels/Components/Components.xml

(limited to 'js')

diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
index bd566b26..ec2e7495 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -19,14 +19,14 @@ exports.Leaf = Montage.create(TreeNode, {
     },
     prepareForDraw: {
         value : function() {
-            this.activationEvent = this.activationEvent || 'click';
+            this.activationEvent = this.activationEvent || 'dblclick';
             this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);
         }
     },
     handleNodeActivation: {
         value: function(e) {
-            console.log(this.sourceObject);
-            this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);
+            //console.log(this.sourceObject);
+            this.treeView.contentController.delegate.applySelection(this.sourceObject);
         }
     },
     draw : {
diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
deleted file mode 100644
index e076602e..00000000
--- a/js/panels/Components/Components.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<tree id="Components">
-    <folder id="montageComponents" label="Montage Components">
-        <leaf id="Button" label="Button" />
-    </folder>
-</tree>
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index a9dda673..6d7c8a2c 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,22 +11,12 @@
 
         <script type="text/montage-serialization">
         {
-            "componentControllerArrayTemp": {
-                "module": "montage/ui/controller/array-controller",
-                "name": "ArrayController",
-                "bindings": {
-                    "content": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "components"
-                    }
-                }
-            },
-
             "owner": {
                 "module": "js/panels/Components/ComponentsPanelBase.reel",
                 "name": "ComponentsPanelBase",
                 "properties": {
-                    "element": {"#": "components_panel"}
+                    "element": {"#": "components_panel"},
+                    "controller": {"@": "componentsTree"}
                 }
             },
 
@@ -41,7 +31,7 @@
                 "bindings": {
                     "content": {
                         "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "data2"
+                        "boundObjectPropertyPath": "components"
                     }
                 }
             },
@@ -68,9 +58,6 @@
 	<body>
     
     	<div id="components_panel" class="components_panel">
-            <div class="treeHolder">
-               <ul id="comp_tree"></ul>
-            </div>
            <div id="componentsContainer"></div>
     	</div>
 
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 338e7e0d..4828839b 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -19,7 +19,30 @@ String.prototype.capitalizeFirstChar = function() {
 var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
 
     components: {
-        value: null
+        value: {
+            "text": "styles",
+            "children": [
+                {
+                    "text": "Montage Components",
+                    "children": [
+                        {
+                            "text": "Button",
+                            "dataFile" : "node_modules/components-data/button.json",
+                            "component": "button"
+                        },
+                        {
+                            "text": "Text Field",
+                            "dataFile" : "node_modules/components-data/textfield.json",
+                            "component": "textfield"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+
+    componentsData: {
+        value: {}
     },
 
     componentsToLoad: {
@@ -30,81 +53,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         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",
-
-            "module": "montage/ui/button.reel",
-
-            "name": "Button",
-
-            "properties": [
-                {
-                    "name": "label",
-                    "type": "string",
-                    "default": "Button"
-                },
-                {
-                    "name": "enabled",
-                    "type": "boolean",
-                    "default": "true"
-                }
-            ]
-        }
-    },
-
     didCreate: {
         value: function() {
-
+            // Loop through the component and load the JSON data for them
             this._loadComponents();
 
         }
@@ -112,32 +63,30 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
     _loadComponents: {
         value: function() {
-            this.components = [
-                {name: "Button", data: "node_modules/components-data/button.json"},
-                {name: "Textfield", data: "node_modules/components-data/textfield.json"}
-            ];
 
-            this.componentsToLoad = this.components.length;
+            this.componentsToLoad = this.components.children[0].children.length;
 
             // Build the PI objects for each component
-            for(var i = 0, component; component = this.components[i]; i++) {
+            for(var i = 0, component; component = this.components.children[0].children[i]; i++) {
                 var req = new XMLHttpRequest();
                 //req.identifier = "searchRequest";
-                req.open("GET", component.data);
+                req.open("GET", component.dataFile);
                 req.addEventListener("load", this, false);
                 req.addEventListener("error", this, false);
                 req.send();
 
             }
 
+
         }
     },
 
     handleLoad: {
         value: function(evt) {
-            var response = JSON.parse(evt.target.responseText);
+            var componentData = JSON.parse(evt.target.responseText);
 
-            var component = response.component.capitalizeFirstChar();
+            //var component = response.component.capitalizeFirstChar();
+            var component = componentData.name;
 
             var piIdentifier = component + "Pi";
             var piObj = [];
@@ -147,7 +96,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             section.label = component + " Properties";
             section.Section = [];
 
-            for(var j = 0, props; props = response.properties[j]; j++) {
+            for(var j = 0, props; props = componentData.properties[j]; j++) {
                 var row = {};
                 row.type = this.getControlType(props.type);
                 row.id = props.name;
@@ -161,6 +110,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
             PIData[piIdentifier] = [];
             PIData[piIdentifier].push(section);
 
+            // Setup the componentsData
+            this.componentsData[componentData.component] = componentData;
+
             this.componentsLoaded++;
 
             if(this.componentsLoaded === this.componentsToLoad) {
@@ -183,29 +135,14 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
         }
     },
 
-    prepareForDraw: {
-    	enumerable: false,
-    	value: function() {
+    applySelection: {
+        value: function(selection) {
+            console.log(selection);
+            console.log(this.componentsData[selection.component]);
+            this._stash.dropx = 200;
+            this._stash.dropy = 200;
+            this.addComponentToStage(this.componentsData[selection.component]);// evt.detail.dropX, evt.detail.dropY);
 
-            var treeHolderDiv = document.getElementById("comp_tree");
-            var componentsTree = treeControlModule.Tree.create();
-            componentsTree.element = treeHolderDiv;
-            componentsTree.dataProvider = this._loadXMLDoc("js/panels/Components/Components.xml");
-            componentsTree.needsDraw = true;
-
-            this.eventManager.addEventListener( "executeAddComponent", this, false);
-
-    	}
-    },
-
-    _loadXMLDoc: {
-        value:function(dname) {
-            if (window.XMLHttpRequest) {
-                xhttp = new XMLHttpRequest();
-            }
-            xhttp.open("GET", dname, false);
-            xhttp.send();
-            return xhttp.responseXML;
         }
     },
 
@@ -231,7 +168,7 @@ var