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

		@@ -1,0 +1,300 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\Countdown;
	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\Typography;
	13	+use ABlocks\Controls\Border;
	14	+use ABlocks\Controls\BoxShadow;
	15	+use ABlocks\Controls\Range;
	16	+use ABlocks\Controls\Color;
	17	+use ABlocks\Controls\Dimensions;
	18	+
	19	+class Block extends BlockBaseAbstract {
	20	+ protected $block_name = 'countdown';
	21	+
	22	+ public function build_css_v1( $attributes ) {
	23	+ $css_generator = new CssGenerator( $attributes );
	24	+
	25	+ $css_generator->add_class_styles(
	26	+ '{{WRAPPER}}',
	27	+ $this->get_wrapper_css( $attributes ),
	28	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	29	+ $this->get_wrapper_css( $attributes, 'Mobile' )
	30	+ );
	31	+
	32	+ $css_generator->add_class_styles(
	33	+ '{{WRAPPER}} .ablocks-block-container',
	34	+ $this->get_countdown_items_css( $attributes ),
	35	+ $this->get_countdown_items_css( $attributes, 'Tablet' ),
	36	+ $this->get_countdown_items_css( $attributes, 'Mobile' )
	37	+ );
	38	+
	39	+ $css_generator->add_class_styles(
	40	+ '{{WRAPPER}} .ablocks-countdown__item',
	41	+ $this->get_countdown_item_css( $attributes ),
	42	+ $this->get_countdown_item_css( $attributes, 'Tablet' ),
	43	+ $this->get_countdown_item_css( $attributes, 'Mobile' )
	44	+ );
	45	+ $css_generator->add_class_styles(
	46	+ '{{WRAPPER}} .ablocks-countdown__item:hover',
	47	+ $this->get_countdown_item_hover_css( $attributes ),
	48	+ $this->get_countdown_item_hover_css( $attributes, 'Tablet' ),
	49	+ $this->get_countdown_item_hover_css( $attributes, 'Mobile' )
	50	+ );
	51	+
	52	+ $css_generator->add_class_styles(
	53	+ '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-label',
	54	+ $this->get_label_css( $attributes ),
	55	+ $this->get_label_css( $attributes, 'Tablet' ),
	56	+ $this->get_label_css( $attributes, 'Mobile' )
	57	+ );
	58	+
	59	+ $css_generator->add_class_styles(
	60	+ '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-value',
	61	+ $this->get_number_css( $attributes ),
	62	+ $this->get_number_css( $attributes, 'Tablet' ),
	63	+ $this->get_number_css( $attributes, 'Mobile' )
	64	+ );
	65	+
	66	+ $css_generator->add_class_styles(
	67	+ '{{WRAPPER}} .ablocks-countdown__separator',
	68	+ $this->get_separator_css( $attributes ),
	69	+ $this->get_separator_css( $attributes, 'Tablet' ),
	70	+ $this->get_separator_css( $attributes, 'Mobile' )
	71	+ );
	72	+
	73	+ return $css_generator->generate_css();
	74	+ }
	75	+ public function build_css_v2( $attributes ) {
	76	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	77	+
	78	+ $css_generator->add_class_styles(
	79	+ '{{WRAPPER}}',
	80	+ $this->get_wrapper_css( $attributes ),
	81	+ $this->get_wrapper_css( $attributes, 'Tablet' ),
	82	+ $this->get_wrapper_css( $attributes, 'Mobile' )
	83	+ );
	84	+ $css_generator->add_class_styles(
	85	+ '{{WRAPPER}}.ablocks-block--countdown:not(.ablocks-has-container),
	86	+ {{WRAPPER}}.ablocks-block--countdown .ablocks-block-container',
	87	+ $this->get_countdown_items_css( $attributes, '' ),
	88	+ $this->get_countdown_items_css( $attributes, 'Tablet' ),
	89	+ $this->get_countdown_items_css( $attributes, 'Mobile' )
	90	+ );
	91	+
	92	+ $css_generator->add_class_styles(
	93	+ '{{WRAPPER}} .ablocks-countdown__item',
	94	+ $this->get_countdown_item_css( $attributes ),
	95	+ $this->get_countdown_item_css( $attributes, 'Tablet' ),
	96	+ $this->get_countdown_item_css( $attributes, 'Mobile' )
	97	+ );
	98	+ $css_generator->add_class_styles(
	99	+ '{{WRAPPER}} .ablocks-countdown__item:hover',
	100	+ $this->get_countdown_item_hover_css( $attributes ),
	101	+ $this->get_countdown_item_hover_css( $attributes, 'Tablet' ),
	102	+ $this->get_countdown_item_hover_css( $attributes, 'Mobile' )
	103	+ );
	104	+
	105	+ $css_generator->add_class_styles(
	106	+ '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-label',
	107	+ $this->get_label_css( $attributes ),
	108	+ $this->get_label_css( $attributes, 'Tablet' ),
	109	+ $this->get_label_css( $attributes, 'Mobile' )
	110	+ );
	111	+
	112	+ $css_generator->add_class_styles(
	113	+ '{{WRAPPER}} .ablocks-countdown__item .ablocks-countdown-value',
	114	+ $this->get_number_css( $attributes ),
	115	+ $this->get_number_css( $attributes, 'Tablet' ),
	116	+ $this->get_number_css( $attributes, 'Mobile' )
	117	+ );
	118	+
	119	+ $css_generator->add_class_styles(
	120	+ '{{WRAPPER}} .ablocks-countdown__separator',
	121	+ $this->get_separator_css( $attributes ),
	122	+ $this->get_separator_css( $attributes, 'Tablet' ),
	123	+ $this->get_separator_css( $attributes, 'Mobile' )
	124	+ );
	125	+
	126	+ return $css_generator->generate_css();
	127	+ }
	128	+
	129	+ public function build_css( $attributes ) {
	130	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	131	+ return $this->build_css_v2( $attributes );
	132	+ }
	133	+ return $this->build_css_v1( $attributes );
	134	+ }
	135	+
	136	+ public function get_wrapper_css( $attributes, $device = '' ) {
	137	+ $alignment = ! empty( $attributes['alignment'] ) ? $attributes['alignment'] : '';
	138	+ return Alignment::get_css( $alignment, 'text-align', $device );
	139	+ }
	140	+
	141	+ public function get_countdown_items_css( $attributes, $device = '' ) {
	142	+ $css = [];
	143	+
	144	+ if ( ! empty( $attributes['orient'][ 'value' . $device ] ) ) {
	145	+ $css['flex-direction'] = $attributes['orient'][ 'value' . $device ];
	146	+ }
	147	+ if ( ! empty( $attributes['justificationAlign'][ 'value' . $device ] ) ) {
	148	+ $css['justify-content'] = $attributes['justificationAlign'][ 'value' . $device ];
	149	+ }
	150	+ if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
	151	+ $css['align-items'] = $attributes['alignment'][ 'value' . $device ];
	152	+ }
	153	+ if ( ! empty( $attributes['wrapping'][ 'value' . $device ] ) ) {
	154	+ $css['flex-wrap'] = $attributes['wrapping'][ 'value' . $device ];
	155	+ }
	156	+
	157	+ return array_merge(
	158	+ Range::get_css([
	159	+ 'attributeValue' => $attributes['boxSize'],
	160	+ 'attribute_object_key' => 'value',
	161	+ 'isResponsive' => true,
	162	+ 'defaultValue' => 130,
	163	+ 'hasUnit' => true,
	164	+ 'unitDefaultValue' => 'px',
	165	+ 'property' => 'min-height',
	166	+ 'device' => $device,
	167	+ ]),
	168	+ Range::get_css([
	169	+ 'attributeValue' => $attributes['boxRowGap'],
	170	+ 'attribute_object_key' => 'value',
	171	+ 'isResponsive' => true,
	172	+ 'defaultValue' => 0,
	173	+ 'hasUnit' => true,
	174	+ 'unitDefaultValue' => 'px',
	175	+ 'property' => 'row-gap',
	176	+ 'device' => $device,
	177	+ ]),
	178	+ Range::get_css([
	179	+ 'attributeValue' => $attributes['boxColumnGap'],
	180	+ 'attribute_object_key' => 'value',
	181	+ 'isResponsive' => true,
	182	+ 'defaultValue' => 0,
	183	+ 'hasUnit' => true,
	184	+ 'unitDefaultValue' => 'px',
	185	+ 'property' => 'column-gap',
	186	+ 'device' => $device,
	187	+ ]),
	188	+ $css,
	189	+ );
	190	+ }
	191	+
	192	+ public function get_countdown_item_css( $attributes, $device = '' ) {
	193	+ $css = [];
	194	+ $width_css = [];
	195	+ // $css['padding'] = '0';
	196	+ $label_position = ! empty( $attributes['labelPosition'] ) ? $attributes['labelPosition'] : '';
	197	+ $orient = ! empty( $attributes['orient'] ) ? $attributes['orient'] : [];
	198	+
	199	+ $device_key = $device ? 'value' . ucfirst( $device ) : 'value';
	200	+ $direction = isset( $orient[ $device_key ] ) ? $orient[ $device_key ] : ( $orient['value'] ?? '' );
	201	+
	202	+ if ( in_array( $direction, [ 'column', 'column-reverse' ], true ) ) {
	203	+ $width_css = Range::get_css( [
	204	+ 'attributeValue' => $attributes['boxSize'],
	205	+ 'attribute_object_key' => 'value',
	206	+ 'isResponsive' => true,
	207	+ 'defaultValue' => 130,
	208	+ 'hasUnit' => true,
	209	+ 'unitDefaultValue' => 'px',
	210	+ 'property' => 'width',
	211	+ 'device' => $device,
	212	+ ] );
	213	+ } else {
	214	+ $width_css = [ 'width' => '130px' ];
	215	+ }
	216	+
	217	+ if ( $label_position ) {
	218	+ $css['flex-direction'] = $label_position;
	219	+ }
	220	+
	221	+ $border_css = [];
	222	+ if ( isset( $attributes['boxBorder'] ) ) {
	223	+ $border_css = Border::get_css( $attributes['boxBorder'], '', $device );
	224	+ }
	225	+
	226	+ return array_merge(
	227	+ [ 'background' => Color::get_css( isset( $attributes['boxBackgroundColor'] ) ? $attributes['boxBackgroundColor'] : '' ) ],
	228	+ $width_css,
	229	+ Range::get_css( [
	230	+ 'attributeValue' => $attributes['numberAndLabelGap'],
	231	+ 'attribute_object_key' => 'value',
	232	+ 'isResponsive' => true,
	233	+ 'defaultValue' => 5,
	234	+ 'hasUnit' => true,
	235	+ 'unitDefaultValue' => 'px',
	236	+ 'property' => 'gap',
	237	+ 'device' => $device,
	238	+ ] ),
	239	+ $border_css,
	240	+ $css,
	241	+ BoxShadow::get_css( ! empty( $attributes['boxShadow'] ) ? $attributes['boxShadow'] : '', $device ),
	242	+ Dimensions::get_css( $attributes['padding'], 'padding', $device ),
	243	+ );
	244	+ }
	245	+
	246	+
	247	+
	248	+
	249	+ public function get_countdown_item_hover_css( $attributes, $device = '' ) {
	250	+ return array_merge(
	251	+ Border::get_hover_css( ! empty( $attributes['boxBorder'] ) ? $attributes['boxBorder'] : [], '', $device ),
	252	+ BoxShadow::get_hover_css( $attributes['boxShadow'], '', $device )
	253	+ );
	254	+ }
	255	+
	256	+ public function get_label_css( $attributes, $device = '' ) {
	257	+ $css = [];
	258	+ if ( $attributes['labelPosition'] === 'column' || $attributes['labelPosition'] === 'column-reverse' ) {
	259	+ $css['width'] = '100%';
	260	+ $css['flex'] = '1 1 30%';
	261	+ $css['display'] = 'flex';
	262	+ $css['justify-content'] = 'center';
	263	+ $css['align-items'] = 'center';
	264	+ }
	265	+ $typographyGlobal = ( isset( $attributes['labelTypographyGlobal'] ) ? $attributes['labelTypographyGlobal'] : '' );
	266	+ return array_merge(
	267	+ [ 'color' => Color::get_css( isset( $attributes['labelColor'] ) ? $attributes['labelColor'] : '' ) ],
	268	+ [ 'background' => Color::get_css( isset( $attributes['labelBgColor'] ) ? $attributes['labelBgColor'] : '' ) ],
	269	+ ! empty( $attributes['labelTypography'] ) ? Typography::get_css( $attributes['labelTypography'], '', $device, $typographyGlobal ) : array(),
	270	+ $css
	271	+ );
	272	+ }
	273	+
	274	+ public function get_number_css( $attributes, $device = '' ) {
	275	+ $css = [];
	276	+ if ( $attributes['labelPosition'] === 'column' || $attributes['labelPosition'] === 'column-reverse' ) {
	277	+ $css['width'] = '100%';
	278	+ $css['flex'] = '1 1 70%';
	279	+ $css['display'] = 'flex';
	280	+ $css['justify-content'] = 'center';
	281	+ $css['align-items'] = 'center';
	282	+ }
	283	+ $typographyGlobal = ( isset( $attributes['numberTypographyGlobal'] ) ? $attributes['numberTypographyGlobal'] : '' );
	284	+ return array_merge(
	285	+ [ 'color' => Color::get_css( isset( $attributes['numberColor'] ) ? $attributes['numberColor'] : '' ) ],
	286	+ [ 'background' => Color::get_css( isset( $attributes['numberBgColor'] ) ? $attributes['numberBgColor'] : '' ) ],
	287	+ ! empty( $attributes['numberTypography'] ) ? Typography::get_css( $attributes['numberTypography'], '', $device, $typographyGlobal ) : array(),
	288	+ $css
	289	+ );
	290	+ }
	291	+
	292	+ public function get_separator_css( $attributes, $device = '' ) {
	293	+ $typographyGlobal = ( isset( $attributes['separatorTypographyGlobal'] ) ? $attributes['separatorTypographyGlobal'] : '' );
	294	+ return array_merge(
	295	+ [ 'color' => Color::get_css( isset( $attributes['separatorColor'] ) ? $attributes['separatorColor'] : '' ) ],
	296	+ ! empty( $attributes['separatorTypography'] ) ? Typography::get_css( $attributes['separatorTypography'], '', $device, $typographyGlobal ) : array(),
	297	+ );
	298	+ }
	299	+}
	300	+