aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorEric Guzman2012-06-28 16:52:01 -0700
committerEric Guzman2012-06-28 16:52:01 -0700
commitd6c7aa97651c259612636df6ae9063229a56d48f (patch)
treec13b5387e060bd697a3463094c5f6a1957fd5fba /js
parentb4b54f6cc084b3f7483ebed1e15c1b4770949d58 (diff)
downloadninja-d6c7aa97651c259612636df6ae9063229a56d48f.tar.gz
Presets/CSS Panel - Update css panel with preset class.
Diffstat (limited to 'js')
-rw-r--r--js/controllers/presets-controller.js20
-rwxr-xr-xjs/panels/CSSPanel/css-shorthand-map.js11
-rw-r--r--js/panels/css-panel/styles-view-delegate.js22
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