From 6b9bfb63f6bc22ef1095dc11816826bb83a2c408 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 26 Mar 2012 15:55:38 -0700 Subject: Cleanup of the components panel Renamed to naming convention. Deleted un-used file. Signed-off-by: Valerio Virgillito --- .../components-panel.reel/components-panel.js | 423 +++++++++++++++++++++ 1 file changed, 423 insertions(+) create mode 100755 js/panels/components-panel.reel/components-panel.js (limited to 'js/panels/components-panel.reel/components-panel.js') diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js new file mode 100755 index 00000000..9252b7b8 --- /dev/null +++ b/js/panels/components-panel.reel/components-panel.js @@ -0,0 +1,423 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(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 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); +}; + + +exports.ComponentsPanel = Montage.create(Component, { + + components: { + value: { + "text": "styles", + "children": [ + { + "text": "Widgets", + "children": [ + { + "text": "Feed Reader", + "dataFile" : "node_modules/components-data/feed-reader.json", + "component": "feedreader" + }, + { + "text": "Map", + "dataFile" : "node_modules/components-data/map.json", + "component": "map" + }, + { + "text": "Picasa Carousel", + "dataFile" : "node_modules/components-data/picasa-carousel.json", + "component": "picasa-carousel" + }, + { + "text": "Search Bar", + "dataFile" : "node_modules/components-data/searchfield.json", + "component": "searchfield" + }, + { + "text": "Youtube Channel", + "dataFile" : "node_modules/components-data/youtube-channel.json", + "component": "youtube-channel" + } + ] + }, + { + "text": "Montage Components", + "children": [ + { + "text": "Anchor", + "dataFile" : "node_modules/components-data/anchor.json", + "component": "anchor" + }, + { + "text": "Button", + "dataFile" : "node_modules/components-data/button.json", + "component": "button" + }, + { + "text": "Checkbox", + "dataFile" : "node_modules/components-data/checkbox.json", + "component": "checkbox" + }, + { + "text": "Image Component", + "dataFile" : "node_modules/components-data/image.json", + "component": "imageComponent" + }, + { + "text": "NumberInput", + "dataFile" : "node_modules/components-data/number-input.json", + "component": "numberInput" + }, + { + "text": "Select Input", + "dataFile" : "node_modules/components-data/select.json", + "component": "select" + }, + { + "text": "Radio Button", + "dataFile" : "node_modules/components-data/radio-button.json", + "component": "radioButton" + }, + { + "text": "Range Input", + "dataFile" : "node_modules/components-data/range-input.json", + "component": "rangeInput" + }, + { + "text": "TextArea", + "dataFile" : "node_modules/components-data/textarea.json", + "component": "textarea" + }, + { + "text": "Textfield", + "dataFile" : "node_modules/components-data/textfield.json", + "component": "textfield" + }, + { + "text": "Toogle Button", + "dataFile" : "node_modules/components-data/toggle-button.json", + "component": "toggleButton" + } + ] + } + ] + } + }, + + componentsData: { + value: {} + }, + + componentsToLoad: { + value: null + }, + + componentsLoaded: { + 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(); + } + }, + + // Load all the data files for each component + // TODO: Implement the error case + _loadComponents: { + value: function() { + + for(var cat in this.components.children) { + + this.componentsToLoad += this.components.children[cat].children.length; + + for(var i = 0, component; component = this.components.children[cat].children[i]; i++) { + var req = new XMLHttpRequest(); + //req.identifier = "searchRequest"; + req.open("GET", component.dataFile); + req.addEventListener("load", this, false); + req.addEventListener("error", this, false); + req.send(); + } + + } + } + }, + + handleLoad: { + value: function(evt) { + var componentData, component, piID, piObj, 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 = []; + + for(var j = 0, props; props = componentData.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; + row.items = props.possibleValues; + + section.Section.push([row]); + } + + PIData[piID] = []; + PIData[piID].push(section); + + // 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"); + // 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) { + case "string": + return "textbox"; + case "boolean": + return "checkbox"; + case "select": + return "dropdown"; + case "number": + return "hottext"; + default: + alert("Conversion not implemented for ", type); + } + } + }, + + /********************************************************************* + * Handle Tree / Drag-Drop events + *********************************************************************/ + + handleDblclick: { + value: function(obj) { + this.addComponentToStage(this.componentsData[obj.component]); + } + }, + + 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, 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 styles = { + 'position': 'absolute', + '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)' + }; + + var defaultStyles = component.defaultStyles; + if(defaultStyles) { + for(var n in defaultStyles) { + styles[n] = defaultStyles[n]; + } + } + + instance.addEventListener('firstDraw', that, false); + + that.application.ninja.currentDocument.setComponentInstance(instance, element); + + NJevent("elementAdding", {"el": element, "data":styles}); + }); + + } + }, + + handleFirstDraw: { + value: function (e) { + NJevent("addComponentFirstDraw"); + } + }, + + makeComponent: { + value: function(name) { + var el; + + switch(name) { + case "anchor": + el = NJUtils.makeNJElement("a", "Anchor", "component"); + el.elementModel.pi = "AnchorPi"; + el.setAttribute("href", "http://www.motorola.com"); + el.innerHTML = "link"; + break; + case "button": + el = NJUtils.makeNJElement(name, "Button", "component"); + el.elementModel.pi = "ButtonPi"; + el.setAttribute("type", "button"); + el.innerHTML = "Button"; + break; + case "checkbox": + el = NJUtils.makeNJElement("input", "Checkbox", "component"); + el.elementModel.pi = "CheckboxPi"; + el.setAttribute("type", "checkbox"); + break; + case "imageComponent": + el = NJUtils.makeNJElement("image", "Image", "component"); + el.elementModel.pi = "ImagePi"; + el.setAttribute("width", 200); + el.setAttribute("height", 200); + break; + case "numberInput": + el = NJUtils.makeNJElement("input", "Number Input", "component"); + el.elementModel.pi = "NumberInputPi"; + el.setAttribute("type", "number"); + break; + case "select": + el = NJUtils.makeNJElement("select", "Select", "component"); + el.elementModel.pi = "SelectInputPi"; + break; + case "radioButton": + el = NJUtils.makeNJElement("input", "Radio Button", "component"); + el.elementModel.pi = "RadioButtonPi"; + el.setAttribute("type", "radio"); + break; + case "rangeInput": + el = NJUtils.makeNJElement("input", "Range Input", "component"); + el.elementModel.pi = "RangeInputPi"; + el.setAttribute("type", "range"); + break; + case "textfield": + case "searchfield": + el = NJUtils.makeNJElement("input", "Textfield", "component"); + el.elementModel.pi = "TextfieldPi"; + el.setAttribute("type", "text"); + break; + case "textarea": + el = NJUtils.makeNJElement("textarea", "TextArea", "component"); + el.elementModel.pi = "TextAreaPi"; + break; + case "toggleButton": + el = NJUtils.makeNJElement("button", "Toggle Button", "component"); + el.elementModel.pi = "ToggleButtonPi"; + el.innerHTML = "Off"; + break; + case "map": + el = NJUtils.makeNJElement("div", "Map", "component"); + el.elementModel.pi = "MapPi"; + el.elementModel.isComponent = true; + break; + case "feedreader": + el = NJUtils.makeNJElement("div", "Feed Reader", "component"); + el.elementModel.pi = "FeedReaderPi"; + el.elementModel.isComponent = true; + break; + case "picasa-carousel": + el = NJUtils.makeNJElement("div", "Picasa Carousel", "component"); + el.elementModel.pi = "PicasaCarouselPi"; + el.elementModel.isComponent = true; + break; + case "youtube-channel": + el = NJUtils.makeNJElement("div", "Youtube Channel", "component"); + el.elementModel.pi = "YoutubeChannelPi"; + el.elementModel.isComponent = true; + break; + + } + + return el; + } + }, + + /** + * + */ + 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 dd3cf0df2b03d1b5e124d99118c667eab55877e7 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 30 Mar 2012 14:34:03 -0700 Subject: IKNINJA-1191 - Fixed the order of the components Components now appear in alphabetical order. Signed-off-by: Valerio Virgillito --- js/panels/components-panel.reel/components-panel.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/panels/components-panel.reel/components-panel.js') diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js index 9252b7b8..461abe84 100755 --- a/js/panels/components-panel.reel/components-panel.js +++ b/js/panels/components-panel.reel/components-panel.js @@ -80,11 +80,6 @@ exports.ComponentsPanel = Montage.create(Component, { "dataFile" : "node_modules/components-data/number-input.json", "component": "numberInput" }, - { - "text": "Select Input", - "dataFile" : "node_modules/components-data/select.json", - "component": "select" - }, { "text": "Radio Button", "dataFile" : "node_modules/components-data/radio-button.json", @@ -95,6 +90,11 @@ exports.ComponentsPanel = Montage.create(Component, { "dataFile" : "node_modules/components-data/range-input.json", "component": "rangeInput" }, + { + "text": "Select Input", + "dataFile" : "node_modules/components-data/select.json", + "component": "select" + }, { "text": "TextArea", "dataFile" : "node_modules/components-data/textarea.json", -- cgit v1.2.3 From e6cfd371849b92fccd5e7ee74e428914a2dc23eb Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 30 Mar 2012 15:15:26 -0700 Subject: completing the component simple pi Signed-off-by: Valerio Virgillito --- js/panels/components-panel.reel/components-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/components-panel.reel/components-panel.js') diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js index 461abe84..6972b9b4 100755 --- a/js/panels/components-panel.reel/components-panel.js +++ b/js/panels/components-panel.reel/components-panel.js @@ -106,7 +106,7 @@ exports.ComponentsPanel = Montage.create(Component, { "component": "textfield" }, { - "text": "Toogle Button", + "text": "Toggle Button", "dataFile" : "node_modules/components-data/toggle-button.json", "component": "toggleButton" } -- cgit v1.2.3 From b60e576af3915ce0cd7b60ed5e8ed6ff6f1ea9dc Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 16:55:04 -0700 Subject: fixing the number fields to not have units. Signed-off-by: Valerio Virgillito --- js/panels/components-panel.reel/components-panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/components-panel.reel/components-panel.js') diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js index 96713691..acbf702f 100755 --- a/js/panels/components-panel.reel/components-panel.js +++ b/js/panels/components-panel.reel/components-panel.js @@ -230,9 +230,9 @@ exports.ComponentsPanel = Montage.create(Component, { case "select": return "dropdown"; case "number": - return "hottext"; + return "ht"; default: - alert("Conversion not implemented for ", type); + alert("Conversion not implemented for " + type); } } }, -- cgit v1.2.3