3 files changed, 138 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..0db4d3c0
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -0,0 +1,59 @@
+<!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": "presetData"
+                    }
+                }
+            },
+            "presetsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "libraryContainer"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "presetsController"},
+                    "activationEvent" : "dblclick",
+                    "showRoot" : false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
+            }
+        }
+    </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..7871683e
--- /dev/null
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -0,0 +1,79 @@
+/* <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,
+    DefaultPresets = require("js/panels/presets/default-style-presets").stylePresets;
+exports.StylesLibrary = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    presetData : {
+        value : null
+    },
+    templateDidLoad : {
+        value: function() {
+            this.presetData = DefaultPresets;
+        }
+    },
+    handleNodeActivation: {
+        value: function(presetData) {
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this, className;
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
+            }
+            function setStopRuleSelector(selector) {
+                self.application.ninja
+                    .currentDocument.documentRoot
+                    .elementModel.controller
+                    .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
+            }
+            selectorBase = stylesController.generateClassName(selectorBase);
+            presetData.rules.forEach(function(rule) {
+                stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles);
+            }, this);
+            selection.forEach(function(el) {
+                el._element.style.webkitTransition = "all 450ms linear";
+                el._element.addEventListener("webkitTransitionEnd", function(e) {
+                    el._element.style.webkitTransition = '';
+                    setStopRuleSelector("*");
+                }, true);
+                setStopRuleSelector("transitionStopRule");
+                el._element.classList.add(selectorBase);
+                //// Keep track of elements with presets and don't add duplicates
+            }, this);
+        }
+    },
+    handleDragEnd : {
+        value: function(sourceObject) {
+            console.log(sourceObject);
+        }
+    },
+    shouldChangeSelection : {
+        value : function(controller, newSelection, oldSelection) {
+            //
+            //debugger;
+            console.log('1Handle should change selection');
+            return false;
+        }
+    }
+});

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..0db4d3c0 --- /dev/null +++ b/js/panels/presets/style-presets.reel/style-presets.html
@@ -0,0 +1,59 @@
	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": "presetData"
	33	}
	34	}
	35	},
	36	"presetsContainer" : {
	37	"module" : "js/components/treeview/treeview.reel",
	38	"name" : "Treeview",
	39	"properties" : {
	40	"element" : {"#": "libraryContainer"},
	41	"branchComponent" : {"@": "branch" },
	42	"contentController": {"@": "presetsController"},
	43	"activationEvent" : "dblclick",
	44	"showRoot" : false
	45	}
	46	},
	47	"branch" : {
	48	"module" : "js/components/treeview/ninja-branch.reel",
	49	"name" : "Branch"
	50	}
	51	}
	52	</script>
	53	</head>
	54	<body>
	55	<section id="stylesLibrary" class="stylesLibrary">
	56	<div id="libraryContainer"></div>
	57	</section>
	58	</body>
	59	</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..7871683e --- /dev/null +++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -0,0 +1,79 @@
	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	DefaultPresets = require("js/panels/presets/default-style-presets").stylePresets;
	10
	11	exports.StylesLibrary = Montage.create(Component, {
	12	hasTemplate: {
	13	value: true
	14	},
	15	presetData : {
	16	value : null
	17	},
	18	templateDidLoad : {
	19	value: function() {
	20	this.presetData = DefaultPresets;
	21	}
	22	},
	23	handleNodeActivation: {
	24	value: function(presetData) {
	25	var selection = this.application.ninja.selectedElements,
	26	stylesController = this.application.ninja.stylesController,
	27	selectorBase = presetData.selectorBase,
	28	self = this, className;
	29
	30	if(!selection \|\| !selection.length \|\| selection.length === 0) {
	31	return false;
	32	}
	33
	34	function setStopRuleSelector(selector) {
	35	self.application.ninja
	36	.currentDocument.documentRoot
	37	.elementModel.controller
	38	.changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector);
	39	}
	40
	41	selectorBase = stylesController.generateClassName(selectorBase);
	42
	43	presetData.rules.forEach(function(rule) {
	44	stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles);
	45	}, this);
	46
	47	selection.forEach(function(el) {
	48	el._element.style.webkitTransition = "all 450ms linear";
	49
	50	el._element.addEventListener("webkitTransitionEnd", function(e) {
	51	el._element.style.webkitTransition = '';
	52	setStopRuleSelector("*");
	53	}, true);
	54	setStopRuleSelector("transitionStopRule");
	55	el._element.classList.add(selectorBase);
	56
	57	//// Keep track of elements with presets and don't add duplicates
	58
	59	}, this);
	60
	61
	62	}
	63	},
	64	handleDragEnd : {
	65	value: function(sourceObject) {
	66	console.log(sourceObject);
	67	}
	68	},
	69	shouldChangeSelection : {
	70	value : function(controller, newSelection, oldSelection) {
	71	//
	72	//debugger;
	73	console.log('1Handle should change selection');
	74	return false;
	75	}
	76	}
	77
	78
	79	});