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.js111
1 files changed, 61 insertions, 50 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 534f77c7..83722184 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,37 @@ 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
158 if(needsRule) {
159 rule = this.addRule('.ninja-body{}');
160 this.setStyles(rule, styles);
161 this.addClass(this.currentDocument.model.documentRoot, "ninja-body");
162 }
163 }
164 },
152 /* ----------------- Rule methods ----------------- */ 165 /* ----------------- Rule methods ----------------- */
153 166
154 ///// Add Rule 167 ///// Add Rule
@@ -538,7 +551,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
538 return true; 551 return true;
539 } 552 }
540 553
541 var doc = document || this._activeDocument; 554 var doc = document || this._currentDocument;
542 ///// TODO: somehow cache the number of elements affected 555 ///// TODO: somehow cache the number of elements affected
543 ///// by the rule, because querySelectorAll() is expensive 556 ///// by the rule, because querySelectorAll() is expensive
544 return !!(doc.querySelectorAll(rule.selectorText).length > 1); 557 return !!(doc.querySelectorAll(rule.selectorText).length > 1);
@@ -887,7 +900,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
887 900
888 getAnimationRuleWithName : { 901 getAnimationRuleWithName : {
889 value: function(name, document) { 902 value: function(name, document) {
890 var doc = document || this._activeDocument.model.views.design.document, 903 var doc = document || this._currentDocument.model.views.design.document,
891 animRules = this.getDocumentAnimationRules(doc), 904 animRules = this.getDocumentAnimationRules(doc),
892 rule, i; 905 rule, i;
893 906
@@ -909,7 +922,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
909 922
910 getDocumentAnimationRules : { 923 getDocumentAnimationRules : {
911 value: function(document) { 924 value: function(document) {
912 var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets, 925 var sheets = (document) ? document.styleSheets : this._currentDocument.model.views.design.document.styleSheets,
913 rules = []; 926 rules = [];
914 927
915 nj.toArray(sheets).forEach(function(sheet) { 928 nj.toArray(sheets).forEach(function(sheet) {
@@ -1229,9 +1242,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1229 } 1242 }
1230 } 1243 }
1231 if(isNaN(dist)) { 1244 if(isNaN(dist)) {
1232 dist = null; 1245 return "none";
1246 } else {
1247 return dist;
1233 } 1248 }
1234 return dist;
1235 } 1249 }
1236 }, 1250 },
1237 1251
@@ -1272,7 +1286,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1272 1286
1273 createStylesheet : { 1287 createStylesheet : {
1274 value: function(id, document) { 1288 value: function(id, document) {
1275 var doc = document || this._activeDocument.model.views.design.document, 1289 var doc = document || this._currentDocument.model.views.design.document,
1276 sheetElement, sheet; 1290 sheetElement, sheet;
1277 1291
1278 sheetElement = nj.make('style', { 1292 sheetElement = nj.make('style', {
@@ -1329,15 +1343,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1329 1343
1330 getSheetFromElement : { 1344 getSheetFromElement : {
1331 value : function(element, context) { 1345 value : function(element, context) {
1332 var doc = context || this._activeDocument.model.views.design.document, 1346 var doc = context || this._currentDocument.model.views.design.document,
1333 el = (typeof element === 'string') ? nj.$(element, doc) : element; 1347 el = (typeof element === 'string') ? nj.$(element, doc) : element;
1334 1348
1335 if(el && el.sheet) { 1349 if(el && el.sheet) {
1336 return el.sheet; 1350 return el.sheet;
1337 } 1351 }
1338
1339 return;
1340
1341 } 1352 }
1342 }, 1353 },
1343 1354
@@ -1363,7 +1374,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1363 ///// If the sheet doesn't already exist in the list of modified 1374 ///// If the sheet doesn't already exist in the list of modified
1364 ///// sheets, dispatch dirty event and add the sheet to the list 1375 ///// sheets, dispatch dirty event and add the sheet to the list
1365 if(sheetSearch.length === 0) { 1376 if(sheetSearch.length === 0) {
1366 NJevent('styleSheetDirty', eventData); 1377</