From f07bbfaa60c3fb7c2412c5aa97b49d114d6a88ea Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 16:43:08 -0800 Subject: Adding njUtils as a component and adding it to the application object Signed-off-by: Valerio Virgillito --- js/lib/nj-utils.js | 214 +++++++++++++++++++++++++++++++++++++++++++++++ js/ninja.reel/ninja.html | 8 +- js/ninja.reel/ninja.js | 2 + 3 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 js/lib/nj-utils.js (limited to 'js') diff --git a/js/lib/nj-utils.js b/js/lib/nj-utils.js new file mode 100644 index 00000000..59ea6095 --- /dev/null +++ b/js/lib/nj-utils.js @@ -0,0 +1,214 @@ +/* +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, + ElementModel = require("js/models/element-model").ElementModel, + Properties3D = require("js/models/properties-3d").Properties3D, + ShapeModel = require("js/models/shape-model").ShapeModel, + ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory; + +exports.NJUtils = Montage.create( Component, { + + + + /* =============== DOM Access ================ */ + + ///// Quick "getElementById" + $ : { + value: function(id) { + return document.getElementById(id); + } + }, + + ///// Quick "getElementsByClassName" which also returns as an Array + ///// Can return as NodeList by passing true as second argument + $$ : { + value: function(className, asNodeList) { + var list = document.getElementsByClassName(className); + return (asNodeList) ? list : this.toArray(list); + } + }, + + ///// Get child nodes of element + ///// Omit filter to only return element nodes + ///// Pass in filter function to minimize collection, or + ///// set to true to include all nodes + children : { + value : function(el, filter) { + var f = filter || function(item) { + return item.nodeType === 1; + }; + return this.toArray(el.childNodes).filter(f); + } + }, + + /* ============= DOM Manipulation ============= */ + + ///// Creates and returns text node from string + textNode : { + value: function(text) { + return document.createTextNode(text); + } + }, + + ///// Quick "createElement" function "attr" can be classname or object + ///// with attribute key/values + make : { + value: function(tag, attr) { + var el = document.createElement(tag); + if (typeof attr === 'object') { + for (var a in attr) { + if (attr.hasOwnProperty(a)) { + el[a] = attr[a]; + } + } + } else if (typeof attr === 'string') { + el.className = (el.className + ' ' + attr).trim(); + } + + return el; + } + }, + + ///// Element factory function for Ninja Elements + ///// selection is the string displayed in the PI + makeNJElement: { + value: function(tag, selection, controller, attr, isShape) { + var el = this.make(tag, attr); + this.makeElementModel(el, selection, controller, isShape); + + return el; + } + }, + + ///// Element Model creation for existing elements + ///// TODO: find a different place for this function + makeElementModel: { + value: function(el, selection, controller, isShape) { + var p3d = Montage.create(Properties3D).init(el); + var shapeProps = null; + if(isShape) { + shapeProps = Montage.create(ShapeModel); + } + + el.elementModel = Montage.create(ElementModel, { + type: { value: el.nodeName}, + selection: { value: selection}, + controller: { value: ControllerFactory.getController(controller)}, + pi: { value: controller + "Pi"}, + props3D: { value: p3d}, + shapeModel: { value: shapeProps} + }); + + } + }, + + ///// Element Model creation for existing elements based on element type. + ///// TODO: find a different place for this function and return different element models based on type. + makeElementModel2: { + value: function(el) { + this.makeElementModel(el, "Div", "block", false); + } + }, + + ///// Removes all child nodes and returns node + ///// Accepts a single node, or an array of dom nodes + empty : { + value: function(node) { + var elements = [], + self = this; + if (node.constructor === Array) { + node.forEach(function(el) { self.empty(el) }); + } else { + this.toArray(node.childNodes).forEach(function(child) { + child.parentNode.removeChild(child); + }); + } + + return node; + } + }, + + queryParentSelector : { + value: function(el, strSelector) { + // queryParentSelector: + // Given a DOM element el (required), walk up the DOM tree + // and find the first parent that matches selector strSelector (required). + // Returns: The element that matches, or false if there is no match + // or if insufficient parameters are supplied. + + if ((typeof(el) === "undefined") || (typeof(strSelector) === "undefined")) { + // Parameters are required, m'kay? + return false; + } else if ((typeof(el) !== "object") || (typeof(strSelector) !== "string" )) { + // You also have to use the right parameters. + return false; + } + + // First, get an empty clone of the parent. + var myParent = el.parentNode; + var clone = myParent.cloneNode(false); + if (clone === null) { + return false; + } + + // If we're at the top of the DOM, our clone will be an htmlDocument. + // htmlDocument has no tagName. + if (typeof(clone.tagName) !== "undefined") { + // create a bogus div to use as a base for querySelector + var temp = document.createElement("div"); + + // Append the clone to the bogus div + temp.appendChild(clone); + + // Now we can use querySelector! Sweet. + var selectorTest = temp.querySelector(strSelector); + + // What has querySelector returned? + if (selectorTest === null) { + // No match, so recurse. + return this.queryParentSelector(myParent, strSelector); + } else { + // Match! Return the element. + return myParent; + } + } else { + // We're at the top of the DOM so we're done. + return false; + } + } + + }, + + /* ================= Style methods ================= */ + + ///// Get computed height of element + height : { + value: function(node, pseudo) { + return node.ownerDocument.defaultView.getComputedStyle(node, pseudo).getPropertyValue('height'); + } + }, + + /* ================= Array methods ================= */ + + ///// Return an array from an array-like object + toArray : { + value: function(arrayLikeObj) { + return Array.prototype.slice.call(arrayLikeObj); + } + }, + + /* ================= String methods ================= */ + + ///// Return the last part of a path (e.g. filename) + getFileNameFromPath : { + value: function(path) { + return path.substr(path.lastIndexOf('/') + 1); + } + } + +}); diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 706c8243..f3ff3d58 100644 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -259,6 +259,11 @@ "name": "NewFileWorkflowController" }, + "njUtils": { + "module":"js/lib/nj-utils", + "name": "NJUtils" + }, + "owner": { "module": "js/ninja.reel", "name": "Ninja", @@ -279,7 +284,8 @@ "stylesController": {"@": "stylesController"}, "filePickerController": {"@": "filePickerController"}, "newFileController": {"@": "newFileController"}, - "documentBar": {"@": "documentBar"} + "documentBar": {"@": "documentBar"}, + "njUtils": {"@": "njUtils"} } } diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 465533cd..7115b228 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -34,6 +34,8 @@ exports.Ninja = Montage.create(Component, { templateDidLoad: { value: function() { + this.application.njutils = this.njUtils; + this.eventManager.addEventListener( "preloadFinish", this, false); } }, -- cgit v1.2.3 From 1159924ecae4e7d371d40cee00e0e56d1605ffda Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 23:53:47 -0800 Subject: Fixes for montage integration Signed-off-by: Valerio Virgillito --- js/helper-classes/RDGE/GLBrushStroke.js | 1 + js/helper-classes/RDGE/GLSubpath.js | 1 + js/ninja.reel/ninja.js | 15 ++++++++------- .../PanelContainer/PanelContainer.reel/PanelContainer.js | 4 ++-- 4 files changed, 12 insertions(+), 9 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 89292ad8..e3b14bf7 100644 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -4,6 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +// Todo: This shoudl be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js index 25b12093..55b7e49a 100644 --- a/js/helper-classes/RDGE/GLSubpath.js +++ b/js/helper-classes/RDGE/GLSubpath.js @@ -4,6 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +// Todo: This shoudl be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 7115b228..48c72a1d 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -96,9 +96,16 @@ exports.Ninja = Montage.create(Component, { } }, + _didDraw: { + value: false + }, + didDraw: { value: function() { - NJevent("appLoaded"); + if(!this._didDraw) { + NJevent("appLoaded"); + this._didDraw = true; + } } }, @@ -165,12 +172,6 @@ exports.Ninja = Montage.create(Component, { } }, - handleLivePreview: { - value: function(event) { - - } - }, - executeLivePreview: { value: function() { var background, overflow, transitionStopRule; diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 57187af1..66333cc0 100644 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -91,7 +91,7 @@ exports.PanelContainer = Montage.create(Component, { this.panelSplitter.disabled = true; } - this.needsDraw = true; +// this.needsDraw = true; this.addEventListener("change@appModel.PropertiesPanel", this, false); this.addEventListener("change@appModel.ProjectPanel", this, false); @@ -198,7 +198,7 @@ exports.PanelContainer = Montage.create(Component, { minHeights += this.repeater.childComponents[i].element.offsetHeight; } else { this._panels[i].isLocked = false; - this.repeater.childComponents[i].needsDraw = true; + if(this.repeater.childComponents[i]) this.repeater.childComponents[i].needsDraw = true; minHeights += this._panels[i].minHeight; } } -- cgit v1.2.3 From dbe9c7705860fb3551321e23e7eab763f622241c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 1 Feb 2012 23:54:24 -0800 Subject: Revert "Adding njUtils as a component and adding it to the application object" This reverts commit f07bbfaa60c3fb7c2412c5aa97b49d114d6a88ea. Signed-off-by: Valerio Virgillito --- js/lib/nj-utils.js | 214 ----------------------------------------------- js/ninja.reel/ninja.html | 8 +- js/ninja.reel/ninja.js | 2 - 3 files changed, 1 insertion(+), 223 deletions(-) delete mode 100644 js/lib/nj-utils.js (limited to 'js') diff --git a/js/lib/nj-utils.js b/js/lib/nj-utils.js deleted file mode 100644 index 59ea6095..00000000 --- a/js/lib/nj-utils.js +++ /dev/null @@ -1,214 +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, - ElementModel = require("js/models/element-model").ElementModel, - Properties3D = require("js/models/properties-3d").Properties3D, - ShapeModel = require("js/models/shape-model").ShapeModel, - ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory; - -exports.NJUtils = Montage.create( Component, { - - - - /* =============== DOM Access ================ */ - - ///// Quick "getElementById" - $ : { - value: function(id) { - return document.getElementById(id); - } - }, - - ///// Quick "getElementsByClassName" which also returns as an Array - ///// Can return as NodeList by passing true as second argument - $$ : { - value: function(className, asNodeList) { - var list = document.getElementsByClassName(className); - return (asNodeList) ? list : this.toArray(list); - } - }, - - ///// Get child nodes of element - ///// Omit filter to only return element nodes - ///// Pass in filter function to minimize collection, or - ///// set to true to include all nodes - children : { - value : function(el, filter) { - var f = filter || function(item) { - return item.nodeType === 1; - }; - return this.toArray(el.childNodes).filter(f); - } - }, - - /* ============= DOM Manipulation ============= */ - - ///// Creates and returns text node from string - textNode : { - value: function(text) { - return document.createTextNode(text); - } - }, - - ///// Quick "createElement" function "attr" can be classname or object - ///// with attribute key/values - make : { - value: function(tag, attr) { - var el = document.createElement(tag); - if (typeof attr === 'object') { - for (var a in attr) { - if (attr.hasOwnProperty(a)) { - el[a] = attr[a]; - } - } - } else if (typeof attr === 'string') { - el.className = (el.className + ' ' + attr).trim(); - } - - return el; - } - }, - - ///// Element factory function for Ninja Elements - ///// selection is the string displayed in the PI - makeNJElement: { - value: function(tag, selection, controller, attr, isShape) { - var el = this.make(tag, attr); - this.makeElementModel(el, selection, controller, isShape); - - return el; - } - }, - - ///// Element Model creation for existing elements - ///// TODO: find a different place for this function - makeElementModel: { - value: function(el, selection, controller, isShape) { - var p3d = Montage.create(Properties3D).init(el); - var shapeProps = null; - if(isShape) { - shapeProps = Montage.create(ShapeModel); - } - - el.elementModel = Montage.create(ElementModel, { - type: { value: el.nodeName}, - selection: { value: selection}, - controller: { value: ControllerFactory.getController(controller)}, - pi: { value: controller + "Pi"}, - props3D: { value: p3d}, - shapeModel: { value: shapeProps} - }); - - } - }, - - ///// Element Model creation for existing elements based on element type. - ///// TODO: find a different place for this function and return different element models based on type. - makeElementModel2: { - value: function(el) { - this.makeElementModel(el, "Div", "block", false); - } - }, - - ///// Removes all child nodes and returns node - ///// Accepts a single node, or an array of dom nodes - empty : { - value: function(node) { - var elements = [], - self = this; - if (node.constructor === Array) { - node.forEach(function(el) { self.empty(el) }); - } else { - this.toArray(node.childNodes).forEach(function(child) { - child.parentNode.removeChild(child); - }); - } - - return node; - } - }, - - queryParentSelector : { - value: function(el, strSelector) { - // queryParentSelector: - // Given a DOM element el (required), walk up the DOM tree - // and find the first parent that matches selector strSelector (required). - // Returns: The element that matches, or false if there is no match - // or if insufficient parameters are supplied. - - if ((typeof(el) === "undefined") || (typeof(strSelector) === "undefined")) { - // Parameters are required, m'kay? - return false; - } else if ((typeof(el) !== "object") || (typeof(strSelector) !== "string" )) { - // You also have to use the right parameters. - return false; - } - - // First, get an empty clone of the parent. - var myParent = el.parentNode; - var clone = myParent.cloneNode(false); - if (clone === null) { - return false; - } - - // If we're at the top of the DOM, our clone will be an htmlDocument. - // htmlDocument has no tagName. - if (typeof(clone.tagName) !== "undefined") { - // create a bogus div to use as a base for querySelector - var temp = document.createElement("div"); - - // Append the clone to the bogus div - temp.appendChild(clone); - - // Now we can use querySelector! Sweet. - var selectorTest = temp.querySelector(strSelector); - - // What has querySelector returned? - if (selectorTest === null) { - // No match, so recurse. - return this.queryParentSelector(myParent, strSelector); - } else { - // Match! Return the element. - return myParent; - } - } else { - // We're at the top of the DOM so we're done. - return false; - } - } - - }, - - /* ================= Style methods ================= */ - - ///// Get computed height of element - height : { - value: function(node, pseudo) { - return node.ownerDocument.defaultView.getComputedStyle(node, pseudo).getPropertyValue('height'); - } - }, - - /* ================= Array methods ================= */ - - ///// Return an array from an array-like object - toArray : { - value: function(arrayLikeObj) { - return Array.prototype.slice.call(arrayLikeObj); - } - }, - - /* ================= String methods ================= */ - - ///// Return the last part of a path (e.g. filename) - getFileNameFromPath : { - value: function(path) { - return path.substr(path.lastIndexOf('/') + 1); - } - } - -}); diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index f3ff3d58..706c8243 100644 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -259,11 +259,6 @@ "name": "NewFileWorkflowController" }, - "njUtils": { - "module":"js/lib/nj-utils", - "name": "NJUtils" - }, - "owner": { "module": "js/ninja.reel", "name": "Ninja", @@ -284,8 +279,7 @@ "stylesController": {"@": "stylesController"}, "filePickerController": {"@": "filePickerController"}, "newFileController": {"@": "newFileController"}, - "documentBar": {"@": "documentBar"}, - "njUtils": {"@": "njUtils"} + "documentBar": {"@": "documentBar"} } } diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index 48c72a1d..90015f5a 100644 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -34,8 +34,6 @@ exports.Ninja = Montage.create(Component, { templateDidLoad: { value: function() { - this.application.njutils = this.njUtils; - this.eventManager.addEventListener( "preloadFinish", this, false); } }, -- cgit v1.2.3 From 5a305ec44b2bd5198a248357439aae8ebbd75fee Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 2 Feb 2012 00:11:51 -0800 Subject: upgrading to Montage v0.6 Signed-off-by: Valerio Virgillito --- js/components/tree.reel/tree.js | 2 +- js/controllers/styles-controller.js | 2 +- js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 2 +- js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js | 2 +- js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) (limited to 'js') diff --git a/js/components/tree.reel/tree.js b/js/components/tree.reel/tree.js index 9c1b07e4..7084ba99 100644 --- a/js/components/tree.reel/tree.js +++ b/js/components/tree.reel/tree.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var nj = require("js/lib/NJUtils.js").NJUtils; +var nj = require("js/lib/NJUtils").NJUtils; exports.Tree = Montage.create(Component, { diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index d462bc98..afd298c9 100644 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -7,7 +7,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, cssShorthandMap = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; /* diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index ae7e5c14..0c950ffd 100644 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -8,7 +8,7 @@ var cssPropertyNameList = require("js/panels/CSSPanel/css-property-name-lis cssCompletionMap = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap, CSS_SHORTHAND_MAP = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP, keyboardModule = require("js/mediators/keyboard-mediator").Keyboard, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js index 0e1cf206..bb6f9de6 100644 --- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js +++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; exports.ComputedStyleSubPanel = Montage.create(Component, { diff --git a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js index 31582153..083dafeb 100644 --- a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js +++ b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var TreeControl = require("js/components/tree.reel").Tree, ResizerControl = require("js/panels/Resizer").Resizer, - nj = require("js/lib/NJUtils.js").NJUtils; + nj = require("js/lib/NJUtils").NJUtils; exports.ProjectPanelBase = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { hasTemplate: { -- cgit v1.2.3 From 834e362e33113fd00e7568a67f108f836bf87ce9 Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Thu, 2 Feb 2012 11:30:02 -0800 Subject: Fixed the color popups to work with m-js v6 Removed the wrapper DIV, now it's more direct to create and insert the content in the popups. Changes created DOM exceptions, so it had to be modified. --- js/panels/Color/colorpopup-manager.js | 64 ++++++++++++++--------------------- 1 file changed, 25 insertions(+), 39 deletions(-) (limited to 'js') diff --git a/js/panels/Color/colorpopup-manager.js b/js/panels/Color/colorpopup-manager.js index 943ec7e7..a4c9a8c2 100644 --- a/js/panels/Color/colorpopup-manager.js +++ b/js/panels/Color/colorpopup-manager.js @@ -161,11 +161,13 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); + document.body.appendChild(popup); // this._popupBase = ColorPanelPopup.create(); - this._popupBase.content = document.createElement('div'); + this._popupBase.element = popup; this._popupBase.props = {x: x, y: y, side: side, align: align}; - + this._popupBase.colorManager = this.colorManager; + //TODO: Remove if (this._hackOffset) { this._popupBase.hack = {x: 53, y: 235}; } else { @@ -173,20 +175,10 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupBase.hack = {x: 0, y: 0}; } // - document.body.appendChild(popup); - document.body.appendChild(this._popupBase.content); - //Setting color panel for reference when drawing - //this._popupBase.colorPanel = this; - this._popupBase.colorManager = this.colorManager; - //Setting up events this._popupBase.addEventListener('change', this, false); - this._popupBase.addEventListener('changing', this, false); - //TODO: Use m-js popup or check m-js fix of nested drawing components - this._popupBase.element = popup; - this._popupBase.needsDraw = true; - //Adding drawn element to container - this._popupBase.content.appendChild(this._popupBase.element); - //Waiting for content to drawn before loading popup + this._popupBase.addEventListener('changing', this, false); + // + this._popupBase.needsDraw = true; this._popupBase.addEventListener('firstDraw', this, false); } } @@ -286,41 +278,33 @@ exports.ColorPopupManager = Montage.create(Component, { //////////////////////////////////////////////////// //Creating popup from m-js component var popup = document.createElement('div'); + document.body.appendChild(popup); // - this._popupChipBase = ColorChipPopup.create(); - this._popupChipBase.content = document.createElement('div'); this._popupChip.event = e._event; - // + this._popupChipBase = ColorChipPopup.create(); + this._popupChipBase.element = popup; + this._popupChipBase.colorManager = this.colorManager; if (e._event.srcElement.props) { this.colorChipProps = e._event.srcElement.props; } else { this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false}; } // - if (!this.colorChipProps.panel) { + if (!this.colorChipProps.panel) { this.hideColorPopup(); } // - document.body.appendChild(popup); - document.body.appendChild(this._popupChipBase.content); - //Setting color panel for reference when drawing - //popupBase.colorPanel = this; - this._popupChipBase.colorManager = this.colorManager; - // + this._popupChipBase.popupModes = {}; this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient; this._popupChipBase.popupModes.image = this.colorChipProps.image; this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel; this._popupChipBase.popupModes.palette = this.colorChipProps.palette; - this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; - //Setting up events + this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor; + // this._popupChipBase.addEventListener('change', this, false); - this._popupChipBase.addEventListener('changing', this, false); - //TODO: Use m-js popup or check m-js fix of nested drawing components - this._popupChipBase.element = popup; - this._popupChipBase.needsDraw = true; - //Adding drawn element to container - this._popupChipBase.content.appendChild(this._popupChipBase.element); - //Waiting for content to drawn before loading popup + this._popupChipBase.addEventListener('changing', this, false); + // + this._popupChipBase.needsDraw = true; this._popupChipBase.addEventListener('firstDraw', this, false); } } @@ -354,14 +338,14 @@ exports.ColorPopupManager = Montage.create(Component, { if (e._target._element.className === 'cpp_popup') { this._popupBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content - this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.content, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); + this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.element, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align}); //Displaying popup once it's drawn this._popupPanel.popup.addEventListener('firstDraw', this, false); //Hiding popup while it draws this._popupPanel.popup.element.style.opacity = 0; //Storing popup for use when closing this._popupPanel.popup.base = this._popupBase; - } else if (e._target._element.className === 'default_popup' && e._target._content.firstChild.className === 'cpp_popup') { + } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cpp_popup') { // this._colorPopupDrawing = false; // @@ -371,11 +355,12 @@ exports.ColorPopupManager = Montage.create(Component, { //Popup was added, so it's opened this._popupPanel.opened = true; } else if (e._target._element.className === 'cc_popup') { + this._popupChipBase.removeEventListener('firstDraw', this, false); //Creating an instance of the popup and sending in created color popup content if (this.colorChipProps.offset) { - this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.content, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); + this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX + this.colorChipProps.offset)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } else { - this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.content, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); + this._popupChip.popup = this.application.ninja.popupManager.createPopup(this._popupChipBase.element, {x: (this._popupChip.event.clientX - this._popupChip.event.offsetX)+'px', y: (this._popupChip.event.target.clientHeight/2+this._popupChip.event.clientY - this._popupChip.event.offsetY)+'px'}, {side: this.colorChipProps.side, align: this.colorChipProps.align}); } // if (!this.colorChipProps.panel) { @@ -387,7 +372,8 @@ exports.ColorPopupManager = Montage.create(Component, { this._popupChip.popup.base = this._popupChipBase; //Displaying popup once it's drawn this._popupChip.popup.addEventListener('firstDraw', this, false); - } else if (e._target._element.className === 'default_popup' && e._target._content.firstChild.className === 'cc_popup') { + } else if (e._target._element.className === 'default_popup' && e._target._content.className === 'cc_popup') { + this._popupChip.popup.removeEventListener('firstDraw', this, false); // this._colorChipPopupDrawing = false; // -- cgit v1.2.3