diff options
Diffstat (limited to 'js/panels/presets')
4 files changed, 9 insertions, 117 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..92437cfd 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, | 26 | } |
27 | stylesController = this.application.ninja.stylesController, | 27 | } |
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 | } | ||
72 | } | ||
73 | }); | 28 | }); |
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 64f91ea6..4793c356 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js | |||
@@ -15,7 +15,9 @@ exports.animationPresets = { | |||
15 | "rules" : [{ | 15 | "rules" : [{ |
16 | "selectorSuffix" : "", | 16 | "selectorSuffix" : "", |
17 | "styles" : { | 17 | "styles" : { |
18 | "-webkit-animation": "border-morph 2s infinite" | 18 | "-webkit-animation-name": "border-morph", |
19 | "-webkit-animation-duration": "2s", | ||
20 | "-webkit-animation-iteration-count": "infinite" | ||
19 | } | 21 | } |
20 | }, | 22 | }, |
21 | { | 23 | { |
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 11f41822..5f10bbe3 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, { | |||
22 | }, | 22 | }, |
23 | handleNodeActivation: { | 23 | handleNodeActivation: { |
24 | value: function(presetData) { | 24 | value: function(presetData) { |
25 | var selection = this.application.ninja.selectedElements, | 25 | this.application.ninja.presetsController.applyPreset(presetData, true); |
26 | stylesController = this.application.ninja.stylesController, | ||
27 | selectorBase = presetData.selectorBase, | ||
28 | self = this, className; | ||
29 | |||
30 | if(!selection || !selection.length || selection.length === 0) { | ||
31 | return false; | ||
32 | } | ||
33 | |||
34 | function setStopRuleSelector(selector) { | ||
35 | self.application.ninja | ||
36 | .currentDocument.documentRoot | ||
37 | .elementModel.controller | ||
38 | .changeSelector(self.application.ninja.currentDocument.documentRoot, null, selector); | ||
39 | } | 26 | } |
40 | |||
41 | selectorBase = stylesController.generateClassName(selectorBase); | ||
42 | |||
43 | presetData.rules.forEach(function(rule) { | ||
44 | stylesController.addRule('.'+selectorBase + rule.selectorSuffix, rule.styles); | ||
45 | }, this); | ||
46 | |||
47 | selection.forEach(function(el) { | ||
48 | el._element.style.webkitTransition = "all 450ms linear"; | ||
49 | |||
50 | el._element.addEventListener("webkitTransitionEnd", function presetTransition(e) { | ||
51 | el._element.style.webkitTransition = ''; | ||
52 | setStopRuleSelector("*"); | ||
53 | this.removeEventListener("webkitTransitionEnd", presetTransition, true); | ||
54 | |||
55 | }, true); | ||
56 | setStopRuleSelector("transitionStopRule"); | ||
57 | el._element.classList.add(selectorBase); | ||
58 | |||
59 | //// Keep track of elements with presets and don't add duplicates | ||
60 | |||
61 | }, this); | ||
62 | |||
63 | |||
64 | } | ||
65 | }, | 27 | }, |
66 | handleDragEnd : { | 28 | handleDragEnd : { |
67 | value: function(sourceObject) { | 29 | value: function(sourceObject) { |
68 | console.log(sourceObject); | 30 | console.log(sourceObject); |
69 | } | 31 | } |
70 | }, | 32 | } |
71 | shouldChangeSelection : { | ||
72 | value : function(controller, newSelection, oldSelection) { | ||
73 | // | ||
74 | //debugger; | ||
75 | console.log('1Handle should change selection'); | ||
76 | return false; | ||
77 | } | ||
78 | } | ||
79 | |||
80 | 33 | ||
81 | }); | 34 | }); |
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index f7d84085..24fab684 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, { | |||
22 | }, | 22 | }, |
23 | handleNodeActivation: { | 23 | handleNodeActivation: { |
24 | value: function(presetData) { | 24 | value: function(presetData) { |
25 | var selection = this.application.ninja.selectedElements, | 25 | this.application.ninja.presetsController.applyPreset(presetData); |
26 | stylesController = this.application.ninja.stylesController, | ||
27 | selectorBase = presetData.selectorBase, | ||
28 | self = this; | ||
29 | |||
30 | if(!selection || !selection.length || selection.length === 0) { | ||
31 | return false; | ||
32 | } | 26 | } |
33 | |||
34 | selectorBase = stylesController.generateClassName(selectorBase); | ||
35 | |||
36 | presetData.rules.forEach(function(rule) { | ||
37 | this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles); | ||
38 | }, this); | ||
39 | |||
40 | selection.forEach(function(el) { | ||
41 | el._element.classList.add(selectorBase); | ||
42 | }, this); | ||
43 | |||
44 | } | 27 | } |
45 | } | ||
46 | }); | 28 | }); |