| 1 |
<?php |
| 2 |
$innerContent = $content; |
| 3 |
|
| 4 |
if( !function_exists( 'evbbGetBoxValues' ) ){ |
| 5 |
function evbbGetBoxValues( $val ) { |
| 6 |
return implode( ' ', array_values( $val ) ); |
| 7 |
} |
| 8 |
} |
| 9 |
|
| 10 |
if( !function_exists( 'evbbStyle' ) ){ |
| 11 |
function evbbStyle( $attributes, $id ) { |
| 12 |
extract( $attributes ); |
| 13 |
extract( $background['desktop'] ?? [] ); |
| 14 |
|
| 15 |
$plxSpeed = $wrapper['animation']['parallax']['speed'] ?? 1; |
| 16 |
|
| 17 |
// Selectors |
| 18 |
$mainSl = "#$id"; |
| 19 |
$backgroundSl = "$mainSl .evbBackground"; |
| 20 |
$contentWrapperSl = "$mainSl .backgroundContentWrapper"; |
| 21 |
$contentSl = "$mainSl .backgroundContent"; |
| 22 |
|
| 23 |
// Image Destructure |
| 24 |
$url = $image['url'] ?? ''; |
| 25 |
$position = $image['position'] ?? ''; |
| 26 |
$attachment = $image['attachment'] ?? ''; |
| 27 |
$repeat = $image['repeat'] ?? ''; |
| 28 |
$size = $image['size'] ?? ''; |
| 29 |
|
| 30 |
// Wrapper CSS |
| 31 |
$wMHeight = $wrapper['minHeight']; |
| 32 |
$wDPadding = evbbGetBoxValues( $wrapper['padding']['desktop'] ?? [] ); |
| 33 |
$wTPadding = evbbGetBoxValues( $wrapper['padding']['tablet'] ?? [] ); |
| 34 |
$wMPadding = evbbGetBoxValues( $wrapper['padding']['mobile'] ?? [] ); |
| 35 |
|
| 36 |
// Shape CSS |
| 37 |
$tShape = $shape['top'] ?? []; |
| 38 |
$bShape = $shape['bottom'] ?? []; |
| 39 |
|
| 40 |
$tWidth = $tShape['width'] ?? '100%'; |
| 41 |
$tHeight = $tShape['height'] ?? '150px'; |
| 42 |
$tColor = $tShape['color'] ?? '#fff'; |
| 43 |
|
| 44 |
$bWidth = $bShape['width'] ?? '100%'; |
| 45 |
$bHeight = $bShape['height'] ?? '150px'; |
| 46 |
$bColor = $bShape['color'] ?? '#fff'; |
| 47 |
|
| 48 |
// Content CSS |
| 49 |
$contentBG = $content['background']; |
| 50 |
$cVAlign = $content['align']['vertical']; |
| 51 |
$cHAlign = $content['align']['horizontal'] ?? 'center'; |
| 52 |
$cTAlign = $content['align']['text']; |
| 53 |
$cDMaxW = $content['maxWidth']['desktop'] ?? '100%'; |
| 54 |
$cTMaxW = $content['maxWidth']['tablet'] ?? '100%'; |
| 55 |
$cMMaxW = $content['maxWidth']['mobile'] ?? '100%'; |
| 56 |
$cDPadding = evbbGetBoxValues( $content['padding']['desktop'] ?? [] ); |
| 57 |
$cTPadding = evbbGetBoxValues( $content['padding']['tablet'] ?? [] ); |
| 58 |
$cMPadding = evbbGetBoxValues( $content['padding']['mobile'] ?? [] ); |
| 59 |
|
| 60 |
$bgStyles = 'image' === $type ? "url($url)" : |
| 61 |
('gradient' === $type ? $gradient : $color); |
| 62 |
|
| 63 |
$bgImgStyles = 'image' === $type ? " |
| 64 |
background-position: $position; |
| 65 |
background-attachment: $attachment; |
| 66 |
background-repeat: $repeat; |
| 67 |
background-size: $size; |
| 68 |
" : ''; |
| 69 |
|
| 70 |
$styles = "$mainSl { |
| 71 |
min-height: $wMHeight; |
| 72 |
padding: $wDPadding; |
| 73 |
} |
| 74 |
$mainSl.scroll-parallax .evbBackground{ |
| 75 |
height: calc( 100% + ( 100% * $plxSpeed ) ); |
| 76 |
} |
| 77 |
$backgroundSl { |
| 78 |
background: $bgStyles; |
| 79 |
$bgImgStyles |
| 80 |
} |
| 81 |
$mainSl .evbShape.top{ |
| 82 |
width: $tWidth; |
| 83 |
height: $tHeight; |
| 84 |
color: $tColor; |
| 85 |
} |
| 86 |
$mainSl .evbShape.bottom{ |
| 87 |
width: $bWidth; |
| 88 |
height: $bHeight; |
| 89 |
color: $bColor; |
| 90 |
} |
| 91 |
|
| 92 |
$contentWrapperSl{ |
| 93 |
align-items: $cVAlign; |
| 94 |
justify-content: $cHAlign; |
| 95 |
$contentBG |
| 96 |
padding: $cDPadding; |
| 97 |
} |
| 98 |
$contentSl { |
| 99 |
max-width: $cDMaxW; |
| 100 |
text-align: $cTAlign; |
| 101 |
} |
| 102 |
@media (min-width: 481px) and (max-width: 960px) { |
| 103 |
$mainSl { |
| 104 |
padding: $wTPadding; |
| 105 |
} |
| 106 |
$contentWrapperSl{ |
| 107 |
padding: $cTPadding; |
| 108 |
} |
| 109 |
$contentSl { |
| 110 |
max-width: $cTMaxW; |
| 111 |
} |
| 112 |
} |
| 113 |
@media (max-width: 480px) { |
| 114 |
$mainSl { |
| 115 |
padding: $wMPadding; |
| 116 |
} |
| 117 |
$contentWrapperSl{ |
| 118 |
padding: $cMPadding; |
| 119 |
} |
| 120 |
$contentSl { |
| 121 |
max-width: $cMMaxW; |
| 122 |
} |
| 123 |
}"; |
| 124 |
|
| 125 |
ob_start(); ?> |
| 126 |
<style><?php echo esc_html( wp_strip_all_tags( $styles ) ); ?></style> |
| 127 |
<?php return ob_get_clean(); |
| 128 |
} |
| 129 |
} |
| 130 |
|
| 131 |
$id = wp_unique_id( 'evbBackground-' ); |
| 132 |
extract( $attributes ); |
| 133 |
|
| 134 |
$aniType = $wrapper['animation']['type'] ?? 'none'; |
| 135 |
|
| 136 |
global $allowedposttags; |
| 137 |
$allowedHTML = wp_parse_args( [ |
| 138 |
'style' => [], |
| 139 |
'svg' => [ |
| 140 |
'xmlns' => [], |
| 141 |
'viewbox' => [], |
| 142 |
'width' => [], |
| 143 |
'height' => [], |
| 144 |
'fill' => [], |
| 145 |
'class' => [], |
| 146 |
], |
| 147 |
'path' => [ |
| 148 |
'd' => [], |
| 149 |
'fill' => [], |
| 150 |
'stroke' => [], |
| 151 |
'stroke-width' => [], |
| 152 |
], |
| 153 |
'rect' => [ |
| 154 |
'x' => [], |
| 155 |
'y' => [], |
| 156 |
'width' => [], |
| 157 |
'height' => [], |
| 158 |
'fill' => [], |
| 159 |
'stroke' => [], |
| 160 |
'stroke-width' => [], |
| 161 |
], |
| 162 |
'circle' => [ |
| 163 |
'cx' => [], |
| 164 |
'cy' => [], |
| 165 |
'r' => [], |
| 166 |
'fill' => [], |
| 167 |
'stroke' => [], |
| 168 |
'stroke-width' => [], |
| 169 |
], |
| 170 |
'ellipse' => [ |
| 171 |
'cx' => [], |
| 172 |
'cy' => [], |
| 173 |
'rx' => [], |
| 174 |
'ry' => [], |
| 175 |
'fill' => [], |
| 176 |
'stroke' => [], |
| 177 |
'stroke-width' => [], |
| 178 |
], |
| 179 |
'line' => [ |
| 180 |
'x1' => [], |
| 181 |
'y1' => [], |
| 182 |
'x2' => [], |
| 183 |
'y2' => [], |
| 184 |
'stroke' => [], |
| 185 |
'stroke-width' => [], |
| 186 |
], |
| 187 |
'polyline' => [ |
| 188 |
'points' => [], |
| 189 |
'fill' => [], |
| 190 |
'stroke' => [], |
| 191 |
'stroke-width' => [], |
| 192 |
], |
| 193 |
'polygon' => [ |
| 194 |
'points' => [], |
| 195 |
'fill' => [], |
| 196 |
'stroke' => [], |
| 197 |
'stroke-width' => [], |
| 198 |
], |
| 199 |
'g' => [ |
| 200 |
'fill' => [], |
| 201 |
'transform' => [], |
| 202 |
], |
| 203 |
'title' => [], |
| 204 |
'desc' => [], |
| 205 |
'iframe' => [ |
| 206 |
'src' => [], |
| 207 |
'width' => [], |
| 208 |
'height' => [], |
| 209 |
'frameborder' => [], |
| 210 |
'allowfullscreen' => [], |
| 211 |
], |
| 212 |
], $allowedposttags ); |
| 213 |
|
| 214 |
// Shape |
| 215 |
$tShape = $shape['top'] ?? []; |
| 216 |
$bShape = $shape['bottom'] ?? []; |
| 217 |
|
| 218 |
$tType = $tShape['type'] ?? null; |
| 219 |
$tSVG = $tShape['svg'] ?? null; |
| 220 |
$tFlip = $tShape['flip'] ?? false; |
| 221 |
$tInvert = $tShape['invert'] ?? false; |
| 222 |
|
| 223 |
$bType = $bShape['type'] ?? null; |
| 224 |
$bSVG = $bShape['svg'] ?? null; |
| 225 |
$bFlip = $bShape['flip'] ?? false; |
| 226 |
$bInvert = $bShape['invert'] ?? false; |
| 227 |
?> |
| 228 |
<div <?php echo get_block_wrapper_attributes([ 'class' => "align$align scroll-$aniType" ]); ?> id='<?php echo esc_attr( $id ); ?>' data-attributes='<?php echo esc_attr( wp_json_encode( $attributes ) ); ?>'> |
| 229 |
<?php if ( $tType && $tSVG ): ?> |
| 230 |
<div class="evbShape top <?php echo $tFlip ? 'flip' : '' ?> <?php echo $tInvert ? 'invert' : '' ?>" data-svg='<?php echo esc_attr( wp_json_encode( $tSVG ) ); ?>'></div> |
| 231 |
<?php endif; ?> |
| 232 |
|
| 233 |
<?php echo wp_kses( evbbStyle( $attributes, $id ), [ 'style' => [] ] ); ?> |
| 234 |
|
| 235 |
<div class='evbBackground'></div> |
| 236 |
|
| 237 |
<div class='backgroundContentWrapper'> |
| 238 |
<div class='backgroundContent'> |
| 239 |
<?php echo wp_kses( $innerContent, $allowedHTML ); ?> |
| 240 |
</div> |
| 241 |
</div> |
| 242 |
|
| 243 |
<?php if ( $bType && $bSVG ): ?> |
| 244 |
<div class="evbShape bottom <?php echo $bFlip ? 'flip' : '' ?> <?php echo $bInvert ? 'invert' : '' ?>" data-svg='<?php echo esc_attr( wp_json_encode( $bSVG ) ); ?>'></div> |
| 245 |
<?php endif; ?> |
| 246 |
</div> |
