From d6c7aa97651c259612636df6ae9063229a56d48f Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 28 Jun 2012 16:52:01 -0700 Subject: Presets/CSS Panel - Update css panel with preset class. --- js/controllers/presets-controller.js | 20 ++++++++++++++++++++ js/panels/CSSPanel/css-shorthand-map.js | 11 ++++++++++- 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, { //// TODO: replace this hack when webkit supports transitionStart event (see above) window.clearTimeout(el.njTimeout); + this._dispatchChange(); + el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } @@ -107,6 +109,10 @@ exports.PresetsController = Montage.create(Component, { } }, this); + if(!useTransition) { + this._dispatchChange(); + } + } }, @@ -126,5 +132,19 @@ exports.PresetsController = Montage.create(Component, { return keysString; } + }, + + _dispatchChange : { + value: function(property, value) { + this.application.ninja.stage.updatedStage = true; + NJevent('elementChange', { + type : 'presetChange', + data: { + "prop": property, + "value": value + }, + redraw: null + }); + } } }); \ 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 = { 'padding-left' : ['padding'], 'padding-right' : ['padding'], 'padding-top' : ['padding'], - + + '-webkit-animation-name' : ['-webkit-animation'], + '-webkit-animation-duration' : ['-webkit-animation'], + '-webkit-animation-timing-function' : ['-webkit-animation'], + '-webkit-animation-delay' : ['-webkit-animation'], + '-webkit-animation-iteration-count' : ['-webkit-animation'], + '-webkit-animation-direction' : ['-webkit-animation'], + '-webkit-animation-fill-mode' : ['-webkit-animation'], + '-webkit-transition-property' : ['-webkit-transition'], '-webkit-transition-duration' : ['-webkit-transition'], '-webkit-transition-timing-function' : ['-webkit-transition'], @@ -91,6 +99,7 @@ exports.CSS_SHORTHAND_TO_SUBPROP_MAP = { 'list' : ["list-style-type", "list-style-image", "list-style-position"], 'margin' : ["margin-top", "margin-right", "margin-bottom", "margin-left"], 'padding' : ["padding-top", "padding-right", "padding-bottom", "padding-left"], + '-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"], '-webkit-transition' : ["-webkit-transition-property", "-webkit-transition-duration", "-webkit-transition-timing-function", "-webkit-transition-delay"] }; \ 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, { }, handlePropertyChange : { value: function(rule, property, value, oldProperty, style) { - var browserValue; + var declaration = style.parentComponent.parentComponent, + browserValue; if(style.editingNewStyle) { if(property === '') { @@ -187,14 +188,17 @@ exports.StylesViewDelegate = Montage.create(Component, { if(property === '') { style.deleting = true; - style.parentComponent.parentComponent.removeStyle(style.source); - this._dispatchChange(oldProperty, browserValue); + declaration.removeStyle(style.source); + this._dispatchChange(oldProperty); return false; } // now add new property browserValue = this.stylesController.setStyle(rule, property, value); + //// Update the css text so it knows when to update + declaration.cssText = rule.style.cssText; + ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); @@ -203,13 +207,18 @@ exports.StylesViewDelegate = Montage.create(Component, { }, handleValueChange : { value: function(rule, property, value, style) { - var browserValue, units; + var declaration = style.parentComponent.parentComponent, + browserValue, units; if(value === '') { ///// Remove old property style.deleting = true; this.stylesController.deleteStyle(rule, property); - style.parentComponent.parentComponent.removeStyle(style.source); + declaration.removeStyle(style.source); + + //// Update the css text so it knows when to update + declaration.cssText = rule.style.cssText; + this._dispatchChange(property, browserValue); return false; } @@ -218,6 +227,9 @@ exports.StylesViewDelegate = Montage.create(Component, { browserValue = this.stylesController.setStyle(rule, property, value); style.browserValue = browserValue; + //// Update the css text so it knows when to update + declaration.cssText = rule.style.cssText; + ///// Mark style as invalid if the browser doesn't accept it style.invalid = (browserValue === null); -- cgit v1.2.3