aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-declaration.reel/style-declaration.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-declaration.reel/style-declaration.js')
-rw-r--r--js/panels/css-panel/style-declaration.reel/style-declaration.js326
1 files changed, 326 insertions, 0 deletions
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
new file mode 100644
index 00000000..57cbdb63
--- /dev/null
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -0,0 +1,326 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
9 ShorthandProps = require("js/panels/CSSPanel/css-shorthand-map");
10
11exports.StyleDeclaration = Montage.create(Component, {
12 cssText : { value: null },
13 focusDelegate : { value: null },
14 needsSort : { value: null },
15
16 includeEmptyStyle : {
17 value: true,
18 distinct: true
19 },
20 styles : {
21 value: [],
22 distinct: true
23 },
24
25 _styleSortFunction : {
26 value: function(styleA, styleB) {
27 ///// If the style is an empty style (with Add button)
28 ///// push to end of declaration
29 if(styleA.isEmpty) {
30 return 1;
31 } else if (styleB.isEmpty) {
32 return -1;
33 }
34
35 return 0;
36 ///// Alphabetic sort based on property name
37// if (styleA.name < styleB.name) {
38// return -1;
39// } else if (styleA.name > styleB.name) {
40// return 1;
41// } else {
42// return 0;
43// }
44 }
45 },
46 _styleFilterFunction: {
47 value: function(style, styleArray) {
48 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[style.name];
49
50 ///// No shorthands, return true to include style
51 if(!shorthands) { return true; }
52
53 var subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]],
54 stylesArray = styleArray,
55 hasAll;
56
57 debugger;
58 hasAll = subProps.every(function(subProp) {
59 debugger;
60 return this.declaration[subProp];
61 }, this);
62
63 if(hasAll) {
64 return false;
65 }
66 }
67 },
68
69 _declaration: {
70 value: null
71 },
72 declaration: {
73 get: function() {
74 return this._declaration;
75 },
76 set: function(dec) {
77 var stylesArray;
78
79 if(this._declaration) {
80 this.styles = null;
81 this.styles = [];
82 }
83
84 ///// Take snapshot of declaration
85 this.cssText = dec.cssText;
86
87 stylesArray = this.filterShorthands(Array.prototype.slice.call(dec));
88 stylesArray.forEach(function(prop, index) {
89 this.styles.push({
90 name: prop,
91 value: dec.getPropertyValue(prop),
92 isEmpty: false
93 });
94 }, this);
95
96 if(this.includeEmptyStyle) {
97 this.styles.push({
98 name : "property",
99 value : "value",
100 isEmpty : true
101 });
102 }
103
104 this._declaration = dec;
105 this.needsDraw = this.needsSort = true;
106 }
107 },
108
109 filterShorthands : {
110 value: function(styles) {
111 var shorthandsToAdd = [],
112 subProps, hasAll;
113
114 var stylesCopy = styles.map(function(style) {
115 return style;
116 });
117
118 stylesCopy.forEach(function(property, index) {
119 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[property];
120 if(shorthands) {
121 subProps = ShorthandProps.CSS_SHORTHAND_TO_SUBPROP_MAP[shorthands[0]];
122
123 hasAll = subProps.every(function(subProp) {
124 return styles.indexOf(subProp) !== -1;
125 });
126
127 if(hasAll) {
128 for(var i = subProps.length-1; i>=0; i--) {
129 styles.splice(styles.indexOf(subProps[i]), 1);
130 }
131 shorthandsToAdd.push(shorthands[0]);
132 }
133
134 return true;
135 }
136 }, this);
137
138 return styles.concat(shorthandsToAdd);
139 }
140 },
141
142 _getStyleToIndexMap : {
143 value: function() {
144 var map = {};
145
146 for(var i = 0; i<this.styles.length; i++) {
147 map[this.styles[i].name] = i;
148 }
149
150 return map;
151 }
152 },
153
154 update : {
155 value: function() {
156 if(this.declaration.cssText !== this.cssText) {
157 var usedIndices = [],
158 styleToIndexMap = this._getStyleToIndexMap();
159
160 Array.prototype.slice.call(this.declaration).forEach(function(prop, index) {
161 var styleObjectIndex = styleToIndexMap[prop];
162
163 ///// Style component exists for property
164 ///// Update its value
165 if(styleObjectIndex !== undefined) {
166 this.styles[styleObjectIndex].value = this.declaration.getPropertyValue(prop);
167 usedIndices.push(styleObjectIndex);
168 } else {
169 //// styles doesn't exist, does shorthand?
170 var shorthands = ShorthandProps.CSS_SHORTHAND_MAP[prop],
171 shorthandUpdated = false;
172
173 if(shorthands) {
174 shorthands.forEach(function(shorthand) {
175 var shorthandIndex = styleToIndexMap[shorthand];
176 if(shorthandIndex) {
177 //// if shorthand exists in list of rendered styles
178 //// update it
179 this.styles[shorthandIndex].value = this.declaration.getPropertyValue(shorthand);
180 usedIndices.push(shorthandIndex);
181 shorthandUpdated = true;
182 }
183 }, this);
184 }
185
186 if(!shorthandUpdated) {
187 //// push to usedIndices so we don't remove styles we just added
188 usedIndices.push(this.styles.length);
189 this.addStyle(prop, this.declaration.getPropertyValue(prop));
190 }
191 }
192 }, this);
193
194 for(var i = this.styles.length-1; i>=0; i--) {
195 if(usedIndices.indexOf(i) === -1) {
196 if(!this.styles[i].isEmpty) {
197 ///// index not used, remove style
198 this.removeStyle(this.styles[i]);
199 }
200 }
201 }
202
203 ///// Keep copy of cssText to know when we need to
204 ///// update the view
205 this.cssText = this.declaration.cssText;
206 this.needsDraw = this.needsSort = true;
207 }
208 }</