← All changes | includes/blocks/button/block.php +275 -0 2.7.7 → 2.13.0 View file →

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