diff options
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-x | js/controllers/styles-controller.js | 134 |
1 files changed, 90 insertions, 44 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index cbc00676..534f77c7 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js | |||
@@ -53,11 +53,11 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
53 | ///// Bind app's activeDocument property to | 53 | ///// Bind app's activeDocument property to |
54 | ///// styles controller's _activeDocument property | 54 | ///// styles controller's _activeDocument property |
55 | 55 | ||
56 | Object.defineBinding(this, "activeDocument", { | 56 | // Object.defineBinding(this, "activeDocument", { |
57 | boundObject: this.application.ninja, | 57 | // boundObject: this.application.ninja, |
58 | boundObjectPropertyPath: "currentDocument", | 58 | // boundObjectPropertyPath: "currentDocument", |
59 | oneway: true | 59 | // oneway: true |
60 | }); | 60 | // }); |
61 | } | 61 | } |
62 | }, | 62 | }, |
63 | 63 | ||
@@ -79,10 +79,14 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
79 | return this._activeDocument; | 79 | return this._activeDocument; |
80 | }, | 80 | }, |
81 | set : function(document) { | 81 | set : function(document) { |
82 | |||
83 | ///// If the document is null set default stylesheets to null | 82 | ///// If the document is null set default stylesheets to null |
84 | 83 | ||
85 | if(!document) { | 84 | if(!document || document.currentView === "code") { |
85 | this._activeDocument = null; | ||
86 | this._stageStylesheet = null; | ||
87 | this.defaultStylesheet = null; | ||
88 | this.userStyleSheets = []; | ||
89 | this.clearDirtyStyleSheets(); | ||
86 | return false; | 90 | return false; |
87 | } | 91 | } |
88 | 92 | ||
@@ -95,7 +99,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
95 | // Setter will handle null case | 99 | // Setter will handle null case |
96 | this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); | 100 | this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID); |
97 | 101 | ||
98 | this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) { | 102 | this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) { |
99 | return sheet !== this._stageStylesheet; | 103 | return sheet !== this._stageStylesheet; |
100 | }, this); | 104 | }, this); |
101 | 105 | ||
@@ -120,22 +124,27 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
120 | if(sheet) { | 124 | if(sheet) { |
121 | this._defaultStylesheet = sheet; | 125 | this._defaultStylesheet = sheet; |
122 | } else { | 126 | } else { |
123 | 127 | if(sheet === null) { | |
124 | ///// Use the last stylesheet in the document as the default | 128 | this._defaultStylesheet = null; |
125 | 129 | return false; | |
126 | var sheets = this._activeDocument._document.styleSheets, | ||
127 | lastIndex = sheets.length-1; | ||
128 | |||
129 | ///// If the only sheet is the stage stylesheet, this will be true | ||
130 | ///// in which case, we want to create a stylesheet to hold the | ||
131 | ///// user's style rules | ||
132 | |||
133 | if(sheets[lastIndex] === this._stageStyleSheet) { | ||
134 | this._defaultStylesheet = this.createStylesheet('nj-default'); | ||
135 | } else { | ||
136 | this._defaultStylesheet = sheets[lastIndex]; | ||
137 | } | 130 | } |
131 | //check that the document has a design view | ||
132 | else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){ | ||
133 | ///// Use the last stylesheet in the document as the default | ||
134 | |||
135 | var sheets = this._activeDocument.model.views.design.document.styleSheets, | ||
136 | lastIndex = sheets.length-1; | ||
138 | 137 | ||
138 | ///// If the only sheet is the stage stylesheet, this will be true | ||
139 | ///// in which case, we want to create a stylesheet to hold the | ||
140 | ///// user's style rules | ||
141 | |||
142 | if(sheets[lastIndex] === this._stageStyleSheet) { | ||
143 | this._defaultStylesheet = this.createStylesheet('nj-default'); | ||
144 | } else { | ||
145 | this._defaultStylesheet = sheets[lastIndex]; | ||
146 | } | ||
147 | } | ||
139 | } | 148 | } |
140 | } | 149 | } |
141 | }, | 150 | }, |
@@ -166,13 +175,17 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
166 | 175 | ||
167 | addRule : { | 176 | addRule : { |
168 | value : function(selector, declaration, stylesheet, index) { | 177 | value : function(selector, declaration, stylesheet, index) { |
169 | //console.log("Add rule"); | 178 | stylesheet = stylesheet || this._defaultStylesheet; |
179 | |||
180 | if(stylesheet === null) { | ||
181 | stylesheet = this.defaultStylesheet = this.createStylesheet(); | ||
182 | } | ||
183 | |||
170 | var rulesLength = this._defaultStylesheet.rules.length, | 184 | var rulesLength = this._defaultStylesheet.rules.length, |
171 | argType = (typeof declaration), | 185 | argType = (typeof declaration), |
172 | ruleText = selector, | 186 | ruleText = selector, |
173 | stylesheet = stylesheet || this._defaultStylesheet, | 187 | rule; |
174 | property, rule; | 188 | |
175 | |||
176 | index = index || (argType === 'number') ? declaration : rulesLength; | 189 | index = index || (argType === 'number') ? declaration : rulesLength; |
177 | 190 | ||
178 | if(argType === 'string') { | 191 | if(argType === 'string') { |
@@ -814,7 +827,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
814 | ///// method to apply/test the new value | 827 | ///// method to apply/test the new value |
815 | dec.setProperty(property, value, priority); | 828 | dec.setProperty(property, value, priority); |
816 | 829 | ||
817 | if(rule.parentStyleSheet) { | 830 | if(rule.type !== 'inline' && rule.parentStyleSheet) { |
818 | this.styleSheetModified(rule.parentStyleSheet); | 831 | this.styleSheetModified(rule.parentStyleSheet); |
819 | } | 832 | } |
820 | 833 | ||
@@ -874,7 +887,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
874 | 887 | ||
875 | getAnimationRuleWithName : { | 888 | getAnimationRuleWithName : { |
876 | value: function(name, document) { | 889 | value: function(name, document) { |
877 | var doc = document || this._activeDocument._document, | 890 | var doc = document || this._activeDocument.model.views.design.document, |
878 | animRules = this.getDocumentAnimationRules(doc), | 891 | animRules = this.getDocumentAnimationRules(doc), |
879 | rule, i; | 892 | rule, i; |
880 | 893 | ||
@@ -896,7 +909,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
896 | 909 | ||
897 | getDocumentAnimationRules : { | 910 | getDocumentAnimationRules : { |
898 | value: function(document) { | 911 | value: function(document) { |
899 | var sheets = (document) ? document.styleSheets : this._activeDocument._document.styleSheets, | 912 | var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets, |
900 | rules = []; | 913 | rules = []; |
901 | 914 | ||
902 | nj.toArray(sheets).forEach(function(sheet) { | 915 | nj.toArray(sheets).forEach(function(sheet) { |
@@ -1159,6 +1172,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1159 | 1172 | ||
1160 | getMatrixFromElement : { | 1173 | getMatrixFromElement : { |
1161 | value: function(element, isStage) { | 1174 | value: function(element, isStage) { |
1175 | isStage = false; | ||
1162 | var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage), | 1176 | var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage), |
1163 | mat; | 1177 | mat; |
1164 | 1178 | ||
@@ -1192,6 +1206,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1192 | 1206 | ||
1193 | getPerspectiveDistFromElement : { | 1207 | getPerspectiveDistFromElement : { |
1194 | value: function(element, isStage) { | 1208 | value: function(element, isStage) { |
1209 | isStage = false; | ||
1195 | var xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage), | 1210 | var xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage), |
1196 | dist; | 1211 | dist; |
1197 | 1212 | ||
@@ -1257,7 +1272,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1257 | 1272 | ||
1258 | createStylesheet : { | 1273 | createStylesheet : { |
1259 | value: function(id, document) { | 1274 | value: function(id, document) { |
1260 | var doc = document || this._activeDocument._document, | 1275 | var doc = document || this._activeDocument.model.views.design.document, |
1261 | sheetElement, sheet; | 1276 | sheetElement, sheet; |
1262 | 1277 | ||
1263 | sheetElement = nj.make('style', { | 1278 | sheetElement = nj.make('style', { |
@@ -1280,6 +1295,33 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1280 | return sheet; | 1295 | return sheet; |
1281 | } | 1296 | } |
1282 | }, | 1297 | }, |
1298 | |||
1299 | ///// Remove Style sheet | ||
1300 | ///// Removes style sheet from document | ||
1301 | |||
1302 | removeStyleSheet : { | ||
1303 | value: function(sheet) { | ||
1304 | var sheetEl = sheet.ownerNode, sheetCount; | ||
1305 | |||
1306 | if(sheetEl) { | ||
1307 | sheetEl.disabled = true; | ||
1308 | this.userStyleSheets.splice(this.userStyleSheets.indexOf(sheet), 1); | ||
1309 | |||
1310 | ///// Check to see if we're removing the default style sheet | ||
1311 | if(sheet === this._defaultStylesheet) { | ||
1312 | sheetCount = this.userStyleSheets.length; | ||
1313 | this.defaultStylesheet = (sheetCount) ? this.userStyleSheets[sheetCount-1] : null; | ||
1314 | } | ||
1315 | |||
1316 | ///// Mark for removal for i/o | ||
1317 | sheetEl.setAttribute('data-ninja-remove', 'true'); | ||
1318 | |||
1319 | NJevent('removeStyleSheet', sheet); | ||
1320 | } | ||
1321 | |||
1322 | |||
1323 | } | ||
1324 | }, | ||
1283 | 1325 | ||
1284 | ///// Gets the stylesheet object associated with passed-in | 1326 | ///// Gets the stylesheet object associated with passed-in |
1285 | ///// element or element id, with option context (document) | 1327 | ///// element or element id, with option context (document) |
@@ -1287,7 +1329,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
1287 | 1329 | ||
1288 | getSheetFromElement : { | 1330 | getSheetFromElement : { |
1289 | value : function(element, context) { | 1331 | value : function(element, context) { |