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.js115
1 files changed, 65 insertions, 50 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 534f77c7..a25a05df 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -48,41 +48,22 @@ var stylesController = exports.StylesController = Montage.create(Component, {
48 ///// bind the document to prop w/ setter. The setter calls to find 48 ///// bind the document to prop w/ setter. The setter calls to find
49 ///// the stage and default css files. 49 ///// the stage and default css files.
50 50
51 handleAppLoaded : {
52 value: function() {
53 ///// Bind app's activeDocument property to
54 ///// styles controller's _activeDocument property
55
56// Object.defineBinding(this, "activeDocument", {
57// boundObject: this.application.ninja,
58// boundObjectPropertyPath: "currentDocument",
59// oneway: true
60// });
61 }
62 },
63
64 deserializedFromTemplate : {
65 value: function() {
66 this.eventManager.addEventListener( "appLoaded", this, false);
67 },
68 enumerable : false
69 },
70 ///// Active document gets automatically set when the 51 ///// Active document gets automatically set when the
71 ///// document controller changes it 52 ///// document controller changes it
72 _activeDocument : { 53 _currentDocument : {
73 value : null, 54 value : null,
74 enumerable : false 55 enumerable : false
75 }, 56 },
76 57
77 activeDocument : { 58 currentDocument : {
78 get : function() { 59 get : function() {
79 return this._activeDocument; 60 return this._currentDocument;
80 }, 61 },
81 set : function(document) { 62 set : function(document) {
82 ///// If the document is null set default stylesheets to null 63 ///// If the document is null set default stylesheets to null
83 64
84 if(!document || document.currentView === "code") { 65 if(!document || document.currentView === "code") {
85 this._activeDocument = null; 66 this._currentDocument = null;
86 this._stageStylesheet = null; 67 this._stageStylesheet = null;
87 this.defaultStylesheet = null; 68 this.defaultStylesheet = null;
88 this.userStyleSheets = []; 69 this.userStyleSheets = [];
@@ -91,7 +72,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
91 } 72 }
92 73
93 ///// setting document via binding 74 ///// setting document via binding
94 this._activeDocument = document; 75 this._currentDocument = document;
95 76
96 ///// Stage stylesheet should always be found 77 ///// Stage stylesheet should always be found
97 this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID); 78 this._stageStylesheet = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
@@ -103,6 +84,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
103 return sheet !== this._stageStylesheet; 84 return sheet !== this._stageStylesheet;
104 }, this); 85 }, this);
105 86
87 this.initializeRootStyles();
88
106 NJevent('styleSheetsReady', this); 89 NJevent('styleSheetsReady', this);
107 }, 90 },
108 enumerable : false 91 enumerable : false
@@ -129,10 +112,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
129 return false; 112 return false;
130 } 113 }
131 //check that the document has a design view 114 //check that the document has a design view
132 else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){ 115 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 116 ///// Use the last stylesheet in the document as the default
134 117
135 var sheets = this._activeDocument.model.views.design.document.styleSheets, 118 var sheets = this._currentDocument.model.views.design.document.styleSheets,
136 lastIndex = sheets.length-1; 119 lastIndex = sheets.length-1;
137 120
138 ///// If the only sheet is the stage stylesheet, this will be true 121 ///// If the only sheet is the stage stylesheet, this will be true
@@ -148,7 +131,41 @@ var stylesController = exports.StylesController = Montage.create(Component, {
148 } 131 }
149 } 132 }
150 }, 133 },
151 134
135 initializeRootStyles: {
136 value: function() {
137 var styles = {},
138 needsRule = false,
139 rule;
140
141 if(this.getElementStyle(this.currentDocument.model.documentRoot, "width", false, false) == null) {
142 styles['width'] = '100%';
143 needsRule = true;
144 }
145 if(this.getElementStyle(this.currentDocument.model.documentRoot, "height", false, false) == null) {
146 styles['height'] = '100%';
147 needsRule = true;
148 }
149 if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform", false, false) == null) {
150 styles['-webkit-transform'] = 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)';
151 needsRule = true;
152 }
153 if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform-style", false, false) == null) {
154 styles['-webkit-transform-style'] = 'preserve-3d';
155 needsRule = true;
156 }
157 if(this.getElementStyle(this.currentDocument.model.documentRoot, "background-color", false, false) == null) {
158 styles['background-color'] = "transparent";
159 needsRule = true;
160 }
161
162 if(needsRule) {
163 rule = this.addRule('.ninja-body{}');
164 this.setStyles(rule, styles);
165 this.addClass(this.currentDocument.model.documentRoot, "ninja-body");
166 }
167 }
168 },
152 /* ----------------- Rule methods ----------------- */ 169 /* ----------------- Rule methods ----------------- */
153 170
154 ///// Add Rule 171 ///// Add Rule
@@ -538,7 +555,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
538 return true; 555 return true;
539 } 556 }
540 557
541 var doc = document || this._activeDocument; 558 var doc = document || this._currentDocument;
542 ///// TODO: somehow cache the number of elements affected 559 ///// TODO: somehow cache the number of elements affected
543 ///// by the rule, because querySelectorAll() is expensive 560 ///// by the rule, because querySelectorAll() is expensive
544 return !!(doc.querySelectorAll(rule.selectorText).length > 1); 561 return !!(doc.querySelectorAll(rule.selectorText).length > 1);
@@ -887,7 +904,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
887 904
888 getAnimationRuleWithName : { 905 getAnimationRuleWithName : {
889 value: function(name, document) { 906 value: function(name, document) {
890 var doc = document || this._activeDocument.model.views.design.document, 907 var doc = document || this._currentDocument.model.views.design.document,
891 animRules = this.getDocumentAnimationRules(doc), 908 animRules = this.getDocumentAnimationRules(doc),
892 rule, i; 909 rule, i;
893 910
@@ -909,7 +926,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
909 926
910 getDocumentAnimationRules : { 927 getDocumentAnimationRules : {
911 value: function(document) { 928 value: function(document) {
912 var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets, 929 var sheets = (document) ? document.styleSheets : this._currentDocument.model.views.design.document.styleSheets,
913 rules = []; 930 rules = [];
914 931
915 nj.toArray(sheets).forEach(function(sheet) { 932 nj.toArray(sheets).forEach(function(sheet) {
@@ -1229,9 +1246,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1229 } 1246 }
1230 } 1247 }
1231 if(isNaN(dist)) { 1248 if(isNaN(dist)) {
1232 dist = null; 1249 return "none";
1250 } else {
1251 return dist;
1233 } 1252 }
1234 return dist;
1235 } 1253 }
1236 }, 1254 },
1237 1255
@@ -1272,7 +1290,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1272 1290
1273 createStylesheet : { 1291 createStylesheet : {
1274 value: function(id, document) { 1292 value: function(id, document) {
1275 var doc = document || this._activeDocument.model.views.design.document, 1293 var doc = document || this._currentDocument.model.views.design.document,
1276 sheetElement, sheet; 1294 sheetElement, sheet;
1277 1295
1278 sheetElement = nj.make('style', { 1296 sheetElement = nj.make('style', {
@@ -1329,15 +1347,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1329 1347
1330 getSheetFromElement : { 1348 getSheetFromElement : {
1331 value : function(element, context) { 1349 value : function(element, context) {
1332 var doc = context || this._activeDocument.model.views.design.document, 1350 var doc = context || this._currentDocument.model.views.design.document,
1333 el = (typeof element === 'string') ? nj.$(element, doc) : element; 1351 el = (typeof element === 'string') ? nj.$(element, doc) : element;
1334 1352
1335 if(el && el.sheet) { 1353 if(el && el.sheet) {
1336 return el.sheet; 1354 return el.sheet;
1337 } 1355 }
1338
1339 return;
1340
1341 } 1356 }
1342 }, 1357 },
1343 1358
@@ -1363,7 +1378,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1363 ///// If the sheet doesn't already exist in the list of modified 1378 ///// If the sheet doesn't already exist in the list of modified
1364 ///// sheets, dispatch dirty event and add the sheet to the list