/* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, NJUtils = require("js/lib/NJUtils").NJUtils; ClassUUID = require("js/components/core/class-uuid").ClassUuid, 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": "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": "Select Input", "dataFile" : "node_modules/components-data/select.json", "component": "select" }, { "text": "TextArea", "dataFile" : "node_modules/components-data/textarea.json", "component": "textarea" }, { "text": "Textfield", "dataFile" : "node_modules/components-data/textfield.json", "component": "textfield" }, { "text": "Toggle 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 "ht"; 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.model.views.design.iframe.contentWindow.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' }; var defaultStyles = component.defaultStyles; if(defaultStyles) { for(var n in defaultStyles) { styles[n] = defaultStyles[n]; } } that.application.ninja.currentDocument.model.setComponentInstance(instance, element); that.application.ninja.elementMediator.addElements(element, styles); }); } }, makeComponent: { value: function(name) { var el; switch(name) { case "anchor": el = document.application.njUtils.make("a", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Anchor"); el.setAttribute("href", "http://www.motorola.com"); el.innerHTML = "link"; break; case "button": el = document.application.njUtils.make(name, null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Button"); el.setAttribute("type", "button"); el.innerHTML = "Button"; break; case "checkbox": el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Checkbox"); el.setAttribute("type", "checkbox"); break; case "imageComponent": el = document.application.njUtils.make("image", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Image"); el.setAttribute("width", 200); el.setAttribute("height", 200); break; case "numberInput": el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Number Input"); el.setAttribute("type", "number"); break; case "select": el = document.application.njUtils.make("select", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "SelectInput"); break; case "radioButton": el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Radio Button"); el.setAttribute("type", "radio"); break; case "rangeInput": el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Range Input"); el.setAttribute("type", "range"); break; case "textfield": case "searchfield": el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Textfield"); el.setAttribute("type", "text"); break; case "textarea": el = document.application.njUtils.make("textarea", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Textarea"); break; case "toggleButton": el = document.application.njUtils.make("button", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Toggle Button"); el.innerHTML = "Off"; break; case "map": el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Map"); break; case "feedreader": el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Feed Reader"); break; case "picasa-carousel": el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Picasa Carousel"); break; case "youtube-channel": el = document.application.njUtils.make("div", null, this.application.ninja.currentDocument); document.application.njUtils.createModelForComponent(el, "Youtube Channel"); break; } el.setAttribute("data-montage-id", ClassUUID.generate()); return el; } }, /** * */ getStageCenter: { value: function() { //if(!this.centerStage) { var top, left; top = (this.application.ninja.stage.canvas.height / 2); // ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.model.documentRoot, "height"))) / 2); left = (this.application.ninja.stage.canvas.width / 2); //~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.model.documentRoot, "width"))) / 2); //this.centerStage = [top, left]; return [left, top]; //} //return this.centerStage; } } });