← All changes | includes/blocks/image-comparison/block.php +153 -42 2.9.1 → 2.14.0 View file →

		@@ -1,17 +1,23 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\ImageComparison;
3	3
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
4	8	use ABlocks\Classes\BlockBaseAbstract;
5	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
6	11	use ABlocks\Controls\Alignment;
7	12	use ABlocks\Controls\Border;
8	13	use ABlocks\Controls\Range;
	14	+use ABlocks\Controls\Color;
9	15
10	16	class Block extends BlockBaseAbstract {
11	17	protected $block_name = 'image-comparison';
12	18
13		- public function build_css( $attributes ) {
	19	+ public function build_css_v1( $attributes ) {
14	20	$css_generator = new CssGenerator( $attributes );
15	21
16	22	$css_generator->add_class_styles(
17	23	'{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__before-image',
		@@ -26,9 +32,10 @@
26	32	$css_generator->add_class_styles(
27	33	'{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__slider-line',
28	34	$this->get_slider_line_horizontal_css( $attributes ),
29	35	$this->get_slider_line_horizontal_css( $attributes, 'Tablet' ),
30		- $this->get_slider_line_horizontal_css( $attributes, 'Mobile' )
	36	+ $this->get_slider_line_horizontal_css( $attributes, 'Mobile' ),
	37	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_slider_line_horizontal_css( $attributes, $device ); } )
31	38	);
32	39
33	40	$css_generator->add_class_styles(
34	41	'{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-line',
		@@ -33,9 +40,10 @@
33	40	$css_generator->add_class_styles(
34	41	'{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-line',
35	42	$this->get_slider_line_vertical_css( $attributes ),
36	43	$this->get_slider_line_vertical_css( $attributes, 'Tablet' ),
37		- $this->get_slider_line_vertical_css( $attributes, 'Mobile' )
	44	+ $this->get_slider_line_vertical_css( $attributes, 'Mobile' ),
	45	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_slider_line_vertical_css( $attributes, $device ); } )
38	46	);
39	47
40	48	$css_generator->add_class_styles(
41	49	'{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__slider-icon',
		@@ -40,9 +48,10 @@
40	48	$css_generator->add_class_styles(
41	49	'{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__slider-icon',
42	50	$this->get_horizontal_slider_icon_css( $attributes ),
43	51	$this->get_horizontal_slider_icon_css( $attributes, 'Tablet' ),
44		- $this->get_horizontal_slider_icon_css( $attributes, 'Mobile' )
	52	+ $this->get_horizontal_slider_icon_css( $attributes, 'Mobile' ),
	53	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_horizontal_slider_icon_css( $attributes, $device ); } )
45	54	);
46	55
47	56	$css_generator->add_class_styles(
48	57	'{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-icon',
		@@ -47,9 +56,10 @@
47	56	$css_generator->add_class_styles(
48	57	'{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-icon',
49	58	$this->get_vertical_slider_icon_css( $attributes ),
50	59	$this->get_vertical_slider_icon_css( $attributes, 'Tablet' ),
51		- $this->get_vertical_slider_icon_css( $attributes, 'Mobile' )
	60	+ $this->get_vertical_slider_icon_css( $attributes, 'Mobile' ),
	61	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_vertical_slider_icon_css( $attributes, $device ); } )
52	62	);
53	63
54	64	$css_generator->add_class_styles(
55	65	'{{WRAPPER}} .ablocks-image-comparison__beforeImage-label',
		@@ -54,9 +64,10 @@
54	64	$css_generator->add_class_styles(
55	65	'{{WRAPPER}} .ablocks-image-comparison__beforeImage-label',
56	66	$this->get_image_overlay_css( $attributes ),
57	67	$this->get_image_overlay_css( $attributes, 'Tablet' ),
58		- $this->get_image_overlay_css( $attributes, 'Mobile' )
	68	+ $this->get_image_overlay_css( $attributes, 'Mobile' ),
	69	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_css( $attributes, $device ); } )
