diff options
-rw-r--r-- | js/controllers/presets-controller.js | 20 | ||||
-rwxr-xr-x | js/panels/CSSPanel/css-shorthand-map.js | 11 | ||||
-rw-r--r-- | js/panels/css-panel/styles-view-delegate.js | 22 |
3 files changed, 47 insertions, 6 deletions
diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 4c177189..65a56a74 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js | |||
@@ -53,6 +53,8 @@ exports.PresetsController = Montage.create(Component, { | |||
53 | //// TODO: replace this hack when webkit supports transitionStart event (see above) | 53 | //// TODO: replace this hack when webkit supports transitionStart event (see above) |
54 | window.clearTimeout(el.njTimeout); | 54 | window.clearTimeout(el.njTimeout); |
55 | 55 | ||
56 | this._dispatchChange(); | ||
57 | |||
56 | el.classList.remove(this.transitionClass); | 58 | el.classList.remove(this.transitionClass); |
57 | el.removeEventListener("webkitTransitionEnd", this, true); | 59 | el.removeEventListener("webkitTransitionEnd", this, true); |
58 | } | 60 | } |
@@ -107,6 +109,10 @@ exports.PresetsController = Montage.create(Component, { | |||
107 | } | 109 | } |
108 | }, this); | 110 | }, this); |
109 | 111 | ||
112 | if(!useTransition) { | ||
113 | this._dispatchChange(); | ||
114 | } | ||
115 | |||
110 | } | 116 | } |
111 | }, | 117 | }, |
112 | 118 | ||
@@ -126,5 +132,19 @@ exports.PresetsController = Montage.create(Component, { | |||
126 | 132 | ||
127 | return keysString; | 133 | return keysString; |
128 | } | 134 | } |
135 | }, | ||
136 | |||
137 | _dispatchChange : { | ||
138 | value: function(property, value) { | ||
139 | this.application.ninja.stage.updatedStage = true; | ||
140 | NJevent('elementChange', { | ||
141 | type : 'presetChange', | ||
142 | data: { | ||
143 | "prop": property, | ||
144 | "value": value | ||
145 | }, | ||
146 | redraw: null | ||
147 | }); | ||
148 | } | ||
129 | } | 149 | } |
130 | }); \ No newline at end of file | 150 | }); \ No newline at end of file |
diff --git a/js/panels/CSSPanel/css-shorthand-map.js b/js/panels/CSSPanel/css-shorthand-map.js index d469e2a1..e38627f7 100755 --- a/js/panels/CSSPanel/css-shorthand-map.js +++ b/js/panels/CSSPanel/css-shorthand-map.js | |||
@@ -68,7 +68,15 @@ exports.CSS_SHORTHAND_MAP = { | |||
68 | 'padding-left' : ['padding'], | 68 | 'padding-left' : ['padding'], |
69 | 'padding-right' : ['padding'], | 69 | 'padding-right' : ['padding'], |
70 | 'padding-top' : ['padding'], | 70 | 'padding-top' : ['padding'], |
71 | 71 | ||
72 | '-webkit-animation-name' : ['-webkit-animation'], | ||
73 | '-webkit-animation-duration' : ['-webkit-animation'], | ||
74 | '-webkit-animation-timing-function' : ['-webkit-animation'], | ||
75 | '-webkit-animation-delay' : ['-webkit-animation'], | ||
76 | '-webkit-animation-iteration-count' : ['-webkit-animation'], | ||
77 | '-webkit-animation-direction' : ['-webkit-animation'], | ||
78 | '-webkit-animation-fill-mode' : ['-webkit-animation'], | ||
79 | |||
72 | '-webkit-transition-property' : ['-webkit-transition'], | 80 | '-webkit-transition-property' : ['-webkit-transition'], |
73 | '-webkit-transition-duration' : ['-webkit-transition'], | 81 | '-webkit-transition-duration' : ['-webkit-transition'], |
74 | '-webkit-transition-timing-function' : ['-webkit-transition'], | 82 | '-webkit-transition-timing-function' : ['-webkit-transition'], |
@@ -91,6 +99,7 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = { | |||
91 | 'list' : ["list-style-type", "list-style-image", "list-style-position"], | 99 | 'list' : ["list-style-type", "list-style-image", "list-style-position"], |
92 | 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], | 100 | 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], |
93 | 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], | 101 | 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], |
102 | '-webkit-animation': ["webkit-animation-name", "webkit-animation-duration", "webkit-animation-timing-function", "webkit-animation-delay", "webkit-animation-iteration-count", "webkit-animation-direction", "webkit-animation-fill-mode"], | ||
94 | '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", | 103 | '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", |
95 | "-webkit-transition-timing-function", "-webkit-transition-delay"] | 104 | "-webkit-transition-timing-function", "-webkit-transition-delay"] |
96 | }; \ No newline at end of file | 105 | }; \ No newline at end of file |
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index a7c1f0d9..4f41ff12 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js | |||
@@ -171,7 +171,8 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
171 | }, | 171 | }, |
172 | handlePropertyChange : { | 172 | handlePropertyChange : { |
173 | value: function(rule, property, value, oldProperty, style) { | 173 | value: function(rule, property, value, oldProperty, style) { |
174 | var browserValue; | 174 | var declaration = style.parentComponent.parentComponent, |
175 | browserValue; | ||
175 | 176 | ||
176 | if(style.editingNewStyle) { | 177 | if(style.editingNewStyle) { |
177 | if(property === '') { | 178 | if(property === '') { |
@@ -187,14 +188,17 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
187 | 188 | ||
188 | if(property === '') { | 189 | if(property === '') { |
189 | style.deleting = true; | 190 | style.deleting = true; |
190 | style.parentComponent.parentComponent.removeStyle(style.source); | 191 | declaration.removeStyle(style.source); |
191 | this._dispatchChange(oldProperty, browserValue); | 192 | this._dispatchChange(oldProperty); |
192 | return false; | 193 | return false; |
193 | } | 194 | } |
194 | 195 | ||
195 | // now add new property | 196 | // now add new property |
196 | browserValue = this.stylesController.setStyle(rule, property, value); | 197 | browserValue = this.stylesController.setStyle(rule, property, value); |
197 | 198 | ||
199 | //// Update the css text so it knows when to update | ||
200 | declaration.cssText = rule.style.cssText; | ||
201 | |||
198 | ///// Mark style as invalid if the browser doesn't accept it | 202 | ///// Mark style as invalid if the browser doesn't accept it |
199 | style.invalid = (browserValue === null); | 203 | style.invalid = (browserValue === null); |
200 | 204 | ||
@@ -203,13 +207,18 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
203 | }, | 207 | }, |
204 | handleValueChange : { | 208 | handleValueChange : { |
205 | value: function(rule, property, value, style) { | 209 | value: function(rule, property, value, style) { |
206 | var browserValue, units; | 210 | var declaration = style.parentComponent.parentComponent, |
211 | browserValue, units; | ||
207 | 212 | ||
208 | if(value === '') { | 213 | if(value === '') { |
209 | ///// Remove old property | 214 | ///// Remove old property |
210 | style.deleting = true; | 215 | style.deleting = true; |
211 | this.stylesController.deleteStyle(rule, property); | 216 | this.stylesController.deleteStyle(rule, property); |
212 | style.parentComponent.parentComponent.removeStyle(style.source); | 217 | declaration.removeStyle(style.source); |
218 | |||
219 | //// Update the css text so it knows when to update | ||
220 | declaration.cssText = rule.style.cssText; | ||
221 | |||
213 | this._dispatchChange(property, browserValue); | 222 | this._dispatchChange(property, browserValue); |
214 | return false; | 223 | return false; |
215 | } | 224 | } |
@@ -218,6 +227,9 @@ exports.StylesViewDelegate = Montage.create(Component, { | |||
218 | browserValue = this.stylesController.setStyle(rule, property, value); | 227 | browserValue = this.stylesController.setStyle(rule, property, value); |
219 | style.browserValue = browserValue; | 228 | style.browserValue = browserValue; |
220 | 229 | ||
230 | //// Update the css text so it knows when to update | ||
231 | declaration.cssText = rule.style.cssText; | ||
232 | |||
221 | ///// Mark style as invalid if the browser doesn't accept it | 233 | ///// Mark style as invalid if the browser doesn't accept it |
222 | style.invalid = (browserValue === null); | 234 | style.invalid = (browserValue === null); |
223 | 235 | ||