← All changes | includes/blocks/carousel/block.php +676 -0 2.7.6 → 2.14.0 View file →

		@@ -1,0 +1,676 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\Carousel;
	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\Range;
	13	+use ABlocks\Controls\Dimensions;
	14	+use ABlocks\Controls\Border;
	15	+use ABlocks\Controls\Color;
	16	+use ABlocks\Controls\BoxShadow;
	17	+
	18	+
	19	+
	20	+class Block extends BlockBaseAbstract {
	21	+ protected $block_name = 'carousel';
	22	+ protected $style_depends = [ 'ablocks-swiper-style' ];
	23	+ protected $script_depends = [ 'ablocks-swiper-script' ];
	24	+
	25	+ public function build_css_v1( $attributes ) {
	26	+
	27	+ $css_generator = new CssGenerator( $attributes );
	28	+
	29	+ $css_generator->add_class_styles(
	30	+ '{{WRAPPER}} .ablocks-carousel-swiper .swiper-wrapper',
	31	+ $this->get_carousel_css( $attributes ),
	32	+ $this->get_carousel_css( $attributes, 'Tablet' ),
	33	+ $this->get_carousel_css( $attributes, 'Mobile' ),
	34	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	35	+ return $this->get_carousel_css( $attributes, $device );
	36	+ } )
	37	+ );
	38	+ $css_generator->add_class_styles(
	39	+ '{{WRAPPER}} .ablocks-carousel-navigation__button',
	40	+ $this->get_navigation_button_css( $attributes ),
	41	+ $this->get_navigation_button_css( $attributes, 'Tablet' ),
	42	+ $this->get_navigation_button_css( $attributes, 'Mobile' ),
	43	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	44	+ return $this->get_navigation_button_css( $attributes, $device );
	45	+ } )
	46	+ );
	47	+ $css_generator->add_class_styles(
	48	+ '{{WRAPPER}} .ablocks-carousel-navigation__button--next',
	49	+ $this->get_navigation_next_button_css( $attributes ),
	50	+ $this->get_navigation_next_button_css( $attributes, 'Tablet' ),
	51	+ $this->get_navigation_next_button_css( $attributes, 'Mobile' ),
	52	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	53	+ return $this->get_navigation_next_button_css( $attributes, $device );
	54	+ } )
	55	+ );
	56	+ $css_generator->add_class_styles(
	57	+ '{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
	58	+ $this->get_navigation_prev_button_css( $attributes ),
	59	+ $this->get_navigation_prev_button_css( $attributes, 'Tablet' ),
	60	+ $this->get_navigation_prev_button_css( $attributes, 'Mobile' ),
	61	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	62	+ return $this->get_navigation_prev_button_css( $attributes, $device );
	63	+ } )
	64	+ );
	65	+ $css_generator->add_class_styles(
	66	+ '{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
	67	+ $this->get_navigation_icon_css( $attributes ),
	68	+ $this->get_navigation_icon_css( $attributes, 'Tablet' ),
	69	+ $this->get_navigation_icon_css( $attributes, 'Mobile' ),
	70	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	71	+ return $this->get_navigation_icon_css( $attributes, $device );
	72	+ } )
	73	+ );
	74	+
	75	+ $css_generator->add_class_styles(
	76	+ '{{WRAPPER}} .ablocks-carousel-pagination',
	77	+ $this->get_pagination_parent_css( $attributes ),
	78	+ $this->get_pagination_parent_css( $attributes, 'Tablet' ),
	79	+ $this->get_pagination_parent_css( $attributes, 'Mobile' ),
	80	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	81	+ return $this->get_pagination_parent_css( $attributes, $device );
	82	+ } )
	83	+ );
	84	+ $css_generator->add_class_styles(
	85	+ '{{WRAPPER}} .swiper-pagination-bullet',
	86	+ $this->get_pagination_color_css( $attributes ),
	87	+ $this->get_pagination_color_css( $attributes, 'Tablet' ),
	88	+ $this->get_pagination_color_css( $attributes, 'Mobile' ),
	89	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	90	+ return $this->get_pagination_color_css( $attributes, $device );
	91	+ } )
	92	+ );
	93	+ $css_generator->add_class_styles(
	94	+ '{{WRAPPER}} .swiper-pagination-bullet:hover',
	95	+ $this->get_pagination_color_hover_css( $attributes ),
	96	+ $this->get_pagination_color_hover_css( $attributes, 'Tablet' ),
	97	+ $this->get_pagination_color_hover_css( $attributes, 'Mobile' ),
	98	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	99	+ return $this->get_pagination_color_hover_css( $attributes, $device );
	100	+ } )
	101	+ );
	102	+
	103	+ $css_generator->add_class_styles(
	104	+ '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
	105	+ $this->get_pagination_active_color_css( $attributes ),
	106	+ $this->get_pagination_active_color_css( $attributes, 'Tablet' ),
	107	+ $this->get_pagination_active_color_css( $attributes, 'Mobile' ),
	108	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	109	+ return $this->get_pagination_active_color_css( $attributes, $device );
	110	+ } )
	111	+ );
	112	+ $css_generator->add_class_styles(
	113	+ '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active:hover',
	114	+ $this->get_pagination_active_color_hover_css( $attributes ),
	115	+ $this->get_pagination_active_color_hover_css( $attributes, 'Tablet' ),
	116	+ $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' ),
	117	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	118	+ return $this->get_pagination_active_color_hover_css( $attributes, $device );
	119	+ } )
	120	+ );
	121	+
	122	+ $css_generator->add_class_styles(
	123	+ '{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
	124	+ $this->get_navigation_icon_svg_css( $attributes ),
	125	+ $this->get_navigation_icon_svg_css( $attributes, 'Tablet' ),
	126	+ $this->get_navigation_icon_svg_css( $attributes, 'Mobile' ),
	127	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	128	+ return $this->get_navigation_icon_svg_css( $attributes, $device );
	129	+ } )
	130	+ );
	131	+ $css_generator->add_class_styles(
	132	+ '{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon:hover',
	133	+ $this->get_navigation_icon_svg_hover_css( $attributes ),
	134	+ $this->get_navigation_icon_svg_hover_css( $attributes, 'Tablet' ),
	135	+ $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' ),
	136	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	137	+ return $this->get_navigation_icon_svg_hover_css( $attributes, $device );
	138	+ } )
	139	+ );
	140	+ return $css_generator->generate_css();
	141	+ }
	142	+
	143	+ public function build_css_v2( $attributes ) {
	144	+
	145	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	146	+
	147	+ $css_generator->add_class_styles(
	148	+ '{{WRAPPER}} .ablocks-carousel-swiper .swiper-wrapper',
	149	+ $this->get_carousel_css( $attributes ),
	150	+ $this->get_carousel_css( $attributes, 'Tablet' ),
	151	+ $this->get_carousel_css( $attributes, 'Mobile' ),
	152	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	153	+ return $this->get_carousel_css( $attributes, $device );
	154	+ } )
	155	+ );
	156	+ $css_generator->add_class_styles(
	157	+ '{{WRAPPER}} .ablocks-carousel-navigation__button',
	158	+ $this->get_navigation_button_css( $attributes ),
	159	+ $this->get_navigation_button_css( $attributes, 'Tablet' ),
	160	+ $this->get_navigation_button_css( $attributes, 'Mobile' ),
	161	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	162	+ return $this->get_navigation_button_css( $attributes, $device );
	163	+ } )
	164	+ );
	165	+ $css_generator->add_class_styles(
	166	+ '{{WRAPPER}} .ablocks-carousel-navigation__button--next',
	167	+ $this->get_navigation_next_button_css( $attributes ),
	168	+ $this->get_navigation_next_button_css( $attributes, 'Tablet' ),
	169	+ $this->get_navigation_next_button_css( $attributes, 'Mobile' ),
	170	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	171	+ return $this->get_navigation_next_button_css( $attributes, $device );
	172	+ } )
	173	+ );
	174	+ $css_generator->add_class_styles(
	175	+ '{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
	176	+ $this->get_navigation_prev_button_css( $attributes ),
	177	+ $this->get_navigation_prev_button_css( $attributes, 'Tablet' ),
	178	+ $this->get_navigation_prev_button_css( $attributes, 'Mobile' ),
	179	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	180	+ return $this->get_navigation_prev_button_css( $attributes, $device );
	181	+ } )
	182	+ );
	183	+ $css_generator->add_class_styles(
	184	+ '{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
	185	+ $this->get_navigation_icon_css( $attributes ),
	186	+ $this->get_navigation_icon_css( $attributes, 'Tablet' ),
	187	+ $this->get_navigation_icon_css( $attributes, 'Mobile' ),
	188	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	189	+ return $this->get_navigation_icon_css( $attributes, $device );
	190	+ } )
	191	+ );
	192	+
	193	+ $css_generator->add_class_styles(
	194	+ '{{WRAPPER}} .ablocks-carousel-pagination',
	195	+ $this->get_pagination_parent_css( $attributes ),
	196	+ $this->get_pagination_parent_css( $attributes, 'Tablet' ),
	197	+ $this->get_pagination_parent_css( $attributes, 'Mobile' ),
	198	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	199	+ return $this->get_pagination_parent_css( $attributes, $device );
	200	+ } )
	201	+ );
	202	+ $css_generator->add_class_styles(
	203	+ '{{WRAPPER}} .swiper-pagination-bullet',
	204	+ $this->get_pagination_color_css( $attributes ),
	205	+ $this->get_pagination_color_css( $attributes, 'Tablet' ),
	206	+ $this->get_pagination_color_css( $attributes, 'Mobile' ),
	207	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	208	+ return $this->get_pagination_color_css( $attributes, $device );
	209	+ } )
	210	+ );
	211	+ $css_generator->add_class_styles(
	212	+ '{{WRAPPER}} .swiper-pagination-bullet:hover',
	213	+ $this->get_pagination_color_hover_css( $attributes ),
	214	+ $this->get_pagination_color_hover_css( $attributes, 'Tablet' ),
	215	+ $this->get_pagination_color_hover_css( $attributes, 'Mobile' ),
	216	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	217	+ return $this->get_pagination_color_hover_css( $attributes, $device );
	218	+ } )
	219	+ );
	220	+
	221	+ $css_generator->add_class_styles(
	222	+ '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
	223	+ $this->get_pagination_active_color_css( $attributes ),
	224	+ $this->get_pagination_active_color_css( $attributes, 'Tablet' ),
	225	+ $this->get_pagination_active_color_css( $attributes, 'Mobile' ),
	226	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	227	+ return $this->get_pagination_active_color_css( $attributes, $device );
	228	+ } )
	229	+ );
	230	+ $css_generator->add_class_styles(
	231	+ '{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active:hover',
	232	+ $this->get_pagination_active_color_hover_css( $attributes ),
	233	+ $this->get_pagination_active_color_hover_css( $attributes, 'Tablet' ),
	234	+ $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' ),
	235	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	236	+ return $this->get_pagination_active_color_hover_css( $attributes, $device );
	237	+ } )
	238	+ );
	239	+
	240	+ $css_generator->add_class_styles(
	241	+ '{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
	242	+ $this->get_navigation_icon_svg_css( $attributes ),
	243	+ $this->get_navigation_icon_svg_css( $attributes, 'Tablet' ),
	244	+ $this->get_navigation_icon_svg_css( $attributes, 'Mobile' ),
	245	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	246	+ return $this->get_navigation_icon_svg_css( $attributes, $device );
	247	+ } )
	248	+ );
	249	+ $css_generator->add_class_styles(
	250	+ '{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon:hover',
	251	+ $this->get_navigation_icon_svg_hover_css( $attributes ),
	252	+ $this->get_navigation_icon_svg_hover_css( $attributes, 'Tablet' ),
	253	+ $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' ),
	254	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	255	+ return $this->get_navigation_icon_svg_hover_css( $attributes, $device );
	256	+ } )
	257	+ );
	258	+ return $css_generator->generate_css();
	259	+ }
	260	+ public function build_css( $attributes ) {
	261	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	262	+ return $this->build_css_v2( $attributes );
	263	+ }
	264	+ return $this->build_css_v1( $attributes );
	265	+ }
	266	+
	267	+ public function get_carousel_css( $attributes, $device = '' ) {
	268	+ $carousel_css = [];
	269	+ // Temporary approch instead of attribute migration. Might remove it in future
	270	+ $verticalAlign = isset( $attributes['verticalAlign'][ 'value' . $device ] ) ? $attributes['verticalAlign'][ 'value' . $device ] : '';
	271	+ if (
	272	+ ! isset( $attributes['verticalAlign'] )
	273	+ || (
	274	+ $attributes['verticalAlignment'] !== '' && $attributes['verticalAlignment'] !== 'center'
	275	+ )
	276	+ ) {
	277	+ $attributes['verticalAlign'][ 'value' . $device ] = $attributes['verticalAlignment'];
	278	+ $attributes['verticalAlignment'] = '';
	279	+ } elseif (
	280	+ $attributes['verticalAlignment'] !== '' && $attributes['verticalAlignment'] === 'center'
	281	+ ) {
	282	+ $attributes['verticalAlignment'] = '';
	283	+ }
	284	+ // Temporary approch instead of attribute migration. Might remove it in future
	285	+
	286	+ if ( ! empty( $attributes['verticalAlign'][ 'value' . $device ] ) ) {
	287	+ $carousel_css['align-items'] = $attributes['verticalAlign'][ 'value' . $device ];
	288	+ }
	289	+
	290	+ return array_merge(
	291	+ Range::get_css([
	292	+ 'attributeValue' => $attributes['carouselHeight'],
	293	+ 'attribute_object_key' => 'value',
	294	+ 'isResponsive' => true,
	295	+ 'defaultValue' => 300,
	296	+ 'hasUnit' => true,
	297	+ 'unitDefaultValue' => 'px',
	298	+ 'property' => 'min-height',
	299	+ 'device' => $device,
	300	+ ]),
	301	+ $carousel_css,
	302	+ );
	303	+ }
	304	+
	305	+
	306	+ public function get_navigation_button_css( $attributes, $device = '' ) {
	307	+ $navigation_button_css = [];
	308	+
	309	+ return array_merge(
	310	+ Range::get_css([
	311	+ 'attributeValue' => $attributes['navigationIconPositionY'],
	312	+ 'attribute_object_key' => 'value',
	313	+ 'defaultValue' => 50,
	314	+ 'isResponsive' => true,
	315	+ 'hasUnit' => true,
	316	+ 'unitDefaultValue' => '%',
	317	+ 'property' => 'top',
	318	+ 'device' => $device,
	319	+ ]),
	320	+ $navigation_button_css,
	321	+ );
	322	+ }
	323	+
	324	+
	325	+ public function get_navigation_prev_button_css( $attributes, $device = '' ) {
	326	+ $navigation_prev_button_css = [];
	327	+
	328	+ return array_merge(
	329	+ Range::get_css([
	330	+ 'attributeValue' => $attributes['navigationIconPositionPrevX'],
	331	+ 'attribute_object_key' => 'value',
	332	+ 'defaultValue' => -3,
	333	+ 'hasUnit' => true,
	334	+ 'isResponsive' => true,
	335	+ 'unitDefaultValue' => '%',
	336	+ 'property' => 'left',
	337	+ 'device' => $device,
	338	+ ]),
	339	+ $navigation_prev_button_css,
	340	+ );
	341	+ }
	342	+
	343	+ public function get_navigation_next_button_css( $attributes, $device = '' ) {
	344	+ $navigation_next_button_css = [];
	345	+
	346	+ return array_merge(
	347	+ Range::get_css([
	348	+ 'attributeValue' => $attributes['navigationIconPositionNextX'],
	349	+ 'attribute_object_key' => 'value',
	350	+ 'defaultValue' => -3,
	351	+ 'isResponsive' => true,
	352	+ 'hasUnit' => true,
	353	+ 'unitDefaultValue' => '%',
	354	+ 'property' => 'right',
	355	+ 'device' => $device,
	356	+ ]),
	357	+ $navigation_next_button_css,
	358	+ );
	359	+ }
	360	+
	361	+
	362	+ public function get_navigation_icon_css( $attributes, $device = '' ) {
	363	+ $navigation_icon_css = [];
	364	+
	365	+ return array_merge(
	366	+ Range::get_css([
	367	+ 'attributeValue' => $attributes['navigationIconSize'],
	368	+ 'attribute_object_key' => 'value',
	369	+ 'defaultValue' => 35,
	370	+ 'isResponsive' => true,
	371	+ 'hasUnit' => true,
	372	+ 'unitDefaultValue' => 'px',
	373	+ 'property' => 'font-size',
	374	+ 'device' => $device,
	375	+ ]),
	376	+ $navigation_icon_css,
	377	+ );
	378	+ }
	379	+
	380	+
	381	+ public function get_navigation_icon_svg_css( $attributes, $device = '' ) {
	382	+ $navigation_icon_svg_css = [];
	383	+ if ( isset( $attributes['navigationIconColor'] ) ) {
	384	+ $navigation_icon_svg_css['fill'] = Color::get_css( isset( $attributes['navigationIconColor'] ) ? $attributes['navigationIconColor'] : '' );
	385	+ };
	386	+ if ( isset( $attributes['navigationIconBgColor'] ) ) {
	387	+ $navigation_icon_svg_css['background-color'] = Color::get_css( isset( $attributes['navigationIconBgColor'] ) ? $attributes['navigationIconBgColor'] : '' );
	388	+ };
	389	+ return array_merge(
	390	+ $navigation_icon_svg_css,
	391	+ Dimensions::get_css( $this->with_custom_device_dimension_keys( $attributes['navigationIconPadding'], $device ), 'padding', $device ),
	392	+ Border::get_css( $attributes['navigationIconBorder'], '', $device ),
	393	+ BoxShadow::get_css( $attributes['navigationIconBoxShadow'], $device ),
	394	+ );
	395	+ }
	396	+ public function get_navigation_icon_svg_hover_css( $attributes, $device = '' ) {
	397	+ $navigation_icon_svg_hover_css = [];
	398	+ if ( isset( $attributes['navigationIconColorH'] ) ) {
	399	+ $navigation_icon_svg_hover_css['fill'] = Color::get_css( isset( $attributes['navigationIconColorH'] ) ? $attributes['navigationIconColorH'] : '' );
	400	+ };
	401	+ if ( isset( $attributes['navigationIconBgColorH'] ) ) {
	402	+ $navigation_icon_svg_hover_css['background-color'] = Color::get_css( isset( $attributes['navigationIconBgColorH'] ) ? $attributes['navigationIconBgColorH'] : '' );
	403	+ };
	404	+ return array_merge(
	405	+ Range::get_css([
	406	+ 'attributeValue' => $attributes['navigationIconTransition'],
	407	+ 'attribute_object_key' => 'value',
	408	+ 'defaultValue' => 10,
	409	+ 'unitDefaultValue' => 's',
	410	+ 'property' => 'transition-duration',
	411	+ 'device' => $device,
	412	+ ]),
	413	+ $navigation_icon_svg_hover_css,
	414	+ Border::get_hover_css( $attributes['navigationIconBorder'], '', $device ),
	415	+ BoxShadow::get_hover_css( $attributes['navigationIconBoxShadow'], '', $device ),
	416	+ );
	417	+ }
	418	+
	419	+ public function get_pagination_parent_css( $attributes, $device = '' ) {
	420	+ return array_merge(
	421	+ Range::get_css([
	422	+ 'attributeValue' => $attributes['paginationPositionX'],
	423	+ 'attribute_object_key' => 'value',
	424	+ 'defaultValue' => 47,
	425	+ 'isResponsive' => true,
	426	+ 'hasUnit' => true,
	427	+ 'unitDefaultValue' => '%',
	428	+ 'property' => 'left',
	429	+ 'device' => $device,
	430	+ ]),
	431	+ Range::get_css([
	432	+ 'attributeValue' => $attributes['paginationPositionY'],
	433	+ 'attribute_object_key' => 'value',
	434	+ 'defaultValue' => 100,
	435	+ 'isResponsive' => true,
	436	+ 'hasUnit' => true,
	437	+ 'unitDefaultValue' => '%',
	438	+ 'property' => 'top',
	439	+ 'device' => $device,
	440	+ ]),
	441	+ );
	442	+ }
	443	+ public function get_pagination_color_css( $attributes, $device = '' ) {
	444	+ $pagination_color_css = [];
	445	+ $type = isset( $attributes['paginationType'] ) ? $attributes['paginationType'] : 'default';
	446	+ $pagination_color_css = [];
	447	+ if ( isset( $attributes['paginationColor'] ) ) {
	448	+ $color = Color::get_css( $attributes['paginationColor'] );
	449	+ if ( $type === 'default' ) {
	450	+ $pagination_color_css['background-color'] = $color;
	451	+ } elseif ( $type === 'border1' || $type === 'border3' ) {
	452	+ $pagination_color_css['border-color'] = $color;
	453	+ $pagination_color_css['background-color'] = 'transparent';
	454	+ } elseif ( $type === 'border2' ) {
	455	+ $pagination_color_css['background-color'] = $color;
	456	+ $pagination_color_css['border-color'] = $color;
	457	+ }
	458	+ }
	459	+ if ( $type === 'border3' ) {
	460	+ $dims = $this->get_ellipse_dims( $attributes['paginationSize'], $device );
	461	+ $pagination_color_css['width'] = $dims['width'];
	462	+ $pagination_color_css['height'] = $dims['height'];
	463	+ $pagination_color_css['border-radius'] = '9999px';
	464	+ }
	465	+ return array_merge(
	466	+ $pagination_color_css,
	467	+ ( $type === 'border3' ? [] : Range::get_css([
	468	+ 'attributeValue' => $attributes['paginationSize'],
	469	+ 'attribute_object_key' => 'value',
	470	+ 'defaultValue' => 8,
	471	+ 'isResponsive' => true,
	472	+ 'hasUnit' => true,
	473	+ 'unitDefaultValue' => 'px',
	474	+ 'property' => 'width',
	475	+ 'device' => $device,
	476	+ ]) ),
	477	+ ( $type === 'border3' ? [] : Range::get_css([
	478	+ 'attributeValue' => $attributes['paginationSize'],
	479	+ 'attribute_object_key' => 'value',
	480	+ 'defaultValue' => 8,
	481	+ 'isResponsive' => true,
	482	+ 'hasUnit' => true,
	483	+ 'unitDefaultValue' => 'px',
	484	+ 'property' => 'height',
	485	+ 'device' => $device,
	486	+ ]) ),
	487	+ Border::get_css( $attributes['paginationBorder'], '', $device ),
	488	+ );
	489	+ }
	490	+ public function get_pagination_color_hover_css( $attributes, $device = '' ) {
	491	+ $pagination_color_css = [];
	492	+ if ( isset( $attributes['paginationHoverColor'] ) ) {
	493	+ $pagination_color_css['background-color'] = $attributes['paginationHoverColor'];
	494	+ };
	495	+ $type = isset( $attributes['paginationType'] ) ? $attributes['paginationType'] : 'default';
	496	+ $pagination_color_css = [];
	497	+ if ( isset( $attributes['paginationHoverColor'] ) ) {
	498	+ $color = Color::get_css( $attributes['paginationHoverColor'] );
	499	+ if ( $type === 'default' ) {
	500	+ $pagination_color_css['background-color'] = $color;
	501	+ } elseif ( $type === 'border1' || $type === 'border3' ) {
	502	+ $pagination_color_css['border-color'] = $color;
	503	+ $pagination_color_css['background-color'] = $color;
	504	+ } elseif ( $type === 'border2' ) {
	505	+ $pagination_color_css['background-color'] = 'transparent';
	506	+ $pagination_color_css['border-color'] = $color;
	507	+ }
	508	+ }
	509	+ if ( $type === 'border3' ) {
	510	+ $dims = $this->get_ellipse_dims( $attributes['paginationHoverSize'], $device );
	511	+ $pagination_color_css['width'] = $dims['width'];
	512	+ $pagination_color_css['height'] = $dims['height'];
	513	+ $pagination_color_css['border-radius'] = '9999px';
	514	+ }
	515	+ return array_merge(
	516	+ $pagination_color_css,
	517	+ ( $type === 'border3' ? [] : Range::get_css([
	518	+ 'attributeValue' => $attributes['paginationHoverSize'],
	519	+ 'attribute_object_key' => 'value',
	520	+ 'defaultValue' => 8,
	521	+ 'isResponsive' => true,
	522	+ 'hasUnit' => true,
	523	+ 'unitDefaultValue' => 'px',
	524	+ 'property' => 'width',
	525	+ 'device' => $device,
	526	+ ]) ),
	527	+ ( $type === 'border3' ? [] : Range::get_css([
	528	+ 'attributeValue' => $attributes['paginationHoverSize'],
	529	+ 'attribute_object_key' => 'value',
	530	+ 'defaultValue' => 8,
	531	+ 'isResponsive' => true,
	532	+ 'hasUnit' => true,
	533	+ 'unitDefaultValue' => 'px',
	534	+ 'property' => 'height',
	535	+ 'device' => $device,
	536	+ ]) ),
	537	+ Border::get_hover_css( $attributes['paginationBorder'], '', $device ),
	538	+ );
	539	+ }
	540	+
	541	+ public function get_pagination_active_color_css( $attributes, $device = '' ) {
	542	+ $pagination_active_color_css = [];
	543	+ $type = isset( $attributes['paginationType'] ) ? $attributes['paginationType'] : 'default';
	544	+ $pagination_active_color_css = [];
	545	+ if ( isset( $attributes['paginationActiveColor'] ) ) {
	546	+ $color = Color::get_css( $attributes['paginationActiveColor'] );
	547	+ if ( $type === 'default' ) {
	548	+ $pagination_active_color_css['background-color'] = $color;
	549	+ } elseif ( $type === 'border1' || $type === 'border3' ) {
	550	+ $pagination_active_color_css['background-color'] = $color;
	551	+ $pagination_active_color_css['border-color'] = $color;
	552	+ } elseif ( $type === 'border2' ) {
	553	+ $pagination_active_color_css['border-color'] = $color;
	554	+ $pagination_active_color_css['background-color'] = 'transparent';
	555	+ }
	556	+ }
	557	+ if ( $type === 'border3' ) {
	558	+ $dims = $this->get_ellipse_dims( $attributes['paginationActiveSize'], $device );
	559	+ $pagination_active_color_css['width'] = $dims['width'];
	560	+ $pagination_active_color_css['height'] = $dims['height'];
	561	+ $pagination_active_color_css['border-radius'] = '9999px';
	562	+ }
	563	+ return array_merge(
	564	+ $pagination_active_color_css,
	565	+ ( $type === 'border3' ? [] : Range::get_css([
	566	+ 'attributeValue' => $attributes['paginationActiveSize'],
	567	+ 'attribute_object_key' => 'value',
	568	+ 'defaultValue' => 8,
	569	+ 'isResponsive' => true,
	570	+ 'hasUnit' => true,
	571	+ 'unitDefaultValue' => 'px',
	572	+ 'property' => 'width',
	573	+ 'device' => $device,
	574	+ ]) ),
	575	+ ( $type === 'border3' ? [] : Range::get_css([
	576	+ 'attributeValue' => $attributes['paginationActiveSize'],
	577	+ 'attribute_object_key' => 'value',
	578	+ 'defaultValue' => 8,
	579	+ 'isResponsive' => true,
	580	+ 'hasUnit' => true,
	581	+ 'unitDefaultValue' => 'px',
	582	+ 'property' => 'height',
	583	+ 'device' => $device,
	584	+ ]) ),
	585	+ Border::get_css( $attributes['activePaginationBorder'], '', $device ),
	586	+ );
	587	+ }
	588	+ public function get_pagination_active_color_hover_css( $attributes, $device = '' ) {
	589	+ $pagination_active_color_css = [];
	590	+ $type = isset( $attributes['paginationType'] ) ? $attributes['paginationType'] : 'default';
	591	+ $pagination_active_color_css = [];
	592	+ if ( isset( $attributes['paginationActiveHoverColor'] ) ) {
	593	+ $color = Color::get_css( $attributes['paginationActiveHoverColor'] );
	594	+ if ( $type === 'default' ) {
	595	+ $pagination_active_color_css['background-color'] = $color;
	596	+ } elseif ( $type === 'border1' || $type === 'border3' ) {
	597	+ $pagination_active_color_css['border-color'] = $color;
	598	+ $pagination_active_color_css['background-color'] = 'transparent';
	599	+ } elseif ( $type === 'border2' ) {
	600	+ $pagination_active_color_css['background-color'] = $color;
	601	+ $pagination_active_color_css['border-color'] = $color;
	602	+ }
	603	+ }
	604	+ if ( $type === 'border3' ) {
	605	+ $dims = $this->get_ellipse_dims( $attributes['paginationActiveHoverSize'], $device );
	606	+ $pagination_active_color_css['width'] = $dims['width'];
	607	+ $pagination_active_color_css['height'] = $dims['height'];
	608	+ $pagination_active_color_css['border-radius'] = '9999px';
	609	+ }
	610	+
	611	+ return array_merge(
	612	+ $pagination_active_color_css,
	613	+ ( $type === 'border3' ? [] : Range::get_css([
	614	+ 'attributeValue' => $attributes['paginationActiveHoverSize'],
	615	+ 'attribute_object_key' => 'value',
	616	+ 'defaultValue' => 8,
	617	+ 'isResponsive' => true,
	618	+ 'hasUnit' => true,
	619	+ 'unitDefaultValue' => 'px',
	620	+ 'property' => 'width',
	621	+ 'device' => $device,
	622	+ ]) ),
	623	+ ( $type === 'border3' ? [] : Range::get_css([
	624	+ 'attributeValue' => $attributes['paginationActiveHoverSize'],
	625	+ 'attribute_object_key' => 'value',
	626	+ 'defaultValue' => 8,
	627	+ 'isResponsive' => true,
	628	+ 'hasUnit' => true,
	629	+ 'unitDefaultValue' => 'px',
	630	+ 'property' => 'height',
	631	+ 'device' => $device,
	632	+ ]) ),
	633	+ Border::get_hover_css( $attributes['activePaginationBorder'], '', $device ),
	634	+ );
	635	+ }
	636	+
	637	+ /**
	638	+ * Dimensions only knows the Tablet/Mobile members, so a custom breakpoint
	639	+ * suffix (or the generator's probe suffix) reads keys that were never
	640	+ * stored and raises "Undefined array key" notices. Seed those members as
	641	+ * unset; stored values still win, so the emitted CSS is unchanged.
	642	+ */
	643	+ private function with_custom_device_dimension_keys( $value, $device ) {
	644	+ if ( ! is_array( $value ) || in_array( $device, [ '', 'Tablet', 'Mobile' ], true ) ) {
	645	+ return $value;
	646	+ }
	647	+ return array_merge(
	648	+ [
	649	+ 'isLinked' . $device => false,
	650	+ 'common' . $device => '',
	651	+ 'top' . $device => '',
	652	+ 'right' . $device => '',
	653	+ 'bottom' . $device => '',
	654	+ 'left' . $device => '',
	655	+ ],
	656	+ $value
	657	+ );
	658	+ }
	659	+
	660	+ private function get_ellipse_dims( $sizeAttr, $device = '', $default = 8, $ratio = 1.8 ) {
	661	+ $vKey = 'value' . $device;
	662	+ $uKey = 'valueUnit' . $device;
	663	+
	664	+ $v = isset( $sizeAttr[ $vKey ] ) ? floatval( $sizeAttr[ $vKey ] )
	665	+ : ( isset( $sizeAttr['value'] ) ? floatval( $sizeAttr['value'] ) : $default );
	666	+ $u = isset( $sizeAttr[ $uKey ] ) ? $sizeAttr[ $uKey ]
	667	+ : ( isset( $sizeAttr['valueUnit'] ) ? $sizeAttr['valueUnit'] : 'px' );
	668	+
	669	+ return [
	670	+ 'height' => $v . $u,
	671	+ 'width' => ( $v * $ratio ) . $u,
	672	+ ];
	673	+ }
	674	+
	675	+
	676	+}