aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/styles-controller.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-xjs/controllers/styles-controller.js58
1 files changed, 56 insertions, 2 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index b0db1b6a..11d53ac0 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;
@@ -1504,6 +1545,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1504 } 1545 }
1505 }, 1546 },
1506 1547
1548 setMediaAttribute : {
1549 value: function(sheet, mediaString) {
1550 if(sheet.media.mediaText === mediaString) { return false; }
1551
1552 sheet.ownerNode.setAttribute('media', mediaString);
1553
1554 this._clearCache();
1555
1556 this.styleSheetModified(sheet);
1557 }
1558 },
1559
1507 ///// Style Sheet Modified 1560 ///// Style Sheet Modified
1508 ///// Method to call whenever a stylesheet change is made 1561 ///// Method to call whenever a stylesheet change is made
1509 ///// Dispatches an event, and keeps list of dirty style sheets 1562 ///// Dispatches an event, and keeps list of dirty style sheets
@@ -1521,6 +1574,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1521 ///// If the sheet doesn't already exist in the list of modified 1574 ///// If the sheet doesn't already exist in the list of modified
1522 ///// sheets, dispatch dirty event and add the sheet to the list 1575 ///// sheets, dispatch dirty event and add the sheet to the list
1523 if(sheetSearch.length === 0) { 1576 if(sheetSearch.length === 0) {
1577 NJevent('styleSheetDirty', eventData);
1524 this.dirtyStyleSheets.push({ 1578 this.dirtyStyleSheets.push({
1525 document : sheet.ownerNode.ownerDocument, 1579 document : sheet.ownerNode.ownerDocument,
1526 stylesheet : sheet 1580 stylesheet : sheet