From 1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 2 Mar 2012 10:55:51 -0800 Subject: CSS Panel - Updating components, created toolbar components, and small changes to styles controller --- .../styles-view-container.js | 133 ++++++++++++++++++++- 1 file changed, 129 insertions(+), 4 deletions(-) (limited to 'js/panels/css-panel/styles-view-container.reel/styles-view-container.js') 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 41e16192..6164a14c 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 @@ -8,28 +8,153 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.StylesViewContainer = Montage.create(Component, { - noDocumentCondition : { + noStylesCondition : { value: true }, + contentController : { + value: null + }, contentPanel : { value: 'rules' }, - displayedList : { - value: null + _hasStyles : { + value: false }, - deserializedFromTemplate : { + hasStyles : { + get: function() { + return this._hasStyles; + }, + set: function(hasThem) { + this._hasStyles = hasThem; + this.needsDraw = true; + } + }, + templateDidLoad : { value: function() { console.log("styles view container - deserialized"); + this.eventManager.addEventListener('styleSheetsReady', this, false); + } + }, + handleStyleSheetsReady: { + value: function(e) { + this.eventManager.addEventListener( "selectionChange", this, false); + } + }, + handleSelectionChange: { + value: function() { + var elements = this.application.ninja.selectedElements, + type, selection, ruleList; + + if(elements.length === 0) { + return false; + } else if(elements.length >= 1) { + type = 'ELEMENTS'; + selection = elements; + } else { + type = 'ELEMENTS'; + selection = elements[0] + } + + ruleList = this._getRuleList({ + selectionType : type, + selection : selection + }); + + if(ruleList) { + this.displayedList = ruleList; + } + } + }, + _lastDisplayedList : { + value: null + }, + _displayedList : { + value: null + }, + displayedList : { + get: function() { + return this._displayedList; + }, + set: function(list) { + this._hasStyles = true; + this._lastDisplayedList = this._displayedList; + this._displayedList = list; + this.needsDraw = 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() { + debugger; console.log("styles view container - prepare for draw"); } }, draw : { value: function() { console.log("styles view container - draw"); +console.log("has style = " + this._hasStyles); + if(this.hasStyles) { + this.element.classList.remove('no-styles'); + } else { + this.element.classList.add('no-styles'); + } + + if(this._lastDisplayedList) { + //this._lastDisplayedList.style.display = 'none'; + } + + //this._displayedList.style.display = ''; + } + }, + _getRuleList : { + value: function(s) { + var ruleListsOfType, i, list, matchesAll; + + ruleListsOfType = this.ruleLists.filter(function(list) { + return list.selectionType = s.selectionType; + }); + + for(i = 0; i