Presets Panel - Initial commit with panel content

author: Eric Guzman 2012-02-07 13:35:27 -0800
committer: Eric Guzman 2012-02-07 13:35:27 -0800
commit: 18f687974273b5ed7374ca5ae440c797064c5d0f (patch)
tree: 07b3d15cf2daae062416e3824458dfd4ac79d2fa /js/panels/presets/style-presets.reel
parent: c8c78a82aa4ec8ad8b53c6240f3b144ca113cf05 (diff)
download: ninja-18f687974273b5ed7374ca5ae440c797064c5d0f.tar.gz
3 files changed, 177 insertions, 0 deletions
diff --git a/js/panels/presets/style-presets.reel/style-presets.css b/js/panels/presets/style-presets.reel/style-presets.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.css
diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html
new file mode 100644
index 00000000..5bc83ffa
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" href="style-presets.css" type="text/css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/presets/style-presets.reel",
+                "name" : "StylesLibrary",
+                "properties" : {
+                    "element" : {"#" : "stylesLibrary"},
+                    "treeList" : {"@" : "treeList"}
+                }
+            },
+            "presetsController" : {
+                "module": "js/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "text",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "data2"
+                    }
+                }
+            },
+            "presetsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "libraryContainer"},
+                    "branchComponent" : {"@": "njbranch" },
+                    "contentController": {"@": "presetsController"},
+                    "showRoot" : false
+                }
+            },
+            "njbranch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "NinjaBranch"
+            }
+        }
+    </script>
+</head>
+<body>
+<section id="stylesLibrary" class="stylesLibrary">
+    <div id="libraryContainer"></div>
+</section>
+</body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
new file mode 100644
index 00000000..3a71c344
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -0,0 +1,119 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+exports.StylesLibrary = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    contentPanel : {
+        value: "presets" // get from local storage
+    },
+    templateDidLoad : {
+        value: function() {
+            console.log('deserialized');
+        }
+    },
+    treeList : {
+        value : null
+    },
+    data2: {
+        value: {
+            "text": "styles",
+            "children": [{
+                "text": "Box Styles",
+                "children": [
+                    {
+                        "text": "Border-Radius",
+                        "classNameBase" : "border-radius",
+                        "styles" : {
+                            "border-radius": "100px",
+                            "border" : "1px solid #333"
+                        }
+                    },
+                    {
+                        "text": "Drop Shadow",
+                        "classNameBase" : "drop-shadow",
+                        "styles" : {
+                            "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
+                            "border" : "1px solid #CCC"
+                        }
+                    },
+                    {
+                        "text": "Fancy Box",
+                        "classNameBase" : "fancy-box",
+                        "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",
+                            "border-radius": "30px",
+                            "background-color": "#7db9e8",
+                            "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
+                        }
+                    }]
+            }, {
+                "text": "Text Styles",
+                "children": [
+                    { "text": "Italic" },
+                    { "text": "Text Shadow" },
+                    { "text": "Text Color" } ]
+            }, {
+                "text": "Color Styles",
+                "children": [
+                    { "text": "Background Gradient" },
+                    { "text": "Background Color" },
+                    { "text": "Text Highlight" } ]
+            }]
+        }
+    },
+    didDraw: {
+        value : function() {
+            console.log('Presets Panel prepare for draw.');
+//            this.treeList.items.push({
+//                label : "Box Style",
+//                type : 'leaf'
+//            });
+        }
+    },
+    applyPresetSelection : {
+        value: function(presetData) {
+            var selection = this.application.ninja.selectedElements,
+                self = this;
+            function setStopRuleSelector(selector) {
+                self.application.ninja
+                    .currentDocument.documentRoot
+                    .elementModel.controller
+                    .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
+            }
+            selection.forEach(function(el) {
+                el._element.style.webkitTransition = "all 450ms linear";
+                el._element.addEventListener("webkitTransitionEnd", function(e) {
+                    console.log("calling transition end");
+                    setStopRuleSelector("*");
+                });
+                setStopRuleSelector("transitionStopRule");
+                this.application.ninja.stylesController.setElementStyles(el._element, presetData.styles);
+            }, this);
+        }
+    },
+    shouldChangeSelection : {
+        value : function(controller, newSelection, oldSelection) {
+            //
+            //debugger;
+            console.log('1Handle should change selection');
+            return false;
+        }
+    }
+});
author	Eric Guzman	2012-02-07 13:35:27 -0800
committer	Eric Guzman	2012-02-07 13:35:27 -0800
commit	18f687974273b5ed7374ca5ae440c797064c5d0f (patch)
tree	07b3d15cf2daae062416e3824458dfd4ac79d2fa /js/panels/presets/style-presets.reel
parent	c8c78a82aa4ec8ad8b53c6240f3b144ca113cf05 (diff)
download	ninja-18f687974273b5ed7374ca5ae440c797064c5d0f.tar.gz

diff --git a/js/panels/presets/style-presets.reel/style-presets.css b/js/panels/presets/style-presets.reel/style-presets.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/js/panels/presets/style-presets.reel/style-presets.css


