aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/controllers/styles-controller.js59
-rw-r--r--js/panels/css-panel/rule-list.reel/rule-list.js2
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.html3
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js20
-rw-r--r--js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js10
-rw-r--r--js/panels/css-panel/styles-view-container.reel/styles-view-container.js6
6 files changed, 91 insertions, 9 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index b0db1b6a..21321f6d 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -106,7 +106,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
106 this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); 106 this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
107 107
108 this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) { 108 this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) {
109 return sheet !== this._stageStylesheet; 109 if(sheet === this._stageStylesheet) { return false; }
110
111 var media = sheet.ownerNode.getAttribute('media');
112
113 ///// If the media attribute contains a query, we'll watch for changes in media
114 if(/\([0-9A-Za-z-: ]+\)/.test(media)) {
115 this.watchMedia(media);
116 }
117
118 return true;
119
110 }, this); 120 }, this);
111 121
112 this.initializeRootStyles(); 122 this.initializeRootStyles();
@@ -115,6 +125,33 @@ var stylesController = exports.StylesController = Montage.create(Component, {
115 }, 125 },
116 enumerable : false 126 enumerable : false
117 }, 127 },
128
129 _mediaList : {
130 value: []
131 },
132
133 watchMedia : {
134 value: function(mediaQuery, doc) {
135 var _doc = doc || this._currentDocument.model.views.design.document;
136
137 ///// Set a listener for media changes
138 _doc.defaultView.matchMedia(mediaQuery).addListener(function(e) {
139 this.handleMediaChange(e);
140 }.bind(this));
141 }
142 },
143
144 handleMediaChange : {
145 value: function(query) {
146 this._clearCache();
147
148 NJevent('mediaChange', {
149 query: query,
150 source: "stylesController"
151 });
152 }
153 },
154
118 userStyleSheets : { 155 userStyleSheets : {
119 value : null 156 value : null
120 }, 157 },
@@ -1440,7 +1477,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1440 rel : 'stylesheet', 1477 rel : 'stylesheet',
1441 id : id || "", 1478 id : id || "",
1442 media : 'screen', 1479 media : 'screen',
1443 title : 'Temp' 1480 title : 'Temp',
1481 'data-ninja-node' : 'true'
1444 }); 1482 });
1445 1483
1446 doc.head.appendChild(sheetElement); 1484 doc.head.appendChild(sheetElement);
@@ -1467,6 +1505,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1467 sheetEl.disabled = true; 1505 sheetEl.disabled = true;
1468 this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1); 1506 this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1);
1469 1507
1508 ///// Make sure cached rules from this stylesheet are not used
1509 this._clearCache();
1510
1470 ///// Check to see if we're removing the default style sheet 1511 ///// Check to see if we're removing the default style sheet
1471 if(sheet === this._defaultStylesheet) { 1512 if(sheet === this._defaultStylesheet) {
1472 sheetCount = this.userStyleSheets.length; 1513 sheetCount = this.userStyleSheets.length;
@@ -1475,6 +1516,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1475 1516
1476 ///// Mark for removal for i/o 1517 ///// Mark for removal for i/o
1477 sheetEl.setAttribute('data-ninja-remove', 'true'); 1518 sheetEl.setAttribute('data-ninja-remove', 'true');
1519 sheetEl.removeAttribute('data-ninja-node');
1478 1520
1479 NJevent('removeStyleSheet', sheet); 1521 NJevent('removeStyleSheet', sheet);
1480 } 1522 }
@@ -1504,6 +1546,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1504 } 1546 }
1505 }, 1547 },
1506 1548
1549 setMediaAttribute : {
1550 value: function(sheet, mediaString) {
1551 if(sheet.media.mediaText === mediaString) { return false; }
1552
1553 sheet.ownerNode.setAttribute('media', mediaString);
1554
1555 this._clearCache();
1556
1557 this.styleSheetModified(sheet);
1558 }
1559 },
1560
1507 ///// Style Sheet Modified 1561 ///// Style Sheet Modified
1508 ///// Method to call whenever a stylesheet change is made 1562 ///// Method to call whenever a stylesheet change is made
1509 ///// Dispatches an event, and keeps list of dirty style sheets 1563 ///// Dispatches an event, and keeps list of dirty style sheets
@@ -1521,6 +1575,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1521 ///// If the sheet doesn't already exist in the list of modified 1575 ///// If the sheet doesn't already exist in the list of modified
1522 ///// sheets, dispatch dirty event and add the sheet to the list 1576 ///// sheets, dispatch dirty event and add the sheet to the list
1523 if(sheetSearch.length === 0) { 1577 if(sheetSearch.length === 0) {
1578 NJevent('styleSheetDirty', eventData);
1524 this.dirtyStyleSheets.push({ 1579 this.dirtyStyleSheets.push({
1525 document : sheet.ownerNode.ownerDocument, 1580 document : sheet.ownerNode.ownerDocument,
1526 stylesheet : sheet 1581 stylesheet : sheet
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, {
106 // found rule in our component list, or it's the inline rule 106 // found rule in our component list, or it's the inline rule
107 ruleComponent.update(); 107 ruleComponent.update();
108 foundIndices.push(index); 108 foundIndices.push(index);
109 } else if(!ruleComponent.applied) { /// remove rule (unless unapplied) 109 } else if(ruleComponent.applied) { /// remove rule (unless unapplied)
110 this.rulesToRemove.push(ruleComponent); 110 this.rulesToRemove.push(ruleComponent);
111 } 111 }
112 }, this); 112 }, this);
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.
62 "prototype": "js/components/textfield.reel[TextField]", 62 "prototype": "js/components/textfield.reel[TextField]",
63 "properties": { 63 "properties": {
64 "element": {"#": "media-input"} 64 "element": {"#": "media-input"}
65 },
66 "bindings": {
67 "value": {"<->": "@owner.mediaText"}
65 } 68 }
66 }, 69 },
67 "editButton": { 70 "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..3a0060b2 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, {
71 prepareForDraw : { 71 prepareForDraw : {
72 value: function() { 72 value: function() {
73 this.nameText.element.addEventListener('click', this, false); 73 this.nameText.element.addEventListener('click', this, false);
74
75 //// Set the initial media text value
76 this.mediaText = this._source.media.mediaText;
74 } 77 }
75 }, 78 },
76 79
@@ -89,8 +92,6 @@ exports.StyleSheet = Montage.create(Component, {
89 value: function() { 92 value: function() {
90 var transStr = '-webkit-transform'; 93 var transStr = '-webkit-transform';
91 94
92 this.mediaInput.value = this._source.media.mediaText;
93
94 if(this.editing) { 95 if(this.editing) {
95 this.editView.classList.add('expanded'); 96 this.editView.classList.add('expanded');
96 this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)'); 97 this.editView.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
@@ -194,6 +195,21 @@ exports.StyleSheet = Montage.create(Component, {
194 this._name = text; 195 this._name = text;
195 } 196 }
196 }, 197 },
198
199 _mediaText : { value: null },
200 mediaText : {
201 get : function() { return this._mediaText; },
202 set : function(value) {
203 if(value === this._mediaText) { return; }
204
205 this.application.ninja.stylesController.setMediaAttribute(this._source, value);
206
207 this._mediaText = value;
208
209 this.needsDraw = true;
210 }
211 },
212
197 _dirty : { 213 _dirty : {
198 value: null 214 value: null
199 }, 215 },
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..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
@@ -96,13 +96,16 @@ exports.StyleSheetsView = Montage.create(Component, {
96 96
97 var sheetComponent, oldDefaultSheet; 97 var sheetComponent, oldDefaultSheet;
98 98
99 ///// Mark the appropriate component as the default, un-mark the previous default
99 if(this.styleSheetList) {