← All changes | includes/blocks/carousel/block.php +211 -15 2.11.1 → 2.16.0 View file →

		@@ -30,14 +30,38 @@
30	30	'{{WRAPPER}} .ablocks-carousel-swiper .swiper-wrapper',
31	31	$this->get_carousel_css( $attributes ),
32	32	$this->get_carousel_css( $attributes, 'Tablet' ),
33	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	+ } )
34	37	);
35	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(
36	57	'{{WRAPPER}} .ablocks-carousel-navigation__button',
37	58	$this->get_navigation_button_css( $attributes ),
38	59	$this->get_navigation_button_css( $attributes, 'Tablet' ),
39	60	$this->get_navigation_button_css( $attributes, 'Mobile' ),
	61	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	62	+ return $this->get_navigation_button_css( $attributes, $device );
	63	+ } )
40	64	);
41	65	$css_generator->add_class_styles(
42	66	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
43	67	$this->get_navigation_next_button_css( $attributes ),
		@@ -42,8 +66,11 @@
42	66	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
43	67	$this->get_navigation_next_button_css( $attributes ),
44	68	$this->get_navigation_next_button_css( $attributes, 'Tablet' ),
45	69	$this->get_navigation_next_button_css( $attributes, 'Mobile' ),
	70	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	71	+ return $this->get_navigation_next_button_css( $attributes, $device );
	72	+ } )
46	73	);
47	74	$css_generator->add_class_styles(
48	75	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
49	76	$this->get_navigation_prev_button_css( $attributes ),
		@@ -48,8 +75,11 @@
48	75	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
49	76	$this->get_navigation_prev_button_css( $attributes ),
50	77	$this->get_navigation_prev_button_css( $attributes, 'Tablet' ),
51	78	$this->get_navigation_prev_button_css( $attributes, 'Mobile' ),
	79	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	80	+ return $this->get_navigation_prev_button_css( $attributes, $device );
	81	+ } )
52	82	);
53	83	$css_generator->add_class_styles(
54	84	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
55	85	$this->get_navigation_icon_css( $attributes ),
		@@ -54,8 +84,11 @@
54	84	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
55	85	$this->get_navigation_icon_css( $attributes ),
56	86	$this->get_navigation_icon_css( $attributes, 'Tablet' ),
57	87	$this->get_navigation_icon_css( $attributes, 'Mobile' ),
	88	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	89	+ return $this->get_navigation_icon_css( $attributes, $device );
	90	+ } )
58	91	);
59	92
60	93	$css_generator->add_class_styles(
61	94	'{{WRAPPER}} .ablocks-carousel-pagination',
		@@ -60,21 +93,30 @@
60	93	$css_generator->add_class_styles(
61	94	'{{WRAPPER}} .ablocks-carousel-pagination',
62	95	$this->get_pagination_parent_css( $attributes ),
63	96	$this->get_pagination_parent_css( $attributes, 'Tablet' ),
64		- $this->get_pagination_parent_css( $attributes, 'Mobile' )
	97	+ $this->get_pagination_parent_css( $attributes, 'Mobile' ),
	98	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	99	+ return $this->get_pagination_parent_css( $attributes, $device );
	100	+ } )
65	101	);
66	102	$css_generator->add_class_styles(
67	103	'{{WRAPPER}} .swiper-pagination-bullet',
68	104	$this->get_pagination_color_css( $attributes ),
69	105	$this->get_pagination_color_css( $attributes, 'Tablet' ),
70		- $this->get_pagination_color_css( $attributes, 'Mobile' )
	106	+ $this->get_pagination_color_css( $attributes, 'Mobile' ),
	107	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	108	+ return $this->get_pagination_color_css( $attributes, $device );
	109	+ } )
71	110	);
72	111	$css_generator->add_class_styles(
73	112	'{{WRAPPER}} .swiper-pagination-bullet:hover',
74	113	$this->get_pagination_color_hover_css( $attributes ),
75	114	$this->get_pagination_color_hover_css( $attributes, 'Tablet' ),
76		- $this->get_pagination_color_hover_css( $attributes, 'Mobile' )
	115	+ $this->get_pagination_color_hover_css( $attributes, 'Mobile' ),
	116	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	117	+ return $this->get_pagination_color_hover_css( $attributes, $device );
	118	+ } )
