← All changes | includes/blocks/svg-draw/block.php +171 -0 2.7.4 → 2.14.0 View file →

		@@ -1,0 +1,171 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\SvgDraw;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\BlockBaseAbstract;
	9	+use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
	11	+use ABlocks\Controls\Dimensions;
	12	+use ABlocks\Controls\Icon;
	13	+use ABlocks\Controls\Color;
	14	+
	15	+class Block extends BlockBaseAbstract {
	16	+ protected $block_name = 'svg-draw';
	17	+
	18	+ public function build_css_v1( $attributes ) {
	19	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	20	+
	21	+ // Generate wrapper CSS start
	22	+ $css_generator->add_class_styles(
	23	+ '{{WRAPPER}} .ablocks-block-container',
	24	+ $this->get_wrapper_css( $attributes ),
	25	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	26	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	27	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	28	+ );
	29	+
	30	+ // Icon Style
	31	+ $css_generator->add_class_styles(
	32	+ '{{WRAPPER}} .ablocks-icon-wrap',
	33	+ Icon::get_wrapper_css( $attributes ),
	34	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	35	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	36	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
	37	+ );
	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(
	46	+ '{{WRAPPER}} svg > path',
	47	+ $this->get_svg_css( $attributes ),
	48	+ $this->get_svg_css( $attributes, 'Tablet' ),
	49	+ $this->get_svg_css( $attributes, 'Mobile' ),
	50	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_svg_css( $attributes, $device ); } )
	51	+ );
	52	+
	53	+ $css_generator->add_class_styles(
	54	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
	55	+ Icon::get_element_image_css( $attributes ),
	56	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	57	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	58	+ );
	59	+ $css_generator->add_class_styles(
	60	+ '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
	61	+ Icon::get_element_image_hover_css( $attributes ),
	62	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	63	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	64	+ );
	65	+ $css_generator->add_class_styles(
	66	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
	67	+ Icon::get_element_css( $attributes ),
	68	+ Icon::get_element_css( $attributes, 'Tablet' ),
	69	+ Icon::get_element_css( $attributes, 'Mobile' ),
	70	+ );
	71	+ $css_generator->add_class_styles(
	72	+ '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
	73	+ Icon::get_element_image_hover_css( $attributes ),
	74	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	75	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	76	+ );
	77	+
	78	+ return $css_generator->generate_css();
	79	+ }
	80	+ public function build_css_v2( $attributes ) {
	81	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	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	+
	153	+ public function get_wrapper_css( $attributes, $device = '' ) {
	154	+ $css = [];
	155	+ $css['display'] = 'flex';
	156	+ if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
	157	+ $css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
	158	+ }
	159	+ return $css;
	160	+ }
	161	+
	162	+ public function get_svg_css( $attributes = [], $device = '' ) {
	163	+ if ( ! empty( $attributes['duration'] ) ) {
	164	+ $css['animation-duration'] = $attributes['duration'] . 's !important';
	165	+ }
	166	+ return array_merge(
	167	+ [ 'stroke' => Color::get_css( isset( $attributes['svgDrawColor'] ) ? $attributes['svgDrawColor'] : '' ) ],
	168	+ $css
	169	+ );
	170	+ }
	171	+}