← All changes | includes/blocks/button/block.php +294 -0 1.0.1 → 2.14.0 View file →

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