diff options
Diffstat (limited to 'js/panels/presets')
6 files changed, 9 insertions, 128 deletions
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, { | |||
22 | }, | 22 | }, |
23 | handleNodeActivation: { | 23 | handleNodeActivation: { |
24 | value: function(presetData) { | 24 | value: function(presetData) { |
25 | //debugger; | 25 | this.application.ninja.presetsController.applyPreset(presetData); |
26 | var selection = this.application.ninja.selectedElements, | ||
27 | stylesController = this.application.ninja.stylesController, | ||
28 | selectorBase = presetData.selectorBase, | ||
29 | self = this; | ||
30 | |||
31 | if(!selection || !selection.length || selection.length === 0) { | ||
32 | return false; | ||
33 | } | ||
34 | |||
35 | selectorBase = stylesController.generateClassName(selectorBase); | ||
36 | |||
37 | presetData.rules.forEach(function(rule) { | ||
38 | if(rule.isKeyFrameRule) { | ||
39 | this.application.ninja.stylesController.addRule( | ||
40 | '@-webkit-keyframes ' + presetData.selectorBase, | ||
41 | this.stringifyKeys(rule.keys) | ||
42 | ); | ||
43 | } else { | ||
44 | this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); | ||
45 | } | ||
46 | |||
47 | }, this); | ||
48 | |||
49 | selection.forEach(function(el) { | ||
50 | el._element.classList.add(selectorBase); | ||
51 | }, this); | ||
52 | |||
53 | } | ||
54 | }, | ||
55 | |||
56 | stringifyKeys : { | ||
57 | value: function(keysArray) { | ||
58 | var keysString = ''; | ||
59 | |||
60 | keysArray.forEach(function(key) { | ||
61 | var styles = '', style; | ||
62 | |||
63 | for(style in key.styles) { | ||
64 | styles += style + ':' + key.styles[style] + '; '; | ||
65 | } | ||
66 | |||
67 | keysString += key.keyText + ' {' + styles + ' }'; | ||
68 | }); | ||
69 | |||
70 | return keysString; | ||
71 | } | 26 | } |
72 | } | 27 | } |
73 | }); | 28 | }); |
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 = { | |||
13 | "text": "Border Morph", | 13 | "text": "Border Morph", |
14 | "selectorBase" : "border-morph", | 14 | "selectorBase" : "border-morph", |
15 | "rules" : [{ | 15 | "rules" : [{ |
16 | "selectorSuffix" : "", | ||
17 | "styles" : { | 16 | "styles" : { |
18 | "-webkit-animation": "border-morph 2s infinite" | 17 | "-webkit-animation": "border-morph 2s infinite" |
19 | } | 18 | } |
@@ -43,7 +42,6 @@ exports.animationPresets = { | |||
43 | "text": "Rotater", | 42 | "text": "Rotater", |
44 | "selectorBase" : "rotate-with-alpha-keyframes", | 43 | "selectorBase" : "rotate-with-alpha-keyframes", |
45 | "rules" : [{ | 44 | "rules" : [{ |
46 | "selectorSuffix" : "", | ||
47 | "styles" : { | 45 | "styles" : { |
48 | "-webkit-animation-name": "rotate-with-alpha-keyframes", | 46 | "-webkit-animation-name": "rotate-with-alpha-keyframes", |
49 | "-webkit-animation-duration": "5s", | 47 | "-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 = { | |||
11 | "children": [ | 11 | "children": [ |
12 | { | 12 | { |
13 | "text": "Border-Radius", | 13 | "text": "Border-Radius", |
14 | "id": "njBorderRadius", | ||
14 | "selectorBase" : "border-radius-preset", | 15 | "selectorBase" : "border-radius-preset", |
15 | "rules" : [{ | 16 | "rules" : [{ |
16 | "selectorSuffix" : "", | ||
17 | "styles" : { | 17 | "styles" : { |
18 | "border-radius": "100px", | 18 | "border-radius": "100px", |
19 | "border" : "1px solid #333" | 19 | "border" : "1px solid #333" |
@@ -22,9 +22,9 @@ exports.stylePresets = { | |||
22 | }, | 22 | }, |
23 | { | 23 | { |
24 | "text": "Drop Shadow", | 24 | "text": "Drop Shadow", |
25 | "id": "njDropShadow", | ||
25 | "selectorBase" : "drop-shadow", | 26 | "selectorBase" : "drop-shadow", |
26 | "rules" : [{ | 27 | "rules" : [{ |
27 | "selectorSuffix" : "", | ||
28 | "styles" : { | 28 | "styles" : { |
29 | "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", | 29 | "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", |
30 | "border" : "1px solid #CCC" | 30 | "border" : "1px solid #CCC" |
@@ -33,9 +33,10 @@ exports.stylePresets = { | |||
33 | }, | 33 | }, |
34 | { | 34 | { |
35 | "text": "Fancy Box", | 35 | "text": "Fancy Box", |
36 | "id": "njFancyBox", | ||
36 | "selectorBase" : "fancy-box", | 37 | "selectorBase" : "fancy-box", |
37 | "rules" : [{ | 38 | "rules" : [{ |
38 | "selectorSuffix" : "", | 39 | "selectorSuffix": "", |
39 | "styles" : { | 40 | "styles" : { |
40 | "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", | 41 | "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", |
41 | "border" : "1px solid #FFF", | 42 | "border" : "1px solid #FFF", |
@@ -50,9 +51,9 @@ exports.stylePresets = { | |||
50 | "children": [ | 51 | "children": [ |
51 | { | 52 | { |
52 | "text": "Italic", | 53 | "text": "Italic", |
54 | "id": "njItalic", | ||
53 | "selectorBase" : "italicize", | 55 | "selectorBase" : "italicize", |
54 | "rules" : [{ | 56 | "rules" : [{ |
55 | "selectorSuffix" : "", | ||
56 | "styles" : { | 57 | "styles" : { |
57 | "font-style": "italic" | 58 | "font-style": "italic" |
58 | } | 59 | } |
@@ -60,9 +61,9 @@ exports.stylePresets = { | |||
60 | }, | 61 | }, |
61 | { | 62 | { |
62 | "text": "Text Shadow", | 63 | "text": "Text Shadow", |
64 | "id": "njTextShadow", | ||
63 | "selectorBase" : "italicize", | 65 | "selectorBase" : "italicize", |
64 | "rules" : [{ | 66 | "rules" : [{ |
65 | "selectorSuffix" : "", | ||
66 | "styles" : { | 67 | "styles" : { |
67 | "text-shadow": "1px 1px 3px #333" | 68 | "text-shadow": "1px 1px 3px #333" |
68 | } | 69 | } |
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 = { | |||
13 | "text": "Fade In", | 13 | "text": "Fade In", |
14 | "selectorBase" : "fade-in", | 14 | "selectorBase" : "fade-in", |
15 | "rules" : [{ | 15 | "rules" : [{ |
16 | "selectorSuffix": "", | ||
17 | "styles" : { | 16 | "styles" : { |
18 | "opacity": "0.25", | 17 | "opacity": "0.25", |
19 | "-webkit-transition": "all 0.4s ease-in" | 18 | "-webkit-transition": "all 0.4s ease-in" |
@@ -29,7 +28,6 @@ exports.transitionPresets = { | |||
29 | "text": "Fade Out", | 28 | "text": "Fade Out", |
30 | "selectorBase" : "fade-out", | 29 | "selectorBase" : "fade-out", |
31 | "rules" : [{ | 30 | "rules" : [{ |
32 | "selectorSuffix": "", | ||
33 | "styles" : { | 31 | "styles" : { |
34 | "opacity": "1", | 32 | "opacity": "1", |
35 | "-webkit-transition": "all 0.4s ease-in" | 33 | "-webkit-transition": "all 0.4s ease-in" |
@@ -48,7 +46,6 @@ exports.transitionPresets = { | |||
48 | "text": "Slide Right", | 46 | "text": "Slide Right", |
49 | "selectorBase" : "slide-right", | 47 | "selectorBase" : "slide-right", |
50 | "rules" : [{ | 48 | "rules" : [{ |
51 | "selectorSuffix": "", | ||
52 | "styles" : { | 49 | "styles" : { |
53 | "-webkit-transition": "all 0.4s ease-in" | 50 | "-webkit-transition": "all 0.4s ease-in" |
54 | } | 51 | } |
@@ -63,7 +60,6 @@ exports.transitionPresets = { | |||
63 | "text": "Slide Left", | 60 | "text": "Slide Left", |
64 | "selectorBase" : "slide-left", | 61 | "selectorBase" : "slide-left", |
65 | "rules" : [{ | 62 | "rules" : [{ |
66 | "selectorSuffix": "", | ||
67 | "styles" : { | 63 | "styles" : { |
68 | "-webkit-transition": "all 0.4s ease-in" | 64 | "-webkit-transition": "all 0.4s ease-in" |
69 | } | 65 | } |
@@ -78,7 +74,6 @@ exports.transitionPresets = { | |||
78 | "text": "Rotate", | 74 | "text": "Rotate", |
79 | "selectorBase" : "rotate", | 75 | "selectorBase" : "rotate", |
80 |