From 57ad8ea9c96005a4199cd75c82f4c7db0361e7b9 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 15 Mar 2012 15:20:00 -0700 Subject: Presets Panel: Added Scale Up and Down to transitions list. According to eric G. Signed-off-by: Armen Kesablyan --- 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 00873231..271ad821 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -88,6 +88,36 @@ exports.transitionPresets = { "-webkit-transform": "rotate(180deg)" } }] + }, + { + "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)" + } + }] }] }] }; \ No newline at end of file -- cgit v1.2.3 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