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/panels/presets')
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
From a6a6f9bcc5ff92f5bb5e9275336dfaec2d8e8f4c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 16 Mar 2012 17:56:25 -0700
Subject: Presets Panel - Change Tab labels, Add Un-3d preset
---
js/panels/presets/content.reel/content.html | 6 +++---
js/panels/presets/default-transition-presets.js | 16 ++++++++++++++++
2 files changed, 19 insertions(+), 3 deletions(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
index f01e6435..afbdd559 100644
--- a/js/panels/presets/content.reel/content.html
+++ b/js/panels/presets/content.reel/content.html
@@ -62,9 +62,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 00873231..48f7c2b7 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -88,6 +88,22 @@ exports.transitionPresets = {
"-webkit-transform": "rotate(180deg)"
}
}]
+ },{
+ "text": "Remove 3D",
+ "selectorBase" : "remove-3d",
+ "rules" : [{
+ "selectorSuffix": "",
+ "styles" : {
+ "-webkit-transition": "all 0.4s ease-in"
+ }
+ },
+ {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "-webkit-transform": "rotateX(0deg)",
+ "opacity": "1"
+ }
+ }]
}]
}]
};
\ No newline at end of file
--
cgit v1.2.3
From 41740c12e03ca1380eb80dc557faedae05e4ce1c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Sat, 17 Mar 2012 00:06:03 -0700
Subject: Presets Panel - Fix conflict with default transition presets
---
js/panels/presets/default-transition-presets.js | 30 +++++++++++++++++++++++++
1 file changed, 30 insertions(+)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 48f7c2b7..15f4882f 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -89,6 +89,36 @@ exports.transitionPresets = {
}
}]
},{
+ "text": "Scale Up",
+ "selectorBase" : "scale-up",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-transition": "-webkit-transform 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "-webkit-transform": "scale(1.4)"
+ }
+ }]
+ },
+ {
+ "text": "Scale Down",
+ "selectorBase" : "scale-down",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-transition": "-webkit-transform 0.4s ease-in"
+ }
+ }, {
+ "selectorSuffix" : ":hover",
+ "styles" : {
+ "-webkit-transform": "scale(.5)"
+ }
+ }]
+ },
+ {
"text": "Remove 3D",
"selectorBase" : "remove-3d",
"rules" : [{
--
cgit v1.2.3
From 24fd82f555d0e3e591acceb0322bc514b87e95fb Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Tue, 20 Mar 2012 14:15:34 -0700
Subject: Presets - Animation update
---
js/panels/presets/default-animation-presets.js | 79 ++++++++++++++++++++------
1 file changed, 62 insertions(+), 17 deletions(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index 10a3e906..2e656e86 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -18,23 +18,23 @@ exports.animationPresets = {
"-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%"
- }
+ {
+ "isKeyFrameRule": true,
+ "keys" : [{
+ "keyText": "0%",
+ "styles": { "border-radius": "0" }
+ }, {
+ "keyText": "50%",
+ "styles": {
+ "border-radius": "100%"
+ }
+ }, {
+ "keyText": "100%",
+ "styles": {
+ "border-radius": "0%"
+ }
+ }]
}]
- }]
}]
}, {
"text": "3D Animations",
@@ -50,7 +50,7 @@ exports.animationPresets = {
"-webkit-animation-iteration-count": "infinite",
"-webkit-animation-direction": "normal",
"-webkit-animation-timing-function": "ease-out",
- "-webkit-transform-origin": "200% 50%",
+ "-webkit-transform-origin": "100% 50%",
"-webkit-transform-style": "preserve-3d",
"-webkit-transform": "perspective(1000)",
"-webkit-animation-delay": "0s"
@@ -89,6 +89,51 @@ exports.animationPresets = {
}
}]
}]
+ },
+ {
+ "text": "Rotate with Fade In",
+ "selectorBase" : "rotate-with-fade-in",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-animation-name": "rotate-with-fade-in",
+ "-webkit-animation-duration": "5s",
+ "-webkit-animation-iteration-count": "infinite",
+ "-webkit-animation-direction": "normal",
+ "-webkit-animation-timing-function": "ease-out",
+ "-webkit-transform-origin": "100% 50%",
+ "-webkit-transform-style": "preserve-3d",
+ "-webkit-transform": "perspective(1000)",
+ "-webkit-animation-delay": "0s"
+ }
+ },{
+ "isKeyFrameRule": true,
+ "keys" : [{
+ "keyText": "0%",
+ "styles": {
+ "opacity": "0",
+ "-webkit-transform": "perspective(1000) rotateY(-90deg)"
+ }
+ }, {
+ "keyText": "15%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "perspective(1000) rotateY(0deg)"
+ }
+ }, {
+ "keyText": "85%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "perspective(1000) rotateY(0deg)"
+ }
+ }, {
+ "keyText": "100%",
+ "styles": {
+ "opacity": "0",
+ "-webkit-transform": "perspective(1000) rotateY(95deg)"
+ }
+ }]
+ }]
}]
}]
};
\ No newline at end of file
--
cgit v1.2.3
From 0a601adc97f58673c2a720ee61f4c7d7e7bfb68f Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 21 Mar 2012 12:26:45 -0700
Subject: Presets Panel - Add Font style preset
---
js/panels/presets/default-style-presets.js | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js
index 3677d976..82bec34f 100644
--- a/js/panels/presets/default-style-presets.js
+++ b/js/panels/presets/default-style-presets.js
@@ -67,6 +67,24 @@ exports.stylePresets = {
"text-shadow": "1px 1px 3px #333"
}
}]
+ },
+ {
+ "text": "White Sans-Serif",
+ "selectorBase" : "white-sans-serif",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "color": "#FFFFFF",
+ "font-family": "helvetica,arial,sans-serif"
+ }
+ },
+ {
+ "selectorSuffix" : " h2",
+ "styles" : {
+ "color": "#C1C1C1",
+ "font-family": "helvetica,arial,sans-serif"
+ }
+ }]
}]
}]
};
\ No newline at end of file
--
cgit v1.2.3
From 72b0468221d599f64d563214573273607e38c993 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 23 Mar 2012 12:00:07 -0700
Subject: Presets Panel - Add slide/fade out animation
---
js/panels/presets/default-animation-presets.js | 48 ++++++++++++++++++++++++++
1 file changed, 48 insertions(+)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index 2e656e86..0730c2ef 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -36,6 +36,54 @@ exports.animationPresets = {
}]
}]
}]
+ }, {
+ "text": "3D Animations",
+ "children": [
+ {
+ "text": "Slide Out with Fade",
+ "selectorBase": "slide-fade-out",
+ "rules" : [{
+ "selectorSuffix" : "",
+ "styles" : {
+ "-webkit-animation-name": "slide-fade-out",
+ "-webkit-animation-duration": "5s",
+ "-webkit-animation-iteration-count": "infinite",
+ "-webkit-animation-direction": "normal",
+ "-webkit-animation-timing-function": "ease",
+ "-webkit-transform-style": "preserve-3d",
+ "-webkit-transform": "perspective(1000)",
+ "-webkit-animation-delay": "0s"
+ }
+ },{
+ "isKeyFrameRule": true,
+ "keys" : [{
+ "keyText": "0%",
+ "styles": {
+ "opacity": "0",
+ "-webkit-transform": "translate3d(0, 0, 0)"
+ }
+ }, {
+ "keyText": "10%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "translate3d(0, 0, 0)"
+ }
+ }, {
+ "keyText": "86%",
+ "styles": {
+ "opacity": "1",
+ "-webkit-transform": "translate3d(0, 0, 0)"
+
+ }
+ }, {
+ "keyText": "100%",
+ "styles": {
+ "opacity": "0",
+ "-webkit-transform": "translate3d(540px, 0, 0)"
+ }
+ }]
+ }]
+ }]
}, {
"text": "3D Animations",
"children": [
--
cgit v1.2.3
From 14bf5e88417fbbc1bfd3823a278cd759ff8a0897 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 23 Mar 2012 13:15:43 -0700
Subject: Presets - fixed preset group name ("2D")
---
js/panels/presets/default-animation-presets.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
(limited to 'js/panels/presets')
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index 0730c2ef..64f91ea6 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -37,7 +37,7 @@ exports.animationPresets = {
}]
}]
}, {
- "text": "3D Animations",
+ "text": "2D Animations",
"children": [
{
"text": "Slide Out with Fade",
--
cgit v1.2.3