diff options
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-x | js/controllers/styles-controller.js | 93 |
1 files changed, 61 insertions, 32 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index e76e5a1b..f35a6757 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -50,10 +50,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
50 | 50 | ||
51 | handleAppLoaded : { | 51 | handleAppLoaded : { |
52 | value: function() { | 52 | value: function() { |
53 | ///// Bind app's activeDocument property to | 53 | ///// Bind app's currentDocument property to |
54 | ///// styles controller's _activeDocument property | 54 | ///// styles controller's _currentDocument property |
55 | 55 | ||
56 | // Object.defineBinding(this, "activeDocument", { | 56 | // Object.defineBinding(this, "currentDocument", { |
57 | // boundObject: this.application.ninja, | 57 | // boundObject: this.application.ninja, |
58 | // boundObjectPropertyPath: "currentDocument", | 58 | // boundObjectPropertyPath: "currentDocument", |
59 | // oneway: true | 59 | // oneway: true |
@@ -69,20 +69,20 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
69 | }, | 69 | }, |
70 | ///// Active document gets automatically set when the | 70 | ///// Active document gets automatically set when the |
71 | ///// document controller changes it | 71 | ///// document controller changes it |
72 | _activeDocument : { | 72 | _currentDocument : { |
73 | value : null, | 73 | value : null, |
74 | enumerable : false | 74 | enumerable : false |
75 | }, | 75 | }, |
76 | 76 | ||
77 | activeDocument : { | 77 | currentDocument : { |
78 | get : function() { | 78 | get : function() { |
79 | return this._activeDocument; | 79 | return this._currentDocument; |
80 | }, | 80 | }, |
81 | set : function(document) { | 81 | set : function(document) { |
82 | ///// If the document is null set default stylesheets to null | 82 | ///// If the document is null set default stylesheets to null |
83 | 83 | ||
84 | if(!document || document.currentView === "code") { | 84 | if(!document || document.currentView === "code") { |
85 | this._activeDocument = null; | 85 | this._currentDocument = null; |
86 | this._stageStylesheet = null; | 86 | this._stageStylesheet = null; |
87 | this.defaultStylesheet = null; | 87 | this.defaultStylesheet = null; |
88 | this.userStyleSheets = []; | 88 | this.userStyleSheets = []; |
@@ -91,7 +91,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
91 | } | 91 | } |
92 | 92 | ||
93 | ///// setting document via binding | 93 | ///// setting document via binding |
94 | this._activeDocument = document; | 94 | this._currentDocument = document; |
95 | 95 | ||
96 | ///// Stage stylesheet should always be found | 96 | ///// Stage stylesheet should always be found |
97 | this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); | 97 | this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); |
@@ -103,6 +103,8 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
103 | return sheet !== this._stageStylesheet; | 103 | return sheet !== this._stageStylesheet; |
104 | }, this); | 104 | }, this); |
105 | 105 | ||
106 | this.initializeRootStyles(); | ||
107 | |||
106 | NJevent('styleSheetsReady', this); | 108 | NJevent('styleSheetsReady', this); |
107 | }, | 109 | }, |
108 | enumerable : false | 110 | enumerable : false |
@@ -129,10 +131,10 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
129 | return false; | 131 | return false; |
130 | } | 132 | } |
131 | //check that the document has a design view | 133 | //check that the document has a design view |
132 | else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){ | 134 | else if(this._currentDocument.model && this._currentDocument.model.views && this._currentDocument.model.views.design){ |
133 | ///// Use the last stylesheet in the document as the default | 135 | ///// Use the last stylesheet in the document as the default |
134 | 136 | ||
135 | var sheets = this._activeDocument.model.views.design.document.styleSheets, | 137 | var sheets = this._currentDocument.model.views.design.document.styleSheets, |
136 | lastIndex = sheets.length-1; | 138 | lastIndex = sheets.length-1; |
137 | 139 | ||
138 | ///// If the only sheet is the stage stylesheet, this will be true | 140 | ///// If the only sheet is the stage stylesheet, this will be true |
@@ -148,7 +150,37 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
148 | } | 150 | } |
149 | } | 151 | } |
150 | }, | 152 | }, |
151 | 153 | ||
154 | initializeRootStyles: { | ||
155 | value: function() { | ||
156 | var styles = {}, | ||
157 | needsRule = false, | ||
158 | rule; | ||
159 | |||
160 | if(this.getElementStyle(this.currentDocument.model.documentRoot, "width", false, false) == null) { | ||
161 | styles['width'] = '100%'; | ||
162 | needsRule = true; | ||
163 | } | ||
164 | if(this.getElementStyle(this.currentDocument.model.documentRoot, "height", false, false) == null) { | ||
165 | styles['height'] = '100%'; | ||
166 | needsRule = true; | ||
167 | } | ||
168 | if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform", false, false) == null) { | ||
169 | styles['-webkit-transform'] = 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'; | ||
170 | needsRule = true; | ||
171 | } | ||
172 | if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform-style", false, false) == null) { | ||
173 | styles['-webkit-transform-style'] = 'preserve-3d'; | ||
174 | needsRule = true; | ||
175 | } | ||
176 | |||
177 | if(needsRule) { | ||
178 | rule = this.addRule('.ninja-body{}'); | ||
179 | this.setStyles(rule, styles); | ||
180 | this.addClass(this.currentDocument.model.documentRoot, "ninja-body"); | ||
181 | } | ||
182 | } | ||
183 | }, | ||
152 | /* ----------------- Rule methods ----------------- */ | 184 | /* ----------------- Rule methods ----------------- */ |
153 | 185 | ||
154 | ///// Add Rule | 186 | ///// Add Rule |
@@ -538,7 +570,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
538 | return true; | 570 | return true; |
539 | } | 571 | } |
540 | 572 | ||
541 | var doc = document || this._activeDocument; | 573 | var doc = document || this._currentDocument; |
542 | ///// TODO: somehow cache the number of elements affected | 574 | ///// TODO: somehow cache the number of elements affected |
543 | ///// by the rule, because querySelectorAll() is expensive | 575 | ///// by the rule, because querySelectorAll() is expensive |
544 | return !!(doc.querySelectorAll(rule.selectorText).length > 1); | 576 | return !!(doc.querySelectorAll(rule.selectorText).length > 1); |
@@ -887,7 +919,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
887 | 919 | ||
888 | getAnimationRuleWithName : { | 920 | getAnimationRuleWithName : { |
889 | value: function(name, document) { | 921 | value: function(name, document) { |
890 | var doc = document || this._activeDocument.model.views.design.document, | 922 | var doc = document || this._currentDocument.model.views.design.document, |
891 | animRules = this.getDocumentAnimationRules(doc), | 923 | animRules = this.getDocumentAnimationRules(doc), |
892 | rule, i; | 924 | rule, i; |
893 | 925 | ||
@@ -909,7 +941,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
909 | 941 | ||
910 | getDocumentAnimationRules : { | 942 | getDocumentAnimationRules : { |
911 | value: function(document) { | 943 | value: function(document) { |
912 | var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets, | 944 | var sheets = (document) ? document.styleSheets : this._currentDocument.model.views.design.document.styleSheets, |
913 | rules = []; | 945 | rules = []; |
914 | 946 | ||
915 | nj.toArray(sheets).forEach(function(sheet) { | 947 | nj.toArray(sheets).forEach(function(sheet) { |
@@ -1273,7 +1305,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1273 | 1305 | ||
1274 | createStylesheet : { | 1306 | createStylesheet : { |
1275 | value: function(id, document) { | 1307 | value: function(id, document) { |
1276 | var doc = document || this._activeDocument.model.views.design.document, | 1308 | var doc = document || this._currentDocument.model.views.design.document, |
1277 | sheetElement, sheet; | 1309 | sheetElement, sheet; |
1278 | 1310 | ||
1279 | sheetElement = nj.make('style', { | 1311 | sheetElement = nj.make('style', { |
@@ -1330,15 +1362,12 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1330 | 1362 | ||
1331 | getSheetFromElement : { | 1363 | getSheetFromElement : { |
1332 | value : function(element, context) { | 1364 | value : function(element, context) { |
1333 | var doc = context || this._activeDocument.model.views.design.document, | 1365 | var doc = context || this._currentDocument.model.views.design.document, |
1334 | el = (typeof element === 'string') ? nj.$(element, doc) : element; | 1366 | el = (typeof element === 'string') ? nj.$(element, doc) : element; |
1335 | 1367 | ||
1336 | if(el && el.sheet) { | 1368 | if(el && el.sheet) { |
1337 | return el.sheet; | 1369 | return el.sheet; |
1338 | } | 1370 | } |
1339 | |||
1340 | return; | ||
1341 | |||
1342 | } | 1371 | } |
1343 | }, | 1372 | }, |
1344 | 1373 | ||
@@ -1364,7 +1393,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1364 | ///// If the sheet doesn't already exist in the list of modified | 1393 | ///// If the sheet doesn't already exist in the list of modified |
1365 | ///// sheets, dispatch dirty event and add the sheet to the list | 1394 | ///// sheets, dispatch dirty event and add the sheet to the list |
1366 | if(sheetSearch.length === 0) { | 1395 | if(sheetSearch.length === 0) { |
1367 | NJevent('styleSheetDirty', eventData); | 1396 | this.currentDocument.model.needsSave = true; |
1368 | this.dirtyStyleSheets.push({ | 1397 | this.dirtyStyleSheets.push({ |
1369 | document : sheet.ownerNode.ownerDocument, | 1398 | document : sheet.ownerNode.ownerDocument, |
1370 | stylesheet : sheet | 1399 | stylesheet : sheet |
@@ -1573,7 +1602,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1573 | getStyleTest : function() { | 1602 | getStyleTest : function() { |
1574 | var properties = ['background-position', 'width', 'height']; | 1603 | var properties = ['background-position', 'width', 'height']; |
1575 | 1604 | ||
1576 | var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); | 1605 | var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1'); |
1577 | 1606 | ||
1578 | properties.forEach(function(prop) { | 1607 | properties.forEach(function(prop) { |
1579 | console.log('Getting value for "' + pr |