← All changes | includes/blocks/carousel/block.php +110 -15 2.8.0 → 2.14.0 View file →

		@@ -30,8 +30,11 @@
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(
36	39	'{{WRAPPER}} .ablocks-carousel-navigation__button',
37	40	$this->get_navigation_button_css( $attributes ),
		@@ -36,8 +39,11 @@
36	39	'{{WRAPPER}} .ablocks-carousel-navigation__button',
37	40	$this->get_navigation_button_css( $attributes ),
38	41	$this->get_navigation_button_css( $attributes, 'Tablet' ),
39	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	+ } )
40	46	);
41	47	$css_generator->add_class_styles(
42	48	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
43	49	$this->get_navigation_next_button_css( $attributes ),
		@@ -42,8 +48,11 @@
42	48	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
43	49	$this->get_navigation_next_button_css( $attributes ),
44	50	$this->get_navigation_next_button_css( $attributes, 'Tablet' ),
45	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	+ } )
46	55	);
47	56	$css_generator->add_class_styles(
48	57	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
49	58	$this->get_navigation_prev_button_css( $attributes ),
		@@ -48,8 +57,11 @@
48	57	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
49	58	$this->get_navigation_prev_button_css( $attributes ),
50	59	$this->get_navigation_prev_button_css( $attributes, 'Tablet' ),
51	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	+ } )
52	64	);
53	65	$css_generator->add_class_styles(
54	66	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
55	67	$this->get_navigation_icon_css( $attributes ),
		@@ -54,8 +66,11 @@
54	66	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
55	67	$this->get_navigation_icon_css( $attributes ),
56	68	$this->get_navigation_icon_css( $attributes, 'Tablet' ),
57	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	+ } )
58	73	);
59	74
60	75	$css_generator->add_class_styles(
61	76	'{{WRAPPER}} .ablocks-carousel-pagination',
		@@ -60,21 +75,30 @@
60	75	$css_generator->add_class_styles(
61	76	'{{WRAPPER}} .ablocks-carousel-pagination',
62	77	$this->get_pagination_parent_css( $attributes ),
63	78	$this->get_pagination_parent_css( $attributes, 'Tablet' ),
64		- $this->get_pagination_parent_css( $attributes, 'Mobile' )
	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	+ } )
65	83	);
66	84	$css_generator->add_class_styles(
67	85	'{{WRAPPER}} .swiper-pagination-bullet',
68	86	$this->get_pagination_color_css( $attributes ),
69	87	$this->get_pagination_color_css( $attributes, 'Tablet' ),
70		- $this->get_pagination_color_css( $attributes, 'Mobile' )
	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	+ } )
71	92	);
72	93	$css_generator->add_class_styles(
73	94	'{{WRAPPER}} .swiper-pagination-bullet:hover',
74	95	$this->get_pagination_color_hover_css( $attributes ),
75	96	$this->get_pagination_color_hover_css( $attributes, 'Tablet' ),
76		- $this->get_pagination_color_hover_css( $attributes, 'Mobile' )
	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	+ } )
77	101	);
78	102
79	103	$css_generator->add_class_styles(
80	104	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
		@@ -79,15 +103,21 @@
79	103	$css_generator->add_class_styles(
80	104	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
81	105	$this->get_pagination_active_color_css( $attributes ),
82	106	$this->get_pagination_active_color_css( $attributes, 'Tablet' ),
83		- $this->get_pagination_active_color_css( $attributes, 'Mobile' )
	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	+ } )
84	111	);
85	112	$css_generator->add_class_styles(
86	113	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active:hover',
87	114	$this->get_pagination_active_color_hover_css( $attributes ),
88	115	$this->get_pagination_active_color_hover_css( $attributes, 'Tablet' ),
89		- $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' )
	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	+ } )
90	120	);
91	121
92	122	$css_generator->add_class_styles(
93	123	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
		@@ -92,15 +122,21 @@
92	122	$css_generator->add_class_styles(
93	123	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
94	124	$this->get_navigation_icon_svg_css( $attributes ),
95	125	$this->get_navigation_icon_svg_css( $attributes, 'Tablet' ),
96		- $this->get_navigation_icon_svg_css( $attributes, 'Mobile' )
	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	+ } )
97	130	);
98	131	$css_generator->add_class_styles(
99	132	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon:hover',
100	133	$this->get_navigation_icon_svg_hover_css( $attributes ),
101	134	$this->get_navigation_icon_svg_hover_css( $attributes, 'Tablet' ),
102		- $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' )
	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	+ } )
103	139	);
104	140	return $css_generator->generate_css();
105	141	}
106	142
		@@ -112,8 +148,11 @@
