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(-)
(limited to 'js')
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(-)
(limited to 'js')
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(-)
(limited to 'js')
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(-)
(limited to 'js')
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