77	119	);
78	120
79	121	$css_generator->add_class_styles(
80	122	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
		@@ -79,15 +121,21 @@
79	121	$css_generator->add_class_styles(
80	122	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
81	123	$this->get_pagination_active_color_css( $attributes ),
82	124	$this->get_pagination_active_color_css( $attributes, 'Tablet' ),
83		- $this->get_pagination_active_color_css( $attributes, 'Mobile' )
	125	+ $this->get_pagination_active_color_css( $attributes, 'Mobile' ),
	126	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	127	+ return $this->get_pagination_active_color_css( $attributes, $device );
	128	+ } )
84	129	);
85	130	$css_generator->add_class_styles(
86	131	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active:hover',
87	132	$this->get_pagination_active_color_hover_css( $attributes ),
88	133	$this->get_pagination_active_color_hover_css( $attributes, 'Tablet' ),
89		- $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' )
	134	+ $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' ),
	135	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	136	+ return $this->get_pagination_active_color_hover_css( $attributes, $device );
	137	+ } )
90	138	);
91	139
92	140	$css_generator->add_class_styles(
93	141	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
		@@ -92,15 +140,21 @@
92	140	$css_generator->add_class_styles(
93	141	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
94	142	$this->get_navigation_icon_svg_css( $attributes ),
95	143	$this->get_navigation_icon_svg_css( $attributes, 'Tablet' ),
96		- $this->get_navigation_icon_svg_css( $attributes, 'Mobile' )
	144	+ $this->get_navigation_icon_svg_css( $attributes, 'Mobile' ),
	145	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	146	+ return $this->get_navigation_icon_svg_css( $attributes, $device );
	147	+ } )
97	148	);
98	149	$css_generator->add_class_styles(
99	150	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon:hover',
100	151	$this->get_navigation_icon_svg_hover_css( $attributes ),
101	152	$this->get_navigation_icon_svg_hover_css( $attributes, 'Tablet' ),
102		- $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' )
	153	+ $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' ),
	154	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	155	+ return $this->get_navigation_icon_svg_hover_css( $attributes, $device );
	156	+ } )
103	157	);
104	158	return $css_generator->generate_css();
105	159	}
106	160
		@@ -112,14 +166,38 @@
112	166	'{{WRAPPER}} .ablocks-carousel-swiper .swiper-wrapper',
113	167	$this->get_carousel_css( $attributes ),
114	168	$this->get_carousel_css( $attributes, 'Tablet' ),
115	169	$this->get_carousel_css( $attributes, 'Mobile' ),
	170	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	171	+ return $this->get_carousel_css( $attributes, $device );
	172	+ } )
116	173	);
117	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(
118	193	'{{WRAPPER}} .ablocks-carousel-navigation__button',
119	194	$this->get_navigation_button_css( $attributes ),
120	195	$this->get_navigation_button_css( $attributes, 'Tablet' ),
121	196	$this->get_navigation_button_css( $attributes, 'Mobile' ),
	197	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	198	+ return $this->get_navigation_button_css( $attributes, $device );
	199	+ } )
122	200	);
123	201	$css_generator->add_class_styles(
124	202	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
125	203	$this->get_navigation_next_button_css( $attributes ),
		@@ -124,8 +202,11 @@
124	202	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
125	203	$this->get_navigation_next_button_css( $attributes ),
126	204	$this->get_navigation_next_button_css( $attributes, 'Tablet' ),
127	205	$this->get_navigation_next_button_css( $attributes, 'Mobile' ),
	206	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	207	+ return $this->get_navigation_next_button_css( $attributes, $device );
	208	+ } )
