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.js93
1 files changed, 61 insertions, 32 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 534f77c7..217a536d 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) {
@@ -1272,7 +1304,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1272 1304
1273 createStylesheet : { 1305 createStylesheet : {
1274 value: function(id, document) { 1306 value: function(id, document) {
1275 var doc = document || this._activeDocument.model.views.design.document, 1307 var doc = document || this._currentDocument.model.views.design.document,
1276 sheetElement, sheet; 1308 sheetElement, sheet;
1277 1309
1278 sheetElement = nj.make('style', { 1310 sheetElement = nj.make('style', {
@@ -1329,15 +1361,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1329 1361
1330 getSheetFromElement : { 1362 getSheetFromElement : {
1331 value : function(element, context) { 1363 value : function(element, context) {
1332 var doc = context || this._activeDocument.model.views.design.document, 1364 var doc = context || this._currentDocument.model.views.design.document,
1333 el = (typeof element === 'string') ? nj.$(element, doc) : element; 1365 el = (typeof element === 'string') ? nj.$(element, doc) : element;
1334 1366
1335 if(el && el.sheet) { 1367 if(el && el.sheet) {
1336 return el.sheet; 1368 return el.sheet;
1337 } 1369 }
1338
1339 return;
1340
1341 } 1370 }
1342 }, 1371 },
1343 1372
@@ -1363,7 +1392,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1363 ///// If the sheet doesn't already exist in the list of modified 1392 ///// If the sheet doesn't already exist in the list of modified
1364 ///// sheets, dispatch dirty event and add the sheet to the list 1393 ///// sheets, dispatch dirty event and add the sheet to the list
1365 if(sheetSearch.length === 0) { 1394 if(sheetSearch.length === 0) {
1366 NJevent('styleSheetDirty', eventData); 1395 this.currentDocument.model.needsSave = true;
1367 this.dirtyStyleSheets.push({ 1396 this.dirtyStyleSheets.push({
1368 document : sheet.ownerNode.ownerDocument, 1397 document : sheet.ownerNode.ownerDocument,
1369 stylesheet : sheet 1398 stylesheet : sheet
@@ -1572,7 +1601,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1572 getStyleTest : function() { 1601 getStyleTest : function() {
1573 var properties = ['background-position', 'width', 'height']; 1602 var properties = ['background-position', 'width', 'height'];
1574 1603
1575 var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1'); 1604 var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1');
1576 1605
1577 properties.forEach(function(prop) { 1606 properties.forEach(function(prop) {
1578 console.log('Getting value for "' + prop + '": ' + stylesController.getElementStyle(el, prop, true)); 1607 console.log('Getting value for "' + prop + '": ' + stylesController.getElementStyle(el, prop, true));
@@ -1591,7 +1620,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {