| 1 |
<?php |
| 2 |
namespace BBlocks\Inc; |
| 3 |
|
| 4 |
class GetCSS{ |
| 5 |
static function isValidCSS($property, $value) { |
| 6 |
if ( empty( $value ) && $value !== '0' && $value !== 0 ) { |
| 7 |
return ''; |
| 8 |
} |
| 9 |
return "$property: $value;"; |
| 10 |
} |
| 11 |
|
| 12 |
static function getBackgroundCSS( $bg, $isSolid = true, $isGradient = true, $isImage = true ) { |
| 13 |
extract( $bg ); |
| 14 |
$type = $type ?? 'solid'; |
| 15 |
$color = $color ?? ''; |
| 16 |
$gradient = $gradient ?? 'linear-gradient(135deg, #0040E3, #18D4FD)'; |
| 17 |
$image = $image ?? []; |
| 18 |
$position = $position ?? 'center center'; |
| 19 |
$attachment = $attachment ?? ''; |
| 20 |
$repeat = $repeat ?? ''; |
| 21 |
$size = $size ?? ''; |
| 22 |
$overlayColor = $overlayColor ?? ''; |
| 23 |
|
| 24 |
if ( 'gradient' === $type && $isGradient ) { |
| 25 |
$styles = self::isValidCSS('background', $gradient); |
| 26 |
} elseif ( 'image' === $type && $isImage ) { |
| 27 |
$imgUrl = esc_url( $image['url'] ?? '' ); |
| 28 |
$styles = "background: url($imgUrl);" |
| 29 |
. self::isValidCSS('background-color', $overlayColor) |
| 30 |
. self::isValidCSS('background-position', $position) |
| 31 |
. self::isValidCSS('background-size', $size) |
| 32 |
. self::isValidCSS('background-repeat', $repeat) |
| 33 |
. self::isValidCSS('background-attachment', $attachment) |
| 34 |
. self::isValidCSS('background-repeat', $repeat) |
| 35 |
. "background-blend-mode: overlay;"; |
| 36 |
} else { |
| 37 |
$styles = $isSolid ? self::isValidCSS('background', $color) : ''; |
| 38 |
} |
| 39 |
|
| 40 |
return $styles; |
| 41 |
} |
| 42 |
|
| 43 |
static function getBorderCSS( $border ) { |
| 44 |
extract( $border ); |
| 45 |
$width = $width ?? '0px'; |
| 46 |
$style = $style ?? 'solid'; |
| 47 |
$color = $color ?? '#0000'; |
| 48 |
$side = $side ?? 'all'; |
| 49 |
$radius = $radius ?? '0px'; |
| 50 |
|
| 51 |
$borderSideCheck = function( $s ) use ( $side ) { |
| 52 |
$bSide = strtolower( $side ); |
| 53 |
return false !== strpos( $bSide, 'all' ) || false !== strpos( $bSide, $s ); |
| 54 |
}; |
| 55 |
|
| 56 |
$noWidth = $width === '0px' || !$width; |
| 57 |
$borderCSS = "$width $style $color"; |
| 58 |
|
| 59 |
$styles = ''; |
| 60 |
foreach ( ['top', 'right', 'bottom', 'left'] as $s ) { |
| 61 |
if ( !$noWidth && $borderSideCheck( $s ) ) { $styles .= "border-$s: $borderCSS;"; } |
| 62 |
} |
| 63 |
if ( $radius ) { $styles .= "border-radius: $radius;"; } |
| 64 |
|
| 65 |
return $styles; |
| 66 |
} |
| 67 |
|
| 68 |
static function getColorsCSS( $colors ) { |
| 69 |
extract( $colors ); |
| 70 |
$color = $color ?? ''; |
| 71 |
$bgType = $bgType ?? 'solid'; |
| 72 |
$bg = $bg ?? ''; |
| 73 |
$gradient = $gradient ?? 'linear-gradient(135deg, #0040E3, #18D4FD)'; |
| 74 |
|
| 75 |
$background = ( $bgType === 'gradient' ) ? $gradient : $bg; |
| 76 |
|
| 77 |
$styles = self::isValidCSS('color', $color); |
| 78 |
$styles .= ($gradient || $bg) ? self::isValidCSS('background', $background) : ''; |
| 79 |
|
| 80 |
return $styles; |
| 81 |
} |
| 82 |
|
| 83 |
static function getIconCSS( $icon, $isSize = true, $isColor = true ) { |
| 84 |
extract( $icon ); |
| 85 |
$fontSize = $fontSize ?? 16; |
| 86 |
$colorType = $colorType ?? 'solid'; |
| 87 |
$color = $color ?? 'inherit'; |
| 88 |
$gradient = $gradient ?? 'linear-gradient(135deg, #0040E3, #18D4FD)'; |
| 89 |
|
| 90 |
$colorCSS = 'gradient' === $colorType ? |
| 91 |
"color: transparent; background-image: $gradient; -webkit-background-clip: text; background-clip: text;" : |
| 92 |
"color: $color;"; |
| 93 |
|
| 94 |
$styles = (!$fontSize || !$isSize ? '' : 'font-size: '. $fontSize .'px;') . ($isColor ? $colorCSS : ''); |
| 95 |
|
| 96 |
return $styles; |
| 97 |
} |
| 98 |
|
| 99 |
static function getSeparatorCSS( $separator ) { |
| 100 |
extract( $separator ); |
| 101 |
$width = $width ?? '50%'; |
| 102 |
$height = $height ?? '2px'; |
| 103 |
$style = $style ?? 'solid'; |
| 104 |
$color = $color ?? '#85b4fa'; |
| 105 |
|
| 106 |
$styles = self::isValidCSS( 'width', $width ); |
| 107 |
if ( preg_replace('/[^\d]/', '', $height) !== '0' ) { |
| 108 |
$styles .= "border-top: $height $style $color;"; |
| 109 |
} |
| 110 |
|
| 111 |
return $styles; |
| 112 |
} |
| 113 |
|
| 114 |
static function getSpaceCSS( $space ) { |
| 115 |
extract( $space ); |
| 116 |
$side = $side ?? 2; |
| 117 |
$vertical = $vertical ?? '0px'; |
| 118 |
$horizontal = $horizontal ?? '0px'; |
| 119 |
$top = $top ?? '0px'; |
| 120 |
$right = $right ?? '0px'; |
| 121 |
$bottom = $bottom ?? '0px'; |
| 122 |
$left = $left ?? '0px'; |
| 123 |
|
| 124 |
$styles = ( 2 === $side ) ? "$vertical $horizontal" : "$top $right $bottom $left"; |
| 125 |
|
| 126 |
return $styles; |
| 127 |
} |
| 128 |
|
| 129 |
static function getShadowCSS( $shadow, $type = 'box' ) { |
| 130 |
extract( $shadow ); |
| 131 |
$hOffset = $hOffset ?? '0px'; |
| 132 |
$vOffset = $vOffset ?? '0px'; |
| 133 |
$blur = $blur ?? '0px'; |
| 134 |
$spreed = $spreed ?? '0px'; |
| 135 |
$color = $color ?? '#7090b0'; |
| 136 |
$isInset = $isInset ?? false; |
| 137 |
|
| 138 |
$inset = $isInset ? 'inset' : ''; |
| 139 |
$offsetBlur = "$hOffset $vOffset $blur"; |
| 140 |
|
| 141 |
$styles = 'text' === $type ? "$offsetBlur $color" : "$offsetBlur $spreed $color $inset"; |
| 142 |
|
| 143 |
return $styles ?: 'none'; |
| 144 |
} |
| 145 |
|
| 146 |
static function checkUnit( $size ) { |
| 147 |
$value = (string)$size; |
| 148 |
$units = ['px', 'em', 'rem', '%', 'vh', 'vw']; |
| 149 |
|
| 150 |
foreach ( $units as $unit ) { |
| 151 |
if ( substr( $value, -strlen( $unit ) ) === $unit ) { |
| 152 |
return $value; |
| 153 |
} |
| 154 |
} |
| 155 |
|
| 156 |
if ( is_numeric( $size ) ) { |
| 157 |
return $value . 'px'; |
| 158 |
} |
| 159 |
|
| 160 |
return ''; |
| 161 |
} |
| 162 |
|
| 163 |
static function getTypoCSS( $selector, $typo, $isFamily = true ) { |
| 164 |
extract( $typo ); |
| 165 |
$fontFamily = $fontFamily ?? 'Default'; |
| 166 |
$fontCategory = $fontCategory ?? 'sans-serif'; |
| 167 |
$fontVariant = $fontVariant ?? 400; |
| 168 |
$fontWeight = $fontWeight ?? ''; |
| 169 |
$isUploadFont = $isUploadFont ?? true; |
| 170 |
$fontSize = $fontSize ?? [ 'desktop' => null, 'tablet' => null, 'mobile' => null ]; |
| 171 |
$fontStyle = $fontStyle ?? ''; |
| 172 |
$textTransform = $textTransform ?? ''; |
| 173 |
$textDecoration = $textDecoration ?? ''; |
| 174 |
$lineHeight = $lineHeight ?? ''; |
| 175 |
$letterSpace = $letterSpace ?? ''; |
| 176 |
|
| 177 |
$isEmptyFamily = !$isFamily || !$fontFamily || 'Default' === $fontFamily; |
| 178 |
$desktopFontSize = $fontSize['desktop'] ?? $fontSize; |
| 179 |
$tabletFontSize = $fontSize['tablet'] ?? $desktopFontSize; |
| 180 |
$mobileFontSize = $fontSize['mobile'] ?? $tabletFontSize; |
| 181 |
|
| 182 |
$tabBreakpoint = '@media only screen and (max-width: 1024px)'; |
| 183 |
$mobileBreakpoint = '@media only screen and (max-width: 640px)'; |
| 184 |
|
| 185 |
$styles = |
| 186 |
($isEmptyFamily ? '' : "font-family: $fontFamily, $fontCategory;") . |
| 187 |
self::isValidCSS('font-weight', $fontWeight) . |
| 188 |
self::isValidCSS('font-size', self::checkUnit($desktopFontSize)) . |
| 189 |
self::isValidCSS('font-style', $fontStyle) . |
| 190 |
self::isValidCSS('text-transform', $textTransform) . |
| 191 |
self::isValidCSS('text-decoration', $textDecoration) . |
| 192 |
self::isValidCSS('line-height', $lineHeight) . |
| 193 |
self::isValidCSS('letter-spacing', $letterSpace); |
| 194 |
|
| 195 |
// Google font link |
| 196 |
if (!$fontVariant || $fontVariant === 400) { |
| 197 |
$linkQuery = ''; |
| 198 |
} elseif ($fontVariant === '400i') { |
| 199 |
$linkQuery = ':ital@1'; |
| 200 |
} elseif (strpos($fontVariant, '00i') !== false) { |
| 201 |
$linkQuery = ':ital,wght@1,' . str_replace('00i', '00', $fontVariant); |
| 202 |
} else { |
| 203 |
$linkQuery = ":wght@$fontVariant"; |
| 204 |
} |
| 205 |
|
| 206 |
$link = $isEmptyFamily ? '' : 'https://fonts.googleapis.com/css2?family=' . str_replace(' ', '+', $fontFamily) . $linkQuery . '&display=swap'; |
| 207 |
|
| 208 |
return [ |
| 209 |
'googleFontLink' => (!$isUploadFont || $isEmptyFamily) ? '' : "@import url($link);", |
| 210 |
'styles' => preg_replace('/\s+/', ' ', trim(" |
| 211 |
$selector { $styles } |
| 212 |
$tabBreakpoint { |
| 213 |
$selector { " . self::isValidCSS('font-size', self::checkUnit($tabletFontSize)) . " } |
| 214 |
} |
| 215 |
$mobileBreakpoint { |
| 216 |
$selector { " . self::isValidCSS('font-size', self::checkUnit($mobileFontSize)) . " } |
| 217 |
} |
| 218 |
")) |
| 219 |
]; |
| 220 |
} |
| 221 |
} |
