diff options
author | Jonathan Duran | 2012-05-31 08:54:48 -0700 |
---|---|---|
committer | Jonathan Duran | 2012-05-31 08:54:48 -0700 |
commit | f297093b5bfa62c9832829751a12f0e556bb5cc0 (patch) | |
tree | 6e04cdf142cb1b36e2197970c9dc2141017a2be7 /js/controllers/styles-controller.js | |
parent | 9253e2ce98d748edd8c3929f113a597923960387 (diff) | |
parent | d49c909cff7f0c5e5d0b127ad84a2fefc6677dc6 (diff) | |
download | ninja-f297093b5bfa62c9832829751a12f0e556bb5cc0.tar.gz |
Merge branch 'refs/heads/NINJAmaster' into TimelineUber
Conflicts:
js/panels/Timeline/Layer.reel/Layer.js
js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
js/panels/properties.reel/properties.js
Signed-off-by: Jonathan Duran <jduran@motorola.com>
Diffstat (limited to 'js/controllers/styles-controller.js')
-rwxr-xr-x | js/controllers/styles-controller.js | 196 |
1 files changed, 139 insertions, 57 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 2ff3e235..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 | ||
@@ -94,11 +98,18 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
94 | // Returns null if sheet not found (as in non-ninja projects) | 98 | // Returns null if sheet not found (as in non-ninja projects) |
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 | //debugger; | 102 | this.userStyleSheets = nj.toArray(document.model.views.design.document.styleSheets).filter(function(sheet) { |
103 | return sheet !== this._stageStylesheet; | ||
104 | }, this); | ||
105 | |||
106 | NJevent('styleSheetsReady', this); | ||
99 | }, | 107 | }, |
100 | enumerable : false | 108 | enumerable : false |
101 | }, | 109 | }, |
110 | userStyleSheets : { | ||
111 | value : null | ||
112 | }, | ||
102 | _stageStylesheet : { | 113 | _stageStylesheet : { |
103 | value : null | 114 | value : null |
104 | }, | 115 | }, |
@@ -113,22 +124,27 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
113 | if(sheet) { | 124 | if(sheet) { |
114 | this._defaultStylesheet = sheet; | 125 | this._defaultStylesheet = sheet; |
115 | } else { | 126 | } else { |
116 | 127 | if(sheet === null) { | |
117 | ///// Use the last stylesheet in the document as the default | 128 | this._defaultStylesheet = null; |
118 | 129 | return false; | |
119 | var sheets = this._activeDocument._document.styleSheets, | ||
120 | lastIndex = sheets.length-1; | ||
121 | |||
122 | ///// If the only sheet is the stage stylesheet, this will be true | ||
123 | ///// in which case, we want to create a stylesheet to hold the | ||
124 | ///// user's style rules | ||
125 | |||
126 | if(sheets[lastIndex] === this._stageStyleSheet) { | ||
127 | this._defaultStylesheet = this.createStylesheet('nj-default'); | ||
128 | } else { | ||
129 | this._defaultStylesheet = sheets[lastIndex]; | ||
130 | } | 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 | ||
131 | 134 | ||
135 | var sheets = this._activeDocument.model.views.design.document.styleSheets, | ||
136 | lastIndex = sheets.length-1; | ||
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 | } | ||
132 | } | 148 | } |
133 | } | 149 | } |
134 | }, | 150 | }, |
@@ -159,13 +175,17 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
159 | 175 | ||
160 | addRule : { | 176 | addRule : { |
161 | value : function(selector, declaration, stylesheet, index) { | 177 | value : function(selector, declaration, stylesheet, index) { |
162 | //console.log("Add rule"); | 178 | stylesheet = stylesheet || this._defaultStylesheet; |
179 | |||
180 | if(stylesheet === null) { | ||
181 | stylesheet = this.defaultStylesheet = this.createStylesheet(); | ||
182 | } | ||
183 | |||
163 | var rulesLength = this._defaultStylesheet.rules.length, | 184 | var rulesLength = this._defaultStylesheet.rules.length, |
164 | argType = (typeof declaration), | 185 | argType = (typeof declaration), |
165 | ruleText = selector, | 186 | ruleText = selector, |
166 | stylesheet = stylesheet || this._defaultStylesheet, | 187 | rule; |
167 | property, rule; | 188 | |
168 | |||
169 | index = index || (argType === 'number') ? declaration : rulesLength; | 189 | index = index || (argType === 'number') ? declaration : rulesLength; |
170 | 190 | ||
171 | if(argType === 'string') { | 191 | if(argType === 'string') { |
@@ -183,6 +203,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
183 | ///// attach specificity to rule object | 203 | ///// attach specificity to rule object |
184 | ///// if rule is css keyframes, return rule and don't attach specificity | 204 | ///// if rule is css keyframes, return rule and don't attach specificity |
185 | if (rule instanceof WebKitCSSKeyframesRule) { | 205 | if (rule instanceof WebKitCSSKeyframesRule) { |
206 | |||
186 | return rule; | 207 | return rule; |
187 | } | 208 | } |
188 | rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText); | 209 | rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText); |
@@ -209,10 +230,12 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
209 | } | 230 | } |
210 | 231 | ||
211 | var selectorToOverride = getSelector.bind(this)(element, ruleToOverride), | 232 | var selectorToOverride = getSelector.bind(this)(element, ruleToOverride), |
212 | overrideData, rule; | 233 | overrideData, rule, isRuleLocked; |
234 | |||
235 | isRuleLocked = this.isSheetLocked(ruleToOverride.parentStyleSheet); | ||
213 | 236 | ||
214 | ///// Get the overriding selector and className | 237 | ///// Get the overriding selector and className |
215 | overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName); | 238 | overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName, isRuleLocked); |
216 | 239 | ||
217 | ///// Create new rule with selector and insert it after the rule we're overriding | 240 | ///// Create new rule with selector and insert it after the rule we're overriding |
218 | rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); | 241 | rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1); |
@@ -226,7 +249,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
226 | }, | 249 | }, |
227 | 250 | ||
228 | createOverrideSelector : { | 251 | createOverrideSelector : { |
229 | value: function(selectorToOverride, classPrefix, className) { | 252 | value: function(selectorToOverride, classPrefix, increaseSpecificity, className) { |
230 | var tokens = selectorToOverride.split(/\s/), | 253 | var tokens = selectorToOverride.split(/\s/), |
231 | newClass = className || this.generateClassName(classPrefix, true), | 254 | newClass = className || this.generateClassName(classPrefix, true), |
232 | lastToken, pseudoSplit, base, pseudo, newToken, newSelector; | 255 | lastToken, pseudoSplit, base, pseudo, newToken, newSelector; |
@@ -247,10 +270,19 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
247 | if(base.indexOf('#') !== -1) { | 270 | if(base.indexOf('#') !== -1) { |
248 | newToken = base + '.' + newClass + pseudo; | 271 | newToken = base + '.' + newClass + pseudo; |
249 | } else { | 272 | } else { |
250 | ///// Replace last class or attribute selector | 273 | if(increaseSpecificity) { |
251 | ///// Get everything right before the last class or attribute selector | 274 | ///// Increases specificity by one class selector |
252 | ///// to support compound selector values: (i.e. .firstClass.secondClass) | 275 | ///// We'll do a direct append to the base class |
253 | newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('['))); | 276 | ///// if we want to increase the specificity |
277 | newToken = base; | ||
278 | } else { | ||
279 | ///// Maintains original specificity | ||
280 | ///// Replace last class or attribute selector | ||
281 | ///// Get everything right before the last class or attribute selector | ||
282 | ///// to support compound selector values: (i.e. .firstClass.secondClass) | ||
283 | newToken = base.substring(0, Math.max(base.lastIndexOf('.'), base.lastIndexOf('['))); | ||
284 | } | ||
285 | |||
254 | ///// Append the generated class | 286 | ///// Append the generated class |
255 | newToken += '.' + newClass + pseudo; | 287 | newToken += '.' + newClass + pseudo; |
256 | } | 288 | } |
@@ -795,7 +827,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
795 | ///// method to apply/test the new value | 827 | ///// method to apply/test the new value |
796 | dec.setProperty(property, value, priority); | 828 | dec.setProperty(property, value, priority); |
797 | 829 | ||
798 | if(rule.parentStyleSheet) { | 830 | if(rule.type !== 'inline' && rule.parentStyleSheet) { |
799 | this.styleSheetModified(rule.parentStyleSheet); | 831 | this.styleSheetModified(rule.parentStyleSheet); |
800 | } | 832 | } |
801 | 833 | ||
@@ -855,7 +887,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { | |||
855 | 887 | ||
856 | getAnimationRuleWithName : { | 888 | getAnimationRuleWithName : { |
857 | value: function(name, document) { | 889 | value: function(name, document) { |
858 | var doc = document || this._activeDocument._document, | 890 | var doc = document || this._activeDocument.model.views.design.document, |
859 | animRules = this.getDocumentAnimationRules(doc), |