From 163ffbf531872a81c4d4be4321b065c22cf0715b Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 16 Mar 2012 17:09:08 -0700
Subject: Presets Panel - Adding Animations Tab
---
.../animations-presets.reel/animations-presets.css | 5 ++
.../animations-presets.html | 59 ++++++++++++++
.../animations-presets.reel/animations-presets.js | 73 +++++++++++++++++
js/panels/presets/content.reel/content.html | 12 ++-
js/panels/presets/default-animation-presets.js | 94 ++++++++++++++++++++++
5 files changed, 240 insertions(+), 3 deletions(-)
create mode 100644 js/panels/presets/animations-presets.reel/animations-presets.css
create mode 100644 js/panels/presets/animations-presets.reel/animations-presets.html
create mode 100644 js/panels/presets/animations-presets.reel/animations-presets.js
create mode 100644 js/panels/presets/default-animation-presets.js
(limited to 'js')
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 @@
+/*
+ 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.
+ */
\ 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ 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 @@
+/*
+ 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,
+ 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;
+ }
+ }
+});
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
index 38de2a6d..f01e6435 100644
--- a/js/panels/presets/content.reel/content.html
+++ b/js/panels/presets/content.reel/content.html
@@ -19,7 +19,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"tabBar" : {"#": "tab-bar" },
"tabs" : [
{"key":"styles", "tab": {"#": "styles" }},
- {"key":"transitions", "tab": {"#": "transitions" }}
+ {"key":"transitions", "tab": {"#": "transitions" }},
+ {"key":"animations", "tab": {"#": "animations" }}
]
}
},
@@ -30,8 +31,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"element": {"#": "librarySlot"},
"switchComponents": {
"styles": {"@": "stylesLibrary"},
- "transitions": {"@": "transitionsLibrary"}
-
+ "transitions": {"@": "transitionsLibrary"},
+ "animations": {"@": "animationsLibrary"}
}
},
"bindings": {
@@ -49,6 +50,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
"transitionsLibrary": {
"module": "js/panels/presets/transitions-presets.reel",
"name": "TransitionsLibrary"
+ },
+ "animationsLibrary": {
+ "module": "js/panels/presets/animations-presets.reel",
+ "name": "AnimationsLibrary"
}
}
@@ -59,6 +64,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
new file mode 100644
index 00000000..10a3e906
--- /dev/null
+++ b/js/panels/presets/default-animation-presets.js
@@ -0,0 +1,94 @@
+/*
+ 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.
+ */
+
+exports.animationPresets = {
+ "text": "Animation Presets Library",
+ "children": [{
+ "text": "Border Animations",
+ "children": [
+ {
+ "text": "Border Morph",
+ "selectorBase" : "border-morph",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-animation": "border-morph 2s infinite"
+ }
+ },
+ {
+ "isKeyFrameRule": true,
+ "keys" : [{
+ "keyText": "0%",
+ "styles": { "border-radius": "0" }
+ }, {
+ "keyText": "50%",
+ "styles": {
+ "border-radius": "100%"
+ }
+ }, {
+ "keyText": "100%",
+ "styles": {
+ "border-radius": "0%"
+ }
+ }]
+ }]
+ }]
+ }, {
+ "text": "3D Animations",
+ "children": [
+ {
+ "text": "Rotater",
+ "selectorBase" : "rotate-with-alpha-keyframes",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-animation-name": "rotate-with-alpha-keyframes",
+ "-webkit-animation-duration": "5s",
+ "-webkit-animation-iteration-count": "infinite",
+ "-webkit-animation-direction": "normal",
+ "-webkit-animation-timing-function": "ease-out",
+ "-webkit-transform-origin": "200% 50%",
+ "-webkit-transform-style": "preserve-3d",
+ "-webkit-transform": "perspective(1000)",
+ "-webkit-animation-delay": "0s"
+ }
+ },{
+ "isKeyFrameRule": true,
+ "keys" : [{
+ "keyText": "0%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "perspective(1000) rotateY(0deg)"
+ }
+ }, {
+ "keyText": "70%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "perspective(1000) rotateY(0deg)"
+ }
+ }, {
+ "keyText": "85%",
+ "styles": {
+ "opacity": "0",
+ "-webkit-transform": "perspective(1000) rotateY(95deg)"
+ }
+ }, {
+ "keyText": "86%",
+ "styles": {
+ "opacity": "0",
+ "-webkit-transform": "perspective(1000) rotateY(-90deg)"
+ }
+ }, {
+ "keyText": "100%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "perspective(1000) rotateY(0deg)"
+ }
+ }]
+ }]
+ }]
+ }]
+};
\ No newline at end of file
--
cgit v1.2.3