From bc7ffffb2bac3bf09d17d855d32a5f0d154fab3b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 17 Jul 2012 18:40:24 -0700 Subject: Styles Controller - Re-add dirty event. Add data- attribute to keep created stylesheets. --- js/controllers/styles-controller.js | 4 +++- js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 89a389a4..8639bed1 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1405,7 +1405,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { rel : 'stylesheet', id : id || "", media : 'screen', - title : 'Temp' + title : 'Temp', + 'data-ninja-node' : 'true' }); doc.head.appendChild(sheetElement); @@ -1486,6 +1487,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// If the sheet doesn't already exist in the list of modified ///// sheets, dispatch dirty event and add the sheet to the list if(sheetSearch.length === 0) { + NJevent('styleSheetDirty', eventData); this.dirtyStyleSheets.push({ document : sheet.ownerNode.ownerDocument, stylesheet : sheet 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..e2193ba0 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 @@ -176,7 +176,7 @@ exports.StyleSheetsView = Montage.create(Component, { } }, - handleStyleSheetModified : { + handleStyleSheetDirty : { value: function(e) { this.needsDraw = true; } @@ -193,7 +193,7 @@ exports.StyleSheetsView = Montage.create(Component, { prepareForDraw : { value: function() { this.eventManager.addEventListener("styleSheetsReady", this, false); - this.eventManager.addEventListener("styleSheetModified", this, false); + this.eventManager.addEventListener("styleSheetDirty", this, false); } }, draw : { -- cgit v1.2.3 From cbd4d317c354137cc3b5f74d1021ea00a3f5b779 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 17 Jul 2012 18:40:55 -0700 Subject: CSS Panel - Handle media attribute changes --- .../css-panel/style-sheet.reel/style-sheet.html | 3 +++ js/panels/css-panel/style-sheet.reel/style-sheet.js | 20 ++++++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html index 035bc760..01b5f20c 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html @@ -62,6 +62,9 @@ POSSIBILITY OF SUCH DAMAGE. "prototype": "js/components/textfield.reel[TextField]", "properties": { "element": {"#": "media-input"} + }, + "bindings": { + "value": {"<->": "@owner.mediaText"} } }, "editButton": { diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index b7df05a7..8a8e7dbf 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -71,6 +71,9 @@ exports.StyleSheet = Montage.create(Component, { prepareForDraw : { value: function() { this.nameText.element.addEventListener('click', this, false); + + //// Set the initial media text value + this.mediaText = this._source.media.mediaText; } }, @@ -89,8 +92,6 @@ exports.StyleSheet = Montage.create(Component, { value: function() { var transStr = '-webkit-transform'; - this.mediaInput.value = this._source.media.mediaText; - if(this.editing) { this.editView.classList.add('expanded'); this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); @@ -194,6 +195,21 @@ exports.StyleSheet = Montage.create(Component, { this._name = text; } }, + + _mediaText : { value: null }, + mediaText : { + get : function() { return this._mediaText; }, + set : function(value) { + if(value === this._mediaText) { return; } + + this._source.ownerNode.setAttribute('media', value); + + this._mediaText = value; + + this.needsDraw = true; + } + }, + _dirty : { value: null }, -- cgit v1.2.3 From 36be3f52a0eaf176213f4d46056e684e0a1b7653 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 18 Jul 2012 17:11:40 -0700 Subject: Style Sheets - Show dirty marker when editing media attribute --- js/controllers/styles-controller.js | 15 +++++++++++++++ js/panels/css-panel/style-sheet.reel/style-sheet.js | 2 +- .../css-panel/style-sheets-view.reel/style-sheets-view.js | 5 ++++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 8639bed1..87019cad 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1433,6 +1433,9 @@ var stylesController = exports.StylesController = Montage.create(Component, { sheetEl.disabled = true; this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1); + ///// Make sure cached rules from this stylesheet are not used + this._clearCache(); + ///// Check to see if we're removing the default style sheet if(sheet === this._defaultStylesheet) { sheetCount = this.userStyleSheets.length; @@ -1470,6 +1473,18 @@ var stylesController = exports.StylesController = Montage.create(Component, { } }, + setMediaAttribute : { + value: function(sheet, mediaString) { + if(sheet.media.mediaText === mediaString) { return false; } + + sheet.ownerNode.setAttribute('media', mediaString); + + this._clearCache(); + + this.styleSheetModified(sheet); + } + }, + ///// Style Sheet Modified ///// Method to call whenever a stylesheet change is made ///// Dispatches an event, and keeps list of dirty style sheets diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js index 8a8e7dbf..3a0060b2 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js @@ -202,7 +202,7 @@ exports.StyleSheet = Montage.create(Component, { set : function(value) { if(value === this._mediaText) { return; } - this._source.ownerNode.setAttribute('media', value); + this.application.ninja.stylesController.setMediaAttribute(this._source, value); this._mediaText = value; 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 e2193ba0..a328cb65 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 @@ -96,13 +96,16 @@ exports.StyleSheetsView = Montage.create(Component, { var sheetComponent, oldDefaultSheet; + ///// Mark the appropriate component as the default, un-mark the previous default if(this.styleSheetList) { sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)]; if(sheetComponent) { sheetComponent['default'] = true; if(this._defaultStyleSheet) { oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)]; - oldDefaultSheet['default'] = false; + if(oldDefaultSheet) { + oldDefaultSheet['default'] = false; + } } } } -- cgit v1.2.3 From 8fdf2fc8aefee68aec4c7b5891e0375f704cbf26 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 20 Jul 2012 11:23:39 -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 87019cad..703d61f4 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 a328cb65..fd559b24 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 @@ -144,7 +144,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 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 From 74d3af4650e549afe6cd6bf11ba0bcae89fca602 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 20 Jul 2012 16:31:35 -0700 Subject: CSS Panel - Remove data attribute to remove style tags from document. --- js/controllers/styles-controller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 11d53ac0..21321f6d 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1516,6 +1516,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// Mark for removal for i/o sheetEl.setAttribute('data-ninja-remove', 'true'); + sheetEl.removeAttribute('data-ninja-node'); NJevent('removeStyleSheet', sheet); } -- cgit v1.2.3