112	148	'{{WRAPPER}} .ablocks-carousel-swiper .swiper-wrapper',
113	149	$this->get_carousel_css( $attributes ),
114	150	$this->get_carousel_css( $attributes, 'Tablet' ),
115	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	+ } )
116	155	);
117	156	$css_generator->add_class_styles(
118	157	'{{WRAPPER}} .ablocks-carousel-navigation__button',
119	158	$this->get_navigation_button_css( $attributes ),
		@@ -118,8 +157,11 @@
118	157	'{{WRAPPER}} .ablocks-carousel-navigation__button',
119	158	$this->get_navigation_button_css( $attributes ),
120	159	$this->get_navigation_button_css( $attributes, 'Tablet' ),
121	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	+ } )
122	164	);
123	165	$css_generator->add_class_styles(
124	166	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
125	167	$this->get_navigation_next_button_css( $attributes ),
		@@ -124,8 +166,11 @@
124	166	'{{WRAPPER}} .ablocks-carousel-navigation__button--next',
125	167	$this->get_navigation_next_button_css( $attributes ),
126	168	$this->get_navigation_next_button_css( $attributes, 'Tablet' ),
127	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	+ } )
128	173	);
129	174	$css_generator->add_class_styles(
130	175	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
131	176	$this->get_navigation_prev_button_css( $attributes ),
		@@ -130,8 +175,11 @@
130	175	'{{WRAPPER}} .ablocks-carousel-navigation__button--prev',
131	176	$this->get_navigation_prev_button_css( $attributes ),
132	177	$this->get_navigation_prev_button_css( $attributes, 'Tablet' ),
133	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	+ } )
134	182	);
135	183	$css_generator->add_class_styles(
136	184	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
137	185	$this->get_navigation_icon_css( $attributes ),
		@@ -136,8 +184,11 @@
136	184	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-icon-wrap',
137	185	$this->get_navigation_icon_css( $attributes ),
138	186	$this->get_navigation_icon_css( $attributes, 'Tablet' ),
139	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	+ } )
140	191	);
141	192
142	193	$css_generator->add_class_styles(
143	194	'{{WRAPPER}} .ablocks-carousel-pagination',
		@@ -142,21 +193,30 @@
142	193	$css_generator->add_class_styles(
143	194	'{{WRAPPER}} .ablocks-carousel-pagination',
144	195	$this->get_pagination_parent_css( $attributes ),
145	196	$this->get_pagination_parent_css( $attributes, 'Tablet' ),
146		- $this->get_pagination_parent_css( $attributes, 'Mobile' )
	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	+ } )
147	201	);
148	202	$css_generator->add_class_styles(
149	203	'{{WRAPPER}} .swiper-pagination-bullet',
150	204	$this->get_pagination_color_css( $attributes ),
151	205	$this->get_pagination_color_css( $attributes, 'Tablet' ),
152		- $this->get_pagination_color_css( $attributes, 'Mobile' )
	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	+ } )
153	210	);
154	211	$css_generator->add_class_styles(
155	212	'{{WRAPPER}} .swiper-pagination-bullet:hover',
156	213	$this->get_pagination_color_hover_css( $attributes ),
157	214	$this->get_pagination_color_hover_css( $attributes, 'Tablet' ),
158		- $this->get_pagination_color_hover_css( $attributes, 'Mobile' )
	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	+ } )
159	219	);
160	220
161	221	$css_generator->add_class_styles(
162	222	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
		@@ -161,15 +221,21 @@
161	221	$css_generator->add_class_styles(
162	222	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active',
163	223	$this->get_pagination_active_color_css( $attributes ),
164	224	$this->get_pagination_active_color_css( $attributes, 'Tablet' ),
165		- $this->get_pagination_active_color_css( $attributes, 'Mobile' )
	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	+ } )
166	229	);
167	230	$css_generator->add_class_styles(
168	231	'{{WRAPPER}} .swiper-pagination-bullet.swiper-pagination-bullet-active:hover',
169	232	$this->get_pagination_active_color_hover_css( $attributes ),
170	233	$this->get_pagination_active_color_hover_css( $attributes, 'Tablet' ),
171		- $this->get_pagination_active_color_hover_css( $attributes, 'Mobile' )
	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	+ } )
172	238	);
173	239
174	240	$css_generator->add_class_styles(
175	241	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
		@@ -174,15 +240,21 @@
174	240	$css_generator->add_class_styles(
175	241	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon',
176	242	$this->get_navigation_icon_svg_css( $attributes ),
177	243	$this->get_navigation_icon_svg_css( $attributes, 'Tablet' ),
178		- $this->get_navigation_icon_svg_css( $attributes, 'Mobile' )
	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	+ } )
179	248	);
180	249	$css_generator->add_class_styles(
181	250	'{{WRAPPER}} .ablocks-carousel-navigation__button .ablocks-svg-icon:hover',
182	251	$this->get_navigation_icon_svg_hover_css( $attributes ),
183	252	$this->get_navigation_icon_svg_hover_css( $attributes, 'Tablet' ),
184		- $this->get_navigation_icon_svg_hover_css( $attributes, 'Mobile' )
	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	+ } )
185	257	);
186	258	return $css_generator->generate_css();
187	259	}
188	260	public function build_css( $attributes ) {
		@@ -315,9 +387,9 @@
315	387	$navigation_icon_svg_css['background-color'] = Color::get_css( isset( $attributes['navigationIconBgColor'] ) ? $attributes['navigationIconBgColor'] : '' );
316	388	};
317	389	return array_merge(
318	390	$navigation_icon_svg_css,
319		- Dimensions::get_css( $attributes['navigationIconPadding'], 'padding', $device ),
	391	+ Dimensions::get_css( $this->with_custom_device_dimension_keys( $attributes['navigationIconPadding'], $device ), 'padding', $device ),
320	392	Border::get_css( $attributes['navigationIconBorder'], '', $device ),
321	393	BoxShadow::get_css( $attributes['navigationIconBoxShadow'], $device ),
322	394	);
323	395	}
		@@ -558,8 +630,31 @@
558	630	'property' => 'height',
559	631	'device' => $device,
560	632	]) ),
561	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
562	657	);
563	658	}
564	659
565	660	private function get_ellipse_dims( $sizeAttr, $device = '', $default = 8, $ratio = 1.8 ) {