59	70	);
60	71
61	72	$css_generator->add_class_styles(
62	73	'{{WRAPPER}} .ablocks-image-comparison__beforeImage-label:hover',
		@@ -61,9 +72,10 @@
61	72	$css_generator->add_class_styles(
62	73	'{{WRAPPER}} .ablocks-image-comparison__beforeImage-label:hover',
63	74	$this->get_image_overlay_hover_css( $attributes ),
64	75	$this->get_image_overlay_hover_css( $attributes, 'Tablet' ),
65		- $this->get_image_overlay_hover_css( $attributes, 'Mobile' )
	76	+ $this->get_image_overlay_hover_css( $attributes, 'Mobile' ),
	77	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_hover_css( $attributes, $device ); } )
66	78	);
67	79
68	80	$css_generator->add_class_styles(
69	81	'{{WRAPPER}} .ablocks-image-comparison__afterImage-label',
		@@ -68,9 +80,10 @@
68	80	$css_generator->add_class_styles(
69	81	'{{WRAPPER}} .ablocks-image-comparison__afterImage-label',
70	82	$this->get_image_overlay_css( $attributes ),
71	83	$this->get_image_overlay_css( $attributes, 'Tablet' ),
72		- $this->get_image_overlay_css( $attributes, 'Mobile' )
	84	+ $this->get_image_overlay_css( $attributes, 'Mobile' ),
	85	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_css( $attributes, $device ); } )
73	86	);
74	87
75	88	$css_generator->add_class_styles(
76	89	'{{WRAPPER}} .ablocks-image-comparison__afterImage-label:hover',
		@@ -75,9 +88,10 @@
75	88	$css_generator->add_class_styles(
76	89	'{{WRAPPER}} .ablocks-image-comparison__afterImage-label:hover',
77	90	$this->get_image_overlay_hover_css( $attributes ),
78	91	$this->get_image_overlay_hover_css( $attributes, 'Tablet' ),
79		- $this->get_image_overlay_hover_css( $attributes, 'Mobile' )
	92	+ $this->get_image_overlay_hover_css( $attributes, 'Mobile' ),
	93	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_hover_css( $attributes, $device ); } )
