← All changes | includes/blocks/icon/block.php +84 -5 2.9.1 → 2.14.0 View file →

		@@ -8,13 +8,14 @@
8	8	use ABlocks\Classes\BlockBaseAbstract;
9	9	use ABlocks\Classes\CssGenerator;
10	10	use ABlocks\Controls\Dimensions;
11	11	use ABlocks\Controls\Icon;
	12	+use ABlocks\Classes\CssGeneratorV2;
12	13
13	14	class Block extends BlockBaseAbstract {
14	15	protected $block_name = 'icon';
15	16
16		- public function build_css( $attributes ) {
	17	+ public function build_css_v1( $attributes ) {
17	18	$css_generator = new CssGenerator( $attributes, $this->block_name );
18	19
19	20	// Generate wrapper CSS start
20	21	$css_generator->add_class_styles(
		@@ -20,9 +21,10 @@
20	21	$css_generator->add_class_styles(
21	22	'{{WRAPPER}} .ablocks-block-container',
22	23	$this->get_wrapper_css( $attributes ),
23	24	$this->get_wrapper_css( $attributes, 'Tablet' ),
24		- $this->get_wrapper_css( $attributes, 'Mobile' )
	25	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	26	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
25	27	);
26	28
27	29	// Icon Style
28	30	$css_generator->add_class_styles(
		@@ -28,15 +30,24 @@
28	30	$css_generator->add_class_styles(
29	31	'{{WRAPPER}} .ablocks-icon-wrap',
30	32	Icon::get_wrapper_css( $attributes ),
31	33	Icon::get_wrapper_css( $attributes, 'Tablet' ),
32		- Icon::get_wrapper_css( $attributes, 'Mobile' )
	34	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	35	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
33	36	);
34	37	$css_generator->add_class_styles(
	38	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	39	+ Icon::get_wrapper_hover_css( $attributes ),
	40	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	41	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	42	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	43	+ );
	44	+ $css_generator->add_class_styles(
35	45	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
36	46	Icon::get_element_image_css( $attributes ),
37	47	Icon::get_element_image_css( $attributes, 'Tablet' ),
38		- Icon::get_element_image_css( $attributes, 'Mobile' )
	48	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	49	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
39	50	);
40	51	$css_generator->add_class_styles(
41	52	'{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
42	53	Icon::get_element_image_hover_css( $attributes ),
		@@ -52,16 +63,84 @@
52	63	$css_generator->add_class_styles(
53	64	'{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
54	65	Icon::get_element_image_hover_css( $attributes ),
55	66	Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
56		- Icon::get_element_image_hover_css( $attributes, 'Mobile' )
	67	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	68	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
57	69	);
58	70
59	71	return $css_generator->generate_css();
60	72	}
	73	+ public function build_css_v2( $attributes ) {
	74	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
61	75
	76	+ // Generate wrapper CSS start
	77	+ $css_generator->add_class_styles(
	78	+ '{{WRAPPER}}',
	79	+ $this->get_wrapper_css( $attributes ),
	80	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	81	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	82	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	83	+ );
	84	+
	85	+ // Icon Style
	86	+ $css_generator->add_class_styles(
	87	+ '{{WRAPPER}} .ablocks-icon-wrap',
	88	+ Icon::get_wrapper_css( $attributes ),
	89	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	90	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	91	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
	92	+ );
	93	+ $css_generator->add_class_styles(
	94	+ '{{WRAPPER}} .ablocks-icon-wrap:hover',
	95	+ Icon::get_wrapper_hover_css( $attributes ),
	96	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	97	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	98	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	99	+ );
	100	+ $css_generator->add_class_styles(
	101	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
	102	+ Icon::get_element_image_css( $attributes ),
	103	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	104	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	105	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
	106	+ );
	107	+ $css_generator->add_class_styles(
	108	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
	109	+ Icon::get_element_image_hover_css( $attributes ),
	110	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	111	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	112	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
	113	+ );
	114	+ $css_generator->add_class_styles(
	115	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
	116	+ Icon::get_element_css( $attributes ),
	117	+ Icon::get_element_css( $attributes, 'Tablet' ),
	118	+ Icon::get_element_css( $attributes, 'Mobile' ),
	119	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
	120	+ );
	121	+ $css_generator->add_class_styles(
	122	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
	123	+ Icon::get_element_image_hover_css( $attributes ),
	124	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	125	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	126	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
	127	+ );
	128	+
	129	+ return $css_generator->generate_css();
	130	+ }
	131	+
	132	+ public function build_css( $attributes ) {
	133	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	134	+ return $this->build_css_v2( $attributes );
	135	+ }
	136	+ return $this->build_css_v1( $attributes );
	137	+ }
	138	+
62	139	public function get_wrapper_css( $attributes = [], $device = '' ) {
63	140	$css = [];
	141	+ $css['display'] = 'flex';
	142	+ $css['align-items'] = 'flex-start';
64	143	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
65	144	$css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
66	145	}
67	146	return $css;