| 1 |
<?php |
| 2 |
namespace ABlocks\Classes; |
| 3 |
|
| 4 |
if ( ! defined( 'ABSPATH' ) ) { |
| 5 |
exit; |
| 6 |
} |
| 7 |
|
| 8 |
use ABlocks\Classes\AssetsGenerator; |
| 9 |
|
| 10 |
class CssGenerator { |
| 11 |
private $custom_css = ''; |
| 12 |
private $parent_class; |
| 13 |
private $class_styles = []; |
| 14 |
|
| 15 |
public function __construct( $attributes = [] ) { |
| 16 |
$this->parent_class = '.ablocks-block-' . $attributes['block_id']; |
| 17 |
if ( isset( $attributes['_custom_css'] ) ) { |
| 18 |
$this->custom_css = $attributes['_custom_css']; |
| 19 |
} |
| 20 |
// Alert - don't touch here |
| 21 |
if ( isset( $attributes['_margin'] ) ) { // check has advanced tab or not |
| 22 |
$this->add_class_styles( |
| 23 |
'{{WRAPPER}}', |
| 24 |
BlockGlobal::get_wrapper_css( $attributes ), |
| 25 |
BlockGlobal::get_wrapper_css( $attributes, 'Tablet' ), |
| 26 |
BlockGlobal::get_wrapper_css( $attributes, 'Mobile' ) |
| 27 |
); |
| 28 |
$this->add_class_styles( |
| 29 |
'{{WRAPPER}}:hover', |
| 30 |
BlockGlobal::get_wrapper_hover_css( $attributes ), |
| 31 |
BlockGlobal::get_wrapper_hover_css( $attributes, 'Tablet' ), |
| 32 |
BlockGlobal::get_wrapper_hover_css( $attributes, 'Mobile' ) |
| 33 |
); |
| 34 |
$this->add_class_styles( |
| 35 |
'{{WRAPPER}}.ablocks-hide-on-desktop,{{WRAPPER}}.ablocks-hide-on-tablet,{{WRAPPER}}.ablocks-hide-on-mobile', |
| 36 |
BlockGlobal::get_wrapper_device_responsive_css( $attributes ), |
| 37 |
BlockGlobal::get_wrapper_device_responsive_css( $attributes, 'Tablet' ), |
| 38 |
BlockGlobal::get_wrapper_device_responsive_css( $attributes, 'Mobile' ) |
| 39 |
); |
| 40 |
$this->add_class_styles( |
| 41 |
'{{WRAPPER}}:hover > .ablocks-block-container', |
| 42 |
BlockGlobal::get_container_hover_css( $attributes ), |
| 43 |
BlockGlobal::get_container_hover_css( $attributes, 'Tablet' ), |
| 44 |
BlockGlobal::get_container_hover_css( $attributes, 'Mobile' ) |
| 45 |
); |
| 46 |
$this->add_class_styles( |
| 47 |
'{{WRAPPER}} > .ablocks-block-container', |
| 48 |
BlockGlobal::get_container_css( $attributes ), |
| 49 |
BlockGlobal::get_container_css( $attributes, 'Tablet' ), |
| 50 |
BlockGlobal::get_container_css( $attributes, 'Mobile' ) |
| 51 |
); |
| 52 |
}//end if |
| 53 |
} |
| 54 |
|
| 55 |
public function add_class_styles( $class_name, $desktop_styles, $tablet_styles = [], $mobile_styles = [] ) { |
| 56 |
$this->class_styles[] = [ |
| 57 |
'class_name' => $class_name, |
| 58 |
'desktop_styles' => $desktop_styles, |
| 59 |
'tablet_styles' => $tablet_styles, |
| 60 |
'mobile_styles' => $mobile_styles |
| 61 |
]; |
| 62 |
} |
| 63 |
|
| 64 |
public function generate_css() { |
| 65 |
$css_output = ''; |
| 66 |
|
| 67 |
foreach ( $this->class_styles as $class_style ) { |
| 68 |
$desktop_css = AssetsGenerator::minify_css( $this->generate_css_for_media_query( 'desktop', $class_style['desktop_styles'] ) ); |
| 69 |
$tablet_css = AssetsGenerator::minify_css( $this->generate_css_for_media_query( 'tablet', $class_style['tablet_styles'] ) ); |
| 70 |
$mobile_css = AssetsGenerator::minify_css( $this->generate_css_for_media_query( 'mobile', $class_style['mobile_styles'] ) ); |
| 71 |
|
| 72 |
$parent_selector = $this->get_parent_selector( $class_style['class_name'] ); |
| 73 |
$css_blocks = []; |
| 74 |
|
| 75 |
$addToCssBlocks = function ( $mediaQuery, $max_width, $css ) use ( &$css_blocks, $parent_selector ) { |
| 76 |
if ( ! empty( $css ) ) { |
| 77 |
$css_blocks[] = ( '' !== $mediaQuery ) ? "@media screen and (max-width: $max_width) {\n$parent_selector {\n$css\n}\n}" : "$parent_selector {\n$css\n}"; |
| 78 |
} |
| 79 |
}; |
| 80 |
|
| 81 |
$addToCssBlocks( '', '', $desktop_css ); |
| 82 |
$addToCssBlocks( 'tablet', $this->get_breakpoint( 'tablet' ), $tablet_css ); |
| 83 |
$addToCssBlocks( 'mobile', $this->get_breakpoint( 'mobile' ), $mobile_css ); |
| 84 |
|
| 85 |
$css_output .= implode( "\n\n", $css_blocks ) . "\n\n"; |
| 86 |
} |
| 87 |
|
| 88 |
$css_output .= $this->get_custom_css(); |
| 89 |
|
| 90 |
return preg_replace( '/\s+/', ' ', $css_output ); |
| 91 |
} |
| 92 |
public function get_custom_css() { |
| 93 |
return preg_replace( '/\bselector\b/', $this->parent_class, $this->custom_css ); |
| 94 |
} |
| 95 |
public function generate_css_for_media_query( $media_query, $styles ) { |
| 96 |
if ( empty( $styles ) ) { |
| 97 |
return ''; |
| 98 |
} |
| 99 |
$css_string = implode("\n", array_map( |
| 100 |
function ( $property, $value ) { |
| 101 |
return "$property: $value;"; |
| 102 |
}, |
| 103 |
array_keys( $styles ), |
| 104 |
$styles |
| 105 |
)); |
| 106 |
|
| 107 |
return $css_string . "\n"; |
| 108 |
} |
| 109 |
|
| 110 |
public function get_breakpoint( $media_query ) { |
| 111 |
switch ( $media_query ) { |
| 112 |
case 'tablet': |
| 113 |
return '800px'; |
| 114 |
case 'mobile': |
| 115 |
return '480px'; |
| 116 |
default: |
| 117 |
return '1200px'; |
| 118 |
} |
| 119 |
} |
| 120 |
|
| 121 |
public function get_parent_selector( $class_name ) { |
| 122 |
return $this->parent_class ? str_replace( '{{WRAPPER}}', $this->parent_class, $class_name ) : $class_name; |
| 123 |
} |
| 124 |
} |
| 125 |
|
| 126 |
|
