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.js134
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) {
1290 var doc = context || this._activeDocument._document, 1332