diff options
author | Eric Guzman | 2012-06-11 13:28:42 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-11 13:28:42 -0700 |
commit | 3a4727ffc350216a434a7c6977b6a23653b77780 (patch) | |
tree | c5dff306f8803c36a16163ba5df1e7f492e762b5 /js/controllers/styles-controller.js | |
parent | d6b46ba496c9c8974ae39bb476aea35bcd1ddaf1 (diff) | |
parent | 337efc667372326ae2f9984d89a47bb151016774 (diff) | |
download | ninja-3a4727ffc350216a434a7c6977b6a23653b77780.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-x | js/controllers/styles-controller.js | 115 |
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 | }, |