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 --- js/panels/Components/Components.xml | 22 ------------- .../ComponentsPanelBase.js | 36 +++++++++++++--------- 2 files changed, 22 insertions(+), 36 deletions(-) (limited to 'js/panels/Components') 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 @@ - - - - - - - - - - - - - - - - - - - - - - \ 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 --- .../ComponentsPanelBase.js | 33 ++++++++-------------- 1 file changed, 12 insertions(+), 21 deletions(-) (limited to 'js/panels/Components') 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.html | 11 ++++++++ .../ComponentsPanelBase.js | 29 +++++++++++++++++++--- 2 files changed, 36 insertions(+), 4 deletions(-) (limited to 'js/panels/Components') 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 @@ @@ -37,8 +69,9 @@
-
    +
      +
      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 --- js/panels/Components/Components.xml | 6 - .../ComponentsPanelBase.html | 19 +-- .../ComponentsPanelBase.js | 172 +++++++-------------- 3 files changed, 63 insertions(+), 134 deletions(-) delete mode 100644 js/panels/Components/Components.xml (limited to 'js/panels/Components') 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 @@ - - - - - - \ 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 @@