← All changes | includes/blocks/divider/block.php +305 -0 2.7.4 → 2.14.0 View file →

		@@ -1,0 +1,305 @@
	1	+<?php
	2	+
	3	+namespace ABlocks\Blocks\Divider;
	4	+
	5	+if ( ! defined( 'ABSPATH' ) ) {
	6	+ exit;
	7	+}
	8	+
	9	+use ABlocks\Classes\BlockBaseAbstract;
	10	+use ABlocks\Classes\CssGenerator;
	11	+use ABlocks\Controls\Alignment;
	12	+use ABlocks\Controls\TextStroke;
	13	+use ABlocks\Controls\Typography;
	14	+use ABlocks\Controls\Icon;
	15	+use ABlocks\Controls\Range;
	16	+use ABlocks\Classes\CssGeneratorV2;
	17	+use ABlocks\Controls\Color;
	18	+class Block extends BlockBaseAbstract {
	19	+
	20	+ protected $block_name = 'divider';
	21	+
	22	+ public function build_css_v1( $attributes ) {
	23	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	24	+ $css_generator->add_class_styles(
	25	+ '{{WRAPPER}}',
	26	+ $this->get_wrapper_css( $attributes ),
	27	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	28	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	29	+ );
	30	+
	31	+ $css_generator->add_class_styles(
	32	+ '{{WRAPPER}} .ablocks-block-container',
	33	+ $this->get_divider_container_css( $attributes ),
	34	+ $this->get_divider_container_css( $attributes, 'Tablet' ),
	35	+ $this->get_divider_container_css( $attributes, 'Mobile' ),
	36	+ );
	37	+
	38	+ $css_generator->add_class_styles(
	39	+ '{{WRAPPER}} .ablocks-divider',
	40	+ $this->get_divider_css( $attributes ),
	41	+ $this->get_divider_css( $attributes, 'Tablet' ),
	42	+ $this->get_divider_css( $attributes, 'Mobile' ),
	43	+ );
	44	+ // element text
	45	+
	46	+ $css_generator->add_class_styles(
	47	+ '{{WRAPPER}} .ablocks-divider__element-text',
	48	+ $this->get_divider_element_text_css( $attributes ),
	49	+ $this->get_divider_element_text_css( $attributes, 'Tablet' ),
	50	+ $this->get_divider_element_text_css( $attributes, 'Mobile' ),
	51	+ );
	52	+ // Icon Style
	53	+ $css_generator->add_class_styles(
	54	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap',
	55	+ Icon::get_wrapper_css( $attributes ),
	56	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	57	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	58	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
	59	+ );
	60	+ $css_generator->add_class_styles(
	61	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap:hover',
	62	+ Icon::get_wrapper_hover_css( $attributes ),
	63	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	64	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	65	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	66	+ );
	67	+
	68	+ $css_generator->add_class_styles(
	69	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap',
	70	+ array_merge( Icon::get_wrapper_css( $attributes ), $this->get_icon_spacing_margins( $attributes, '' ) ),
	71	+ array_merge( Icon::get_wrapper_css( $attributes, 'Tablet' ), $this->get_icon_spacing_margins( $attributes, 'Tablet' ) ),
	72	+ array_merge( Icon::get_wrapper_css( $attributes, 'Mobile' ), $this->get_icon_spacing_margins( $attributes, 'Mobile' ) ),
	73	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return array_merge( Icon::get_wrapper_css( $attributes, $device ), $this->get_icon_spacing_margins( $attributes, $device ) ); } )
	74	+ );
	75	+ $css_generator->add_class_styles(
	76	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap img.ablocks-image-icon',
	77	+ Icon::get_element_image_css( $attributes ),
	78	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	79	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	80	+ );
	81	+ $css_generator->add_class_styles(
	82	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap img.ablocks-image-icon:hover',
	83	+ Icon::get_element_image_hover_css( $attributes ),
	84	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	85	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	86	+ );
	87	+ $css_generator->add_class_styles(
	88	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap svg.ablocks-svg-icon',
	89	+ Icon::get_element_css( $attributes ),
	90	+ Icon::get_element_css( $attributes, 'Tablet' ),
	91	+ Icon::get_element_css( $attributes, 'Mobile' ),
	92	+ );
	93	+ $css_generator->add_class_styles(
	94	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
	95	+ Icon::get_element_image_hover_css( $attributes ),
	96	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	97	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	98	+ );
	99	+ return $css_generator->generate_css();
	100	+ }
	101	+ public function build_css_v2( $attributes ) {
	102	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	103	+ $css_generator->add_class_styles(
	104	+ '{{WRAPPER}}.ablocks-block--divider:not(.ablocks-has-block-container),
	105	+ .ablocks-block--divider .ablocks-block-container',
	106	+ $this->get_wrapper_css( $attributes ),
	107	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	108	+ $this->get_wrapper_css( $attributes, 'Mobile' ),
	109	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
	110	+ );
	111	+
	112	+ $css_generator->add_class_styles(
	113	+ '{{WRAPPER}}.ablocks-block--divider:not(.ablocks-has-block-container),
	114	+ .ablocks-block--divider .ablocks-block-container',
	115	+ $this->get_divider_container_css( $attributes ),
	116	+ $this->get_divider_container_css( $attributes, 'Tablet' ),
	117	+ $this->get_divider_container_css( $attributes, 'Mobile' ),
	118	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_container_css( $attributes, $device ); } )
	119	+ );
	120	+
	121	+ $css_generator->add_class_styles(
	122	+ '{{WRAPPER}} .ablocks-divider',
	123	+ $this->get_divider_css( $attributes ),
	124	+ $this->get_divider_css( $attributes, 'Tablet' ),
	125	+ $this->get_divider_css( $attributes, 'Mobile' ),
	126	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_css( $attributes, $device ); } )
	127	+ );
	128	+ // element text
	129	+
	130	+ $css_generator->add_class_styles(
	131	+ '{{WRAPPER}} .ablocks-divider__element-text',
	132	+ $this->get_divider_element_text_css( $attributes ),
	133	+ $this->get_divider_element_text_css( $attributes, 'Tablet' ),
	134	+ $this->get_divider_element_text_css( $attributes, 'Mobile' ),
	135	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_element_text_css( $attributes, $device ); } )
	136	+ );
	137	+ // Icon Style
	138	+ $css_generator->add_class_styles(
	139	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap',
	140	+ Icon::get_wrapper_css( $attributes ),
	141	+ Icon::get_wrapper_css( $attributes, 'Tablet' ),
	142	+ Icon::get_wrapper_css( $attributes, 'Mobile' ),
	143	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
	144	+ );
	145	+ $css_generator->add_class_styles(
	146	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap:hover',
	147	+ Icon::get_wrapper_hover_css( $attributes ),
	148	+ Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
	149	+ Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
	150	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
	151	+ );
	152	+ $css_generator->add_class_styles(
	153	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap',
	154	+ array_merge( Icon::get_wrapper_css( $attributes ), $this->get_icon_spacing_margins( $attributes, '' ) ),
	155	+ array_merge( Icon::get_wrapper_css( $attributes, 'Tablet' ), $this->get_icon_spacing_margins( $attributes, 'Tablet' ) ),
	156	+ array_merge( Icon::get_wrapper_css( $attributes, 'Mobile' ), $this->get_icon_spacing_margins( $attributes, 'Mobile' ) ),
	157	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return array_merge( Icon::get_wrapper_css( $attributes, $device ), $this->get_icon_spacing_margins( $attributes, $device ) ); } )
	158	+ );
	159	+ $css_generator->add_class_styles(
	160	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap img.ablocks-image-icon',
	161	+ Icon::get_element_image_css( $attributes ),
	162	+ Icon::get_element_image_css( $attributes, 'Tablet' ),
	163	+ Icon::get_element_image_css( $attributes, 'Mobile' ),
	164	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
	165	+ );
	166	+ $css_generator->add_class_styles(
	167	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap img.ablocks-image-icon:hover',
	168	+ Icon::get_element_image_hover_css( $attributes ),
	169	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	170	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	171	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
	172	+ );
	173	+ $css_generator->add_class_styles(
	174	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap svg.ablocks-svg-icon',
	175	+ Icon::get_element_css( $attributes ),
	176	+ Icon::get_element_css( $attributes, 'Tablet' ),
	177	+ Icon::get_element_css( $attributes, 'Mobile' ),
	178	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
	179	+ );
	180	+ $css_generator->add_class_styles(
	181	+ '{{WRAPPER}} .ablocks-divider__element-icon .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
	182	+ Icon::get_element_image_hover_css( $attributes ),
	183	+ Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
	184	+ Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
	185	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
	186	+ );
	187	+ return $css_generator->generate_css();
	188	+ }
	189	+ public function build_css( $attributes ) {
	190	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	191	+ return $this->build_css_v2( $attributes );
	192	+ }
	193	+ return $this->build_css_v1( $attributes );
	194	+ }
	195	+ public function get_wrapper_css( $attributes, $device = '' ) {
	196	+ if ( isset( $attributes['alignment'] ) ) {
	197	+ return Alignment::get_css( $attributes['alignment'], 'text-align', $device );
	198	+ }
	199	+ return [];
	200	+ }
	201	+
	202	+ public function get_divider_element_text_css( $attributes, $device = '' ) {
	203	+ $typographyValueGlobal = ! empty( $attributes['elementTextTypographyGlobal'] ) ? $attributes['elementTextTypographyGlobal'] : '';
	204	+ $typography_value = isset( $attributes['elementTextTypographyGlobal'] ) ? $attributes['elementTextTypographyGlobal'] : [];
	205	+ return array_merge(
	206	+ [ 'color' => Color::get_css( isset( $attributes['elementTextColor'] ) ? $attributes['elementTextColor'] : '' ) ],
	207	+ Range::get_css([
	208	+ 'attributeValue' => $attributes['elementTextSpacing'],
	209	+ 'attributeObjectKey' => 'value',
	210	+ 'isResponsive' => true,
	211	+ 'defaultValue' => 0,
	212	+ 'hasUnit' => true,
	213	+ 'unitDefaultValue' => 'px',
	214	+ 'property' => 'padding-right',
	215	+ 'device' => $device,
	216	+ ]),
	217	+ Range::get_css([
	218	+ 'attributeValue' => $attributes['elementTextSpacing'],
	219	+ 'attributeObjectKey' => 'value',
	220	+ 'isResponsive' => true,
	221	+ 'defaultValue' => 0,
	222	+ 'hasUnit' => true,
	223	+ 'unitDefaultValue' => 'px',
	224	+ 'property' => 'padding-left',
	225	+ 'device' => $device,
	226	+ ]),
	227	+ Typography::get_css( $typography_value, '', $device, $typographyValueGlobal ),
	228	+ TextStroke::get_css( $attributes['elementTextStroke'], '', $device ),
	229	+ );
	230	+ }
	231	+
	232	+
	233	+ public function get_divider_container_css( $attributes, $device = '' ) {
	234	+ $divider_container_css = [];
	235	+ if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
	236	+ $divider_container_css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
	237	+ }
	238	+ return array_merge(
	239	+ Range::get_css([
	240	+ 'attributeValue' => $attributes['gap'],
	241	+ 'attributeObjectKey' => 'value',
	242	+ 'isResponsive' => true,
	243	+ 'defaultValue' => 10,
	244	+ 'unitDefaultValue' => 'px',
	245	+ 'property' => 'padding-block-start',
	246	+ 'device' => $device,
	247	+ ]),
	248	+ Range::get_css([
	249	+ 'attributeValue' => $attributes['gap'],
	250	+ 'attributeObjectKey' => 'value',
	251	+ 'isResponsive' => true,
	252	+ 'defaultValue' => 10,
	253	+ 'unitDefaultValue' => 'px',
	254	+ 'property' => 'padding-block-end',
	255	+ 'device' => $device,
	256	+ ]),
	257	+ $divider_container_css
	258	+ );
	259	+ }
	260	+
	261	+ public function get_divider_css( $attributes, $device = '' ) {
	262	+ $css = [];
	263	+
	264	+ $prepared_container = Range::get_css([
	265	+ 'attributeValue' => $attributes['width'],
	266	+ 'attributeObjectKey' => 'value',
	267	+ 'isResponsive' => true,
	268	+ 'defaultValue' => 100,
	269	+ 'hasUnit' => true,
	270	+ 'unitDefaultValue' => '%',
	271	+ 'property' => 'value',
	272	+ 'device' => $device,
	273	+ ]);
	274	+ if ( ! empty( $prepared_container['value'] ) && ( '100%' !== $prepared_container['value'] . $prepared_container['valueUnit'] || $device !== '' ) ) {
	275	+ $css['max-width'] = "min(100%, {$prepared_container['value']}{$prepared_container['valueUnit']})";
	276	+ }
	277	+ return array_merge(
	278	+ $css
	279	+ );
	280	+ }
	281	+
	282	+ public function get_icon_spacing_margins( $attributes, $device = '' ) {
	283	+ $marginLeft = Range::get_css([
	284	+ 'attributeValue' => $attributes['elementIconSpacing'],
	285	+ 'attributeObjectKey' => 'value',
	286	+ 'isResponsive' => true,
	287	+ 'defaultValue' => 0,
	288	+ 'hasUnit' => true,
	289	+ 'unitDefaultValue' => 'px',
	290	+ 'property' => 'margin-left',
	291	+ 'device' => $device,
	292	+ ]);
	293	+ $marginRight = Range::get_css([
	294	+ 'attributeValue' => $attributes['elementIconSpacing'],
	295	+ 'attributeObjectKey' => 'value',
	296	+ 'isResponsive' => true,
	297	+ 'defaultValue' => 0,
	298	+ 'hasUnit' => true,
	299	+ 'unitDefaultValue' => 'px',
	300	+ 'property' => 'margin-right',
	301	+ 'device' => $device,
	302	+ ]);
	303	+ return array_merge( $marginLeft, $marginRight );
	304	+ }
	305	+}