From 50125608bba2ebfae24c1e13ec030fe7a7128158 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 29 Mar 2012 17:13:28 -0700 Subject: merge from main --- .../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 ++++++++- 6 files changed, 128 insertions(+), 9 deletions(-) (limited to 'js/panels/presets') diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index 6a16da54..ab200212 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -22,7 +22,52 @@ exports.AnimationsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(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/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..64f91ea6 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -13,6 +13,7 @@ exports.animationPresets = { "text": "Border Morph", "selectorBase" : "border-morph", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-animation": "border-morph 2s infinite" } @@ -90,6 +91,7 @@ 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 10b24ff4..82bec34f 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,10 +33,9 @@ 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", @@ -51,9 +50,9 @@ exports.stylePresets = { "children": [ { "text": "Italic", - "id": "njItalic", "selectorBase" : "italicize", "rules" : [{ + "selectorSuffix" : "", "styles" : { "font-style": "italic" } @@ -61,9 +60,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 f8968085..15f4882f 100644 --- a/js/panels/presets/default-transition-presets.js +++ b/js/panels/presets/default-transition-presets.js @@ -13,6 +13,7 @@ exports.transitionPresets = { "text": "Fade In", "selectorBase" : "fade-in", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "0.25", "-webkit-transition": "all 0.4s ease-in" @@ -28,6 +29,7 @@ exports.transitionPresets = { "text": "Fade Out", "selectorBase" : "fade-out", "rules" : [{ + "selectorSuffix": "", "styles" : { "opacity": "1", "-webkit-transition": "all 0.4s ease-in" @@ -46,6 +48,7 @@ exports.transitionPresets = { "text": "Slide Right", "selectorBase" : "slide-right", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -60,6 +63,7 @@ exports.transitionPresets = { "text": "Slide Left", "selectorBase" : "slide-left", "rules" : [{ + "selectorSuffix": "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -74,6 +78,7 @@ exports.transitionPresets = { "text": "Rotate", "selectorBase" : "rotate", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "all 0.4s ease-in" } @@ -87,6 +92,7 @@ exports.transitionPresets = { "text": "Scale Up", "selectorBase" : "scale-up", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -101,6 +107,7 @@ exports.transitionPresets = { "text": "Scale Down", "selectorBase" : "scale-down", "rules" : [{ + "selectorSuffix" : "", "styles" : { "-webkit-transition": "-webkit-transform 0.4s ease-in" } @@ -115,6 +122,7 @@ 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 6a28e069..11f41822 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -22,13 +22,60 @@ exports.StylesLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(presetData, true); + 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); + + } }, 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 ace38dbb..f7d84085 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -22,7 +22,25 @@ exports.TransitionsLibrary = Montage.create(Component, { }, handleNodeActivation: { value: function(presetData) { - this.application.ninja.presetsController.applyPreset(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); + } } }); -- cgit v1.2.3