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 +++++++++++++++++++++ .../templates/montage-html/default_html.css | 5 + .../animations-presets.reel/animations-presets.js | 47 +-------- js/panels/presets/default-animation-presets.js | 2 - js/panels/presets/default-style-presets.js | 11 ++- js/panels/presets/default-transition-presets.js | 8 -- .../presets/style-presets.reel/style-presets.js | 49 +--------- .../transitions-presets.js | 20 +--- 8 files changed, 122 insertions(+), 128 deletions(-) create mode 100644 js/controllers/presets-controller.js (limited to '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 diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css index 68300edf..24a752bc 100755 --- a/js/document/templates/montage-html/default_html.css +++ b/js/document/templates/montage-html/default_html.css @@ -72,4 +72,9 @@ body .elem-red-outline { outline: red solid thin; +} + +.nj-preset-transition { + -webkit-transition: all 450ms linear !important; + background-color: red; } \ 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 index ab200212..6a16da54 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,52 +22,7 @@ exports.AnimationsLibrary = Montage.create(Component, { }, 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; + this.application.ninja.presetsController.applyPreset(presetData); } } }); diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 10a3e906..fa0127c2 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,7 +13,6 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -43,7 +42,6 @@ exports.animationPresets = { "text": "Rotater", "selectorBase" : "rotate-with-alpha-keyframes", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-animation-name": "rotate-with-alpha-keyframes", "-webkit-animation-duration": "5s", diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js index 3677d976..109faae2 100644 --- a/js/panels/presets/default-style-presets.js +++ b/js/panels/presets/default-style-presets.js @@ -11,9 +11,9 @@ exports.stylePresets = { "children": [ { "text": "Border-Radius", + "id": "njBorderRadius", "selectorBase" : "border-radius-preset", "rules" : [{ - "selectorSuffix" : "", "styles" : { "border-radius": "100px", "border" : "1px solid #333" @@ -22,9 +22,9 @@ exports.stylePresets = { }, { "text": "Drop Shadow", + "id": "njDropShadow", "selectorBase" : "drop-shadow", "rules" : [{ - "selectorSuffix" : "", "styles" : { "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", "border" : "1px solid #CCC" @@ -33,9 +33,10 @@ exports.stylePresets = { }, { "text": "Fancy Box", + "id": "njFancyBox", "selectorBase" : "fancy-box", "rules" : [{ - "selectorSuffix" : "", + "selectorSuffix": "", "styles" : { "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", "border" : "1px solid #FFF", @@ -50,9 +51,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", + "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ - "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -60,9 +61,9 @@ exports.stylePresets = { }, { "text": "Text Shadow", + "id": "njTextShadow", "selectorBase" : "italicize", "rules" : [{ - "selectorSuffix" : "", "styles" : { "text-shadow": "1px 1px 3px #333" } diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js index 15f4882f..f8968085 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,7 +13,6 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ - "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -29,7 +28,6 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ - "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -48,7 +46,6 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -63,7 +60,6 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -78,7 +74,6 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -92,7 +87,6 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -107,7 +101,6 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ - "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -122,7 +115,6 @@ exports.transitionPresets = { "text": "Remove 3D", "selectorBase" : "remove-3d", "rules" : [{ - "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 11f41822..6a28e069 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -22,60 +22,13 @@ exports.StylesLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - var selection = this.application.ninja.selectedElements, - stylesController = this.application.ninja.stylesController, - selectorBase = presetData.selectorBase, - self = this, className; - - if(!selection || !selection.length || selection.length === 0) { - return false; - } - - function setStopRuleSelector(selector) { - self.application.ninja - .currentDocument.documentRoot - .elementModel.controller - .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector); - } - - selectorBase = stylesController.generateClassName(selectorBase); - - presetData.rules.forEach(function(rule) { - stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles); - }, this); - - selection.forEach(function(el) { - el._element.style.webkitTransition = "all 450ms linear"; - - el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { - el._element.style.webkitTransition = ''; - setStopRuleSelector("*"); - this.removeEventListener("webkitTransitionEnd", presetTransition, true); - - }, true); - setStopRuleSelector("transitionStopRule"); - el._element.classList.add(selectorBase); - - //// Keep track of elements with presets and don't add duplicates - - }, this); - - + this.application.ninja.presetsController.applyPreset(presetData, true); } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } - }, - shouldChangeSelection : { - value : function(controller, newSelection, oldSelection) { - // - //debugger; - console.log('1Handle should change selection'); - return false; - } } - }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index f7d84085..ace38dbb 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -22,25 +22,7 @@ exports.TransitionsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - 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) { - this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); - }, this); - - selection.forEach(function(el) { - el._element.classList.add(selectorBase); - }, this); - + this.application.ninja.presetsController.applyPreset(presetData); } } }); -- cgit v1.2.3