diff --git a/js/panels/presets/style-presets.reel/style-presets.html b/js/panels/presets/style-presets.reel/style-presets.html new file mode 100644 index 00000000..5bc83ffa --- /dev/null +++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -0,0 +1,58 @@
	1	<!DOCTYPE html>
	2	<!-- <copyright>
	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	6	</copyright> -->
	7	<html lang="en">
	8	<head>
	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	10	<link rel="stylesheet" href="style-presets.css" type="text/css">
	11	<script type="text/montage-serialization">
	12	{
	13	"owner": {
	14	"module" : "js/panels/presets/style-presets.reel",
	15	"name" : "StylesLibrary",
	16	"properties" : {
	17	"element" : {"#" : "stylesLibrary"},
	18	"treeList" : {"@" : "treeList"}
	19	}
	20	},
	21	"presetsController" : {
	22	"module": "js/controllers/tree-controller",
	23	"name": "TreeController",
	24	"properties" : {
	25	"branchKey" : "children",
	26	"labelKey" : "text",
	27	"delegate": {"@": "owner" }
	28	},
	29	"bindings": {
	30	"content": {
	31	"boundObject": {"@": "owner"},
	32	"boundObjectPropertyPath": "data2"
	33	}
	34	}
	35	},
	36	"presetsContainer" : {
	37	"module" : "js/components/treeview/treeview.reel",
	38	"name" : "Treeview",
	39	"properties" : {
	40	"element" : {"#": "libraryContainer"},
	41	"branchComponent" : {"@": "njbranch" },
	42	"contentController": {"@": "presetsController"},
	43	"showRoot" : false
	44	}
	45	},
	46	"njbranch" : {
	47	"module" : "js/components/treeview/ninja-branch.reel",
	48	"name" : "NinjaBranch"
	49	}
	50	}
	51	</script>
	52	</head>
	53	<body>
	54	<section id="stylesLibrary" class="stylesLibrary">
	55	<div id="libraryContainer"></div>
	56	</section>
	57	</body>
	58	</html> \ No newline at end of file


diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js new file mode 100644 index 00000000..3a71c344 --- /dev/null +++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -0,0 +1,119 @@
	1	/* <copyright>
	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6
	7	var Montage = require("montage/core/core").Montage,
	8	Component = require("montage/ui/component").Component;
	9
	10	exports.StylesLibrary = Montage.create(Component, {
	11	hasTemplate: {
	12	value: true
	13	},
	14	contentPanel : {
	15	value: "presets" // get from local storage
	16	},
	17	templateDidLoad : {
	18	value: function() {
	19	console.log('deserialized');
	20	}
	21	},
	22	treeList : {
	23	value : null
	24	},
	25	data2: {
	26	value: {
	27	"text": "styles",
	28	"children": [{
	29	"text": "Box Styles",
	30	"children": [
	31	{
	32	"text": "Border-Radius",
	33	"classNameBase" : "border-radius",
	34	"styles" : {
	35	"border-radius": "100px",
	36	"border" : "1px solid #333"
	37	}
	38	},
	39	{
	40	"text": "Drop Shadow",
	41	"classNameBase" : "drop-shadow",
	42	"styles" : {
	43	"box-shadow": "2px 2px 50px rgba(0,0,0,0.5)",
	44	"border" : "1px solid #CCC"
	45	}
	46	},
	47	{
	48	"text": "Fancy Box",
	49	"classNameBase" : "fancy-box",
	50	"styles" : {
	51	"box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333",
	52	"border" : "1px solid #FFF",
	53	"border-radius": "30px",
	54	"background-color": "#7db9e8",
	55	"background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)"
	56	}
	57	}]
	58	}, {
	59	"text": "Text Styles",
	60	"children": [
	61	{ "text": "Italic" },
	62	{ "text": "Text Shadow" },
	63	{ "text": "Text Color" } ]
	64	}, {
	65	"text": "Color Styles",
	66	"children": [
	67	{ "text": "Background Gradient" },
	68	{ "text": "Background Color" },
	69	{ "text": "Text Highlight" } ]
	70	}]
	71	}
	72	},
	73	didDraw: {
	74	value : function() {
	75	console.log('Presets Panel prepare for draw.');
	76	// this.treeList.items.push({
	77	// label : "Box Style",
	78	// type : 'leaf'
	79	// });
	80	}
	81	},
	82	applyPresetSelection : {
	83	value: function(presetData) {
	84	var selection = this.application.ninja.selectedElements,
	85	self = this;
	86
	87	function setStopRuleSelector(selector) {
	88	self.application.ninja
	89	.currentDocument.documentRoot
	90	.elementModel.controller
	91	.changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
	92	}
	93
	94	selection.forEach(function(el) {
	95	el._element.style.webkitTransition = "all 450ms linear";
	96
	97	el._element.addEventListener("webkitTransitionEnd", function(e) {
	98	console.log("calling transition end");
	99	setStopRuleSelector("*");
	100	});
	101
	102	setStopRuleSelector("transitionStopRule");
	103
	104	this.application.ninja.stylesController.setElementStyles(el._element, presetData.styles);
	105	}, this);
	106
	107	}
	108	},
	109	shouldChangeSelection : {
	110	value : function(controller, newSelection, oldSelection) {
	111	//
	112	//debugger;
	113	console.log('1Handle should change selection');
	114	return false;
	115	}
	116	}
	117
	118
	119	});