| 1 |
<?php |
| 2 |
|
| 3 |
namespace Wpxero\Marqueex\Core; |
| 4 |
|
| 5 |
use Wpxero\Marqueex\Traits\Singleton; |
| 6 |
use Wpxero\Marqueex\Core\Property; |
| 7 |
|
| 8 |
defined('ABSPATH') || exit; |
| 9 |
|
| 10 |
const PROPERTIES = array( |
| 11 |
'accentColor', |
| 12 |
'alignItems', |
| 13 |
'backgroundColor', |
| 14 |
'backgroundImage', |
| 15 |
'backgroundSize', |
| 16 |
'borderBottom', |
| 17 |
'borderBottomLeftRadius', |
| 18 |
'borderBottomRightRadius', |
| 19 |
'borderLeft', |
| 20 |
'borderRight', |
| 21 |
'borderTop', |
| 22 |
'borderTopLeftRadius', |
| 23 |
'borderTopRightRadius', |
| 24 |
'bottom', |
| 25 |
'boxShadow', |
| 26 |
'color', |
| 27 |
'customCSS', |
| 28 |
'display', |
| 29 |
'flexBasis', |
| 30 |
'flexDirection', |
| 31 |
'flexGrow', |
| 32 |
'flexShrink', |
| 33 |
'flexWrap', |
| 34 |
'fontSize', |
| 35 |
'fontStyle', |
| 36 |
'fontWeight', |
| 37 |
'gap', |
| 38 |
'height', |
| 39 |
'justifyContent', |
| 40 |
'lineHeight', |
| 41 |
'listStyleType', |
| 42 |
'left', |
| 43 |
'margin', |
| 44 |
'marginBottom', |
| 45 |
'marginLeft', |
| 46 |
'marginRight', |
| 47 |
'marginTop', |
| 48 |
'maxHeight', |
| 49 |
'maxWidth', |
| 50 |
'minHeight', |
| 51 |
'minWidth', |
| 52 |
'padding', |
| 53 |
'paddingBottom', |
| 54 |
'paddingLeft', |
| 55 |
'paddingRight', |
| 56 |
'paddingTop', |
| 57 |
'position', |
| 58 |
'overflowX', |
| 59 |
'overflowY', |
| 60 |
'right', |
| 61 |
'textAlign', |
| 62 |
'textTransform', |
| 63 |
'top', |
| 64 |
'verticalAlign', |
| 65 |
'whiteSpace', |
| 66 |
'width', |
| 67 |
); |
| 68 |
|
| 69 |
/** |
| 70 |
* Creates minimized CSS rulesets |
| 71 |
*/ |
| 72 |
class CSSBuilder { |
| 73 |
use Singleton; |
| 74 |
|
| 75 |
|
| 76 |
/** |
| 77 |
* List of declarations indexed by media type. |
| 78 |
* |
| 79 |
* @var array |
| 80 |
*/ |
| 81 |
protected array $state = array( |
| 82 |
'desktop' => array(), |
| 83 |
'desktopHover' => array(), |
| 84 |
'tablet' => array(), |
| 85 |
'tabletHover' => array(), |
| 86 |
'mobile' => array(), |
| 87 |
'mobileHover' => array(), |
| 88 |
); |
| 89 |
|
| 90 |
/** |
| 91 |
* Add all attributes/properties. |
| 92 |
* |
| 93 |
* @param array $attributes |
| 94 |
* @return void |
| 95 |
*/ |
| 96 |
public function add_attributes(array $attributes) { |
| 97 |
foreach ($attributes as $name => $value) { |
| 98 |
if (!is_int($name)) { |
| 99 |
$this->add_property($name, $value); |
| 100 |
} |
| 101 |
} |
| 102 |
} |
| 103 |
|
| 104 |
/** |
| 105 |
* Add a new property to the right state. |
| 106 |
* |
| 107 |
* @param string $name |
| 108 |
* @param string|integer|null $value |
| 109 |
* @return void |
| 110 |
*/ |
| 111 |
protected function add_property(string $name, $value): void { |
| 112 |
$property = Property::get_instance(); |
| 113 |
$property->set_property($name); |
| 114 |
if (in_array($property->name, PROPERTIES) && (null !== $value)) { |
| 115 |
$state = &$this->state[$this->state_name($property)]; |
| 116 |
$state[$property->name] = $value; |
| 117 |
} |
| 118 |
} |
| 119 |
|
| 120 |
/** |
| 121 |
* Gets the state key. |
| 122 |
* |
| 123 |
* @param Property $property |
| 124 |
* @return string |
| 125 |
*/ |
| 126 |
private function state_name(Property $property): string { |
| 127 |
switch ($property->device) { |
| 128 |
case 'mobile': |
| 129 |
return $property->hover ? 'mobileHover' : 'mobile'; |
| 130 |
case 'tablet': |
| 131 |
return $property->hover ? 'tabletHover' : 'tablet'; |
| 132 |
} |
| 133 |
return $property->hover ? 'desktopHover' : 'desktop'; |
| 134 |
} |
| 135 |
|
| 136 |
/** |
| 137 |
* Generate the CSS using the given selector. |
| 138 |
* |
| 139 |
* @param string $id |
| 140 |
* @param array $options |
| 141 |
* @return string |
| 142 |
*/ |
| 143 |
public function to_css(string $id, array $options = array()): string { |
| 144 |
$selector = $options['selector'] ?? null; |
| 145 |
|
| 146 |
$rulesets = array(); |
| 147 |
|
| 148 |
if (!empty($this->state['desktop'])) { |
| 149 |
$ruleset = $this->ruleset($id, $this->state['desktop'], $selector); |
| 150 |
if ($ruleset) { |
| 151 |
$rulesets[] = $ruleset; |
| 152 |
} |
| 153 |
if ($this->state['desktop']['customCSS'] ?? '') { |
| 154 |
$rulesets[] = $this->state['desktop']['customCSS']; |
| 155 |
} |
| 156 |
} |
| 157 |
if (!empty($this->state['desktopHover'])) { |
| 158 |
$rulesets[] = $this->ruleset($id, $this->state['desktopHover'], $selector, true); |
| 159 |
} |
| 160 |
|
| 161 |
if (!empty($this->state['tablet'])) { |
| 162 |
$ruleset = $this->ruleset($id, $this->state['tablet'], $selector); |
| 163 |
if ($ruleset) { |
| 164 |
$rulesets[] = '@media (max-width:1024px){' . $ruleset . '}'; |
| 165 |
} |
| 166 |
if ($this->state['tablet']['customCSS'] ?? '') { |
| 167 |
$rulesets[] = '@media (max-width:1024px){' . $this->state['tablet']['customCSS'] . '}'; |
| 168 |
} |
| 169 |
} |
| 170 |
if (!empty($this->state['tabletHover'])) { |
| 171 |
$rulesets[] = '@media (max-width:1024px){' . $this->ruleset($id, $this->state['tabletHover'], $selector, true) . '}'; |
| 172 |
} |
| 173 |
|
| 174 |
if (!empty($this->state['mobile'])) { |
| 175 |
$ruleset = $this->ruleset($id, $this->state['mobile'], $selector); |
| 176 |
if ($ruleset) { |
| 177 |
$rulesets[] = '@media (max-width:480px){' . $ruleset . '}'; |
| 178 |
} |
| 179 |
if ($this->state['mobile']['customCSS'] ?? '') { |
| 180 |
$rulesets[] = '@media (max-width:480px){' . $this->state['mobile']['customCSS'] . '}'; |
| 181 |
} |
| 182 |
} |
| 183 |
if (!empty($this->state['mobileHover'])) { |
| 184 |
$rulesets[] = '@media (max-width:480px){' . $this->ruleset($id, $this->state['mobileHover'], $selector, true) . '}'; |
| 185 |
} |
| 186 |
|
| 187 |
return join("\n", $rulesets); |
| 188 |
} |
| 189 |
|
| 190 |
/** |
| 191 |
* Creates a ruleset for the selector from the given style. |
| 192 |
* |
| 193 |
* @param string $id |
| 194 |
* @param array $style |
| 195 |
* @param string|null $selector |
| 196 |
* @param bool $hover |
| 197 |
* @return string |
| 198 |
*/ |
| 199 |
private function ruleset(string $id, array $style, ?string $selector = null, bool $hover = false): string { |
| 200 |
$array = array(); |
| 201 |
|
| 202 |
foreach ($style as $name => $value) { |
| 203 |
if ('customCSS' !== $name) { |
| 204 |
$property = self::kebab_case($name); |
| 205 |
// if (is_array($value)) { |
| 206 |
// error_log(print_r($value, true)); // Log the array for debugging |
| 207 |
// } |
| 208 |
$array[] = is_array($value) ? "$property:" . json_encode($value) : "$property:$value"; |
| 209 |
} |
| 210 |
} |
| 211 |
|
| 212 |
|
| 213 |
$prefix = "#$id"; |
| 214 |
if ($selector) { |
| 215 |
$prefix .= " $selector"; |
| 216 |
} |
| 217 |
if ($hover) { |
| 218 |
$prefix .= ':hover'; |
| 219 |
} |
| 220 |
|
| 221 |
return (!empty($array)) ? "$prefix{" . join(';', $array) . '}' : ''; |
| 222 |
} |
| 223 |
|
| 224 |
/** |
| 225 |
* Converts the JS or underscore name to a CSS property name. |
| 226 |
* |
| 227 |
* @param string $name |
| 228 |
* |
| 229 |
* @return string |
| 230 |
*/ |
| 231 |
private static function kebab_case(string $name): string { |
| 232 |
$property = strtolower(preg_replace('/(?<!^)[A-Z]/', '-$0', $name)); |
| 233 |
return str_replace('_', '-', $property); |
| 234 |
} |
| 235 |
} |
| 236 |
|
