diff options
author | Jose Antonio Marquez | 2012-07-23 15:54:59 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-07-23 15:54:59 -0700 |
commit | afc7ad4f240fdf7890a79c2d4d7f8eb2e7c30a34 (patch) | |
tree | dfaa3a21f256846f0dca9dfd7a610ab738b738a7 /js | |
parent | b3869f66ac77b31cbc0bd36ef360c3fa79c8d365 (diff) | |
parent | faa78ac6b0f9944dd406bed3c8170714ca02e3f9 (diff) | |
download | ninja-afc7ad4f240fdf7890a79c2d4d7f8eb2e7c30a34.tar.gz |
Merge branch 'refs/heads/Ninja-Master' into Document
Diffstat (limited to 'js')
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; |