aboutsummaryrefslogtreecommitdiff
path: root/js/controllers/styles-controller.js
diff options
context:
space:
mode:
authorJohn Mayhew2012-07-24 15:46:16 -0700
committerJohn Mayhew2012-07-24 15:46:16 -0700
commit9f240b8b9b1f5fb0f145c343ca5e533e25e81374 (patch)
tree407564eaa6466e8d4cf2eeee0c56dc623243586f /js/controllers/styles-controller.js
parentd25359c75089215ee48838db081fd3d51cbbd85f (diff)
parent21d74af1e9fc57cc25cea8aa7408beabf79ff2f3 (diff)
downloadninja-9f240b8b9b1f5fb0f145c343ca5e533e25e81374.tar.gz
Merge branch 'master' of github.com:Motorola-Mobility/ninja
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-xjs/controllers/styles-controller.js110
1 files changed, 100 insertions, 10 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 89a389a4..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 },
@@ -1292,33 +1329,68 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1292 1329
1293 ///// Get Matrix From Element 1330 ///// Get Matrix From Element
1294 ///// Returns the matrix from an element's -webkit-transform 1331 ///// Returns the matrix from an element's -webkit-transform
1295 //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc.
1296 1332
1297 getMatrixFromElement : { 1333 getMatrixFromElement : {
1298 value: function(element, isStage) { 1334 value: function(element, isStage) {
1299 isStage = false; 1335 isStage = false;
1300 var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage), 1336 var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage),
1301 mat; 1337 mat,
1338 index1,
1339 index2,
1340 substr,
1341 numArray,
1342 nNums,
1343 i;
1302 1344
1303 if (xformStr) { 1345 if (xformStr) {
1304 var index1 = xformStr.indexOf( "matrix3d("); 1346 // Check for 3d matrix
1347 index1 = xformStr.indexOf( "matrix3d(");
1348 // If style does not contain 'matrix3d', try computed matrix/matrix3d from rotateY, translateZ, etc.
1349 if((index1 === -1) && element.ownerDocument.defaultView) {
1350 xformStr = element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("-webkit-transform");
1351 index1 = xformStr.indexOf( "matrix3d(");
1352 }
1305 if (index1 >= 0) { 1353 if (index1 >= 0) {
1306 index1 += 9; // do not include 'matrix3d(' 1354 index1 += 9; // do not include 'matrix3d('
1307 var index2 = xformStr.indexOf( ")", index1 ); 1355 index2 = xformStr.indexOf( ")", index1 );
1308 if (index2 >= 0) { 1356 if (index2 >= 0) {
1309 var substr = xformStr.substr( index1, (index2-index1)); 1357 substr = xformStr.substr( index1, (index2-index1));
1310 if (substr && (substr.length > 0)) { 1358 if (substr && (substr.length > 0)) {
1311 var numArray = substr.split(','); 1359 numArray = substr.split(',');
1312 var nNums = numArray.length; 1360 nNums = numArray.length;
1313 if (nNums == 16) { 1361 if (nNums == 16) {
1314 // gl-matrix wants row order 1362 // gl-matrix wants row order
1315 mat = numArray; 1363 mat = numArray;
1316 for (var i=0; i<16; i++) { 1364 for (i=0; i<16; i++) {
1317 mat[i] = Number( mat[i] ); 1365 mat[i] = Number( mat[i] );
1318 } 1366 }
1319 } 1367 }
1320 } 1368 }
1321 } 1369 }
1370 } else {
1371 // Check for 2d matrix
1372 index1 = xformStr.indexOf( "matrix(");
1373 if (index1 >= 0) {
1374 index1 += 7; // do not include 'matrix('
1375 index2 = xformStr.indexOf( ")", index1 );
1376 if (index2 >= 0) {
1377 substr = xformStr.substr( index1, (index2-index1));
1378 if (substr && (substr.length > 0)) {
1379 numArray = substr.split(',');
1380 nNums = numArray.length;
1381 if (nNums === 6) {
1382 // gl-matrix wants row order
1383 mat = Matrix.I(4);
1384 mat[0] = Number(numArray[0]);
1385 mat[1] = Number(numArray[1]);
1386 mat[4] = Number(numArray[2]);
1387 mat[5] = Number(numArray[3]);
1388 mat[12] = Number(numArray[4]);
1389 mat[13] = Number(numArray[5]);
1390 }
1391 }
1392 }
1393 }
1322 } 1394 }
1323 } 1395 }
1324 return mat; 1396 return mat;
@@ -1405,7 +1477,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1405 rel : 'stylesheet', 1477 rel : 'stylesheet',
1406 id : id || "", 1478 id : id || "",
1407 media : 'screen', 1479 media : 'screen',
1408 title : 'Temp' 1480 title : 'Temp',
1481 'data-ninja-node' : 'true'
1409 }); 1482 });
1410 1483
1411 doc.head.appendChild(sheetElement); 1484 doc.head.appendChild(sheetElement);
@@ -1432,6 +1505,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1432 sheetEl.disabled = true; 1505 sheetEl.disabled = true;
1433 this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1); 1506 this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1);
1434 1507
1508 ///// Make sure cached rules from this stylesheet are not used
1509 this._clearCache();
1510
1435 ///// Check to see if we're removing the default style sheet 1511 ///// Check to see if we're removing the default style sheet
1436 if(sheet === this._defaultStylesheet) { 1512 if(sheet === this._defaultStylesheet) {
1437 sheetCount = this.userStyleSheets.length; 1513 sheetCount = this.userStyleSheets.length;
@@ -1440,6 +1516,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1440 1516
1441 ///// Mark for removal for i/o 1517 ///// Mark for removal for i/o
1442 sheetEl.setAttribute('data-ninja-remove', 'true'); 1518 sheetEl.setAttribute('data-ninja-remove', 'true');
1519 sheetEl.removeAttribute('data-ninja-node');
1443 1520
1444 NJevent('removeStyleSheet', sheet); 1521 NJevent('removeStyleSheet', sheet);
1445 } 1522 }
@@ -1469,6 +1546,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1469 } 1546 }
1470 }, 1547 },
1471 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
1472 ///// Style Sheet Modified 1561 ///// Style Sheet Modified
1473 ///// Method to call whenever a stylesheet change is made 1562 ///// Method to call whenever a stylesheet change is made
1474 ///// Dispatches an event, and keeps list of dirty style sheets 1563 ///// Dispatches an event, and keeps list of dirty style sheets
@@ -1486,6 +1575,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1486 ///// 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
1487 ///// sheets, dispatch dirty event and add the sheet to the list 1576 ///// sheets, dispatch dirty event and add the sheet to the list
1488 if(sheetSearch.length === 0) { 1577 if(sheetSearch.length === 0) {
1578 NJevent('styleSheetDirty', eventData);
1489 this.dirtyStyleSheets.push({ 1579 this.dirtyStyleSheets.push({
1490 document : sheet.ownerNode.ownerDocument, 1580 document : sheet.ownerNode.ownerDocument,
1491 stylesheet : sheet 1581 stylesheet : sheet