80	94	);
81	95
82	96	$css_generator->add_class_styles(
83	97	'{{WRAPPER}} .ablocks-image-comparison__overlay',
		@@ -108,8 +122,123 @@
108	122
109	123	return $css_generator->generate_css();
110	124	}
111	125
	126	+ public function build_css_v2( $attributes ) {
	127	+ $css_generator = new CssGeneratorV2( $attributes );
	128	+
	129	+ $css_generator->add_class_styles(
	130	+ '{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__before-image',
	131	+ $this->get_before_image_width_css( $attributes )
	132	+ );
	133	+
	134	+ $css_generator->add_class_styles(
	135	+ '{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__before-image',
	136	+ $this->get_before_image_height_css( $attributes )
	137	+ );
	138	+
	139	+ $css_generator->add_class_styles(
	140	+ '{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__slider-line',
	141	+ $this->get_slider_line_horizontal_css( $attributes ),
	142	+ $this->get_slider_line_horizontal_css( $attributes, 'Tablet' ),
	143	+ $this->get_slider_line_horizontal_css( $attributes, 'Mobile' ),
	144	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_slider_line_horizontal_css( $attributes, $device ); } )
	145	+ );
	146	+
	147	+ $css_generator->add_class_styles(
	148	+ '{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-line',
	149	+ $this->get_slider_line_vertical_css( $attributes ),
	150	+ $this->get_slider_line_vertical_css( $attributes, 'Tablet' ),
	151	+ $this->get_slider_line_vertical_css( $attributes, 'Mobile' ),
	152	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_slider_line_vertical_css( $attributes, $device ); } )
	153	+ );
	154	+
	155	+ $css_generator->add_class_styles(
	156	+ '{{WRAPPER}} .ablocks-image-comparison__images-container .ablocks-image-comparison__slider-icon',
	157	+ $this->get_horizontal_slider_icon_css( $attributes ),
	158	+ $this->get_horizontal_slider_icon_css( $attributes, 'Tablet' ),
	159	+ $this->get_horizontal_slider_icon_css( $attributes, 'Mobile' ),
	160	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_horizontal_slider_icon_css( $attributes, $device ); } )
	161	+ );
	162	+
	163	+ $css_generator->add_class_styles(
	164	+ '{{WRAPPER}} .ablocks-image-comparison__images-container-vertical .ablocks-image-comparison__slider-icon',
	165	+ $this->get_vertical_slider_icon_css( $attributes ),
	166	+ $this->get_vertical_slider_icon_css( $attributes, 'Tablet' ),
	167	+ $this->get_vertical_slider_icon_css( $attributes, 'Mobile' ),
	168	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_vertical_slider_icon_css( $attributes, $device ); } )
	169	+ );
	170	+
	171	+ $css_generator->add_class_styles(
	172	+ '{{WRAPPER}} .ablocks-image-comparison__beforeImage-label',
	173	+ $this->get_image_overlay_css( $attributes ),
	174	+ $this->get_image_overlay_css( $attributes, 'Tablet' ),
	175	+ $this->get_image_overlay_css( $attributes, 'Mobile' ),
	176	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_css( $attributes, $device ); } )
	177	+ );
	178	+
	179	+ $css_generator->add_class_styles(
	180	+ '{{WRAPPER}} .ablocks-image-comparison__beforeImage-label:hover',
	181	+ $this->get_image_overlay_hover_css( $attributes ),
	182	+ $this->get_image_overlay_hover_css( $attributes, 'Tablet' ),
	183	+ $this->get_image_overlay_hover_css( $attributes, 'Mobile' ),
	184	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_hover_css( $attributes, $device ); } )
	185	+ );
	186	+
	187	+ $css_generator->add_class_styles(
	188	+ '{{WRAPPER}} .ablocks-image-comparison__afterImage-label',
	189	+ $this->get_image_overlay_css( $attributes ),
	190	+ $this->get_image_overlay_css( $attributes, 'Tablet' ),
	191	+ $this->get_image_overlay_css( $attributes, 'Mobile' ),
	192	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_css( $attributes, $device ); } )
	193	+ );
	194	+
	195	+ $css_generator->add_class_styles(
	196	+ '{{WRAPPER}} .ablocks-image-comparison__afterImage-label:hover',
	197	+ $this->get_image_overlay_hover_css( $attributes ),
	198	+ $this->get_image_overlay_hover_css( $attributes, 'Tablet' ),
	199	+ $this->get_image_overlay_hover_css( $attributes, 'Mobile' ),
	200	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_image_overlay_hover_css( $attributes, $device ); } )
	201	+ );
	202	+
	203	+ $css_generator->add_class_styles(
	204	+ '{{WRAPPER}} .ablocks-image-comparison__overlay',
	205	+ $this->get_overlay_css( $attributes ),
	206	+ );
	207	+
	208	+ $css_generator->add_class_styles(
	209	+ '{{WRAPPER}} .ablocks-image-comparison__overlay--hover',
	210	+ $this->get_overlay_css( $attributes ),
	211	+ );
	212	+
	213	+ $css_generator->add_class_styles(
	214	+ '{{WRAPPER}} .ablocks-image-comparison__beforeImage-label--horizontal',
	215	+ $this->get_before_image_overlay_horizontal_css( $attributes )
	216	+ );
	217	+ $css_generator->add_class_styles(
	218	+ '{{WRAPPER}} .ablocks-image-comparison__beforeImage-label--vertical',
	219	+ $this->get_before_image_overlay_vertical_css( $attributes )
	220	+ );
	221	+ $css_generator->add_class_styles(
	222	+ '{{WRAPPER}} .ablocks-image-comparison__afterImage-label--horizontal',
	223	+ $this->get_after_image_overlay_horizontal_css( $attributes )
	224	+ );
	225	+ $css_generator->add_class_styles(
	226	+ '{{WRAPPER}} .ablocks-image-comparison__afterImage-label--vertical',
	227	+ $this->get_after_image_overlay_vertical_css( $attributes )
	228	+ );
	229	+
	230	+ return $css_generator->generate_css();
	231	+ }
	232	+
	233	+
	234	+ public function build_css( $attributes ) {
	235	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	236	+ return $this->build_css_v2( $attributes );
	237	+ }
	238	+ return $this->build_css_v1( $attributes );
	239	+ }
	240	+
