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 --- .../ComponentsPanelBase.js | 36 +++++++++++++--------- 1 file changed, 22 insertions(+), 14 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') 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 --- .../ComponentsPanelBase.js | 33 ++++++++-------------- 1 file changed, 12 insertions(+), 21 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') 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 --- .../ComponentsPanelBase.js | 29 +++++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') 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/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.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 --- .../ComponentsPanelBase.reel/ComponentsPanelBase.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.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 --- .../ComponentsPanelBase.js | 60 +++++++++++++++++++--- 1 file changed, 52 insertions(+), 8 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') 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. */ -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 --- .../ComponentsPanelBase.js | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.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 --- .../ComponentsPanelBase.js | 127 ++++++++++++++++----- 1 file changed, 96 insertions(+), 31 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') 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 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 --- .../ComponentsPanelBase.js | 172 +++++++-------------- 1 file changed, 60 insertions(+), 112 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') 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 ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component 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) { + this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) { var styles = { 'position': 'absolute', @@ -270,11 +207,22 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component makeComponent: { value: function(name) { - var el; - el = NJUtils.makeNJElement(name, "Button", "component"); - el.elementModel.pi = "ButtonPi"; - el.setAttribute("type", "button"); - return el; + switch(name) { + case "button": + var el; + el = NJUtils.makeNJElement(name, "Button", "component"); + el.elementModel.pi = "ButtonPi"; + el.setAttribute("type", "button"); + return el; + case "textfield": { + var el; + el = NJUtils.makeNJElement(name, "Text Field", "component"); + el.elementModel.pi = "TextfieldPi"; + el.setAttribute("type", "text"); + return el; + } + } + } }, -- cgit v1.2.3 From 1857d4dde728412843c910265ea3bae20780ab54 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 9 Feb 2012 14:41:13 -0800 Subject: code cleanup, light refactor and now adding components at the center stage point. Signed-off-by: Valerio Virgillito --- .../ComponentsPanelBase.js | 148 +++++++-------------- 1 file changed, 48 insertions(+), 100 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 4828839b..33241d42 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -31,7 +31,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component "component": "button" }, { - "text": "Text Field", + "text": "Textfield", "dataFile" : "node_modules/components-data/textfield.json", "component": "textfield" } @@ -53,20 +53,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component value: 0 }, + centerStage: { + value: null + }, + didCreate: { value: function() { // Loop through the component and load the JSON data for them this._loadComponents(); - } }, + // Load all the data files for each component + // TODO: Implement the error case _loadComponents: { value: function() { this.componentsToLoad = this.components.children[0].children.length; - // Build the PI objects for each component for(var i = 0, component; component = this.components.children[0].children[i]; i++) { var req = new XMLHttpRequest(); //req.identifier = "searchRequest"; @@ -74,25 +78,22 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component req.addEventListener("load", this, false); req.addEventListener("error", this, false); req.send(); - } - - } }, handleLoad: { value: function(evt) { - var componentData = JSON.parse(evt.target.responseText); - - //var component = response.component.capitalizeFirstChar(); - var component = componentData.name; + var componentData, component, piID, piObj, section; - var piIdentifier = component + "Pi"; - var piObj = []; - var section = {}; + componentData = JSON.parse(evt.target.responseText); + component = componentData.name; + // Build the PI data and create a new object for Ninja PI + piID = component + "Pi"; + piObj = []; + section = {}; section.label = component + " Properties"; section.Section = []; @@ -107,21 +108,23 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component section.Section.push([row]); } - PIData[piIdentifier] = []; - PIData[piIdentifier].push(section); + PIData[piID] = []; + PIData[piID].push(section); - // Setup the componentsData + // Setup the component hash object to store references to each component data this.componentsData[componentData.component] = componentData; this.componentsLoaded++; if(this.componentsLoaded === this.componentsToLoad) { - console.log("all loaded"); + // console.log("all loaded"); + // Here we need to stop some sort of loading animation } } }, + // PI conversion method. This will convert the property type into a Ninja component getControlType: { value: function(type) { switch(type) { @@ -137,27 +140,15 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component 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); - + //console.log(selection); + //console.log(this.componentsData[selection.component]); + this.addComponentToStage(this.componentsData[selection.component]); } }, - _stash: { - value: {} - }, - + // This method will be used once we handle drag and drop handleExecuteAddComponent: { value: function(evt) { - //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); } }, @@ -168,17 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component value: function(component) { var that = this; var element = this.makeComponent(component.component); + this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) { + var pos = that.getStageCenter(); + var styles = { 'position': 'absolute', - 'top' : that._stash.dropy + 'px', - 'left' : that._stash.dropx + 'px', + 'left' : pos[0] + 'px', + 'top' : pos[1] + '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}); @@ -186,25 +179,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component } }, - 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}); - - } - }, - makeComponent: { value: function(name) { switch(name) { @@ -216,7 +190,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component return el; case "textfield": { var el; - el = NJUtils.makeNJElement(name, "Text Field", "component"); + el = NJUtils.makeNJElement("input", "Text Field", "component"); el.elementModel.pi = "TextfieldPi"; el.setAttribute("type", "text"); return el; @@ -243,52 +217,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component compW = 53; compH = 53; // elementType = "input"; - }else if(componentType == "DynamicText"){ - compW = 100; - compH = 20; - }else if(componentType == "FlowController"){ - compW = 800; - compH = 320; - }else if(componentType == "HotText"){ - compW = 50; - compH = 18; -// elementType = "input"; - }else if(componentType == "HotTextUnit"){ - compW = 45; - compH = 18; - }else if(componentType == "ImageContainer"){ - compW = 285; - compH = 232; - }else if(componentType == "Progress"){ - compW = 300; - compH = 9; - }else if(componentType == "Scrollview"){ - compW = 200; - compH = 200; - }else if(componentType == "Slider"){ - compW = 200; - compH = 55; - }else if(componentType == "TextArea"){ - compW = 312; - compH = 112; - elementType = "textarea"; - }else if(componentType == "Textfield"){ - compW = 312; - compH = 34; - elementType = "input"; - }else if(componentType == "Toggle"){ - compW = 60; - compH = 22; - elementType = "span"; - }else if(componentType == "ToggleButton"){ - compW = 118; - compH = 52; - }else{ - compW = 100; - compH = 25; } - /* componentContainer = NJUtils.makeNJElement("div", componentType, "component"); componentContainer.elementModel.isComponent = true; @@ -318,6 +248,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component + } + }, + + /** + * + */ + getStageCenter: { + value: function() { + //if(!this.centerStage) { + var top, left; + + top = ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "height"))) / 2); + left = ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "width"))) / 2); + //this.centerStage = [top, left]; + return [left, top]; + //} + + //return this.centerStage; } } }); \ No newline at end of file -- cgit v1.2.3 From 47df0aff81c25334b129047bb227ea5015357eda Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 9 Feb 2012 16:22:03 -0800 Subject: Setting defaults and more cleanup Signed-off-by: Valerio Virgillito --- .../ComponentsPanelBase.js | 65 +++------------------- 1 file changed, 8 insertions(+), 57 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 33241d42..953c0484 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -160,7 +160,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component var that = this; var element = this.makeComponent(component.component); - this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) { + this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) { var pos = that.getStageCenter(); @@ -181,73 +181,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component makeComponent: { value: function(name) { + var el; + switch(name) { case "button": - var el; el = NJUtils.makeNJElement(name, "Button", "component"); el.elementModel.pi = "ButtonPi"; el.setAttribute("type", "button"); - return el; + el.innerHTML = "Button"; + break; case "textfield": { - var el; - el = NJUtils.makeNJElement("input", "Text Field", "component"); + el = NJUtils.makeNJElement("input", "Textfield", "component"); el.elementModel.pi = "TextfieldPi"; el.setAttribute("type", "text"); - return el; + break; } } - } - }, - - ___addComponentToStage:{ - value:function(component, dropX, dropY){ -// var compW = 100, -// compH = 100, -// - var componentEl, componentInstance; - - if(componentType == "Button"){ - componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"}); - componentEl.setAttribute("type", "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; -// elementType = "input"; - } - - /* - 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', - '-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); - - this.application.ninja.currentDocument.setComponentInstance(componentInstance, componentEl); - - NJevent("elementAdding", {"el": componentEl, "data":styles}); - /* - var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType); - - */ - - - + return el; } }, -- cgit v1.2.3 From 0eb739ab722ea768ab0fa1c5de0ee09ed1a576ea Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 14 Feb 2012 00:25:45 -0800 Subject: Add support for drag and drop for the components. Signed-off-by: Valerio Virgillito --- .../ComponentsPanelBase.js | 63 +++++++++++++++++----- 1 file changed, 49 insertions(+), 14 deletions(-) (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js') diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 953c0484..7e5a76ee 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -53,12 +53,27 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component value: 0 }, + dragComponent: { + value: null + }, + + dragPosition: { + value: null + }, + centerStage: { value: null }, + + /********************************************************************* + * Components Tree and Model Creation + *********************************************************************/ + didCreate: { value: function() { + // Setup the drop delegate + this.application.ninja.dragDropMediator.dropDelegate = this; // Loop through the component and load the JSON data for them this._loadComponents(); } @@ -138,36 +153,56 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component } }, - applySelection: { - value: function(selection) { - //console.log(selection); - //console.log(this.componentsData[selection.component]); - this.addComponentToStage(this.componentsData[selection.component]); + /********************************************************************* + * Handle Tree / Drag-Drop events + *********************************************************************/ + + handleDblclick: { + value: function(obj) { + this.addComponentToStage(this.componentsData[obj.component]); } }, - // This method will be used once we handle drag and drop - handleExecuteAddComponent: { - value: function(evt) { + handleDragStart: { + value: function(obj, event) { + this.dragComponent = obj; + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/plain', 'componentDrop'); + } + }, + + handleComponentDrop: { + value: function(left, top) { + this.addComponentToStage(this.componentsData[this.dragComponent.component], [left, top]); } }, + /** * 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); + value: function(component, position) { + var that, element; + + // Check for position. If none then center on the stage + if(position) { + this.dragPosition = position; + } else { + this.dragPosition = this.getStageCenter(); + + } + that = this; + element = this.makeComponent(component.component); this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) { - var pos = that.getStageCenter(); + //var pos = that.getStageCenter(); var styles = { 'position': 'absolute', - 'left' : pos[0] + 'px', - 'top' : pos[1] + 'px', + 'left' : that.dragPosition[0] + 'px', + 'top' : that.dragPosition[1] + '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)' }; -- cgit v1.2.3