From bead8ce9e292f030a4b2fba6ad7fd38fb4fe5199 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 22 Mar 2012 11:16:39 -0700 Subject: IKNINJA-758 - The rotation value of the stage is not updated in the properties panel. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/properties.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 40e9b86a..782dd138 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -147,8 +147,12 @@ exports.Properties = Montage.create(Component, { value: function(event) { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { + var el = this.application.ninja.currentDocument.documentRoot; + if(this.application.ninja.selectedElements.length) { + el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + } + // TODO - This should only update the properties that were changed. - var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); @@ -162,9 +166,9 @@ exports.Properties = Montage.create(Component, { this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } - } }, handleSelectionChange: { @@ -196,6 +200,13 @@ exports.Properties = Montage.create(Component, { this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); + if(this.threeD.inGlobalMode) + { + this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle"); + this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle"); + this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); + } + if(this.customPi !== stage.elementModel.pi) { // We need to unregister color chips from the previous selection from the Color Model var len = this.customSections.length; -- cgit v1.2.3 From 1b7e627ae290dacec3a242445f3e6c5de302626a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Fri, 23 Mar 2012 10:51:26 -0700 Subject: Tweaking some styles in the materials popup. Signed-off-by: Nivesh Rajbhandari --- .../materials-popup.reel/materials-popup.css | 46 ++++++++++++++++++---- .../materials-popup.reel/materials-popup.html | 2 +- .../materials-popup.reel/materials-popup.js | 2 +- 3 files changed, 41 insertions(+), 9 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css index 89233c64..2d339411 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.css +++ b/js/panels/Materials/materials-popup.reel/materials-popup.css @@ -37,21 +37,53 @@ .mp_property { height:40px; + position: relative; } .mp_property > .prop-label { - float: left; - /*width:86px;*/ - margin: 0px 8px 2px 5px; + position:relative; + top:12px; + float: left; + width: 100px; } .mp_property > .prop-controller { - float: right; - clear: left; - width: auto; - margin: 0px 0px 3px 0px; + position:relative; + top:12px; + left: 10px; + float: left; +} + +.mp_property .hottext, +.mp_property .hottextInput +{ + width: 30px; +} + +.mp_property .button +{ + width: 30px; + height: 20px; +} + +.mp_property .inputRow +{ + top: 8px; + position: relative; +} + +.mp_properties_list +{ + padding-bottom: 8px; +} + +.mp_properties_list > .mp_property > .colortoolbar +{ + width: 27px !important; + height: 27px !important; + overflow:hidden !important; } .mp_buttons { diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html index 34f68554..ae0ee2c8 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.html +++ b/js/panels/Materials/materials-popup.reel/materials-popup.html @@ -104,7 +104,7 @@
-
+
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index b44761bc..bbccf45d 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -237,7 +237,7 @@ exports.MaterialsPopup = Montage.create(Component, { } else { - this.materialsData = this._dummyData1; + this.materialsData = this._dummyData1.slice(0); } this.needsDraw = true; -- cgit v1.2.3 From bda9f8f5829c943486f8850e68c991e83f8fb8c8 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Sat, 24 Mar 2012 13:50:46 -0700 Subject: Adding logic for flatten checkbox in PI. This requires minor modifications to both StageController and ComponentController. Also removing unused global3DSettings CSS. Signed-off-by: Nivesh Rajbhandari --- js/panels/properties.reel/properties.js | 13 +++++++++- .../sections/three-d-view.reel/three-d-view.html | 28 ++++++++++++++++++++-- .../sections/three-d-view.reel/three-d-view.js | 14 +++++++++++ 3 files changed, 52 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 782dd138..ca720ae7 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -166,9 +166,9 @@ exports.Properties = Montage.create(Component, { this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); - } } } + } }, handleSelectionChange: { @@ -207,6 +207,12 @@ exports.Properties = Montage.create(Component, { this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); } + if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") { + this.threeD.flatten = false; + } else { + this.threeD.flatten = true; + } + if(this.customPi !== stage.elementModel.pi) { // We need to unregister color chips from the previous selection from the Color Model var len = this.customSections.length; @@ -271,6 +277,11 @@ exports.Properties = Montage.create(Component, { this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); + if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") { + this.threeD.flatten = false; + } else { + this.threeD.flatten = true; + } if(this.threeD.inGlobalMode) { diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html index 18a7369e..b6c25baf 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html @@ -22,7 +22,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "xAngleControl": {"@": "threeDRotX"}, "yAngleControl": {"@": "threeDRotY"}, "zAngleControl": {"@": "threeDRotZ"}, - "axisModeGroupControl": {"@": "axisModeGroup"} + "axisModeGroupControl": {"@": "axisModeGroup"}, + "flattenControl": {"@": "flattenCheckbox"} } }, @@ -242,6 +243,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "value": "Global", "group": {"@": "axisModeGroup"} } + }, + "flattenCheckbox": { + "module": "montage/ui/checkbox.reel", + "name": "Checkbox", + "properties": { + "element": {"#": "flattenCh"}, + "identifier": "flatten", + "checked": false + }, + "bindings": { + "checked": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "flatten", + "oneway": false + } + }, + "listeners": [ + { + "type": "action", + "listener": {"@": "owner"}, + "capture": false + } + ] } } @@ -335,7 +359,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
- +
diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 35591afa..0d3d111d 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -79,6 +79,10 @@ exports.ThreeD = Montage.create(Component, { value: 0 }, + flatten: { + value: false + }, + _disableTranslation: { value: true }, @@ -107,6 +111,16 @@ exports.ThreeD = Montage.create(Component, { value: null }, + handleAction: { + value: function(event) { + if(event.currentTarget.identifier === "flatten") { + this.application.ninja.elementMediator.setProperty([this.item], + "-webkit-transform-style", + event.currentTarget.checked ? ["flat"] : ["preserve-3d"]); + } + } + }, + handleChange: { value: function(event) { if(event.wasSetByCode) { -- cgit v1.2.3 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 --- js/panels/Components/ComponentsPanel.js | 47 --- .../ComponentsPanelBase.css | 11 - .../ComponentsPanelBase.html | 65 ---- .../ComponentsPanelBase.js | 423 --------------------- .../components-panel.reel/components-panel.css | 11 + .../components-panel.reel/components-panel.html | 65 ++++ .../components-panel.reel/components-panel.js | 423 +++++++++++++++++++++ 7 files changed, 499 insertions(+), 546 deletions(-) delete mode 100755 js/panels/Components/ComponentsPanel.js delete mode 100755 js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css delete mode 100755 js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html delete mode 100755 js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js create mode 100755 js/panels/components-panel.reel/components-panel.css create mode 100755 js/panels/components-panel.reel/components-panel.html create mode 100755 js/panels/components-panel.reel/components-panel.js (limited to 'js/panels') diff --git a/js/panels/Components/ComponentsPanel.js b/js/panels/Components/ComponentsPanel.js deleted file mode 100755 index df1d74bb..00000000 --- a/js/panels/Components/ComponentsPanel.js +++ /dev/null @@ -1,47 +0,0 @@ -/* -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; - -var PanelBase = require("js/panels/PanelBase").PanelBase; -var ComponentsPanelBase = require("js/panels/Components/ComponentsPanelBase.reel").ComponentsPanelBase; - -exports.ComponentsPanel = Montage.create(PanelBase, { - id : {value : "componentsPanel", writable:true, enumerable:true, configurable:true}, - panelName : {value : "Components", writable:true, enumerable:true, configurable:true}, - panelHeaderID : {value : "componentsPanelHeader", writable:true, enumerable:true, configurable:true}, - disclosureIconID : {value : "componentsPanelDisclosureIcon", writable:true, enumerable:true, configurable:true}, - closeButtonID : {value : "componentsPanelCloseButton", writable:true, enumerable:true, configurable:true}, - panelContentID : {value : "componentsPanelContent", writable:true, enumerable:true, configurable:true}, - - init : { - value : function() - { - this.contentHeight = 200; - this.minHeight = 100; - this.defaultHeight = 200; - - /* OLD WAY -- Removing the temporary div - // TODO: Remove this comment once this is tested. - var panelContainer = document.createElement("div"); - this._componentsPanelBase = ComponentsPanelBase.create(); - this._componentsPanelBase.element = panelContainer; - - this.content = this._componentsPanelBase; - this._componentsPanelBase.needsDraw = true; - */ - - this.content = ComponentsPanelBase.create(); - } - }, - - _componentsPanelBase:{ - enumerable: true, - value: null, - writable:true - } - -}); \ No newline at end of file diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css deleted file mode 100755 index ac250c83..00000000 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css +++ /dev/null @@ -1,11 +0,0 @@ -/* - 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. - */ - -.treeHolder{ - width: 227px; - background: red; - padding-left: 13px; -} diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html deleted file mode 100755 index 6d7c8a2c..00000000 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - - - - -
-
-
- - - \ No newline at end of file diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js deleted file mode 100755 index 3505393c..00000000 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ /dev/null @@ -1,423 +0,0 @@ -/* -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); -}; - - -var ComponentsPanelBase = exports.ComponentsPanelBase = 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 diff --git a/js/panels/components-panel.reel/components-panel.css b/js/panels/components-panel.reel/components-panel.css new file mode 100755 index 00000000..ac250c83 --- /dev/null +++ b/js/panels/components-panel.reel/components-panel.css @@ -0,0 +1,11 @@ +/* + 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. + */ + +.treeHolder{ + width: 227px; + background: red; + padding-left: 13px; +} diff --git a/js/panels/components-panel.reel/components-panel.html b/js/panels/components-panel.reel/components-panel.html new file mode 100755 index 00000000..f598a1ee --- /dev/null +++ b/js/panels/components-panel.reel/components-panel.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + +
+
+
+ + + \ No newline at end of file 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 50125608bba2ebfae24c1e13ec030fe7a7128158 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 29 Mar 2012 17:13:28 -0700 Subject: merge from main --- js/panels/Splitter.js | 2 +- .../TimelinePanel.reel/css/TimelinePanel.css | 4 +- .../animations-presets.reel/animations-presets.js | 47 ++++++++++++++++++++- js/panels/presets/default-animation-presets.js | 2 + js/panels/presets/default-style-presets.js | 11 +++-- js/panels/presets/default-transition-presets.js | 8 ++++ .../presets/style-presets.reel/style-presets.js | 49 +++++++++++++++++++++- .../transitions-presets.js | 20 ++++++++- js/panels/resize-composer.js | 34 ++++----------- 9 files changed, 138 insertions(+), 39 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 6791e0d5..e92cb2dd 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, { }, set: function(value) { this._collapsed = value; - this.needsDraw = true; + this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value}); } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 067285ae..129b9771 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -10,12 +10,12 @@ height: 100%; } .maintimeline{ + border-style: double; -webkit-box-flex: 1; display: -webkit-box; - -webkit-box-orient: horizontal; + -webkit-box-orient: horizontal height : 100%; position: relative; - margin-top:1px; } .leftinside{ height: 100%; diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index 6a16da54..ab200212 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,7 +22,52 @@ exports.AnimationsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData); + //debugger; + var selection = this.application.ninja.selectedElements, + stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + self = this; + + if(!selection || !selection.length || selection.length === 0) { + return false; + } + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule) { + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); + } + + }, this); + + selection.forEach(function(el) { + el._element.classList.add(selectorBase); + }, this); + + } + }, + + stringifyKeys : { + value: function(keysArray) { + var keysString = ''; + + keysArray.forEach(function(key) { + var styles = '', style; + + for(style in key.styles) { + styles += style + ':' + key.styles[style] + '; '; + } + + keysString += key.keyText + ' {' + styles + ' }'; + }); + + return keysString; } } }); diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..64f91ea6 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,6 +13,7 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -90,6 +91,7 @@ exports.animationPresets = { "text": "Rotater", "selectorBase" : "rotate-with-alpha-keyframes", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation-name": "rotate-with-alpha-keyframes", "-webkit-animation-duration": "5s", diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js index 10b24ff4..82bec34f 100644 --- a/js/panels/presets/default-style-presets.js +++ b/js/panels/presets/default-style-presets.js @@ -11,9 +11,9 @@ exports.stylePresets = { "children": [ { "text": "Border-Radius", - "id": "njBorderRadius", "selectorBase" : "border-radius-preset", "rules" : [{ + "selectorSuffix" : "", "styles" : { "border-radius": "100px", "border" : "1px solid #333" @@ -22,9 +22,9 @@ exports.stylePresets = { }, { "text": "Drop Shadow", - "id": "njDropShadow", "selectorBase" : "drop-shadow", "rules" : [{ + "selectorSuffix" : "", "styles" : { "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", "border" : "1px solid #CCC" @@ -33,10 +33,9 @@ exports.stylePresets = { }, { "text": "Fancy Box", - "id": "njFancyBox", "selectorBase" : "fancy-box", "rules" : [{ - "selectorSuffix": "", + "selectorSuffix" : "", "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", @@ -51,9 +50,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", - "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -61,9 +60,9 @@ exports.stylePresets = { }, { "text": "Text Shadow", - "id": "njTextShadow", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "text-shadow": "1px 1px 3px #333" } diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index f8968085..15f4882f 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,6 +13,7 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -28,6 +29,7 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -46,6 +48,7 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -60,6 +63,7 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -74,6 +78,7 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -87,6 +92,7 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -101,6 +107,7 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ + "selectorSuffix"