← All changes | includes/blocks/stripe-button/block.php +291 -0 2.7.6 → 2.14.0 View file →

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