From fea875906664f12feaad0f282901fa8d9a8b054a Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 22 Mar 2012 11:52:44 -0700 Subject: Presets Panel - Adding presets controller and removing functionality from panel code --- js/controllers/presets-controller.js | 108 +++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 js/controllers/presets-controller.js (limited to 'js/controllers/presets-controller.js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js new file mode 100644 index 00000000..7152ba93 --- /dev/null +++ b/js/controllers/presets-controller.js @@ -0,0 +1,108 @@ +/* + 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; + +exports.PresetsController = Montage.create(Component, { + + hasTemplate : { + value: false + }, + + transitionClass : { + value : "nj-preset-transition" + }, + + addTransition: { + value: function(element) { + element.classList.add(this.transitionClass); + element.addEventListener("webkitTransitionEnd", this, true); + } + }, + + captureWebkitTransitionEnd : { + value : function(e) { + var el = e.target; + el.classList.remove(this.transitionClass); + el.removeEventListener("webkitTransitionEnd", this, true); + } + }, + + applyPreset : { + value: function(presetData, useTransition) { + var selection = this.application.ninja.selectedElements; + + if(!selection || !selection.length || selection.length === 0) { return false; } + + var stylesController = this.application.ninja.stylesController, + selectorBase = presetData.selectorBase, + rules = []; + + selectorBase = stylesController.generateClassName(selectorBase); + + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); + + selection.forEach(function(element) { + var el = element._element; + + if(useTransition) { + this.addTransition(el); + } + + el.classList.add(selectorBase); + + //// Keep track of elements with presets and don't add duplicates + this.setCachedPreset(el, presetData.id, rules); + + }, this); + + } + }, + + setCachedPreset : { + value: function(el, presetId, rules) { + + } + }, + + getPresets : { + value: function(element) { + + } + + }, + + 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; + } + } +}); \ No newline at end of file -- cgit v1.2.3 From 7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 29 Mar 2012 16:28:34 -0700 Subject: Presets - Remove style transition when transition doesn't start. Also added temporary fix for aggregating animations (from timeline/presets) --- js/controllers/presets-controller.js | 76 ++++++++++++++++++++++++------------ 1 file changed, 51 insertions(+), 25 deletions(-) (limited to 'js/controllers/presets-controller.js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 7152ba93..e436023a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -20,14 +20,39 @@ exports.PresetsController = Montage.create(Component, { addTransition: { value: function(element) { + var transitionDuration; + element.classList.add(this.transitionClass); element.addEventListener("webkitTransitionEnd", this, true); + + + //// TODO: replace this hack when webkit supports transitionStart event + transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); + element.njTimeout = window.setTimeout(function() { + this.captureWebkitTransitionEnd({ + 'target': element + }); + }.bind(this), this._getMilliseconds(transitionDuration) + 100); + } + }, + + _getMilliseconds : { + value: function(duration) { + if(duration.indexOf('ms') !== -1) { + return parseInt(duration); + } else { + return parseFloat(duration)*1000; + } } }, captureWebkitTransitionEnd : { value : function(e) { var el = e.target; + + //// TODO: replace this hack when webkit supports transitionStart event (see above) + window.clearTimeout(el.njTimeout); + el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } @@ -41,30 +66,25 @@ exports.PresetsController = Montage.create(Component, { var stylesController = this.application.ninja.stylesController, selectorBase = presetData.selectorBase, - rules = []; + rules = [], + animationNames = []; selectorBase = stylesController.generateClassName(selectorBase); - presetData.rules.forEach(function(rule, i) { - ///// Treat keyframed rules differently - if(rule.isKeyFrameRule) { - this.application.ninja.stylesController.addRule( - '@-webkit-keyframes ' + presetData.selectorBase, - this.stringifyKeys(rule.keys) - ); - } else { - var suffix = rule.selectorSuffix || ''; - rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); - } - }, this); - selection.forEach(function(element) { - var el = element._element; + var el = element._element, + animationName; if(useTransition) { this.addTransition(el); } + ///// TODO: remove when we find out what to do with competing animations + animationName = stylesController.getElementStyle(el, '-webkit-animation-name'); + if(animationName) { + animationNames.push(animationName); + } + el.classList.add(selectorBase); //// Keep track of elements with presets and don't add duplicates @@ -72,20 +92,26 @@ exports.PresetsController = Montage.create(Component, { }, this); - } - }, - - setCachedPreset : { - value: function(el, presetId, rules) { + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; - } - }, + ///// TODO: remove when we find out what to do with competing animations + if(rule.styles['-webkit-animation-name']) { + rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); + } - getPresets : { - value: function(element) { + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); } - }, stringifyKeys : { -- cgit v1.2.3 From 0491907d1cba1534d88c49f2bb4035484831bbe5 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 30 Mar 2012 09:43:48 -0700 Subject: Presets Controller - Remove unused method call --- js/controllers/presets-controller.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'js/controllers/presets-controller.js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index e436023a..9d898a53 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -87,9 +87,6 @@ exports.PresetsController = Montage.create(Component, { el.classList.add(selectorBase); - //// Keep track of elements with presets and don't add duplicates - this.setCachedPreset(el, presetData.id, rules); - }, this); presetData.rules.forEach(function(rule, i) { -- cgit v1.2.3 From b7ca1821ad43403a2a54361ffc6a0cdf9cba0e59 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 2 Apr 2012 15:10:10 -0700 Subject: Animation Presets - Only combine animations if pre-existing animations exist --- js/controllers/presets-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/controllers/presets-controller.js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 9d898a53..975f9f7a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -100,7 +100,7 @@ exports.PresetsController = Montage.create(Component, { var suffix = rule.selectorSuffix || ''; ///// TODO: remove when we find out what to do with competing animations - if(rule.styles['-webkit-animation-name']) { + if(rule.styles['-webkit-animation-name'] && animationNames.length) { rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); } -- cgit v1.2.3