← All changes | includes/blocks/svg-draw/block.php +93 -9 2.9.1 → 2.14.0 View file →

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