1 | var shallowClone = require('../clone').shallow;
|
---|
2 |
|
---|
3 | var Token = require('../../tokenizer/token');
|
---|
4 | var Marker = require('../../tokenizer/marker');
|
---|
5 |
|
---|
6 | function isInheritOnly(values) {
|
---|
7 | for (var i = 0, l = values.length; i < l; i++) {
|
---|
8 | var value = values[i][1];
|
---|
9 |
|
---|
10 | if (value != 'inherit' && value != Marker.COMMA && value != Marker.FORWARD_SLASH) { return false; }
|
---|
11 | }
|
---|
12 |
|
---|
13 | return true;
|
---|
14 | }
|
---|
15 |
|
---|
16 | function background(property, configuration, lastInMultiplex) {
|
---|
17 | var components = property.components;
|
---|
18 | var restored = [];
|
---|
19 | var needsOne, needsBoth;
|
---|
20 |
|
---|
21 | function restoreValue(component) {
|
---|
22 | Array.prototype.unshift.apply(restored, component.value);
|
---|
23 | }
|
---|
24 |
|
---|
25 | function isDefaultValue(component) {
|
---|
26 | var descriptor = configuration[component.name];
|
---|
27 |
|
---|
28 | if (descriptor.doubleValues && descriptor.defaultValue.length == 1) {
|
---|
29 | return component.value[0][1] == descriptor.defaultValue[0]
|
---|
30 | && (component.value[1]
|
---|
31 | ? component.value[1][1] == descriptor.defaultValue[0]
|
---|
32 | : true);
|
---|
33 | } if (descriptor.doubleValues && descriptor.defaultValue.length != 1) {
|
---|
34 | return component.value[0][1] == descriptor.defaultValue[0]
|
---|
35 | && ((component.value[1] ? component.value[1][1] : component.value[0][1])
|
---|
36 | == descriptor.defaultValue[1]);
|
---|
37 | }
|
---|
38 | return component.value[0][1] == descriptor.defaultValue;
|
---|
39 | }
|
---|
40 |
|
---|
41 | for (var i = components.length - 1; i >= 0; i--) {
|
---|
42 | var component = components[i];
|
---|
43 | var isDefault = isDefaultValue(component);
|
---|
44 |
|
---|
45 | if (component.name == 'background-clip') {
|
---|
46 | var originComponent = components[i - 1];
|
---|
47 | var isOriginDefault = isDefaultValue(originComponent);
|
---|
48 |
|
---|
49 | needsOne = component.value[0][1] == originComponent.value[0][1];
|
---|
50 |
|
---|
51 | needsBoth = !needsOne && (
|
---|
52 | (isOriginDefault && !isDefault)
|
---|
53 | || (!isOriginDefault && !isDefault)
|
---|
54 | || (!isOriginDefault && isDefault && component.value[0][1] != originComponent.value[0][1]));
|
---|
55 |
|
---|
56 | if (needsOne) {
|
---|
57 | restoreValue(originComponent);
|
---|
58 | } else if (needsBoth) {
|
---|
59 | restoreValue(component);
|
---|
60 | restoreValue(originComponent);
|
---|
61 | }
|
---|
62 |
|
---|
63 | i--;
|
---|
64 | } else if (component.name == 'background-size') {
|
---|
65 | var positionComponent = components[i - 1];
|
---|
66 | var isPositionDefault = isDefaultValue(positionComponent);
|
---|
67 |
|
---|
68 | needsOne = !isPositionDefault && isDefault;
|
---|
69 |
|
---|
70 | needsBoth = !needsOne
|
---|
71 | && (isPositionDefault && !isDefault || !isPositionDefault && !isDefault);
|
---|
72 |
|
---|
73 | if (needsOne) {
|
---|
74 | restoreValue(positionComponent);
|
---|
75 | } else if (needsBoth) {
|
---|
76 | restoreValue(component);
|
---|
77 | restored.unshift([Token.PROPERTY_VALUE, Marker.FORWARD_SLASH]);
|
---|
78 | restoreValue(positionComponent);
|
---|
79 | } else if (positionComponent.value.length == 1) {
|
---|
80 | restoreValue(positionComponent);
|
---|
81 | }
|
---|
82 |
|
---|
83 | i--;
|
---|
84 | } else {
|
---|
85 | if (isDefault || configuration[component.name].multiplexLastOnly && !lastInMultiplex) { continue; }
|
---|
86 |
|
---|
87 | restoreValue(component);
|
---|
88 | }
|
---|
89 | }
|
---|
90 |
|
---|
91 | if (restored.length === 0 && property.value.length == 1 && property.value[0][1] == '0') { restored.push(property.value[0]); }
|
---|
92 |
|
---|
93 | if (restored.length === 0) { restored.push([Token.PROPERTY_VALUE, configuration[property.name].defaultValue]); }
|
---|
94 |
|
---|
95 | if (isInheritOnly(restored)) { return [restored[0]]; }
|
---|
96 |
|
---|
97 | return restored;
|
---|
98 | }
|
---|
99 |
|
---|
100 | function borderRadius(property) {
|
---|
101 | if (property.multiplex) {
|
---|
102 | var horizontal = shallowClone(property);
|
---|
103 | var vertical = shallowClone(property);
|
---|
104 |
|
---|
105 | for (var i = 0; i < 4; i++) {
|
---|
106 | var component = property.components[i];
|
---|
107 |
|
---|
108 | var horizontalComponent = shallowClone(property);
|
---|
109 | horizontalComponent.value = [component.value[0]];
|
---|
110 | horizontal.components.push(horizontalComponent);
|
---|
111 |
|
---|
112 | var verticalComponent = shallowClone(property);
|
---|
113 | // FIXME: only shorthand compactor (see breakup#borderRadius) knows that border radius
|
---|
114 | // longhands have two values, whereas tokenizer does not care about populating 2nd value
|
---|
115 | // if it's missing, hence this fallback
|
---|
116 | verticalComponent.value = [component.value[1] || component.value[0]];
|
---|
117 | vertical.components.push(verticalComponent);
|
---|
118 | }
|
---|
119 |
|
---|
120 | var horizontalValues = fourValues(horizontal);
|
---|
121 | var verticalValues = fourValues(vertical);
|
---|
122 |
|
---|
123 | if (horizontalValues.length == verticalValues.length
|
---|
124 | && horizontalValues[0][1] == verticalValues[0][1]
|
---|
125 | && (horizontalValues.length > 1 ? horizontalValues[1][1] == verticalValues[1][1] : true)
|
---|
126 | && (horizontalValues.length > 2 ? horizontalValues[2][1] == verticalValues[2][1] : true)
|
---|
127 | && (horizontalValues.length > 3 ? horizontalValues[3][1] == verticalValues[3][1] : true)) {
|
---|
128 | return horizontalValues;
|
---|
129 | }
|
---|
130 | return horizontalValues.concat([[Token.PROPERTY_VALUE, Marker.FORWARD_SLASH]]).concat(verticalValues);
|
---|
131 | }
|
---|
132 | return fourValues(property);
|
---|
133 | }
|
---|
134 |
|
---|
135 | function font(property, configuration) {
|
---|
136 | var components = property.components;
|
---|
137 | var restored = [];
|
---|
138 | var component;
|
---|
139 | var componentIndex = 0;
|
---|
140 | var fontFamilyIndex = 0;
|
---|
141 |
|
---|
142 | if (property.value[0][1].indexOf(Marker.INTERNAL) === 0) {
|
---|
143 | property.value[0][1] = property.value[0][1].substring(Marker.INTERNAL.length);
|
---|
144 | return property.value;
|
---|
145 | }
|
---|
146 |
|
---|
147 | // first four components are optional
|
---|
148 | while (componentIndex < 4) {
|
---|
149 | component = components[componentIndex];
|
---|
150 |
|
---|
151 | if (component.value[0][1] != configuration[component.name].defaultValue) {
|
---|
152 | Array.prototype.push.apply(restored, component.value);
|
---|
153 | }
|
---|
154 |
|
---|
155 | componentIndex++;
|
---|
156 | }
|
---|
157 |
|
---|
158 | // then comes font-size
|
---|
159 | Array.prototype.push.apply(restored, components[componentIndex].value);
|
---|
160 | componentIndex++;
|
---|
161 |
|
---|
162 | // then may come line-height
|
---|
163 | if (components[componentIndex].value[0][1] != configuration[components[componentIndex].name].defaultValue) {
|
---|
164 | Array.prototype.push.apply(restored, [[Token.PROPERTY_VALUE, Marker.FORWARD_SLASH]]);
|
---|
165 | Array.prototype.push.apply(restored, components[componentIndex].value);
|
---|
166 | }
|
---|
167 |
|
---|
168 | componentIndex++;
|
---|
169 |
|
---|
170 | // then comes font-family
|
---|
171 | while (components[componentIndex].value[fontFamilyIndex]) {
|
---|
172 | restored.push(components[componentIndex].value[fontFamilyIndex]);
|
---|
173 |
|
---|
174 | if (components[componentIndex].value[fontFamilyIndex + 1]) {
|
---|
175 | restored.push([Token.PROPERTY_VALUE, Marker.COMMA]);
|
---|
176 | }
|
---|
177 |
|
---|
178 | fontFamilyIndex++;
|
---|
179 | }
|
---|
180 |
|
---|
181 | if (isInheritOnly(restored)) {
|
---|
182 | return [restored[0]];
|
---|
183 | }
|
---|
184 |
|
---|
185 | return restored;
|
---|
186 | }
|
---|
187 |
|
---|
188 | function fourValues(property) {
|
---|
189 | var components = property.components;
|
---|
190 | var value1 = components[0].value[0];
|
---|
191 | var value2 = components[1].value[0];
|
---|
192 | var value3 = components[2].value[0];
|
---|
193 | var value4 = components[3].value[0];
|
---|
194 |
|
---|
195 | if (value1[1] == value2[1] && value1[1] == value3[1] && value1[1] == value4[1]) {
|
---|
196 | return [value1];
|
---|
197 | } if (value1[1] == value3[1] && value2[1] == value4[1]) {
|
---|
198 | return [value1, value2];
|
---|
199 | } if (value2[1] == value4[1]) {
|
---|
200 | return [value1, value2, value3];
|
---|
201 | }
|
---|
202 | return [value1, value2, value3, value4];
|
---|
203 | }
|
---|
204 |
|
---|
205 | function multiplex(restoreWith) {
|
---|
206 | return function(property, configuration) {
|
---|
207 | if (!property.multiplex) { return restoreWith(property, configuration, true); }
|
---|
208 |
|
---|
209 | var multiplexSize = 0;
|
---|
210 | var restored = [];
|
---|
211 | var componentMultiplexSoFar = {};
|
---|
212 | var i, l;
|
---|
213 |
|
---|
214 | // At this point we don't know what's the multiplex size, e.g. how many background layers are there
|
---|
215 | for (i = 0, l = property.components[0].value.length; i < l; i++) {
|
---|
216 | if (property.components[0].value[i][1] == Marker.COMMA) { multiplexSize++; }
|
---|
217 | }
|
---|
218 |
|
---|
219 | for (i = 0; i <= multiplexSize; i++) {
|
---|
220 | var _property = shallowClone(property);
|
---|
221 |
|
---|
222 | // We split multiplex into parts and restore them one by one
|
---|
223 | for (var j = 0, m = property.components.length; j < m; j++) {
|
---|
224 | var componentToClone = property.components[j];
|
---|
225 | var _component = shallowClone(componentToClone);
|
---|
226 | _property.components.push(_component);
|
---|
227 |
|
---|
228 | // The trick is some properties has more than one value, so we iterate over values looking for
|
---|
229 | // a multiplex separator - a comma
|
---|
230 | for (var k = componentMultiplexSoFar[_component.name] || 0, n = componentToClone.value.length; k < n; k++) {
|
---|
231 | if (componentToClone.value[k][1] == Marker.COMMA) {
|
---|
232 | componentMultiplexSoFar[_component.name] = k + 1;
|
---|
233 | break;
|
---|
234 | }
|
---|
235 |
|
---|
236 | _component.value.push(componentToClone.value[k]);
|
---|
237 | }
|
---|
238 | }
|
---|
239 |
|
---|
240 | // No we can restore shorthand value
|
---|
241 | var lastInMultiplex = i == multiplexSize;
|
---|
242 | var _restored = restoreWith(_property, configuration, lastInMultiplex);
|
---|
243 | Array.prototype.push.apply(restored, _restored);
|
---|
244 |
|
---|
245 | if (i < multiplexSize) { restored.push([Token.PROPERTY_VALUE, Marker.COMMA]); }
|
---|
246 | }
|
---|
247 |
|
---|
248 | return restored;
|
---|
249 | };
|
---|
250 | }
|
---|
251 |
|
---|
252 | function withoutDefaults(property, configuration) {
|
---|
253 | var components = property.components;
|
---|
254 | var restored = [];
|
---|
255 |
|
---|
256 | for (var i = components.length - 1; i >= 0; i--) {
|
---|
257 | var component = components[i];
|
---|
258 | var descriptor = configuration[component.name];
|
---|
259 |
|
---|
260 | if (component.value[0][1] != descriptor.defaultValue || ('keepUnlessDefault' in descriptor) && !isDefault(components, configuration, descriptor.keepUnlessDefault)) {
|
---|
261 | restored.unshift(component.value[0]);
|
---|
262 | }
|
---|
263 | }
|
---|
264 |
|
---|
265 | if (restored.length === 0) { restored.push([Token.PROPERTY_VALUE, configuration[property.name].defaultValue]); }
|
---|
266 |
|
---|
267 | if (isInheritOnly(restored)) { return [restored[0]]; }
|
---|
268 |
|
---|
269 | return restored;
|
---|
270 | }
|
---|
271 |
|
---|
272 | function isDefault(components, configuration, propertyName) {
|
---|
273 | var component;
|
---|
274 | var i, l;
|
---|
275 |
|
---|
276 | for (i = 0, l = components.length; i < l; i++) {
|
---|
277 | component = components[i];
|
---|
278 |
|
---|
279 | if (component.name == propertyName && component.value[0][1] == configuration[propertyName].defaultValue) {
|
---|
280 | return true;
|
---|
281 | }
|
---|
282 | }
|
---|
283 |
|
---|
284 | return false;
|
---|
285 | }
|
---|
286 |
|
---|
287 | module.exports = {
|
---|
288 | background: background,
|
---|
289 | borderRadius: borderRadius,
|
---|
290 | font: font,
|
---|
291 | fourValues: fourValues,
|
---|
292 | multiplex: multiplex,
|
---|
293 | withoutDefaults: withoutDefaults
|
---|
294 | };
|
---|