Merge pull request #124 from ericguzman/AddAnimationsLibrary

Presets Panel - Adding Animations Tab
author: Valerio Virgillito 2012-03-16 17:13:44 -0700
committer: Valerio Virgillito 2012-03-16 17:13:44 -0700
commit: 954f5a13e371febcb1c0fb8015c577ee51c23130 (patch)
tree: c336ca8ae1bcd6761c924bacf8bfe7143b2c7885 /js/panels/presets/animations-presets.reel
parent: 4bec28fbd8371deceffd1563190cb5e399d554d3 (diff)
parent: 163ffbf531872a81c4d4be4321b065c22cf0715b (diff)
download: ninja-954f5a13e371febcb1c0fb8015c577ee51c23130.tar.gz
3 files changed, 137 insertions, 0 deletions
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.css b/js/panels/presets/animations-presets.reel/animations-presets.css
new file mode 100644
index 00000000..0441c1cf
--- /dev/null
+++ b/js/panels/presets/animations-presets.reel/animations-presets.css
@@ -0,0 +1,5 @@
+/* <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> */
+\ No newline at end of file
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.html b/js/panels/presets/animations-presets.reel/animations-presets.html
new file mode 100644
index 00000000..c9d752af
--- /dev/null
+++ b/js/panels/presets/animations-presets.reel/animations-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="animations-presets.css" type="text/css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/presets/animations-presets.reel",
+                "name" : "AnimationsLibrary",
+                "properties" : {
+                    "element" : {"#" : "animationsLibrary"},
+                    "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="animationsLibrary" class="animationsLibrary">
+    <div id="libraryContainer"></div>
+</section>
+</body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js
new file mode 100644
index 00000000..ab200212
--- /dev/null
+++ b/js/panels/presets/animations-presets.reel/animations-presets.js
@@ -0,0 +1,73 @@
+/* <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-animation-presets").animationPresets;
+exports.AnimationsLibrary = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    presetData : {
+        value: null
+    },
+    deserializedFromTemplate : {
+        value: function() {
+            this.presetData = DefaultPresets;
+        }
+    },
+    handleNodeActivation: {
+        value: function(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;
+        }
+    }
+});
author	Valerio Virgillito	2012-03-16 17:13:44 -0700
committer	Valerio Virgillito	2012-03-16 17:13:44 -0700
commit	954f5a13e371febcb1c0fb8015c577ee51c23130 (patch)
tree	c336ca8ae1bcd6761c924bacf8bfe7143b2c7885 /js/panels/presets/animations-presets.reel
parent	4bec28fbd8371deceffd1563190cb5e399d554d3 (diff)
parent	163ffbf531872a81c4d4be4321b065c22cf0715b (diff)
download	ninja-954f5a13e371febcb1c0fb8015c577ee51c23130.tar.gz

diff --git a/js/panels/presets/animations-presets.reel/animations-presets.css b/js/panels/presets/animations-presets.reel/animations-presets.css new file mode 100644 index 00000000..0441c1cf --- /dev/null +++ b/js/panels/presets/animations-presets.reel/animations-presets.css
@@ -0,0 +1,5 @@
	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> */ \ No newline at end of file


diff --git a/js/panels/presets/animations-presets.reel/animations-presets.html b/js/panels/presets/animations-presets.reel/animations-presets.html new file mode 100644 index 00000000..c9d752af --- /dev/null +++ b/js/panels/presets/animations-presets.reel/animations-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="animations-presets.css" type="text/css">
	11	<script type="text/montage-serialization">
	12	{
	13	"owner": {
	14	"module" : "js/panels/presets/animations-presets.reel",
	15	"name" : "AnimationsLibrary",
	16	"properties" : {
	17	"element" : {"#" : "animationsLibrary"},
	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="animationsLibrary" class="animationsLibrary">
	56	<div id="libraryContainer"></div>
	57	</section>
	58	</body>
	59	</html> \ No newline at end of file


diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js new file mode 100644 index 00000000..ab200212 --- /dev/null +++ b/js/panels/presets/animations-presets.reel/animations-presets.js
@@ -0,0 +1,73 @@
	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-animation-presets").animationPresets;
	10
	11	exports.AnimationsLibrary = Montage.create(Component, {
	12	hasTemplate: {
	13	value: true
	14	},
	15	presetData : {
	16	value: null
	17	},
	18	deserializedFromTemplate : {
	19	value: function() {
	20	this.presetData = DefaultPresets;
	21	}
	22	},
	23	handleNodeActivation: {
	24	value: function(presetData) {
	25	//debugger;
	26	var selection = this.application.ninja.selectedElements,
	27	stylesController = this.application.ninja.stylesController,
	28	selectorBase = presetData.selectorBase,
	29	self = this;
	30
	31	if(!selection \|\| !selection.length \|\| selection.length === 0) {
	32	return false;
	33	}
	34
	35	selectorBase = stylesController.generateClassName(selectorBase);
	36
	37	presetData.rules.forEach(function(rule) {
	38	if(rule.isKeyFrameRule) {
	39	this.application.ninja.stylesController.addRule(
	40	'@-webkit-keyframes ' + presetData.selectorBase,
	41	this.stringifyKeys(rule.keys)
	42	);
	43	} else {
	44	this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
	45	}
	46
	47	}, this);
	48
	49	selection.forEach(function(el) {
	50	el._element.classList.add(selectorBase);
	51	}, this);
	52
	53	}
	54	},
	55
	56	stringifyKeys : {
	57	value: function(keysArray) {
	58	var keysString = '';
	59
	60	keysArray.forEach(function(key) {
	61	var styles = '', style;
	62
	63	for(style in key.styles) {
	64	styles += style + ':' + key.styles[style] + '; ';
	65	}
	66
	67	keysString += key.keyText + ' {' + styles + ' }';
	68	});
	69
	70	return keysString;
	71	}
	72	}
	73	});