Nesting absolute element in the Tag tool. Refactoring element creation and element models

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
author: Valerio Virgillito 2012-05-02 15:34:49 -0700
committer: Valerio Virgillito 2012-05-02 15:34:49 -0700
commit: d2a5fcbaed6b3c3377edecbc27e6a2818b79be40 (patch)
tree: 75e443147645e70272e89cfe0ec11318fdcf6adf /js
parent: 5a74b74e8ec76d60cadf623cabaa0b667f1c4058 (diff)
download: ninja-d2a5fcbaed6b3c3377edecbc27e6a2818b79be40.tar.gz
8 files changed, 138 insertions, 137 deletions
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index c80ba36e..4ea9c659 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -37,11 +37,11 @@
    <body>
        <div id="tagProperties" class="subToolHolderPanel">
            <div id="tagToolContainer" class="tagRadioButtons">
-                <input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>
+                <input type="radio" id="divTool" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" value="div" checked/>
-                <input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>
+                <input type="radio" id="imageTool"  data-montage-id="imageTool" class="tag-type" title="Image Element" value="image" name="TagRadios"/>
-                <input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>
+                <input type="radio" id="videoTool"  data-montage-id="videoTool" class="tag-type" title="Video Element" value="video" name="TagRadios"/>
-                <input type="radio" id="canvasTool" class="tag-type" title="Canvas Element" name="TagRadios"/>
+                <input type="radio" id="canvasTool" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" value="canvas" name="TagRadios"/>
-                <input type="radio" id="customTool" class="tag-type" title="Custom Element" name="TagRadios"/>
+                <input type="radio" id="customTool" data-montage-id="customTool" class="tag-type" title="Custom Element" value="custom" name="TagRadios"/>
                <div class="nj-divider divider-vertical">&nbsp;</div>
@@ -67,10 +67,10 @@
                    <label class="label"> Position:</label>
                    <select id="positionCB" class="nj-skinned">
+                        <option>Static</option>
                        <option>Absolute</option>
                        <option>Relative</option>
                        <option>Fixed</option>
