From 9a94c6fb5f82d18139b48341788a0ffca23ae0af Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 1 May 2012 11:15:14 -0700 Subject: CSS Panel - Added removing of rules/styles --- .../css-style-rule.reel/css-style-rule.js | 16 ++++++++++++++-- js/panels/css-panel/rule-list.reel/rule-list.js | 22 ++++++++++++++++++++-- js/panels/css-panel/style.reel/style.js | 18 ++++++++++++++++++ .../styles-view-container.js | 8 ++++++++ js/panels/css-panel/styles-view-mediator.js | 18 ++++++++++++++++++ 5 files changed, 78 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel') diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js index ac22878e..d2c81b93 100644 --- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js +++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js @@ -86,6 +86,15 @@ exports.CssStyleRule = Montage.create(Component, { } }, + update: { + value: function() { + if(this.cssText !== this.rule.cssText) { + // TODO: add update for selector and stylesheet name + this.declarationComponent.update(); + } + } + }, + templateDidLoad : { value: function() { //console.log("css style rule : template did load"); @@ -93,8 +102,11 @@ exports.CssStyleRule = Montage.create(Component, { }, prepareForDraw : { value: function() { - this.selectorField.addEventListener('change', this, false); - + if(this.rule.type === 'inline') { + this.selectorField.readOnly = true; + } else { + this.selectorField.addEventListener('change', this, false); + } //console.log("css style rule : prepare for draw"); } diff --git a/js/panels/css-panel/rule-list.reel/rule-list.js b/js/panels/css-panel/rule-list.reel/rule-list.js index 4ed3ec11..8d179248 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -25,7 +25,7 @@ exports.RuleList = Montage.create(Component, { console.log('list: ', list); this._rules = list; - ///// remove previsouly added rules + ///// remove previously added rules if(this.childComponents){ this.childComponents.forEach(function(ruleComponent) { this.removeRule(ruleComponent); @@ -50,7 +50,10 @@ exports.RuleList = Montage.create(Component, { value: [], distinct: true }, - + rulesToRemove : { + value: [], + distinct: true + }, addRule: { value: function(rule) { var componentBase = this.supportedRules[rule.type], @@ -73,6 +76,14 @@ exports.RuleList = Montage.create(Component, { } }, + removeRule : { + value: function(rule) { + this.childComponents.splice(this.childComponents.indexOf(rule), 1); + this.rulesToRemove.push(rule); + this.needsDraw = true; + } + }, + update : { value: function() { this.childComponents.forEach(function(component) { @@ -106,11 +117,18 @@ exports.RuleList = Montage.create(Component, { this.rulesToDraw.forEach(function(component) { this.element.appendChild(component.element); this._needsScrollToBottom = this.needsDraw = true; + this.childComponents.push(component); component.needsDraw = true; }, this); + //// Iterate through all rules that need draw and append them + this.rulesToRemove.forEach(function(component) { + this.element.removeChild(component.element); + }, this); + ///// Null out any rules that were just drawn this.rulesToDraw.length = 0; + this.rulesToRemove.length = 0; } } }); diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js index b86be0ae..a8939bc6 100644 --- a/js/panels/css-panel/style.reel/style.js +++ b/js/panels/css-panel/style.reel/style.js @@ -131,6 +131,18 @@ exports.Style = Montage.create(TreeNode, { } }, + remove : { + value: function() { + var branchController = this.parentComponent.parentComponent.contentController; + + ///// Remove style property from declaration + this.treeView.parentComponent.declaration.removeProperty(this.propertyField._preEditValue); + + ///// Remove data from branch controller and update UI + branchController.removeObjects(this.sourceObject); + } + }, + getRule : { value: function() { return this.treeView.parentComponent.declaration.parentRule; @@ -315,10 +327,16 @@ exports.Style = Montage.create(TreeNode, { if(this.empty) { this.element.draggable = false; this.element.classList.add('empty-css-style'); + if(!this.addStyleButton.parentNode) { + console.log("Adding style for ", this.propertyText); + this.element.appendChild(this.addStyleButton); + this.addStyleButton.addEventListener('click', this, false); + } } else { this.element.draggable = true; this.element.classList.remove('empty-css-style'); if(this.addStyleButton.parentNode) { + console.log("Removing style for ", this.propertyText); this.element.removeChild(this.addStyleButton); } } diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js index 0204d2b8..e51c78cd 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.js +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.js @@ -29,6 +29,7 @@ exports.StylesViewContainer = Montage.create(Component, { templateDidLoad : { value: function() { this.eventManager.addEventListener('styleSheetsReady', this, false); + this.eventManager.addEventListener('elementChange', this, false); } }, handleStyleSheetsReady: { @@ -46,6 +47,13 @@ exports.StylesViewContainer = Montage.create(Component, { this.hasStyles = true; } }, + handleElementChange : { + value: function(e) { + if(e._event.detail.type !== 'cssChange') { + this.ruleListContainer.displayedList.component.update(); + } + } + }, draw : { value: function() { diff --git a/js/panels/css-panel/styles-view-mediator.js b/js/panels/css-panel/styles-view-mediator.js index 8a0e4137..c3154db0 100644 --- a/js/panels/css-panel/styles-view-mediator.js +++ b/js/panels/css-panel/styles-view-mediator.js @@ -23,6 +23,12 @@ exports.StylesViewMediator = Montage.create(Component, { handleSelectorChange : { value: function(rule, newSelector, ruleComponent) { + if(newSelector === "") { + debugger; + ruleComponent.parentComponent.removeRule(ruleComponent); + return false; + } + rule.selectorText = newSelector; ruleComponent.applied = this.ruleListContainer.displayedList.selection.every(function(el) { @@ -103,6 +109,12 @@ exports.StylesViewMediator = Montage.create(Component, { return false; } + if(property === '') { + style.remove(); + this._dispatchChange(oldProperty, browserValue); + return false; + } + ///// Remove old property and add new one this.stylesController.deleteStyle(rule, oldProperty); browserValue = this.stylesController.setStyle(rule, property, value); @@ -119,6 +131,12 @@ exports.StylesViewMediator = Montage.create(Component, { value: function(rule, property, value, style) { var browserValue, units; + if(value === '') { + style.remove(); + this._dispatchChange(property, browserValue); + return false; + } + ///// Auto-fill units if not provided and units ///// not previously stored units = style.getUnits(value); -- cgit v1.2.3