← All changes | includes/blocks/carousel/block.php +101 -0 2.15.0 → 2.16.0 View file →

		@@ -35,8 +35,26 @@
35	35	return $this->get_carousel_css( $attributes, $device );
36	36	} )
37	37	);
38	38	$css_generator->add_class_styles(
	39	+ '{{WRAPPER}} .ablocks-carousel-swiper > .swiper-wrapper > .swiper-slide',
	40	+ $this->get_slide_css( $attributes ),
	41	+ $this->get_slide_css( $attributes, 'Tablet' ),
	42	+ $this->get_slide_css( $attributes, 'Mobile' ),
	43	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	44	+ return $this->get_slide_css( $attributes, $device );
	45	+ } )
	46	+ );
	47	+ $css_generator->add_class_styles(
	48	+ '{{WRAPPER}} .ablocks-carousel-swiper > .swiper-wrapper > .swiper-slide-active',
	49	+ $this->get_active_slide_css( $attributes ),
	50	+ $this->get_active_slide_css( $attributes, 'Tablet' ),
	51	+ $this->get_active_slide_css( $attributes, 'Mobile' ),
	52	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	53	+ return $this->get_active_slide_css( $attributes, $device );
	54	+ } )
	55	+ );
	56	+ $css_generator->add_class_styles(
39	57	'{{WRAPPER}} .ablocks-carousel-navigation__button',
40	58	$this->get_navigation_button_css( $attributes ),
41	59	$this->get_navigation_button_css( $attributes, 'Tablet' ),
42	60	$this->get_navigation_button_css( $attributes, 'Mobile' ),
		@@ -153,8 +171,26 @@
153	171	return $this->get_carousel_css( $attributes, $device );
154	172	} )
155	173	);
156	174	$css_generator->add_class_styles(
	175	+ '{{WRAPPER}} .ablocks-carousel-swiper > .swiper-wrapper > .swiper-slide',
	176	+ $this->get_slide_css( $attributes ),
	177	+ $this->get_slide_css( $attributes, 'Tablet' ),
	178	+ $this->get_slide_css( $attributes, 'Mobile' ),
	179	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	180	+ return $this->get_slide_css( $attributes, $device );
	181	+ } )
	182	+ );
	183	+ $css_generator->add_class_styles(
	184	+ '{{WRAPPER}} .ablocks-carousel-swiper > .swiper-wrapper > .swiper-slide-active',
	185	+ $this->get_active_slide_css( $attributes ),
	186	+ $this->get_active_slide_css( $attributes, 'Tablet' ),
	187	+ $this->get_active_slide_css( $attributes, 'Mobile' ),
	188	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	189	+ return $this->get_active_slide_css( $attributes, $device );
	190	+ } )
	191	+ );
	192	+ $css_generator->add_class_styles(
157	193	'{{WRAPPER}} .ablocks-carousel-navigation__button',
158	194	$this->get_navigation_button_css( $attributes ),
159	195	$this->get_navigation_button_css( $attributes, 'Tablet' ),
160	196	$this->get_navigation_button_css( $attributes, 'Mobile' ),
		@@ -286,8 +322,14 @@
286	322	if ( ! empty( $attributes['verticalAlign'][ 'value' . $device ] ) ) {
287	323	$carousel_css['align-items'] = $attributes['verticalAlign'][ 'value' . $device ];
288	324	}
289	325
	326	+ // Room below the track for the offset active slide (wrapper is content-box).
	327	+ $offset = $this->get_active_slide_offset( $attributes, $device );
	328	+ if ( '' !== $offset ) {
	329	+ $carousel_css['padding-bottom'] = $offset;
	330	+ }
	331	+
290	332	return array_merge(
291	333	Range::get_css([
292	334	'attributeValue' => $attributes['carouselHeight'],
293	335	'attribute_object_key' => 'value',
		@@ -582,8 +624,9 @@
582	624	'property' => 'height',
583	625	'device' => $device,
584	626	]) ),
585	627	Border::get_css( $attributes['activePaginationBorder'], '', $device ),
	628	+ $this->get_pagination_active_width_css( $attributes, $device ),
586	629	);
587	630	}
588	631	public function get_pagination_active_color_hover_css( $attributes, $device = '' ) {
589	632	$pagination_active_color_css = [];
		@@ -630,9 +673,67 @@
630	673	'property' => 'height',
631	674	'device' => $device,
632	675	]) ),
633	676	Border::get_hover_css( $attributes['activePaginationBorder'], '', $device ),
	677	+ $this->get_pagination_active_width_css( $attributes, $device ),
634	678	);
	679	+ }
	680	+
	681	+ /**
	682	+ * Active-slide offset for a device ('' when unused). Only centered Slide
	683	+ * carousels use it; an explicit 0 is kept so it can override a wider
	684	+ * device. Mirrors getActiveSlideOffset() in styling.js.
	685	+ */
	686	+ public function get_active_slide_offset( $attributes, $device = '' ) {
	687	+ if (
	688	+ ( $attributes['effect'] ?? 'slide' ) !== 'slide'
	689	+ || empty( $attributes['centeredSlides'] )
	690	+ ) {
	691	+ return '';
	692	+ }
	693	+ $css = Range::get_css([
	694	+ 'attributeValue' => $attributes['activeSlideOffset'] ?? '',
	695	+ 'isResponsive' => true,
	696	+ 'hasUnit' => true,
	697	+ 'unitDefaultValue' => 'px',
	698	+ 'property' => 'offset',
	699	+ 'device' => $device,
	700	+ ]);
	701	+ return $css['offset'] ?? '';
	702	+ }
	703	+
	704	+ public function get_slide_css( $attributes, $device = '' ) {
	705	+ return '' !== $this->get_active_slide_offset( $attributes, $device )
	706	+ ? [ 'transition' => 'transform 0.4s ease' ]
	707	+ : [];
	708	+ }
	709	+
	710	+ public function get_active_slide_css( $attributes, $device = '' ) {
	711	+ $offset = $this->get_active_slide_offset( $attributes, $device );
	712	+ return '' !== $offset ? [ 'transform' => 'translateY(' . $offset . ')' ] : [];
	713	+ }
	714	+
	715	+ // Pill-shaped active bullet: own width, height stays the Active Size.
	716	+ private function get_pagination_active_width_css( $attributes, $device = '' ) {
	717	+ if ( ( $attributes['paginationType'] ?? 'default' ) !== 'default' ) {
	718	+ return [];
	719	+ }
	720	+ $css = Range::get_css([
	721	+ 'attributeValue' => $attributes['paginationActiveWidth'] ?? '',
	722	+ 'isResponsive' => true,
	723	+ 'hasUnit' => true,
	724	+ 'unitDefaultValue' => 'px',
	725	+ 'property' => 'width',
	726	+ 'device' => $device,
	727	+ ]);
	728	+ if ( empty( $css['width'] ) ) {
	729	+ return [];
	730	+ }
	731	+ return [
	732	+ 'width' => $css['width'],
	733	+ 'border-radius' => '9999px',
	734	+ 'transition' => 'width 0.3s ease',
	735	+ ];
635	736	}
636	737
637	738	/**
638	739	* Dimensions only knows the Tablet/Mobile members, so a custom breakpoint