128	209	);
129	210	$css_generator->add_class_styles(
130	211	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
131	212	$this->get_navigation_prev_button_css( $attributes ),
		@@ -130,8 +211,11 @@
130	211	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
131	212	$this->get_navigation_prev_button_css( $attributes ),
132	213	$this->get_navigation_prev_button_css( $attributes, 'Tablet' ),
133	214	$this->get_navigation_prev_button_css( $attributes, 'Mobile' ),
	215	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	216	+ return $this->get_navigation_prev_button_css( $attributes, $device );
	217	+ } )
134	218	);
135	219	$css_generator->add_class_styles(
136	220	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
137	221	$this->get_navigation_icon_css( $attributes ),
		@@ -136,8 +220,11 @@
136	220	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
137	221	$this->get_navigation_icon_css( $attributes ),
138	222	$this->get_navigation_icon_css( $attributes, 'Tablet' ),
139	223	$this->get_navigation_icon_css( $attributes, 'Mobile' ),
	224	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	225	+ return $this->get_navigation_icon_css( $attributes, $device );
	226	+ } )
140	227	);
141	228
142	229	$css_generator->add_class_styles(
143	230	'{{WRAPPER}} .ablocks-carousel-pagination',
		@@ -142,21 +229,30 @@
142	229	$css_generator->add_class_styles(
143	230	'{{WRAPPER}} .ablocks-carousel-pagination',
144	231	$this->get_pagination_parent_css( $attributes ),
145	232	$this->get_pagination_parent_css( $attributes, 'Tablet' ),
146		- $this->get_pagination_parent_css( $attributes, 'Mobile' )
	233	+ $this->get_pagination_parent_css( $attributes, 'Mobile' ),
	234	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	235	+ return $this->get_pagination_parent_css( $attributes, $device );
	236	+ } )
147	237	);
148	238	$css_generator->add_class_styles(
149	239	'{{WRAPPER}} .swiper-pagination-bullet',
150	240	$this->get_pagination_color_css( $attributes ),
151	241	$this->get_pagination_color_css( $attributes, 'Tablet' ),
152		- $this->get_pagination_color_css( $attributes, 'Mobile' )
	242	+ $this->get_pagination_color_css( $attributes, 'Mobile' ),
	243	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	244	+ return $this->get_pagination_color_css( $attributes, $device );
	245	+ } )
153	246	);
154	247	$css_generator->add_class_styles(
155	248	'{{WRAPPER}} .swiper-pagination-bullet:hover',
156	249	$this->get_pagination_color_hover_css( $attributes ),
157	250	$this->get_pagination_color_hover_css( $attributes, 'Tablet' ),
158		- $this->get_pagination_color_hover_css( $attributes, 'Mobile' )
	251	+ $this->get_pagination_color_hover_css( $attributes, 'Mobile' ),
	252	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	253	+ return $this->get_pagination_color_hover_css( $attributes, $device );
	254	+ } )
159	255	);
160	256
161	257	$css_generator->add_class_styles(
162	258	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
		@@ -161,15 +257,21 @@
161	257	$css_generator->add_class_styles(
162	258	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
163	259	$this->get_pagination_active_color_css( $attributes ),
164	260	$this->get_pagination_active_color_css( $attributes, 'Tablet' ),
165		- $this->get_pagination_active_color_css( $attributes, 'Mobile' )
	261	+ $this->get_pagination_active_color_css( $attributes, 'Mobile' ),
	262	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	263	+ return $this->get_pagination_active_color_css( $attributes, $device );
	264	+ } )
166	265	);
167	266	$css_generator->add_class_styles(
168	267	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active:hover',
169	268	$this->get_pagination_active_color_hover_css( $attributes ),
170	269	$this->get_pagination_active_color_hover_css( $attributes, 'Tablet' ),
171		- $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' )
	270	+ $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' ),
	271	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	272	+ return $this->get_pagination_active_color_hover_css( $attributes, $device );
	273	+ } )
