← All changes | includes/blocks/content-timeline/block.php +3 -131 2.15.0 → 2.16.0 View file →

		@@ -86,18 +86,9 @@
86	86	$this->get_content_timeline_date_alignment_css( $attributes, 'Tablet' ),
87	87	$this->get_content_timeline_date_alignment_css( $attributes, 'Mobile' ),
88	88	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_date_alignment_css( $attributes, $device ); } )
89	89	);
90		- // Conditional CSS generation based on arrowAlignment
91		-
92	90	$css_generator->add_class_styles(
93		- '{{WRAPPER}} .ablocks-block-content-timeline-child--line-center .ablocks-block-content-timeline-child__arrow',
94		- $this->get_content_timeline_arrow_css( $attributes ),
95		- $this->get_content_timeline_arrow_css( $attributes, 'Tablet' ),
96		- $this->get_content_timeline_arrow_css( $attributes, 'Mobile' ),
97		- $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_arrow_css( $attributes, $device ); } )
98		- );
99		- $css_generator->add_class_styles(
100	91	'{{WRAPPER}} .ablocks-block-content-timeline-child__date,.ablocks-block-content-timeline-child__inner-content-date',
101	92	$this->get_content_timeline_date_css( $attributes ),
102	93	$this->get_content_timeline_date_css( $attributes, 'Tablet' ),
103	94	$this->get_content_timeline_date_css( $attributes, 'Mobile' ),
		@@ -125,15 +116,8 @@
125	116	$this->get_content_timeline_show_date_left_right_css( $attributes, 'Mobile' ),
126	117	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_left_right_css( $attributes, $device ); } )
127	118	);
128	119	$css_generator->add_class_styles(
129		- '{{WRAPPER}} .ablocks-block-content-timeline--left .ablocks-block-content-timeline__line,.ablocks-block-content-timeline--right .ablocks-block-content-timeline__line',
130		- $this->get_content_timeline_show_date_left_right_line_css( $attributes, '' ),
131		- $this->get_content_timeline_show_date_left_right_line_css( $attributes, 'Tablet' ),
132		- $this->get_content_timeline_show_date_left_right_line_css( $attributes, 'Mobile' ),
133		- $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_left_right_line_css( $attributes, $device ); } )
134		- );
135		- $css_generator->add_class_styles(
136	120	'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date',
137	121	$this->get_content_timeline_show_date_mobile_css( $attributes, '' ),
138	122	$this->get_content_timeline_show_date_mobile_css( $attributes, 'Tablet' ),
139	123	$this->get_content_timeline_show_date_mobile_css( $attributes, 'Mobile' ),
		@@ -208,17 +192,8 @@
208	192	$this->get_content_timeline_date_alignment_css( $attributes, 'Tablet' ),
209	193	$this->get_content_timeline_date_alignment_css( $attributes, 'Mobile' ),
210	194	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_date_alignment_css( $attributes, $device ); } )
211	195	);
212		- // Conditional CSS generation based on arrowAlignment
213		-
214		- $css_generator->add_class_styles(
215		- '{{WRAPPER}} .ablocks-block-content-timeline-child--line-center .ablocks-block-content-timeline-child__arrow',
216		- $this->get_content_timeline_arrow_css( $attributes ),
217		- $this->get_content_timeline_arrow_css( $attributes, 'Tablet' ),
218		- $this->get_content_timeline_arrow_css( $attributes, 'Mobile' ),
219		- $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_arrow_css( $attributes, $device ); } )
220		- );
221	196	$css_generator->add_class_styles(
222	197	'{{WRAPPER}} .ablocks-block-content-timeline-child__date,.ablocks-block-content-timeline-child__inner-content-date',
223	198	$this->get_content_timeline_date_css( $attributes ),
224	199	$this->get_content_timeline_date_css( $attributes, 'Tablet' ),
		@@ -247,15 +222,8 @@
247	222	$this->get_content_timeline_show_date_left_right_css( $attributes, 'Mobile' ),
248	223	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_left_right_css( $attributes, $device ); } )
249	224	);
250	225	$css_generator->add_class_styles(
251		- '{{WRAPPER}} .ablocks-block-content-timeline--left .ablocks-block-content-timeline__line,.ablocks-block-content-timeline--right .ablocks-block-content-timeline__line',
252		- $this->get_content_timeline_show_date_left_right_line_css( $attributes, '' ),
253		- $this->get_content_timeline_show_date_left_right_line_css( $attributes, 'Tablet' ),
254		- $this->get_content_timeline_show_date_left_right_line_css( $attributes, 'Mobile' ),
255		- $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_timeline_show_date_left_right_line_css( $attributes, $device ); } )
256		- );
257		- $css_generator->add_class_styles(
258	226	'{{WRAPPER}} .ablocks-block-content-timeline-child__inner-content-date',
259	227	$this->get_content_timeline_show_date_mobile_css( $attributes, '' ),
260	228	$this->get_content_timeline_show_date_mobile_css( $attributes, 'Tablet' ),
261	229	$this->get_content_timeline_show_date_mobile_css( $attributes, 'Mobile' ),
		@@ -338,39 +306,8 @@
338	306	}
339	307
340	308	return $css;
341	309	}
342		- public function get_content_timeline_show_date_left_right_line_css( $attribute, $device ) {
343		- $css = [];
344		- $showDate = $attribute[ "showDate{$device}" ] ?? null;
345		- if ( $device === 'Mobile' ) {
346		- // Specific case for mobile content position left/right without date
347		- if ( $attribute['contentPosition'] === 'left' ) {
348		- $css['left'] = 'calc(35px / 2) !important'; // fallback for left without date
349		- } elseif ( $attribute['contentPosition'] === 'right' ) {
350		- $css['right'] = 'calc(35px / 2) !important'; // fallback for right without date
351		- }
352		- } elseif ( $device ) {
353		- // Non-mobile styles (if needed)
354		- if ( $attribute['contentPosition'] === 'left' ) {
355		- $css['left'] = $showDate ? 'calc(30% / 2) !important' : 'calc(61px / 2) !important';
356		- $css['right'] = 'auto !important';
357		- } elseif ( $attribute['contentPosition'] === 'right' ) {
358		- $css['right'] = $showDate ? 'calc(30% / 2) !important' : 'calc(61px / 2) !important';
359		- $css['left'] = 'auto !important';
360		- }
361		- } else {
362		- if ( $attribute['contentPosition'] === 'left' ) {
363		- $css['left'] = $showDate ? 'calc(30% / 2) !important' : 'calc(61px / 2) !important';
364		- $css['right'] = 'auto !important';
365		- } elseif ( $attribute['contentPosition'] === 'right' ) {
366		- $css['right'] = $showDate ? 'calc(30% / 2) !important' : 'calc(61px / 2) !important';
367		- $css['left'] = 'auto !important';
368		- }
369		- }//end if
370		-
371		- return $css;
372		- }
373	310	public function get_content_timeline_icon_css( $attributes, $device = '' ) {
374	311	$css = [];
375	312	return array_merge(
376	313	[ 'fill' => Color::get_css( isset( $attributes['iconColor'] ) ? $attributes['iconColor'] : '' ) ],
		@@ -424,36 +361,17 @@
424	361	'attribute_object_key' => 'value',
425	362	'defaultValue' => 3,
426	363	'property' => 'width',
427	364	]),
428		- Range::get_css([
429		- 'attributeValue' => $attributes['lineLeft'],
430		- 'attribute_object_key' => 'value',
431		- 'isResponsive' => true,
432		- 'hasUnit' => true,
433		- 'defaultValue' => 0,
434		- 'unitDefaultValue' => 'px',
435		- 'property' => 'margin-left',
436		- 'device' => $device,
437		- ]),
438		- Range::get_css([
439		- 'attributeValue' => $attributes['lineRight'],
440		- 'attribute_object_key' => 'value',
441		- 'isResponsive' => true,
442		- 'hasUnit' => true,
443		- 'defaultValue' => 0,
444		- 'unitDefaultValue' => 'px',
445		- 'property' => 'margin-right',
446		- 'device' => $device,
447		- ]),
448	365	);
449	366	}
450	367
451	368	public function get_content_timeline_item_gap_css( $attributes, $device = '' ) {
	369	+ $icon_size_css = [ '--ablocks-content-timeline-icon-size' => ( ! empty( $attributes['iconBackgroundSize'] ) ? $attributes['iconBackgroundSize'] : 48 ) . 'px' ];
452	370	if ( $this->is_horizontal_timeline( $attributes ) ) {
453		- return [ '--ablocks-content-timeline-icon-size' => ( ! empty( $attributes['iconBackgroundSize'] ) ? $attributes['iconBackgroundSize'] : 48 ) . 'px' ];
	371	+ return $icon_size_css;
454	372	}
455		- $css = [];
	373	+ $css = '' === $device ? $icon_size_css : [];
456	374	return array_merge(
457	375	Range::get_css([
458	376	'attributeValue' => $attributes['itemGap'],
459	377	'attribute_object_key' => 'value',
		@@ -486,54 +404,8 @@
486	404	$css['border-right-color'] = Color::get_css(
487	405	isset( $attributes['contentBackgroundColor'] ) ? $attributes['contentBackgroundColor'] : '');
488	406	}
489	407	return $css;
490		- }
491		- // public function get_content_timeline_arrow_css( $attributes, $device = '' ) {
492		- // $css = [];
493		- // $arrowAlignment = $attributes['arrowAlignment'] ?? '';
494		- // $iconBackgroundSize = $attributes['iconBackgroundSize'] ?? '';
495		-
496		- // if ( $arrowAlignment === 'top' ) {
497		- // $css['height'] = '0px';
498		- // $css['top'] = $iconBackgroundSize ? ( $iconBackgroundSize / 2 ) . 'px' : '0';
499		- // } elseif ( $arrowAlignment === 'bottom' ) {
500		- // $css['height'] = $iconBackgroundSize ? ( $iconBackgroundSize / 2 ) . 'px' : '0';
501		- // $css['bottom'] = '0';
502		- // }
503		-
504		- // return $css;
505		- // }
506		-
507		- public function get_content_timeline_arrow_css( $attributes, $device = '' ) {
508		- $css = [];
509		- if ( $this->is_horizontal_timeline( $attributes ) ) {
510		- return $css;
511		- }
512		- $arrowAlignment = $attributes['arrowAlignment'] ?? '';
513		- $iconBackgroundSize = $attributes['iconBackgroundSize'] ?? '';
514		-
515		- // Existing logic + updated styles
516		- if ( $arrowAlignment === 'top' ) {
517		- $css['height'] = '35px';
518		- $css['top'] = '10%';
519		- $css['transform'] = 'translateY(-50%)';
520		- $css['-webkit-transform'] = 'translateY(-50%)';
521		-
522		- } elseif ( $arrowAlignment === 'bottom' ) {
523		- $css['height'] = '35px';
524		- $css['top'] = '90%';
525		- $css['transform'] = 'translateY(-50%)';
526		- $css['-webkit-transform'] = 'translateY(-50%)';
527		-
528		- } elseif ( $arrowAlignment === 'centre' ) {
529		- $css['height'] = '35px';
530		- $css['top'] = '50%';
531		- $css['transform'] = 'translateY(-50%)';
532		- $css['-webkit-transform'] = 'translateY(-50%)';
533		- }
534		-
535		- return $css;
536	408	}
537	409	public function get_content_timeline_connector_alignment_css( $attributes, $device = '' ) {
538	410	$css = [];
539	411	$arrowAlignment = $attributes['arrowAlignment'] ?? '';