diff options
author | Eric Guzman | 2012-03-29 16:28:34 -0700 |
---|---|---|
committer | Eric Guzman | 2012-03-29 16:28:34 -0700 |
commit | 7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118 (patch) | |
tree | 26df8de65a3d309f15a9b56dc2068f8772422d40 /js/controllers | |
parent | bfd796e47c856c6620dc4b32ac6c710d4a493d3a (diff) | |
download | ninja-7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118.tar.gz |
Presets - Remove style transition when transition doesn't start. Also added temporary fix for aggregating animations (from timeline/presets)
Diffstat (limited to 'js/controllers')
-rw-r--r-- | js/controllers/presets-controller.js | 76 |
1 files changed, 51 insertions, 25 deletions
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, { | |||
20 | 20 | ||
21 | addTransition: { | 21 | addTransition: { |
22 | value: function(element) { | 22 | value: function(element) { |
23 | var transitionDuration; | ||
24 | |||
23 | element.classList.add(this.transitionClass); | 25 | element.classList.add(this.transitionClass); |
24 | element.addEventListener("webkitTransitionEnd", this, true); | 26 | element.addEventListener("webkitTransitionEnd", this, true); |
27 | |||
28 | |||
29 | //// TODO: replace this hack when webkit supports transitionStart event | ||
30 | transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); | ||
31 | element.njTimeout = window.setTimeout(function() { | ||
32 | this.captureWebkitTransitionEnd({ | ||
33 | 'target': element | ||
34 | }); | ||
35 | }.bind(this), this._getMilliseconds(transitionDuration) + 100); | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | _getMilliseconds : { | ||
40 | value: function(duration) { | ||
41 | if(duration.indexOf('ms') !== -1) { | ||
42 | return parseInt(duration); | ||
43 | } else { | ||
44 | return parseFloat(duration)*1000; | ||
45 | } | ||
25 | } | 46 | } |
26 | }, | 47 | }, |
27 | 48 | ||
28 | captureWebkitTransitionEnd : { | 49 | captureWebkitTransitionEnd : { |
29 | value : function(e) { | 50 | value : function(e) { |
30 | var el = e.target; | 51 | var el = e.target; |
52 | |||
53 | //// TODO: replace this hack when webkit supports transitionStart event (see above) | ||
54 | window.clearTimeout(el.njTimeout); | ||
55 | |||
31 | el.classList.remove(this.transitionClass); | 56 | el.classList.remove(this.transitionClass); |
32 | el.removeEventListener("webkitTransitionEnd", this, true); | 57 | el.removeEventListener("webkitTransitionEnd", this, true); |
33 | } | 58 | } |
@@ -41,30 +66,25 @@ exports.PresetsController = Montage.create(Component, { | |||
41 | 66 | ||
42 | var stylesController = this.application.ninja.stylesController, | 67 | var stylesController = this.application.ninja.stylesController, |
43 | selectorBase = presetData.selectorBase, | 68 | selectorBase = presetData.selectorBase, |
44 | rules = []; | 69 | rules = [], |
70 | animationNames = []; | ||
45 | 71 | ||
46 | selectorBase = stylesController.generateClassName(selectorBase); | 72 | selectorBase = stylesController.generateClassName(selectorBase); |
47 | 73 | ||
48 | presetData.rules.forEach(function(rule, i) { | ||
49 | ///// Treat keyframed rules differently | ||
50 | if(rule.isKeyFrameRule) { | ||
51 | this.application.ninja.stylesController.addRule( | ||
52 | '@-webkit-keyframes ' + presetData.selectorBase, | ||
53 | this.stringifyKeys(rule.keys) | ||
54 | ); | ||
55 | } else { | ||
56 | var suffix = rule.selectorSuffix || ''; | ||
57 | rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); | ||
58 | } | ||
59 | }, this); | ||
60 | |||
61 | selection.forEach(function(element) { | 74 | selection.forEach(function(element) { |
62 | var el = element._element; | 75 | var el = element._element, |
76 | animationName; | ||
63 | 77 | ||
64 | if(useTransition) { | 78 | if(useTransition) { |
65 | this.addTransition(el); | 79 | this.addTransition(el); |
66 | } | 80 | } |
67 | 81 | ||
82 | ///// TODO: remove when we find out what to do with competing animations | ||
83 | animationName = stylesController.getElementStyle(el, '-webkit-animation-name'); | ||
84 | if(animationName) { | ||
85 | animationNames.push(animationName); | ||
86 | } | ||
87 | |||
68 | el.classList.add(selectorBase); | 88 | el.classList.add(selectorBase); |
69 | 89 | ||
70 | //// Keep track of elements with presets and don't add duplicates | 90 | //// Keep track of elements with presets and don't add duplicates |
@@ -72,20 +92,26 @@ exports.PresetsController = Montage.create(Component, { | |||
72 | 92 | ||
73 | }, this); | 93 | }, this); |
74 | 94 | ||
75 | } | 95 | presetData.rules.forEach(function(rule, i) { |
76 | }, | 96 | ///// Treat keyframed rules differently |
77 | 97 | if(rule.isKeyFrameRule) { | |
78 | setCachedPreset : { | 98 | this.application.ninja.stylesController.addRule( |
79 | value: function(el, presetId, rules) { | 99 | '@-webkit-keyframes ' + presetData.selectorBase, |
100 | this.stringifyKeys(rule.keys) | ||
101 | ); | ||
102 | } else { | ||
103 | var suffix = rule.selectorSuffix || ''; | ||
80 | 104 | ||
81 | } | 105 | ///// TODO: remove when we find out what to do with competing animations |
82 | }, | 106 | if(rule.styles['-webkit-animation-name']) { |
107 | rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); | ||
108 | } | ||
83 | 109 | ||
84 | getPresets : { | 110 | rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); |
85 | value: function(element) { | 111 | } |
112 | }, this); | ||
86 | 113 | ||
87 | } | 114 | } |
88 | |||
89 | }, | 115 | }, |
90 | 116 | ||
91 | stringifyKeys : { | 117 | stringifyKeys : { |