172	274	);
173	275
174	276	$css_generator->add_class_styles(
175	277	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
		@@ -174,15 +276,21 @@
174	276	$css_generator->add_class_styles(
175	277	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
176	278	$this->get_navigation_icon_svg_css( $attributes ),
177	279	$this->get_navigation_icon_svg_css( $attributes, 'Tablet' ),
178		- $this->get_navigation_icon_svg_css( $attributes, 'Mobile' )
	280	+ $this->get_navigation_icon_svg_css( $attributes, 'Mobile' ),
	281	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	282	+ return $this->get_navigation_icon_svg_css( $attributes, $device );
	283	+ } )
179	284	);
180	285	$css_generator->add_class_styles(
181	286	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon:hover',
182	287	$this->get_navigation_icon_svg_hover_css( $attributes ),
183	288	$this->get_navigation_icon_svg_hover_css( $attributes, 'Tablet' ),
184		- $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' )
	289	+ $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' ),
	290	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) {
	291	+ return $this->get_navigation_icon_svg_hover_css( $attributes, $device );
	292	+ } )
185	293	);
186	294	return $css_generator->generate_css();
187	295	}
188	296	public function build_css( $attributes ) {
		@@ -214,8 +322,14 @@
214	322	if ( ! empty( $attributes['verticalAlign'][ 'value' . $device ] ) ) {
215	323	$carousel_css['align-items'] = $attributes['verticalAlign'][ 'value' . $device ];
216	324	}
217	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	+
218	332	return array_merge(
219	333	Range::get_css([
220	334	'attributeValue' => $attributes['carouselHeight'],
221	335	'attribute_object_key' => 'value',
		@@ -315,9 +429,9 @@
315	429	$navigation_icon_svg_css['background-color'] = Color::get_css( isset( $attributes['navigationIconBgColor'] ) ? $attributes['navigationIconBgColor'] : '' );
316	430	};
317	431	return array_merge(
318	432	$navigation_icon_svg_css,
319		- Dimensions::get_css( $attributes['navigationIconPadding'], 'padding', $device ),
	433	+ Dimensions::get_css( $this->with_custom_device_dimension_keys( $attributes['navigationIconPadding'], $device ), 'padding', $device ),
320	434	Border::get_css( $attributes['navigationIconBorder'], '', $device ),
321	435	BoxShadow::get_css( $attributes['navigationIconBoxShadow'], $device ),
322	436	);
323	437	}
		@@ -510,8 +624,9 @@
510	624	'property' => 'height',
511	625	'device' => $device,
512	626	]) ),
513	627	Border::get_css( $attributes['activePaginationBorder'], '', $device ),
	628	+ $this->get_pagination_active_width_css( $attributes, $device ),
514	629	);
515	630	}
516	631	public function get_pagination_active_color_hover_css( $attributes, $device = '' ) {
517	632	$pagination_active_color_css = [];
		@@ -558,8 +673,89 @@
558	673	'property' => 'height',
559	674	'device' => $device,
560	675	]) ),
561	676	Border::get_hover_css( $attributes['activePaginationBorder'], '', $device ),
	677	+ $this->get_pagination_active_width_css( $attributes, $device ),
	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	+ ];
	736	+ }
	737	+
	738	+ /**
	739	+ * Dimensions only knows the Tablet/Mobile members, so a custom breakpoint
	740	+ * suffix (or the generator's probe suffix) reads keys that were never
	741	+ * stored and raises "Undefined array key" notices. Seed those members as
	742	+ * unset; stored values still win, so the emitted CSS is unchanged.
	743	+ */
	744	+ private function with_custom_device_dimension_keys( $value, $device ) {
	745	+ if ( ! is_array( $value ) || in_array( $device, [ '', 'Tablet', 'Mobile' ], true ) ) {
	746	+ return $value;
	747	+ }
	748	+ return array_merge(
	749	+ [
	750	+ 'isLinked' . $device => false,
	751	+ 'common' . $device => '',
	752	+ 'top' . $device => '',
	753	+ 'right' . $device => '',
	754	+ 'bottom' . $device => '',
	755	+ 'left' . $device => '',
	756	+ ],
	757	+ $value
562	758	);
563	759	}
564	760
565	761	private function get_ellipse_dims( $sizeAttr, $device = '', $default = 8, $ratio = 1.8 ) {