From 2f0c50a13258e8abb9325573ed7e0ebe11655fec Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 20 Jul 2012 11:30:08 -0700 Subject: CSS Panel - Fix updating when media changes, sheets are deleted. --- js/controllers/styles-controller.js | 39 +++++++++++++++++++++- js/panels/css-panel/rule-list.reel/rule-list.js | 2 +- .../style-sheets-view.reel/style-sheets-view.js | 1 - .../styles-view-container.js | 6 ++++ 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index b0db1b6a..041794e0 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -106,7 +106,17 @@ var stylesController = exports.StylesController = Montage.create(Component, { this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) { - return sheet !== this._stageStylesheet; + if(sheet === this._stageStylesheet) { return false; } + + var media = sheet.ownerNode.getAttribute('media'); + + ///// If the media attribute contains a query, we'll watch for changes in media + if(/\([0-9A-Za-z-: ]+\)/.test(media)) { + this.watchMedia(media); + } + + return true; + }, this); this.initializeRootStyles(); @@ -115,6 +125,33 @@ var stylesController = exports.StylesController = Montage.create(Component, { }, enumerable : false }, + + _mediaList : { + value: [] + }, + + watchMedia : { + value: function(mediaQuery, doc) { + var _doc = doc || this._currentDocument.model.views.design.document; + + ///// Set a listener for media changes + _doc.defaultView.matchMedia(mediaQuery).addListener(function(e) { + this.handleMediaChange(e); + }.bind(this)); + } + }, + + handleMediaChange : { + value: function(query) { + this._clearCache(); + + NJevent('mediaChange', { + query: query, + source: "stylesController" + }); + } + }, + userStyleSheets : { value : null }, 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 ae0c4611..b9dc2b95 100644 --- a/js/panels/css-panel/rule-list.reel/rule-list.js +++ b/js/panels/css-panel/rule-list.reel/rule-list.js @@ -106,7 +106,7 @@ exports.RuleList = Montage.create(Component, { // found rule in our component list, or it's the inline rule ruleComponent.update(); foundIndices.push(index); - } else if(!ruleComponent.applied) { /// remove rule (unless unapplied) + } else if(ruleComponent.applied) { /// remove rule (unless unapplied) this.rulesToRemove.push(ruleComponent); } }, this); diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js index cd86261c..2effb429 100644 --- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js +++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js @@ -141,7 +141,6 @@ exports.StyleSheetsView = Montage.create(Component, { handleDeleteAction : { value: function(sheetComponent) { this.stylesController.removeStyleSheet(sheetComponent.source); - this.stylesController._clearCache(); this._dispatchChange(); } }, 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 bba178f2..94abb4b0 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 @@ -141,6 +141,12 @@ exports.StylesViewContainer = Montage.create(Component, { value: function() { this.eventManager.addEventListener('styleSheetsReady', this, false); this.eventManager.addEventListener('elementChange', this, false); + this.eventManager.addEventListener('mediaChange', this, false); + } + }, + handleMediaChange : { + value: function(e) { + this.ruleListContainer.update(); } }, handleStyleSheetsReady: { -- cgit v1.2.3