-                        <option>Static</option>
                        <option>Inherit</option>
                    </select>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 1caabc35..6519d5b8 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -33,9 +33,9 @@ exports.TagProperties = Montage.create(ToolProperties, {
    handleClick: {
        value: function(event) {
-            this.selectedElement = event._event.target.id;
+            this.selectedElement = event._event.target.value;
-            if(this.selectedElement === "customTool") {
+            if(this.selectedElement === "custom") {
                this.customName.style["display"] = "";
                this.customLabel.style["display"] = "";
            } else {
@@ -46,7 +46,7 @@ exports.TagProperties = Montage.create(ToolProperties, {
    },
    _selectedElement: {
-        value: "divTool", enumerable: false
+        value: "div", enumerable: false
    },
    selectedElement: {
diff --git a/js/controllers/elements/controller-factory.js b/js/controllers/elements/controller-factory.js
index 1bbbbce0..3ac3fe14 100755
--- a/js/controllers/elements/controller-factory.js
+++ b/js/controllers/elements/controller-factory.js
@@ -42,6 +42,8 @@ exports.ControllerFactory = Montage.create(Montage, {
                    return ImageController;
                } else if(value.indexOf("video") !== -1) {
                    return VideoController;
+                } else {
+                    return BlockController;
                }
            } catch (err) {
                console.log("Could not create Controller Factory " + err);
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 452d09f1..7f553551 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,9 +11,8 @@ exports.ElementController = Montage.create(Component, {
    addElement: {
        value: function(el, styles) {
-            this.application.ninja.currentDocument.documentRoot.appendChild(el);
+            this.application.ninja.currentSelectedContainer.appendChild(el);
-            // Nested elements - TODO make sure the CSS is correct before nesting elements
-            // this.application.ninja.currentSelectedContainer.appendChild(el);
            if(styles) {
                this.application.ninja.stylesController.setElementStyles(el, styles);
            }
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 65161b4f..d1dc9f34 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -100,7 +100,7 @@ exports.PiData = Montage.create( Montage, {
            }
        ]
    },
-    imagePi: {
+    imgPi: {
        value: [
            {
                label: "Image Properties",
@@ -807,8 +807,8 @@ exports.PiData = Montage.create( Montage, {
                    ]
                ]
            }
-        ] //value: [
+        ]
-    } //BrushStrokePi: {
+    }
 });
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index dae128e4..301af3f1 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -54,13 +54,25 @@ exports.NJUtils = Object.create(Object.prototype, {
            return document.createTextNode(text);
        }
    },
-    
    ///// Quick "createElement" function "attr" can be classname or object
    ///// with attribute key/values
-    ///// Suppor for data attributes
+    ///// Support for data attributes
-    make : {
+    ///// Support user/ninja document
-        value: function(tag, attr) {
+    make: {
-            var el = document.createElement(tag);
+        value: function(tag, attr, doc) {
+            var _doc, el;
+            _doc = doc ? doc._document : document;
+            el = _doc.createElement(tag);
+            this.decor(el, attr);
+            return el;
+        }
+    },
+    
+    decor: {
+        value: function(el, attr) {
            if (typeof attr === 'object') {
                for (var a in attr) {
                    if (attr.hasOwnProperty(a)) {
@@ -74,8 +86,12 @@ exports.NJUtils = Object.create(Object.prototype, {
            } else if (typeof attr === 'string') {
                el.className = (el.className + ' ' + attr).trim();
            }
-            
+        }
-            return el;
+    },
+    createModel: {
+        value: function(el) {
+            el.elementModel = Montage.create(ElementModel).initialize(el);
        }
    },
@@ -94,8 +110,6 @@ exports.NJUtils = Object.create(Object.prototype, {
    ///// TODO: find a different place for this function
    makeElementModel: {
        value: function(el, selection, controller, isShape) {
-            //el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape);
            var p3d = Montage.create(Properties3D);
            var shapeProps = null;
diff --git a/js/models/element-model.js b/js/models/element-model.js
index 0e199a67..72d61806 100755
--- a/js/models/element-model.js
+++ b/js/models/element-model.js
@@ -4,10 +4,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-var Montage = require("montage/core/core").Montage,
+var Montage             = require("montage/core/core").Montage,
-    Properties3D    = require("js/models/properties-3d").Properties3D,
+    Properties3D        = require("js/models/properties-3d").Properties3D,
-    ShapeModel    = require("js/models/shape-model").ShapeModel,
+    ShapeModel          = require("js/models/shape-model").ShapeModel,
-    ControllerFactory   = require("js/controllers/elements/controller-factory").ControllerFactory;
+    ControllerFactory   = require("js/controllers/elements/controller-factory").ControllerFactory,
+    PiData              = require("js/data/pi/pi-data").PiData;
 exports.ElementModel = Montage.create(Montage, {
    key:            { value: "_model_"},
@@ -35,17 +36,47 @@ exports.ElementModel = Montage.create(Montage, {
    stroke:         { value: null },
    initialize: {
-        value: function(type, selection, controller, isShape) {
+        value: function(el, isShape) {
-            /*
author	Valerio Virgillito	2012-05-02 15:34:49 -0700
committer	Valerio Virgillito	2012-05-02 15:34:49 -0700
commit	d2a5fcbaed6b3c3377edecbc27e6a2818b79be40 (patch)
tree	75e443147645e70272e89cfe0ec11318fdcf6adf /js
parent	5a74b74e8ec76d60cadf623cabaa0b667f1c4058 (diff)
download	ninja-d2a5fcbaed6b3c3377edecbc27e6a2818b79be40.tar.gz

diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index c80ba36e..4ea9c659 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -37,11 +37,11 @@
37	<body>	37	<body>
38	<div id="tagProperties" class="subToolHolderPanel">	38	<div id="tagProperties" class="subToolHolderPanel">
39	<div id="tagToolContainer" class="tagRadioButtons">	39	<div id="tagToolContainer" class="tagRadioButtons">
40	<input type="radio" id="divTool" class="tag-type" title="Div Element" name="TagRadios" checked/>	40	<input type="radio" id="divTool" data-montage-id="divTool" class="tag-type" title="Div Element" name="TagRadios" value="div" checked/>
41	<input type="radio" id="imageTool" class="tag-type" title="Image Element" name="TagRadios"/>	41	<input type="radio" id="imageTool" data-montage-id="imageTool" class="tag-type" title="Image Element" value="image" name="TagRadios"/>
42	<input type="radio" id="videoTool" class="tag-type" title="Video Element" name="TagRadios"/>	42	<input type="radio" id="videoTool" data-montage-id="videoTool" class="tag-type" title="Video Element" value="video" name="TagRadios"/>
43	<input type="radio" id="canvasTool" class="tag-type" title="Canvas Element" name="TagRadios"/>	43	<input type="radio" id="canvasTool" data-montage-id="canvasTool" class="tag-type" title="Canvas Element" value="canvas" name="TagRadios"/>
44	<input type="radio" id="customTool" class="tag-type" title="Custom Element" name="TagRadios"/>	44	<input type="radio" id="customTool" data-montage-id="customTool" class="tag-type" title="Custom Element" value="custom" name="TagRadios"/>
45		45
46	<div class="nj-divider divider-vertical"> </div>	46	<div class="nj-divider divider-vertical"> </div>
47		47
@@ -67,10 +67,10 @@
67	<label class="label"> Position:</label>	67	<label class="label"> Position:</label>
68		68
69	<select id="positionCB" class="nj-skinned">	69	<select id="positionCB" class="nj-skinned">
		70	<option>Static</option>
70	<option>Absolute</option>	71	<option>Absolute</option>
71	<option>Relative</option>	72	<option>Relative</option>
72	<option>Fixed</option>	73	<option>Fixed</option>
73	<option>Static</option>
74	<option>Inherit</option>	74	<option>Inherit</option>
75	</select>	75	</select>
76		76


diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js index 1caabc35..6519d5b8 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.js +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -33,9 +33,9 @@ exports.TagProperties = Montage.create(ToolProperties, {
33		33
34	handleClick: {	34	handleClick: {
35	value: function(event) {	35	value: function(event) {
36	this.selectedElement = event._event.target.id;	36	this.selectedElement = event._event.target.value;
37		37
38	if(this.selectedElement === "customTool") {	38	if(this.selectedElement === "custom") {
39	this.customName.style["display"] = "";	39	this.customName.style["display"] = "";
40	this.customLabel.style["display"] = "";	40	this.customLabel.style["display"] = "";
41	} else {	41	} else {
@@ -46,7 +46,7 @@ exports.TagProperties = Montage.create(ToolProperties, {
46	},	46	},
47		47
48	_selectedElement: {	48	_selectedElement: {
49	value: "divTool", enumerable: false	49	value: "div", enumerable: false
50	},	50	},
51		51
52	selectedElement: {	52	selectedElement: {


diff --git a/js/controllers/elements/controller-factory.js b/js/controllers/elements/controller-factory.js index 1bbbbce0..3ac3fe14 100755 --- a/js/controllers/elements/controller-factory.js +++ b/js/controllers/elements/controller-factory.js
@@ -42,6 +42,8 @@ exports.ControllerFactory = Montage.create(Montage, {
42	return ImageController;	42	return ImageController;
43	} else if(value.indexOf("video") !== -1) {	43	} else if(value.indexOf("video") !== -1) {
44	return VideoController;	44	return VideoController;
		45	} else {
		46	return BlockController;
45	}	47	}
46	} catch (err) {	48	} catch (err) {
47	console.log("Could not create Controller Factory " + err);	49	console.log("Could not create Controller Factory " + err);


diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 452d09f1..7f553551 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js
@@ -11,9 +11,8 @@ exports.ElementController = Montage.create(Component, {
11		11
12	addElement: {	12	addElement: {
13	value: function(el, styles) {	13	value: function(el, styles) {
14	this.application.ninja.currentDocument.documentRoot.appendChild(el);	14	this.application.ninja.currentSelectedContainer.appendChild(el);
15	// Nested elements - TODO make sure the CSS is correct before nesting elements	15
16	// this.application.ninja.currentSelectedContainer.appendChild(el);
17	if(styles) {	16	if(styles) {
18	this.application.ninja.stylesController.setElementStyles(el, styles);	17	this.application.ninja.stylesController.setElementStyles(el, styles);
19	}	18	}


diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index 65161b4f..d1dc9f34 100755 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js
@@ -100,7 +100,7 @@ exports.PiData = Montage.create( Montage, {
100	}	100	}
101	]	101	]
102	},	102	},
103	imagePi: {	103	imgPi: {
104	value: [	104	value: [
105	{	105	{
106	label: "Image Properties",	106	label: "Image Properties",
@@ -807,8 +807,8 @@ exports.PiData = Montage.create( Montage, {
807	]	807	]
808	]	808	]
809	}	809	}
810	] //value: [	810	]
811	} //BrushStrokePi: {	811	}
812	});	812	});
813		813
814		814


diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index dae128e4..301af3f1 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js
@@ -54,13 +54,25 @@ exports.NJUtils = Object.create(Object.prototype, {
54	return document.createTextNode(text);	54	return document.createTextNode(text);
55	}	55	}
56	},	56	},
57		57
58	///// Quick "createElement" function "attr" can be classname or object	58	///// Quick "createElement" function "attr" can be classname or object
59	///// with attribute key/values	59	///// with attribute key/values
60	///// Suppor for data attributes	60	///// Support for data attributes
61	make : {	61	///// Support user/ninja document
62	value: function(tag, attr) {	62	make: {
63	var el = document.createElement(tag);	63	value: function(tag, attr, doc) {
		64	var _doc, el;
		65
		66	_doc = doc ? doc._document : document;
		67	el = _doc.createElement(tag);
		68	this.decor(el, attr);
		69
		70	return el;
		71	}
		72	},
		73
		74	decor: {
		75	value: function(el, attr) {
64	if (typeof attr === 'object') {	76	if (typeof attr === 'object') {
65	for (var a in attr) {	77	for (var a in attr) {
66	if (attr.hasOwnProperty(a)) {	78	if (attr.hasOwnProperty(a)) {
@@ -74,8 +86,12 @@ exports.NJUtils = Object.create(Object.prototype, {
74	} else if (typeof attr === 'string') {	86	} else if (typeof attr === 'string') {
75	el.className = (el.className + ' ' + attr).trim();	87	el.className = (el.className + ' ' + attr).trim();
76	}	88	}
77		89	}
78	return el;	90	},
		91
		92	createModel: {
		93	value: function(el) {
		94	el.elementModel = Montage.create(ElementModel).initialize(el);
79	}	95	}
80	},	96	},
81		97
@@ -94,8 +110,6 @@ exports.NJUtils = Object.create(Object.prototype, {
94	///// TODO: find a different place for this function	110	///// TODO: find a different place for this function
95	makeElementModel: {	111	makeElementModel: {
96	value: function(el, selection, controller, isShape) {	112	value: function(el, selection, controller, isShape) {
97	//el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape);
98
99	var p3d = Montage.create(Properties3D);	113	var p3d = Montage.create(Properties3D);
100		114
101	var shapeProps = null;	115	var shapeProps = null;


diff --git a/js/models/element-model.js b/js/models/element-model.js index 0e199a67..72d61806 100755 --- a/js/models/element-model.js +++ b/js/models/element-model.js
@@ -4,10 +4,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
6		6
7	var Montage = require("montage/core/core").Montage,	7	var Montage = require("montage/core/core").Montage,
8	Properties3D = require("js/models/properties-3d").Properties3D,	8	Properties3D = require("js/models/properties-3d").Properties3D,
9	ShapeModel = require("js/models/shape-model").ShapeModel,	9	ShapeModel = require("js/models/shape-model").ShapeModel,
10	ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory;	10	ControllerFactory = require("js/controllers/elements/controller-factory").ControllerFactory,
		11	PiData = require("js/data/pi/pi-data").PiData;
11		12
12	exports.ElementModel = Montage.create(Montage, {	13	exports.ElementModel = Montage.create(Montage, {
13	key: { value: "_model_"},	14	key: { value: "_model_"},
@@ -35,17 +36,47 @@ exports.ElementModel = Montage.create(Montage, {
35	stroke: { value: null },	36	stroke: { value: null },
36		37
37	initialize: {	38	initialize: {
38	value: function(type, selection, controller, isShape) {	39	value: function(el, isShape) {
39	/*	40