112	241	public function get_before_image_width_css( $attributes ) {
113	242	$slider_position = isset( $attributes['sliderPosition'] ) ? $attributes['sliderPosition'] : 50;
114	243	return [ 'width' => $slider_position . '%' ];
115	244	}
		@@ -120,13 +249,12 @@
120	249	}
121	250
122	251	public function get_slider_line_horizontal_css( $attributes, $device = '' ) {
123	252	$slider_position = isset( $attributes['sliderPosition'] ) ? $attributes['sliderPosition'] : 50;
124		- $handle_color = isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '';
125	253	$css = [];
126	254	$css['left'] = $slider_position . '%';
127		- $css['background'] = $handle_color;
128	255	return array_merge(
	256	+ [ 'background' => Color::get_css( isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '' ) ],
129	257	Range::get_css([
130	258	'attributeValue' => $attributes['sliderBarSize'],
131	259	'attribute_object_key' => 'value',
132	260	'isResponsive' => true,
		@@ -141,14 +269,12 @@
141	269	}
142	270
143	271	public function get_slider_line_vertical_css( $attributes, $device = '' ) {
144	272	$slider_top = isset( $attributes['sliderPosition'] ) ? $attributes['sliderPosition'] : 50;
145		- $slider_background = isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '';
146		-
147	273	$css = [];
148	274	$css['top'] = $slider_top . '%';
149		- $css['background'] = $slider_background;
150	275	return array_merge(
	276	+ [ 'background' => Color::get_css( isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '' ) ],
151	277	Range::get_css([
152	278	'attributeValue' => $attributes['sliderBarSize'],
153	279	'attribute_object_key' => 'value',
154	280	'isResponsive' => true,
		@@ -163,20 +289,18 @@
163	289
164	290	public function get_horizontal_slider_icon_css( $attributes, $device = '' ) {
165	291	$slider_position = isset( $attributes['sliderPosition'] ) ? $attributes['sliderPosition'] : 50;
166	292	$slider_icon_border_size = isset( $attributes['sliderIconBorderSize'][ 'value' . $device ] ) ? $attributes['sliderIconBorderSize'][ 'value' . $device ] : [ 'value' => 2 ];
167		- $handle_color = isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '';
168		-
169	293	$border_size = is_array( $slider_icon_border_size ) && isset( $slider_icon_border_size[ 'value' . $device ] )
170	294	? $slider_icon_border_size[ 'value' . $device ]
171	295	: ( is_array( $slider_icon_border_size ) ? $slider_icon_border_size['value'] : $slider_icon_border_size );
172	296	$css = [];
173	297	$css['left'] = $slider_position . '%';
	298	+ $css['top'] = '50%';
174	299	$css['border-weight'] = 'solid';
175		- $css['border-color'] = $handle_color;
176		- $css['color'] = $handle_color;
177		-
178	300	return array_merge(
	301	+ [ 'border-color' => Color::get_css( isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '' ) ],
	302	+ [ 'color' => Color::get_css( isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '' ) ],
179	303	Range::get_css([
180	304	'attributeValue' => $attributes['sliderIconSize'],
181	305	'attribute_object_key' => 'value',
182	306	'isResponsive' => true,
		@@ -208,16 +332,15 @@
208	332	}
209	333
210	334	public function get_vertical_slider_icon_css( $attributes, $device = '' ) {
211	335	$slider_position = isset( $attributes['sliderPosition'] ) ? $attributes['sliderPosition'] : 50;
212		- $handle_color = isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '';
213		-
214	336	$css = [];
215		- $css['left'] = $slider_position . '%';
	337	+ $css['left'] = '50%';
	338	+ $css['top'] = $slider_position . '%';
216	339	$css['border-weight'] = 'solid';
217		- $css['border-color'] = $handle_color;
218		- $css['color'] = $handle_color;
219	340	return array_merge(
	341	+ [ 'border-color' => Color::get_css( isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '' ) ],
	342	+ [ 'color' => Color::get_css( isset( $attributes['handleColor'] ) ? $attributes['handleColor'] : '' ) ],
220	343	Range::get_css([
221	344	'attributeValue' => $attributes['sliderIconSize'],
222	345	'attribute_object_key' => 'value',
223	346	'isResponsive' => true,
		@@ -248,18 +371,12 @@
248	371	);
249	372	}
250	373
251	374	public function get_overlay_css( $attributes, $device = '' ) {
252		- $overlay_color = isset( $attributes['labelOverlayColor'] ) ? $attributes['labelOverlayColor'] : '';
253		-
254		- return [
255		- 'background' => $overlay_color
256		- ];
	375	+ return [ 'background' => Color::get_css( isset( $attributes['labelOverlayColor'] ) ? $attributes['labelOverlayColor'] : '' ) ];
257	376	}
258	377
259	378	public function get_image_overlay_css( $attributes, $device = '' ) {
260		- $label_bg_color = isset( $attributes['labelBgColor'] ) ? $attributes['labelBgColor'] : '';
261		- $label_text_color = isset( $attributes['labelTextColor'] ) ? $attributes['labelTextColor'] : '';
262	379	$label_border = isset( $attributes['labelBorder'] ) ? $attributes['labelBorder'] : [];
263	380	$slider_orientation = isset( $attributes['sliderOrientation'] ) ? $attributes['sliderOrientation'] : '';
264	381	$label_position = isset( $attributes['labelPosition'] ) ? $attributes['labelPosition'] : '';
265	382
		@@ -274,12 +391,12 @@
274	391	}
275	392
276	393	return array_merge(
277	394	Border::get_css( $label_border, '', $device ),
	395	+ [ 'color' => Color::get_css( isset( $attributes['labelTextColor'] ) ? $attributes['labelTextColor'] : '' ) ],
	396	+ [ 'background' => Color::get_css( isset( $attributes['labelBgColor'] ) ? $attributes['labelBgColor'] : '' ) ],
278	397	[
279		- 'background' => $label_bg_color,
280		- 'color' => $label_text_color,
281		- 'transform' => $transform, // Add transform to the CSS array
	398	+ 'transform' => $transform,
282	399	'max-width' => '30%'
283	400	]
284	401	);
285	402	}
		@@ -285,18 +402,12 @@
285	402	}
286	403
287	404
288	405	public function get_image_overlay_hover_css( $attributes, $device = '' ) {
289		- $label_hover_bg_color = isset( $attributes['labelHoverBgColor'] ) ? $attributes['labelHoverBgColor'] : '';
290		- $label_hover_text_color = isset( $attributes['labelHoverTextColor'] ) ? $attributes['labelHoverTextColor'] : '';
291		- $label_border_hover = isset( $attributes['labelBorderHover'] ) ? $attributes['labelBorderHover'] : [];
292		-
293	406	return array_merge(
294	407	Border::get_hover_css( $attributes['labelBorder'], '', $device ),
295		- [
296		- 'background' => $label_hover_bg_color,
297		- 'color' => $label_hover_text_color,
298		- ]
	408	+ [ 'color' => Color::get_css( isset( $attributes['labelHoverTextColor'] ) ? $attributes['labelHoverTextColor'] : '' ) ],
	409	+ [ 'background' => Color::get_css( isset( $attributes['labelHoverBgColor'] ) ? $attributes['labelHoverBgColor'] : '' ) ],
299	410	);
300	411	}
301	412
302	413	public function get_before_image_overlay_horizontal_css( $attributes ) {