From 435dde54bf607620947007f7c66bd98bd03fe90b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 11 Apr 2012 11:02:15 -0700 Subject: CSS Rule List - Enabled list switching on selection --- .../rule-list-container.js | 133 +++++++++++---------- .../styles-view-container.css | 1 + .../styles-view-container.js | 48 +------- 3 files changed, 73 insertions(+), 109 deletions(-) (limited to 'js/panels/css-panel') 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 04689602..17bdc2a4 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 @@ -8,26 +8,45 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.RuleListContainer = Montage.create(Component, { - ruleListComponent : { - value: null + _instanceToAdd : { value: null }, + _appendElement : { value: null }, + _lastDisplayedList : { value: null }, + _displayedList : { value: null }, + + displayedList : { + get: function() { + return this._displayedList; + }, + set: function(list) { + this._lastDisplayedList = this._displayedList; + this._displayedList = list; + this.needsDraw = true; + } }, - templateDidLoad: { - value: function() { - console.log('rule list container - tempalte did load'); + + displayListForSelection : { + value: function(selection) { + var list = this._getListForSelection(selection); + + if(!list) { + list = this.add(selection); + } else { + console.log("rule list found!"); + } + + this.displayedList = list; } }, - _getRuleList : { - value: function(s) { - var ruleListsOfType, i, list, matchesAll; - ruleListsOfType = this.ruleLists.filter(function(list) { - return list.selectionType = s.selectionType; - }); + //// Get the element containing list based on selection + _getListForSelection : { + value: function(selection) { + var i, list, matchesAll; - for(i = 0; i 1) { matchesAll = list.selection.every(function(element, index, array) { return array.indexOf(element) !== 0; }); @@ -38,86 +57,72 @@ exports.RuleListContainer = Montage.create(Component, { } else { ///// Selection (single element or stylesheet) is the same, ///// Use the existing rule list - if(list.selection === s.selection) { + if(list.selection[0] === selection[0]) { break; } } + + list = null; } return list; } }, - ruleLists : { - value: [] - }, - add : { - value: function(type, selection) { - console.log("Rule List Container : add()"); + //// Creates a new rule list to be added to the container + add : { + value: function(selection) { var stylesController = this.application.ninja.stylesController, listInstance = Montage.create(this.ruleListComponent), container = document.createElement('div'), - rules; + rules, ruleListLog; - if(type === 'ELEMENT') { - rules = stylesController.getMatchingRules(selection); - } + if(selection.length === 1) { + rules = stylesController.getMatchingRules(selection[0]); + } //// TODO: support more selection types - //listInstance.element = container; this._instanceToAdd = listInstance; listInstance.rules = rules; - this.appendElement = container; - } - }, - _instanceToAdd : { - value: null - }, - _appendElement : { - value: null - }, - appendElement : { - get: function() { - return this._appendElement; - }, - set: function(el) { - this._appendElement = el; + ruleListLog = { + selection: selection, + component : listInstance + }; + + this.ruleLists.push(ruleListLog); + + this._appendElement = container; this.needsDraw = true; + + return ruleListLog; } }, - _lastDisplayedList : { - value: null - }, - _displayedList : { - value: null - }, - displayedList : { - get: function() { - return this._displayedList; - }, - set: function(list) { - this._lastDisplayedList = this._displayedList; - this._displayedList = list; - this.needsDraw = true; - } + + //// Array of lists that have been added to the container + //// Lists include selection type (element/stylesheet), and + //// the selection itself + ruleLists : { + value: [], + distinct: true }, + draw : { value: function() { - if(this._lastDisplayedList) { - this._lastDisplayedList.style.display = 'none'; - - if(this._displayedList.element) { - this._displayedList.style.display = null; - } - } - if(this._appendElement) { this.element.appendChild(this._appendElement); this._instanceToAdd.element = this._appendElement; this._appendElement = null; + this.needsDraw = true; + return; } + if(this._lastDisplayedList) { + this._lastDisplayedList.component.element.style.display = 'none'; + if(this._displayedList.component.element) { + this._displayedList.component.element.style.display = null; + } + } } } }); \ No newline at end of file diff --git a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css index 0b1aa892..5bc34d57 100644 --- a/js/panels/css-panel/styles-view-container.reel/styles-view-container.css +++ b/js/panels/css-panel/styles-view-container.reel/styles-view-container.css @@ -4,6 +4,7 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ .sub-panel-slot { + background-color: #FFF; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 1; 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 7df39d39..0204d2b8 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 @@ -28,7 +28,6 @@ exports.StylesViewContainer = Montage.create(Component, { }, templateDidLoad : { value: function() { - console.log("styles view container - deserialized"); this.eventManager.addEventListener('styleSheetsReady', this, false); } }, @@ -39,56 +38,15 @@ exports.StylesViewContainer = Montage.create(Component, { }, handleSelectionChange: { value: function() { - var elements = this.application.ninja.selectedElements, - type, selection, ruleList; + var elements = this.application.ninja.selectedElements; - if(elements.length === 0) { - return false; - } else if(elements.length > 1) { - type = 'ELEMENTS'; - selection = elements; - } else { - type = 'ELEMENT'; - selection = elements[0]; - } - - ruleList = this.ruleListContainer._getRuleList({ - selectionType : type, - selection : selection - }); - - if(ruleList) { - this.ruleListContainer.displayedList = ruleList; - } else { - this.ruleListContainer.add(type, selection); - } + if(elements.length === 0) { return false; } + this.ruleListContainer.displayListForSelection(elements); this.hasStyles = true; } }, - _ruleList : { - value: [] - }, - ruleList : { - get: function() { - return this._ruleList; - }, - set: function(list) { - if(!list) { - this._ruleList.length = 0; - return; - } - - this._ruleList = list; - this.needsDraw = true; - } - }, - prepareForDraw : { - value: function() { - console.log("styles view container - prepare for draw"); - } - }, draw : { value: function() { if(this.hasStyles) { -- cgit v1.2.3