|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
/* |
|
4
|
|
|
|
|
5
|
|
|
CSS3Maximizer : v0.1 : mudcu.be |
|
6
|
|
|
------------------------------------ |
|
7
|
|
|
Adds compatibility for vendors through proprietary CSS properties. No hassle! |
|
8
|
|
|
Use your favorite syntax and CSS3Maximizer fills in the holes. |
|
9
|
|
|
|
|
10
|
|
|
|
|
11
|
|
|
CSS3 Color Module |
|
12
|
|
|
------------------ |
|
13
|
|
|
#00FF00 // all browsers |
|
14
|
|
|
hsl(120, 100%, 50%); // |
|
15
|
|
|
hsla(120, 100%, 50%, 1); // |
|
16
|
|
|
rgb(0, 255, 0); // |
|
17
|
|
|
rgb(0, 100%, 0); // |
|
18
|
|
|
rgba(0, 255, 0%, 1); // |
|
19
|
|
|
rgba(0, 100%, 0%, 1); // |
|
20
|
|
|
|
|
21
|
|
|
|
|
22
|
|
|
CSS3 Gradient Module |
|
23
|
|
|
--------------------- |
|
24
|
|
|
linear-gradient(yellow, blue); |
|
25
|
|
|
linear-gradient(to top, blue, yellow); |
|
26
|
|
|
linear-gradient(180deg, yellow, blue); |
|
27
|
|
|
linear-gradient(to bottom, yellow 0%, blue 100%); |
|
28
|
|
|
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #999999)); // Saf4+, Chrome |
|
29
|
|
|
-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); // Saf4+, Chrome |
|
30
|
|
|
-webkit-linear-gradient(top, #444444, #999999); // Chrome 10+, Saf5.1+ |
|
31
|
|
|
-moz-linear-gradient(top, #444444, #999999); // FF3.6 |
|
32
|
|
|
-ms-linear-gradient(top, #444444, #999999); // IE10 |
|
33
|
|
|
-o-linear-gradient(top, #444444, #999999); // Opera 11.10+ |
|
34
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); // IE6–IE9 |
|
35
|
|
|
|
|
36
|
|
|
|
|
37
|
|
|
CSS3 Properties |
|
38
|
|
|
---------------- |
|
39
|
|
|
background-clip |
|
40
|
|
|
---------------- |
|
41
|
|
|
-moz-background-clip: padding; |
|
42
|
|
|
-webkit-background-clip: padding-box; |
|
43
|
|
|
background-clip: padding-box; |
|
44
|
|
|
|
|
45
|
|
|
background-size |
|
46
|
|
|
---------------- |
|
47
|
|
|
-moz-background-size: 100% 100%; // FF3.6 |
|
48
|
|
|
-webkit-background-size: 100% 100%; // Saf3-4 |
|
49
|
|
|
background-size: 100% 100%; // Opera, IE9, Saf5, Chrome, FF4 |
|
50
|
|
|
|
|
51
|
|
|
border-radius |
|
52
|
|
|
-------------- |
|
53
|
|
|
-moz-border-radius: 12px; // FF1-3.6 |
|
54
|
|
|
-webkit-border-radius: 12px; // Saf3-4, iOS 1-3.2, Android <1.6 |
|
55
|
|
|
border-radius: 12px; // Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ |
|
56
|
|
|
|
|
57
|
|
|
box-shadow |
|
58
|
|
|
----------- |
|
59
|
|
|
-moz-box-shadow: 0px 0px 4px #ffffff; // FF3.5 - 3.6 |
|
60
|
|
|
-webkit-box-shadow: 0px 0px 4px #ffffff; // Saf3.0+, Chrome |
|
61
|
|
|
box-shadow: 0px 0px 4px #ffffff; // Opera 10.5, IE9, FF4+, Chrome 10+ |
|
62
|
|
|
|
|
63
|
|
|
transition |
|
64
|
|
|
----------- |
|
65
|
|
|
-moz-transition: all 0.3s ease-out; // FF4+ |
|
66
|
|
|
-o-transition: all 0.3s ease-out; // Opera 10.5+ |
|
67
|
|
|
-webkit-transition: all 0.3s ease-out; // Saf3.2+, Chrome |
|
68
|
|
|
-ms-transition: all 0.3s ease-out; // IE10? |
|
69
|
|
|
transition: all 0.3s ease-out; |
|
70
|
|
|
|
|
71
|
|
|
transform |
|
72
|
|
|
---------- |
|
73
|
|
|
-moz-transform: rotate(7.5deg); // FF3.5+ |
|
74
|
|
|
-o-transform: rotate(7.5deg); // Opera 10.5 |
|
75
|
|
|
-webkit-transform: rotate(7.5deg); // Saf3.1+, Chrome |
|
76
|
|
|
-ms-transform: rotate(7.5deg); // IE9 |
|
77
|
|
|
transform: rotate(7.5deg); |
|
78
|
|
|
user-select |
|
79
|
|
|
------------ |
|
80
|
|
|
user-select: none; |
|
81
|
|
|
-khtml-user-select: none; |
|
82
|
|
|
-moz-user-select: none; |
|
83
|
|
|
-o-user-select: none; |
|
84
|
|
|
-webkit-user-select: none; |
|
85
|
|
|
|
|
86
|
|
|
|
|
87
|
|
|
TODO |
|
88
|
|
|
----- |
|
89
|
|
|
Maximize filter "opacity" for Internet Explorer: |
|
90
|
|
|
opacity: 0 === filter: alpha(opacity=0); |
|
91
|
|
|
|
|
92
|
|
|
*/ |
|
93
|
|
|
|
|
94
|
|
|
class CSS3Maximizer |
|
95
|
|
|
{ |
|
96
|
|
|
private $ColorSpace; |
|
97
|
|
|
private $code; |
|
98
|
|
|
|
|
99
|
|
|
public function __construct() |
|
100
|
|
|
{ |
|
101
|
|
|
$this->ColorSpace = new ColorSpace(); |
|
102
|
|
|
} |
|
103
|
|
|
|
|
104
|
|
|
/* Direct conversions of properties between vendors */ |
|
105
|
|
|
|
|
106
|
|
|
private $defAlias = [ |
|
107
|
|
|
'background-clip' => [ |
|
108
|
|
|
'background-clip', |
|
109
|
|
|
'-moz-background-clip', |
|
110
|
|
|
'-webkit-background-clip', |
|
111
|
|
|
], |
|
112
|
|
|
'background-size' => [ |
|
113
|
|
|
'background-size', |
|
114
|
|
|
'-moz-background-size', |
|
115
|
|
|
'-webkit-background-size', |
|
116
|
|
|
], |
|
117
|
|
|
'border-radius' => [ |
|
118
|
|
|
'border-radius', |
|
119
|
|
|
'-moz-border-radius', |
|
120
|
|
|
'-webkit-border-radius', |
|
121
|
|
|
], |
|
122
|
|
|
'box-shadow' => [ |
|
123
|
|
|
'box-shadow', |
|
124
|
|
|
'-moz-box-shadow', |
|
125
|
|
|
'-webkit-box-shadow', |
|
126
|
|
|
], |
|
127
|
|
|
'text-shadow' => [ |
|
128
|
|
|
'text-shadow', |
|
129
|
|
|
'-moz-text-shadow', |
|
130
|
|
|
], |
|
131
|
|
|
'transition' => [ |
|
132
|
|
|
'transition', |
|
133
|
|
|
'-moz-transition', |
|
134
|
|
|
'-ms-transition', |
|
135
|
|
|
'-o-transition', |
|
136
|
|
|
'-webkit-transition', |
|
137
|
|
|
], |
|
138
|
|
|
'transition-property' => [ |
|
139
|
|
|
'transition-property', |
|
140
|
|
|
'-moz-transition-property', |
|
141
|
|
|
'-ms-transition-property', |
|
142
|
|
|
'-o-transition-property', |
|
143
|
|
|
'-webkit-transition-property', |
|
144
|
|
|
], |
|
145
|
|
|
'transition-duration' => [ |
|
146
|
|
|
'transition-duration', |
|
147
|
|
|
'-moz-transition-duration', |
|
148
|
|
|
'-ms-transition-duration', |
|
149
|
|
|
'-o-transition-duration', |
|
150
|
|
|
'-webkit-transition-duration', |
|
151
|
|
|
], |
|
152
|
|
|
'transform' => [ |
|
153
|
|
|
'transform', |
|
154
|
|
|
'-moz-transform', |
|
155
|
|
|
'-ms-transform', |
|
156
|
|
|
'-o-transform', |
|
157
|
|
|
'-webkit-transform', |
|
158
|
|
|
], |
|
159
|
|
|
'user-select' => [ |
|
160
|
|
|
'user-select', |
|
161
|
|
|
'-khtml-user-select', |
|
162
|
|
|
'-moz-user-select', |
|
163
|
|
|
'-o-user-select', |
|
164
|
|
|
'-webkit-user-select', |
|
165
|
|
|
], |
|
166
|
|
|
]; |
|
167
|
|
|
|
|
168
|
|
|
private $defStaticProps = [ |
|
169
|
|
|
'0', |
|
170
|
|
|
'none', |
|
171
|
|
|
'transparent', |
|
172
|
|
|
'inherit', |
|
173
|
|
|
]; |
|
174
|
|
|
|
|
175
|
|
|
// Color Properties |
|
176
|
|
|
|
|
177
|
|
|
private $defColorFallback = [ |
|
178
|
|
|
'color', // single value, rgba with hex fallback |
|
179
|
|
|
'background-color', // single value, rgba with hex fallback |
|
180
|
|
|
'border', // multiple values, rgba with hex fallback |
|
181
|
|
|
'border-color', // multiple values, rgba with hex fallback |
|
182
|
|
|
]; |
|
183
|
|
|
|
|
184
|
|
|
private $defColorProperties = [ |
|
185
|
|
|
'color', // single value, rgba with hex fallback |
|
186
|
|
|
'background-color', // single value, rgba with hex fallback |
|
187
|
|
|
'border', // multiple values, rgba with hex fallback |
|
188
|
|
|
'border-color', // multiple values, rgba with hex fallback |
|
189
|
|
|
'box-shadow', // multiple values, can always use rgba |
|
190
|
|
|
'text-shadow', // multiple values, can always use rgba |
|
191
|
|
|
]; |
|
192
|
|
|
|
|
193
|
|
|
// Gradient Properties |
|
194
|
|
|
|
|
195
|
|
|
private $defGradientProperties = [ |
|
196
|
|
|
'background', |
|
197
|
|
|
'background-image', |
|
198
|
|
|
]; |
|
199
|
|
|
|
|
200
|
|
|
private $defGradientLinear = [ |
|
201
|
|
|
'-webkit-gradient', |
|
202
|
|
|
'-webkit-linear-gradient', |
|
203
|
|
|
'-moz-linear-gradient', |
|
204
|
|
|
'-ms-linear-gradient', |
|
205
|
|
|
'-o-linear-gradient', |
|
206
|
|
|
'linear-gradient', |
|
207
|
|
|
'filter', |
|
208
|
|
|
]; |
|
209
|
|
|
|
|
210
|
|
|
/* Color parsing and standardization */ |
|
211
|
|
|
|
|
212
|
|
|
private function splitByColor($value) |
|
213
|
|
|
{ |
|
214
|
|
|
$values = []; |
|
215
|
|
|
while (strlen($value)) { |
|
216
|
|
|
$ishex = strpos($value, '#'); |
|
217
|
|
|
$isother = strpos($value, ')'); |
|
218
|
|
|
if ($ishex === false) { |
|
219
|
|
|
$ishex = 99999999999; |
|
220
|
|
|
} |
|
221
|
|
|
if ($isother === false) { |
|
222
|
|
|
$isother = 99999999999; |
|
223
|
|
|
} |
|
224
|
|
|
if ($ishex < $isother) { |
|
225
|
|
|
$comma = strpos($value, ','); |
|
226
|
|
|
if ($comma === false) { // end of the line |
|
227
|
|
|
array_push($values, $value); |
|
228
|
|
|
$value = ''; |
|
229
|
|
View Code Duplication |
} else { // split by comma [hex] |
|
|
|
|
|
|
230
|
|
|
array_push($values, substr($value, 0, $comma)); |
|
231
|
|
|
$value = trim(substr($value, $comma + 1)); |
|
232
|
|
|
} |
|
233
|
|
View Code Duplication |
} else { // split by comma [rgb, rgba, hsl, hsla] |
|
|
|
|
|
|
234
|
|
|
array_push($values, substr($value, 0, $isother + 1)); |
|
235
|
|
|
$value = trim(substr($value, $isother + 2)); |
|
236
|
|
|
} |
|
237
|
|
|
} |
|
238
|
|
|
|
|
239
|
|
|
return $values; |
|
240
|
|
|
} |
|
241
|
|
|
|
|
242
|
|
|
private function parseColors($colors, $doFallback = false) |
|
243
|
|
|
{ |
|
244
|
|
|
$fallback = []; |
|
245
|
|
|
foreach ($colors as $key => $value) { |
|
246
|
|
|
$tmp = str_replace(' ', ' ', trim($value)); |
|
247
|
|
|
if (in_array($tmp, $this->defStaticProps)) { // none, inherit, transparent |
|
248
|
|
|
return $tmp; |
|
249
|
|
|
} |
|
250
|
|
|
$pos = strpos($tmp, '('); |
|
251
|
|
|
if ($pos === false) { // split color from properties [hex] |
|
252
|
|
|
$pos = strpos($tmp, '#'); |
|
253
|
|
|
$first = substr($tmp, 0, $pos); |
|
254
|
|
|
$color = substr($tmp, $pos); |
|
255
|
|
|
} else { // split color from properties [rgb, rgba, hsl or hsla] |
|
256
|
|
|
$pos = substr($tmp, 0, $pos); |
|
257
|
|
|
$backpos = strrpos($pos, ' '); |
|
258
|
|
|
if ($backpos === false) { |
|
259
|
|
|
$backpos = -1; |
|
260
|
|
|
} |
|
261
|
|
|
$first = substr($pos, 0, $backpos + 1); |
|
262
|
|
|
$color = substr($tmp, $backpos + 1); |
|
263
|
|
|
} |
|
264
|
|
|
$color = $this->parseColor($color); |
|
265
|
|
|
if ($doFallback) { // include hex fallback when alpha is present |
|
266
|
|
|
if ($color['rgba']) { |
|
267
|
|
|
$fallback[$key] = $first.$color['hex']; |
|
268
|
|
|
$colors[$key] = $first.$color['rgba']; |
|
269
|
|
View Code Duplication |
} else { |
|
|
|
|
|
|
270
|
|
|
$fallback[$key] = $first.$color['hex']; |
|
271
|
|
|
$colors[$key] = $first.$color['hex']; |
|
272
|
|
|
} |
|
273
|
|
View Code Duplication |
} else { |
|
|
|
|
|
|
274
|
|
|
if ($color['rgba']) { |
|
275
|
|
|
$colors[$key] = $first.$color['rgba']; |
|
276
|
|
|
} else { // everything is supported in hex! |
|
277
|
|
|
$colors[$key] = $first.$color['hex']; |
|
278
|
|
|
} |
|
279
|
|
|
} |
|
280
|
|
|
} |
|
281
|
|
|
$colors = implode($colors, ', '); |
|
282
|
|
|
$fallback = implode($fallback, ', '); |
|
283
|
|
|
if ($doFallback && $colors !== $fallback) { // include fallback |
|
284
|
|
|
return [ |
|
285
|
|
|
'hex' => $fallback, |
|
286
|
|
|
'rgba' => $colors, |
|
287
|
|
|
]; |
|
288
|
|
|
} else { // no fallback necessary |
|
289
|
|
|
return $colors; |
|
290
|
|
|
} |
|
291
|
|
|
} |
|
292
|
|
|
|
|
293
|
|
|
private function parseColor($color) |
|
294
|
|
|
{ |
|
295
|
|
|
$color = trim($color); |
|
296
|
|
|
if (strpos($color, '(')) { // rgb, rgba, hsl or hsla |
|
297
|
|
|
$first = strpos($color, '('); |
|
298
|
|
|
$type = substr($color, 0, $first); |
|
299
|
|
|
$color = substr($color, $first + 1, -1); |
|
300
|
|
|
$color = explode(',', $color); |
|
301
|
|
|
$alpha = isset($color[3]) ? floatval($color[3]) : 1; |
|
302
|
|
|
switch ($type) { // regularize to rgba and hex |
|
303
|
|
|
case 'rgb': |
|
304
|
|
|
case 'rgba': |
|
305
|
|
|
if (strpos($color[0], '%')) { |
|
306
|
|
|
$color[0] = round(intval($color[0]) / 100 * 255); |
|
307
|
|
|
$color[1] = round(intval($color[1]) / 100 * 255); |
|
308
|
|
|
$color[2] = round(intval($color[2]) / 100 * 255); |
|
309
|
|
|
} |
|
310
|
|
|
$color = [ |
|
311
|
|
|
R => $color[0], |
|
312
|
|
|
G => $color[1], |
|
313
|
|
|
B => $color[2], |
|
314
|
|
|
]; |
|
315
|
|
|
break; |
|
316
|
|
|
case 'hsl': // convert to rgb() |
|
317
|
|
|
case 'hsla': // convert to rgba() |
|
318
|
|
|
$color = $this->ColorSpace->HSL_RGB([ |
|
319
|
|
|
H => $color[0], |
|
320
|
|
|
S => $color[1], |
|
321
|
|
|
L => $color[2], |
|
322
|
|
|
]); |
|
323
|
|
|
break; |
|
324
|
|
|
default: // hex |
|
325
|
|
|
break; |
|
326
|
|
|
} |
|
327
|
|
|
$hex = '#'.$this->ColorSpace->HEX_STRING($this->ColorSpace->RGB_HEX($color)); |
|
328
|
|
|
if ($alpha === 1) { |
|
329
|
|
|
return ['hex' => $hex]; |
|
330
|
|
|
} else { // requires alpha |
|
331
|
|
|
$r = max(0, min(255, round($color[R]))); |
|
332
|
|
|
$g = max(0, min(255, round($color[G]))); |
|
333
|
|
|
$b = max(0, min(255, round($color[B]))); |
|
334
|
|
|
|
|
335
|
|
|
return [ |
|
336
|
|
|
'rgba' => 'rgba('.$r.', '.$g.', '.$b.', '.$alpha.')', |
|
337
|
|
|
'hex' => $hex, |
|
338
|
|
|
]; |
|
339
|
|
|
} |
|
340
|
|
|
} else { |
|
341
|
|
|
return [ |
|
342
|
|
|
'hex' => $color, |
|
343
|
|
|
]; |
|
344
|
|
|
} |
|
345
|
|
|
} |
|
346
|
|
|
|
|
347
|
|
|
/* Gradient parsing and standardization */ |
|
348
|
|
|
|
|
349
|
|
|
private function splitGradient($value) |
|
350
|
|
|
{ |
|
351
|
|
|
$values = []; |
|
352
|
|
|
while (strlen($value)) { |
|
353
|
|
|
$ishex = strpos($value, ','); |
|
354
|
|
|
$isother = strpos($value, '('); |
|
355
|
|
|
if ($ishex === false) { |
|
356
|
|
|
$ishex = 99999999999; |
|
357
|
|
|
} |
|
358
|
|
|
if ($isother === false) { |
|
359
|
|
|
$isother = 99999999999; |
|
360
|
|
|
} |
|
361
|
|
|
if ($ishex < $isother) { |
|
362
|
|
|
$comma = strpos($value, ','); |
|
363
|
|
|
array_push($values, substr($value, 0, $comma)); |
|
364
|
|
|
$value = trim(substr($value, $comma + 1)); |
|
365
|
|
|
} else { // split by comma [rgb, rgba, hsl, hsla] |
|
366
|
|
|
$isother = strpos($value, ')'); |
|
367
|
|
|
if ($isother === false) { |
|
368
|
|
|
array_push($values, $value); |
|
369
|
|
|
$value = ''; |
|
370
|
|
|
} else { |
|
371
|
|
|
$stop = substr($value, 0, $isother + 1); |
|
372
|
|
|
if (substr_count($stop, '(') === 2) { |
|
373
|
|
|
$isother += 1; |
|
374
|
|
|
$stop = $stop.')'; |
|
375
|
|
|
} |
|
376
|
|
|
array_push($values, $stop); |
|
377
|
|
|
$value = trim(substr($value, $isother + 2)); |
|
378
|
|
|
} |
|
379
|
|
|
} |
|
380
|
|
|
} |
|
381
|
|
|
|
|
382
|
|
|
return $values; |
|
383
|
|
|
} |
|
384
|
|
|
|
|
385
|
|
|
private function Webkit_Gradient_Position($value) |
|
386
|
|
|
{ |
|
387
|
|
|
switch ($value) { |
|
388
|
|
|
case 'top': |
|
389
|
|
|
return ['y' => -1]; |
|
390
|
|
|
case 'left': |
|
391
|
|
|
return ['x' => -1]; |
|
392
|
|
|
case 'bottom': |
|
393
|
|
|
return ['y' => 1]; |
|
394
|
|
|
case 'right': |
|
395
|
|
|
return ['x' => 1]; |
|
396
|
|
|
default: // center |
|
397
|
|
|
return []; |
|
398
|
|
|
} |
|
399
|
|
|
} |
|
400
|
|
|
|
|
401
|
|
|
private function Webkit_to_W3C_Gradient($value) |
|
402
|
|
|
{ |
|
403
|
|
|
|
|
404
|
|
|
///--- webkit supports out-of-order color-stops (others fail)... |
|
405
|
|
|
|
|
406
|
|
|
array_shift($value); // type of gradient [assume linear] |
|
407
|
|
|
$start = explode(' ', array_shift($value)); |
|
408
|
|
|
$end = explode(' ', array_shift($value)); |
|
409
|
|
|
$aIsSame = $start[0] == $end[0]; |
|
410
|
|
|
$bIsSame = $start[1] == $end[1]; |
|
411
|
|
|
if ($aIsSame && !$bIsSame) { |
|
412
|
|
|
$start = 'top'; |
|
413
|
|
|
} else { |
|
414
|
|
|
if (!$aIsSame && $bIsSame) { |
|
415
|
|
|
$start = 'left'; |
|
416
|
|
|
} else { |
|
417
|
|
|
if (!$aIsSame && !$bIsSame) { // convert to angle |
|
418
|
|
|
$p1 = array_merge( |
|
419
|
|
|
['x' => 0, 'y' => 0], |
|
420
|
|
|
$this->Webkit_Gradient_Position($start[0]), |
|
421
|
|
|
$this->Webkit_Gradient_Position($start[1]) |
|
422
|
|
|
); |
|
423
|
|
|
$p2 = array_merge( |
|
424
|
|
|
['x' => 0, 'y' => 0], |
|
425
|
|
|
$this->Webkit_Gradient_Position($end[0]), |
|
426
|
|
|
$this->Webkit_Gradient_Position($end[1]) |
|
427
|
|
|
); |
|
428
|
|
|
$dy = $p2[y] - $p1[y]; |
|
429
|
|
|
$dx = $p2[x] - $p1[x]; |
|
430
|
|
|
$start = round(rad2deg(atan2($dy, $dx))).'deg'; |
|
431
|
|
|
} else { // is "left" |
|
432
|
|
|
$start = 'left'; |
|
433
|
|
|
} |
|
434
|
|
|
} |
|
435
|
|
|
} |
|
436
|
|
|
$values = []; |
|
437
|
|
|
$moz = []; |
|
438
|
|
|
// |
|
439
|
|
|
foreach ($value as $key) { |
|
440
|
|
|
$type = substr($key, 0, strpos($key, '(')); |
|
441
|
|
|
$key = substr($key, strpos($key, '(') + 1); |
|
442
|
|
|
if ($type == 'from') { |
|
443
|
|
|
$position = '0%'; |
|
444
|
|
|
$color = substr($key, 0, -1); |
|
445
|
|
|
} else { |
|
446
|
|
|
if ($type == 'to') { |
|
447
|
|
|
$position = '100%'; |
|
448
|
|
|
$color = substr($key, 0, -1); |
|
449
|
|
|
} else { |
|
450
|
|
|
$key = explode(',', $key, 2); |
|
451
|
|
|
$position = $key[0]; |
|
452
|
|
|
if (!strpos($position, '%')) { |
|
453
|
|
|
$position = round($position * 100).'%'; |
|
454
|
|
|
} |
|
455
|
|
|
$color = substr($key[1], 0, -1); |
|
456
|
|
|
} |
|
457
|
|
|
} |
|
458
|
|
|
$color = $this->parseColor($color); |
|
459
|
|
|
if ($color['rgba']) { |
|
460
|
|
|
array_push($values, $color['rgba'].' '.$position); |
|
461
|
|
|
} else { |
|
462
|
|
|
array_push($values, $color['hex'].' '.$position); |
|
463
|
|
|
} |
|
464
|
|
|
array_push($moz, $color['hex'].' '.$position); |
|
465
|
|
|
} |
|
466
|
|
|
|
|
467
|
|
|
return [ |
|
468
|
|
|
'microsoft' => [substr(reset($moz), 0, 7), substr(end($moz), 0, 7)], |
|
469
|
|
|
'moz' => $start.', '.implode($moz, ', '), |
|
470
|
|
|
'w3c' => $start.', '.implode($values, ', '), |
|
471
|
|
|
]; |
|
472
|
|
|
} |
|
473
|
|
|
|
|
474
|
|
|
private function W3C_to_Webkit_Gradient($value) |
|
475
|
|
|
{ |
|
476
|
|
|
$start = array_shift($value); |
|
477
|
|
|
switch ($start) { |
|
478
|
|
|
case 'top': |
|
479
|
|
|
$start = 'center top, center bottom, '; |
|
480
|
|
|
break; |
|
481
|
|
|
case 'left': |
|
482
|
|
|
$start = 'left center, right center, '; |
|
483
|
|
|
break; |
|
484
|
|
|
default: // angle |
|
485
|
|
|
$start = deg2rad(intval($start)); |
|
486
|
|
|
$x = round(cos($start) * 100); |
|
487
|
|
|
$y = round(sin($start) * 100); |
|
488
|
|
|
$start = $x.'% 0%, 0% '.$y.'%, '; |
|
489
|
|
|
break; |
|
490
|
|
|
} |
|
491
|
|
|
$count = count($value) - 1; |
|
492
|
|
|
$values = []; |
|
493
|
|
|
foreach ($value as $n => $key) { |
|
494
|
|
|
$key = explode(' ', $key); |
|
495
|
|
|
$color = $this->parseColor($key[0]); |
|
496
|
|
|
if ($color['rgba']) { |
|
497
|
|
|
$color = $color['rgba']; |
|
498
|
|
|
} else { |
|
499
|
|
|
$color = $color['hex']; |
|
500
|
|
|
} |
|
501
|
|
|
$position = $key[1]; |
|
502
|
|
|
if (gettype($position) == 'NULL') { |
|
503
|
|
|
$position = round($n / $count * 100).'%'; |
|
504
|
|
|
} |
|
505
|
|
|
if ($n === 0) { |
|
506
|
|
|
$first = $color; |
|
507
|
|
|
array_push($values, "from({$color})"); |
|
508
|
|
|
} else { |
|
509
|
|
|
if ($n === $count) { |
|
510
|
|
|
$last = $color; |
|
511
|
|
|
array_push($values, "to({$color})"); |
|
512
|
|
|
} else { |
|
513
|
|
|
array_push($values, "color-stop({$position}, {$color})"); |
|
514
|
|
|
} |
|
515
|
|
|
} |
|
516
|
|
|
} |
|
517
|
|
|
|
|
518
|
|
|
return [ |
|
519
|
|
|
'microsoft' => [$first, $last], |
|
|
|
|
|
|
520
|
|
|
'webkit' => 'linear, '.$start.implode($values, ', '), |
|
521
|
|
|
]; |
|
522
|
|
|
} |
|
523
|
|
|
|
|
524
|
|
|
private function parseGradient($property, $value) |
|
|
|
|
|
|
525
|
|
|
{ |
|
526
|
|
|
$type = substr($value, 0, strpos($value, '(')); |
|
527
|
|
|
$tmp = substr($value, strpos($value, '(') + 1, -1); |
|
528
|
|
|
$values = []; |
|
529
|
|
|
if ($type == '-webkit-gradient') { // convert from webkit to other |
|
530
|
|
|
$value = $this->Webkit_to_W3C_Gradient($this->splitGradient($tmp)); |
|
531
|
|
|
$value['webkit'] = $tmp; |
|
532
|
|
|
} else { // convert from other to webkit |
|
533
|
|
|
$value = $this->W3C_to_Webkit_Gradient($this->splitGradient($tmp)); |
|
534
|
|
|
$value['w3c'] = $tmp; |
|
535
|
|
|
} |
|
536
|
|
|
foreach ($this->defGradientLinear as $key) { |
|
537
|
|
|
if ($key == '-webkit-gradient') { |
|
538
|
|
|
$values[$key] = $key.'('.$value['webkit'].')'; |
|
539
|
|
|
} else { |
|
540
|
|
|
if ($key == 'filter') { |
|
541
|
|
|
$color = $value['microsoft']; |
|
542
|
|
|
$values[$key] = "filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='{$color[0]}', EndColorStr='{$color[1]}')"; |
|
543
|
|
|
} else { |
|
544
|
|
|
$values[$key] = $key.'('.$value['w3c'].')'; |
|
545
|
|
|
} |
|
546
|
|
|
} |
|
547
|
|
|
} |
|
548
|
|
|
|
|
549
|
|
|
return $values; |
|
550
|
|
|
} |
|
551
|
|
|
|
|
552
|
|
|
/* Convert CSS to Object */ |
|
553
|
|
|
|
|
554
|
|
|
private function ParseCSS($str) |
|
555
|
|
|
{ |
|
556
|
|
|
$css = []; |
|
557
|
|
|
$str = preg_replace("/\/\*(.*)?\*\//Usi", '', $str); |
|
558
|
|
|
$parts = explode('}', $str); |
|
559
|
|
|
$skipping = false; |
|
560
|
|
|
if (count($parts) > 0) { |
|
561
|
|
|
foreach ($parts as $part) { |
|
562
|
|
|
list($keystr, $codestr) = explode('{', $part); |
|
563
|
|
|
// @media queries [skip for now] |
|
564
|
|
|
if ($skipping) { |
|
565
|
|
|
if (substr_count($part, '{') === 0) { |
|
566
|
|
|
$skipping = false; |
|
567
|
|
|
$css[$id[0]] .= "}\r"; |
|
|
|
|
|
|
568
|
|
|
} else { |
|
569
|
|
|
$css[$id[0]] .= $part."}\r"; |
|
570
|
|
|
continue; |
|
571
|
|
|
} |
|
572
|
|
|
} |
|
573
|
|
|
if (substr(trim($part), 0, 1) === '@') { |
|
574
|
|
|
$id = explode(',', trim($keystr)); |
|
575
|
|
|
$css[$id[0]] = trim($part)."\r\t}"; |
|
576
|
|
|
$skipping = true; |
|
577
|
|
|
continue; |
|
578
|
|
|
} |
|
579
|
|
|
// everything else |
|
580
|
|
|
$keys = explode(',', trim($keystr)); |
|
581
|
|
|
if (count($keys) === 0) { |
|
582
|
|
|
continue; |
|
583
|
|
|
} |
|
584
|
|
|
foreach ($keys as $key) { |
|
585
|
|
|
if (strlen($key) === 0) { |
|
586
|
|
|
continue; |
|
587
|
|
|
} |
|
588
|
|
|
$key = str_replace("\n", '', $key); |
|
589
|
|
|
$key = str_replace('\\', '', $key); |
|
590
|
|
|
$codestr = trim($codestr); |
|
591
|
|
|
if (!isset($css[$key])) { |
|
592
|
|
|
$css[$key] = []; |
|
593
|
|
|
} |
|
594
|
|
|
// only match ; without surrounding quotes |
|
595
|
|
|
$codestr = preg_replace('/(?:["\'].*(;).*["\'])/e', |
|
596
|
|
|
'str_replace(";","{{{RETAIN_SEPERATOR}}}","$0")', $codestr); |
|
597
|
|
|
$codes = explode(';', $codestr); |
|
598
|
|
|
if (count($codes) === 0) { |
|
599
|
|
|
continue; |
|
600
|
|
|
} |
|
601
|
|
|
foreach ($codes as $code) { |
|
602
|
|
|
// put back ; which were within surrounding quotes |
|
603
|
|
|
$code = str_replace('{{{RETAIN_SEPERATOR}}}', ';', $code); |
|
604
|
|
|
$code = trim($code); |
|
605
|
|
|
list($codekey, $codevalue) = explode(':', $code, 2); |
|
606
|
|
|
if (strlen($codekey) === 0) { |
|
607
|
|
|
continue; |
|
608
|
|
|
} |
|
609
|
|
|
array_push($css[$key], [ |
|
610
|
|
|
'type' => trim($codekey), |
|
611
|
|
|
'value' => trim($codevalue), |
|
612
|
|
|
] |
|
613
|
|
|
); |
|
614
|
|
|
} |
|
615
|
|
|
} |
|
616
|
|
|
} |
|
617
|
|
|
} |
|
618
|
|
|
|
|
619
|
|
|
return $css; |
|
620
|
|
|
} |
|
621
|
|
|
|
|
622
|
|
|
/* Generate compatibility between vendors */ |
|
623
|
|
|
|
|
624
|
|
|
public function clean($config) |
|
625
|
|
|
{ |
|
626
|
|
|
$css = isset($config['css']) ? $config['css'] : ''; |
|
627
|
|
|
$url = isset($config['url']) ? $config['url'] : ''; |
|
628
|
|
|
$compress = isset($config['compress']) ? $config['compress'] : ''; |
|
629
|
|
|
// load from file and write file |
|
630
|
|
|
if (strpos($css, '.css') && is_file($css)) { |
|
631
|
|
|
$this->code = file_get_contents($css); |
|
632
|
|
|
} else { |
|
633
|
|
|
$this->code = $css; |
|
634
|
|
|
} |
|
635
|
|
|
|
|
636
|
|
|
$cssObject = []; |
|
637
|
|
|
$cssText = ''; |
|
|
|
|
|
|
638
|
|
|
$css = $this->ParseCSS($this->code); |
|
639
|
|
|
// run through properties and add appropriate compatibility |
|
640
|
|
|
foreach ($css as $cssID => $cssProperties) { |
|
641
|
|
|
$properties = []; |
|
642
|
|
|
if (gettype($cssProperties) === 'string') { |
|
643
|
|
|
$cssObject[$cssID] = $cssProperties; |
|
644
|
|
|
continue; |
|
645
|
|
|
} |
|
646
|
|
|
foreach ($cssProperties as $value) { |
|
647
|
|
|
$type = $value['type']; |
|
648
|
|
|
$value = $value['value']; |
|
649
|
|
|
if (in_array($type, $this->defGradientProperties)) { |
|
650
|
|
|
if (substr(trim($value), 0, 4) === 'url(') { |
|
651
|
|
|
$value = substr(trim($value), 5, -1); |
|
652
|
|
|
$value = str_replace(["'", '"'], [''], $value); |
|
653
|
|
|
$value = 'url("'.$url.$value.'")'; |
|
654
|
|
|
} else { |
|
655
|
|
|
if (strpos($value, 'gradient') !== false) { // background-gradient |
|
656
|
|
|
$value = $this->parseGradient($type, $value); |
|
657
|
|
|
} else { // background-color as "background" |
|
658
|
|
|
$doFallback = in_array($type, $this->defColorFallback); |
|
659
|
|
|
$value = $this->parseColors($this->splitByColor($value), $doFallback); |
|
660
|
|
|
} |
|
661
|
|
|
} |
|
662
|
|
|
} else { |
|
663
|
|
|
if (in_array($type, $this->defColorProperties)) { |
|
664
|
|
|
$doFallback = in_array($type, $this->defColorFallback); |
|
665
|
|
|
$value = $this->parseColors($this->splitByColor($value), $doFallback); |
|
666
|
|
|
} |
|
667
|
|
|
} |
|
668
|
|
|
$alias = []; |
|
669
|
|
|
foreach ($this->defAlias as $property) { |
|
670
|
|
|
if (in_array($type, $property)) { // direct conversion between vendors |
|
671
|
|
|
foreach ($property as $key) { |
|
672
|
|
|
if ($key == '-moz-transition') { |
|
673
|
|
|
$tmp = explode(' ', $value); |
|
674
|
|
|
if ($tmp[0] == 'transform') { |
|
675
|
|
|
$tmp[0] = '-moz-transform'; |
|
676
|
|
|
} |
|
677
|
|
|
$tmp = implode($tmp, ' '); |
|
678
|
|
|
$alias[$key] = $tmp; |
|
679
|
|
|
} else { |
|
680
|
|
|
if ($key == '-moz-transition-property') { |
|
681
|
|
|
$tmp = $value; |
|
682
|
|
|
if ($tmp == 'transform') { |
|
683
|
|
|
$tmp = '-moz-transform'; |
|
684
|
|
|
} |
|
685
|
|
|
$alias[$key] = $tmp; |
|
686
|
|
|
} else { |
|
687
|
|
|
$alias[$key] = $value; |
|
688
|
|
|
} |
|
689
|
|
|
} |
|
690
|
|
|
} |
|
691
|
|
|
} |
|
692
|
|
|
} |
|
693
|
|
|
if (count($alias)) { |
|
694
|
|
|
$value = $alias; |
|
695
|
|
|
} |
|
696
|
|
|
$merged = false; |
|
697
|
|
|
foreach ($properties as $key => $property) { |
|
698
|
|
|
$typeof = gettype($property['value']); |
|
699
|
|
|
if ($property['type'] == $type && gettype($value) === 'array') { |
|
700
|
|
|
if ($typeof == 'string') { |
|
701
|
|
|
$property['value'] = [ |
|
702
|
|
|
'hex' => $property['value'], |
|
703
|
|
|
]; |
|
704
|
|
|
} |
|
705
|
|
|
$properties[$key]['value'] = array_merge( |
|
706
|
|
|
$property['value'], |
|
707
|
|
|
$value |
|
708
|
|
|
); |
|
709
|
|
|
$merged = true; |
|
710
|
|
|
} else { |
|
711
|
|
|
if ($typeof == 'array' && $property['value'][$type]) { |
|
712
|
|
|
if ($type === 'filter') { |
|
713
|
|
|
$value = [ |
|
714
|
|
|
'filter' => $type.': '.$value, |
|
715
|
|
|
]; |
|
716
|
|
|
} |
|
717
|
|
|
$properties[$key]['value'] = array_merge( |
|
718
|
|
|
$property['value'], |
|
719
|
|
|
$value |
|
720
|
|
|
); |
|
721
|
|
|
$merged = true; |
|
722
|
|
|
} else { |
|
723
|
|
|
} |
|
724
|
|
|
} |
|
725
|
|
|
} |
|
726
|
|
|
if ($merged === false) { |
|
727
|
|
|
array_push($properties, [ |
|
728
|
|
|
'type' => $type, |
|
729
|
|
|
'value' => $value, |
|
730
|
|
|
]); |
|
731
|
|
|
} |
|
732
|
|
|
} |
|
733
|
|
|
$cssObject[$cssID] = $properties; |
|
734
|
|
|
} |
|
735
|
|
|
$newline = $compress ? '' : "\n"; |
|
736
|
|
|
$space = $compress ? '' : ' '; |
|
737
|
|
|
$tab = $compress ? '' : "\t"; |
|
738
|
|
|
// composite $cssObject into $cssText |
|
739
|
|
|
$cssArray = []; |
|
740
|
|
|
foreach ($cssObject as $cssID => $cssProperties) { |
|
741
|
|
|
if (gettype($cssProperties) === 'string') { |
|
742
|
|
|
$cssText = substr($cssProperties, strpos($cssProperties, '{') + 1); |
|
743
|
|
|
$cssText = "\t".trim(substr($cssText, 0, strrpos($cssText, '}')))."\n"; |
|
744
|
|
|
array_push($cssArray, [ |
|
745
|
|
|
'text' => $cssText, |
|
746
|
|
|
'key' => $cssID, |
|
747
|
|
|
]); |
|
748
|
|
|
continue; |
|
749
|
|
|
} |
|
750
|
|
|
$cssText = ''; |
|
751
|
|
|
foreach ($cssProperties as $value) { |
|
752
|
|
|
$type = $value['type']; |
|
753
|
|
|
$value = $value['value']; |
|
754
|
|
|
if (gettype($value) == 'string') { // general properties |
|
755
|
|
|
if ($compress) { |
|
756
|
|
|
$value = str_replace(', ', ',', $value); |
|
757
|
|
|
} |
|
758
|
|
|
$value = str_replace(['\"', "\'"], ['"', "'"], $value); |
|
759
|
|
|
$cssText .= $tab.$type.":{$space}".$value.";{$newline}"; |
|
760
|
|
|
} else { // multiple values |
|
761
|
|
|
foreach ($value as $key => $tmp) { |
|
762
|
|
|
if ($compress) { |
|
763
|
|
|
$tmp = str_replace(', ', ',', $tmp); |
|
764
|
|
|
} |
|
765
|
|
|
$tmp = str_replace(['\"', "\'"], ['"', "'"], $tmp); |
|
766
|
|
|
if ($key == 'hex' || $key == 'rgba' || in_array($key, |
|
767
|
|
|
$this->defGradientLinear) |
|
768
|
|
|
) { // color or gradient variants |
|
769
|
|
|
if ($key == 'filter') { // microsoft values |
|
770
|
|
|
$cssText .= $tab.$tmp.";{$newline}"; |
|
771
|
|
|
} else { |
|
772
|
|
|
$cssText .= $tab.$type.":{$space}".$tmp.";{$newline}"; |
|
773
|
|
|
} |
|
774
|
|
|
} else { // direct conversion of vender variants |
|
775
|
|
|
$cssText .= $tab.$key.":{$space}".$tmp.";{$newline}"; |
|
776
|
|
|
} |
|
777
|
|
|
} |
|
778
|
|
|
} |
|
779
|
|
|
} |
|
780
|
|
|
array_push($cssArray, [ |
|
781
|
|
|
'text' => $cssText, |
|
782
|
|
|
'key' => $cssID, |
|
783
|
|
|
]); |
|
784
|
|
|
} |
|
785
|
|
|
$cssText = ''; |
|
786
|
|
|
foreach ($cssArray as $n => $value) { |
|
787
|
|
|
$cssID = $value['key']; |
|
788
|
|
|
$content1 = $cssArray[$n]['text']; |
|
789
|
|
|
$content2 = $cssArray[$n + 1]['text']; |
|
790
|
|
|
if ($content1 === $content2) { |
|
791
|
|
|
$cssText .= $cssID.$space.','.$newline; |
|
792
|
|
|
} else { |
|
793
|
|
|
$cssText .= $cssID.$space.'{'.$newline; |
|
794
|
|
|
$cssText .= $content1; |
|
795
|
|
|
$cssText .= '}'.$newline; |
|
796
|
|
|
} |
|
797
|
|
|
} |
|
798
|
|
|
|
|
799
|
|
|
return $cssText; |
|
800
|
|
|
} |
|
801
|
|
|
} |
|
802
|
|
|
|
Duplicated code is one of the most pungent code smells. If you need to duplicate the same code in three or more different places, we strongly encourage you to look into extracting the code into a single class or operation.
You can also find more detailed suggestions in the “Code” section of your repository.