aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/controllers/styles-controller.js59
-rwxr-xr-xjs/lib/NJUtils.js1
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html2
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js33
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss2
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js26
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.js10
-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
12 files changed, 154 insertions, 20 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/lib/NJUtils.js b/js/lib/NJUtils.js
index cfb7ef07..bca9b05b 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -241,6 +241,7 @@ exports.NJUtils = Montage.create(Component, {
241 // 100px will return the following array: [100, px] 241 // 100px will return the following array: [100, px]
242 getValueAndUnits: { 242 getValueAndUnits: {
243 value: function(input) { 243 value: function(input) {
244 if (!input) return [null, null];
244 var numberValue = parseFloat(input); 245 var numberValue = parseFloat(input);
245 246
246 // Ignore all whitespace, digits, negative sign and "." when looking for units label 247 // Ignore all whitespace, digits, negative sign and "." when looking for units label
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 0d769c23..8a4073c9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -1,4 +1,4 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<!-- <copyright> 2<!-- <copyright>
3Copyright (c) 2012, Motorola Mobility LLC. 3Copyright (c) 2012, Motorola Mobility LLC.
4All Rights Reserved. 4All Rights Reserved.
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 521c315d..7581d15a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -527,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
527 set:function (newVal) { 527 set:function (newVal) {
528 if (newVal !== this._millisecondsOffset) { 528 if (newVal !== this._millisecondsOffset) {
529 529
530 this.tempValue = newVal; 530 this.zoomValue = newVal;
531 var tempValue = (1/newVal) * 1000000; 531 var tempValue = (1/newVal) * 1000000;
532 newVal = tempValue; 532 newVal = tempValue;
533 533
@@ -1130,8 +1130,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1130 this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected; 1130 this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
1131 this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected; 1131 this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
1132 this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; 1132 this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
1133 1133// if(this.application.ninja.currentDocument.tlZoomSliderValue){
1134 1134// this.millisecondsOffset = this.application.ninja.currentDocument.tlZoomSliderValue ;
1135// if(this.zoom_slider){
1136// this.zoom_slider.value = this.application.ninja.currentDocument.tlZoomSliderValue;
1137// }
1138//
1139// }
1135 // Are we only showing animated layers? 1140 // Are we only showing animated layers?
1136 if (this.application.ninja.currentDocument.boolShowOnlyAnimated) { 1141 if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
1137 // Fake a click. 1142 // Fake a click.
@@ -1706,12 +1711,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
1706 zoomTrackContainerWidthChange:{ 1711 zoomTrackContainerWidthChange:{
1707 value:function () { 1712 value:function () {
1708 1713
1709 this.tempValue = this.tempValue/1000; 1714 if(this.application.ninja.currentDocument && this.zoomValue){
1710 this.tempValue *= 30; 1715 this.application.ninja.currentDocument.tlZoomSliderValue = this.zoomValue;
1716
1717 }
1711 1718
1712 this.container_tracks.style.width = (this.tempValue * 80) + "px"; 1719 this.zoomValue = this.zoomValue/1000;
1713 this.master_track.style.width = (this.tempValue * 80) + "px"; 1720 this.zoomValue *= 30;
1714 this.time_markers.style.width = (this.tempValue * 80) + "px"; 1721
1722 this.container_tracks.style.width = (this.zoomValue * 80) + "px";
1723 this.master_track.style.width = (this.zoomValue * 80) + "px";
1724 this.time_markers.style.width = (this.zoomValue * 80) + "px";
1715 if (this.timeMarkerHolder) { 1725 if (this.timeMarkerHolder) {
171