CSS Rule List - Enabled list switching on selection

3 files changed, 73 insertions, 109 deletions

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<ruleListsOfType.length; i++) {
-                list = ruleListsOfType[i];
+            for(i = 0; i<this.ruleLists.length; i++) {
+                list = this.ruleLists[i];
 
-                if(s.selectionType === 'elements') {
+                if(selection.length > 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 @@