From d4ce8c2fe42fcbfc36cf4b20ef8de67c6471c241 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 14 May 2012 23:44:47 -0700 Subject: CSSPanel - Add mutli-selection and adding classes to groups of elements --- js/panels/css-panel/css-panel.reel/css-panel.html | 15 +++++++++- .../rule-list-container.js | 6 ++-- .../styles-view-container.js | 34 +++++++++++++++++++--- js/panels/css-panel/styles-view-delegate.js | 2 +- 4 files changed, 49 insertions(+), 8 deletions(-) (limited to 'js/panels') diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html index f0c538c8..5bc5c87d 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.html +++ b/js/panels/css-panel/css-panel.reel/css-panel.html @@ -32,7 +32,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "name": "StylesViewContainer", "properties": { "element": {"#": "styles-view-container" }, - "selectionNameLabel": {"#": "selection-name" } + "selectionName": {"@": "selectionName" } + } + }, + "selectionName" : { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#":"selection-name"} + }, + "bindings": { + "value" : { + "boundObject": {"@": "stylesViewContainer"}, + "boundObjectPropertyPath": "selectionNameLabelText", + "oneway": true + } } } } diff --git a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js index 511ff24c..50d69093 100644 --- a/js/panels/css-panel/rule-list-container.reel/rule-list-container.js +++ b/js/panels/css-panel/rule-list-container.reel/rule-list-container.js @@ -98,7 +98,9 @@ exports.RuleListContainer = Montage.create(Component, { value: function(selection) { var rules; - if(selection.length === 1) { + if(selection.length > 1) { + rules = this.stylesController.getCommonRules(selection); + } else if(selection.length === 1) { rules = this.stylesController.getMatchingRules(selection[0]); ///// Add inline style to rule list @@ -109,7 +111,7 @@ exports.RuleListContainer = Montage.create(Component, { style : selection[0].style }); - } //// TODO: support more selection types + } return rules; } 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 a47b0db1..1372de0c 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 @@ -14,6 +14,21 @@ exports.StylesViewContainer = Montage.create(Component, { contentPanel : { value: 'rules' }, + _selectionNameLabelText : { + value: null + }, + selectionNameLabelText : { + get: function() { + return this._selectionNameLabelText; + }, + set: function(value) { + if(value === this._selectionNameLabelText) { return false; } + + this._selectionNameLabelText = value; + + this.needsDraw = true; + } + }, _lastSelection : { value: null }, @@ -62,7 +77,10 @@ exports.StylesViewContainer = Montage.create(Component, { value: function() { var elements = this.application.ninja.selectedElements; - if(this._isSameArray(elements, this._lastSelection)) { console.log('new selection is identical');return false; } + if(this._isSameArray(elements, this._lastSelection) && this.contentPanel === "rules") { + console.log('new selection is identical'); + return false; + } this._lastSelection = elements; @@ -72,14 +90,20 @@ exports.StylesViewContainer = Montage.create(Component, { } else if(elements.length === 1) { ///// update the selection status label with the label of the element - this.selectionNameLabel.innerHTML = this._getElementLabel(elements[0]); + this.selectionNameLabelText = this._getElementLabel(elements[0]); if(this.contentPanel === "rules") { this.ruleListContainer.displayListForSelection(elements); } else { this.computedStyleView.declaration = elements[0]; } + this.toolbar.showButton('computed'); } else { + this.toolbar.hideButton('computed'); + this.contentPanel = "rules"; + this.selectionNameLabelText = elements.length + " elements selected."; + ///// find common rules + this.ruleListContainer.displayListForSelection(elements); } @@ -130,10 +154,12 @@ exports.StylesViewContainer = Montage.create(Component, { value: function() { if(this.hasStyles) { this.element.classList.remove('no-styles'); - this.selectionNameLabel.classList.remove('no-styles'); + //this.selectionNameLabel.classList.remove('no-styles'); + this.selectionName.element.classList.remove('no-styles'); } else { this.element.classList.add('no-styles'); - this.selectionNameLabel.classList.add('no-styles'); + //this.selectionNameLabel.classList.add('no-styles'); + this.selectionName.element.classList.add('no-styles'); } } }, diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js index aba8c042..1b21f460 100644 --- a/js/panels/css-panel/styles-view-delegate.js +++ b/js/panels/css-panel/styles-view-delegate.js @@ -267,7 +267,7 @@ exports.StylesViewMediator = Montage.create(Component, { } container.contentPanel = panelToShow; - this.ownerComponent.handleSelectionChange(); + container.handleSelectionChange(); } }, -- cgit v1.2.3