ablocks / includes / blocks / modal / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.14.0, at includes/blocks/modal/block.php

226 lines 9.7 KB

Raw Download Zip

1	<?php
2
3	namespace ABlocks\Blocks\Modal;
4
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit;
7	}
8
9	use ABlocks\Classes\BlockBaseAbstract;
10	use ABlocks\Classes\CssGenerator;
11	use ABlocks\Controls\Range;
12	use ABlocks\Controls\Dimensions;
13	use ABlocks\Controls\Background;
14	use ABlocks\Controls\BoxShadow;
15	use ABlocks\Controls\Border;
16	use ABlocks\Classes\CssGeneratorV2;
17	use ABlocks\Controls\Color;
18
19
20	class Block extends BlockBaseAbstract {
21
22	protected $block_name = 'modal';
23
24	public function build_css_v1( $attributes ) {
25	$css_generator = new CssGenerator( $attributes, $this->block_name );
26	if ( ! empty( $attributes['popupPosition'] ) && 'popup' === $attributes['popupPosition'] && ! empty( $attributes['popupTopOffset'] ) ) {
27	$css_generator->add_class_styles(
28	'{{WRAPPER}}.ablocks-block-modal-position--popup .ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
29	[ 'margin-top' => $attributes['popupTopOffset'] . 'px' ]
30	);
31	}
32	$css_generator->add_class_styles(
33	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap',
34	$this->get_panel_main_wrapper_css( $attributes ),
35	$this->get_panel_main_wrapper_css( $attributes, 'Tablet' ),
36	$this->get_panel_main_wrapper_css( $attributes, 'Mobile' ),
37	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_main_wrapper_css( $attributes, $device ); } )
38	);
39	$css_generator->add_class_styles(
40	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
41	$this->get_panel_content_wrap_css( $attributes ),
42	$this->get_panel_content_wrap_css( $attributes, 'Tablet' ),
43	$this->get_panel_content_wrap_css( $attributes, 'Mobile' ),
44	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_css( $attributes, $device ); } )
45	);
46	$css_generator->add_class_styles(
47	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap:hover',
48	$this->get_panel_content_wrap_hover_css( $attributes ),
49	$this->get_panel_content_wrap_hover_css( $attributes, 'Tablet' ),
50	$this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' ),
51	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_hover_css( $attributes, $device ); } )
52	);
53	if ( empty( $attributes['disableCloseButton'] ) ) {
54	$css_generator->add_class_styles(
55	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close',
56	$this->get_panel_close_button_css( $attributes ),
57	$this->get_panel_close_button_css( $attributes, 'Tablet' ),
58	$this->get_panel_close_button_css( $attributes, 'Mobile' ),
59	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_close_button_css( $attributes, $device ); } )
60	);
61
62	if ( ! empty( $attributes['closeBtnColor'] ) ) {
63	$css_generator->add_class_styles(
64	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg',
65	[ 'fill' => $attributes['closeBtnColor'] ]
66	);
67	}
68	}
69	return $css_generator->generate_css();
70	}
71	public function build_css_v2( $attributes ) {
72	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
73	if ( ! empty( $attributes['popupPosition'] ) && 'popup' === $attributes['popupPosition'] && ! empty( $attributes['popupTopOffset'] ) ) {
74	$css_generator->add_class_styles(
75	'{{WRAPPER}}.ablocks-block-modal-position--popup .ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
76	[ 'margin-top' => $attributes['popupTopOffset'] . 'px' ]
77	);
78	}
79	$css_generator->add_class_styles(
80	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap',
81	$this->get_panel_main_wrapper_css( $attributes ),
82	$this->get_panel_main_wrapper_css( $attributes, 'Tablet' ),
83	$this->get_panel_main_wrapper_css( $attributes, 'Mobile' ),
84	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_main_wrapper_css( $attributes, $device ); } )
85	);
86	$css_generator->add_class_styles(
87	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap',
88	$this->get_panel_content_wrap_css( $attributes ),
89	$this->get_panel_content_wrap_css( $attributes, 'Tablet' ),
90	$this->get_panel_content_wrap_css( $attributes, 'Mobile' ),
91	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_css( $attributes, $device ); } )
92	);
93	$css_generator->add_class_styles(
94	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-content-wrap:hover',
95	$this->get_panel_content_wrap_hover_css( $attributes ),
96	$this->get_panel_content_wrap_hover_css( $attributes, 'Tablet' ),
97	$this->get_panel_content_wrap_hover_css( $attributes, 'Mobile' ),
98	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_content_wrap_hover_css( $attributes, $device ); } )
99	);
100	if ( empty( $attributes['disableCloseButton'] ) ) {
101	$css_generator->add_class_styles(
102	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close',
103	$this->get_panel_close_button_css( $attributes ),
104	$this->get_panel_close_button_css( $attributes, 'Tablet' ),
105	$this->get_panel_close_button_css( $attributes, 'Mobile' ),
106	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_close_button_css( $attributes, $device ); } )
107	);
108
109	if ( ! empty( $attributes['closeBtnColor'] ) ) {
110	$css_generator->add_class_styles(
111	'{{WRAPPER}} .ablocks-block-modal---panel-wrap.ablocks-block-modal---panel-wrap .ablocks-modal-popup-close svg',
112	[ 'fill' => $attributes['closeBtnColor'] ]
113	);
114	}
115	}
116	return $css_generator->generate_css();
117	}
118	public function build_css( $attributes ) {
119	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
120	return $this->build_css_v2( $attributes );
121	}
122	return $this->build_css_v1( $attributes );
123	}
124
125	public function get_panel_main_wrapper_css( $attributes, $device = '' ) {
126	if ( ! empty( $device ) ) {
127	return [];
128	}
129	return [ 'background-color' => Color::get_css( isset( $attributes['backdropColor'] ) ? $attributes['backdropColor'] : '' ) ];
130	}
131
132	public function get_panel_content_wrap_css( $attributes, $device = '' ) {
133	$css = [];
134
135	if ( empty( $device ) && ! empty( $attributes['panelContentPosition'] ) ) {
136	$css['align-items'] = $attributes['panelContentPosition'];
137	}
138
139	$Background_css = Background::get_css( $attributes['panelBackground'], 'background', $device );
140	$Border_css = Border::get_css( $attributes['panelBorder'], '', $device );
141	$BoxShadow_css = BoxShadow::get_css( $attributes['panelShadow'], 'box-shadow' );
142
143	$transition_css = [];
144	if ( ! $device ) {
145	$transition_value = 'all 1s';
146	if ( ! empty( $Background_css['transition'] ) ) {
147	$transition_value = $transition_value . ',' . $Background_css['transition'];
148	}
149	if ( ! empty( $Border_css['transition'] ) ) {
150	$transition_value = $transition_value . ',' . $Border_css['transition'];
151	}
152	if ( ! empty( $BoxShadow_css['transition'] ) ) {
153	$transition_value = $transition_value . ',' . $BoxShadow_css['transition'];
154	}
155	$transition_css['transition'] = $transition_value;
156	}
157
158	return array_merge(
159	Range::get_css([
160	'attributeValue' => $attributes['panelWidth'],
161	'attribute_object_key' => 'value',
162	'isResponsive' => true,
163	'hasUnit' => true,
164	'defaultValue' => 50,
165	'hasUnit' => true,
166	'unitDefaultValue' => '%',
167	'property' => 'width',
168	'device' => $device,
169	]),
170	Range::get_css([
171	'attributeValue' => $attributes['panelHeight'],
172	'attribute_object_key' => 'value',
173	'isResponsive' => true,
174	'hasUnit' => true,
175	'defaultValue' => 50,
176	'hasUnit' => true,
177	'unitDefaultValue' => '%',
178	'property' => 'min-height',
179	'device' => $device,
180	]),
181	isset( $attributes['barBorder'] ) ? Border::get_css( $attributes['barBorder'], '', $device ) : [],
182	$css,
183	$css,
184	Dimensions::get_css( $attributes['panelPadding'], 'padding', $device ),
185	$Background_css,
186	$Border_css,
187	$BoxShadow_css,
188	$transition_css,
189	);
190	}
191
192	public function get_panel_content_wrap_hover_css( $attributes, $device = '' ) {
193	$css = [];
194	return array_merge(
195	$css,
196	Dimensions::get_css( $attributes['panelPadding'], 'padding', $device ),
197	Background::get_hover_css( $attributes['panelBackground'], 'background', $device ),
198	Border::get_hover_css( $attributes['panelBorder'], $device ),
199	BoxShadow::get_hover_css( $attributes['panelShadow'] ),
200	);
201	}
202
203	public function get_panel_close_button_css( $attributes, $device = '' ) {
204	$css = [];
205	if ( empty( $device ) ) {
206	if ( ! empty( $attributes['closeBtnBackgroundColor'] ) ) {
207	$css['background-color'] = Color::get_css(
208	isset( $attributes['closeBtnBackgroundColor'] ) ? $attributes['closeBtnBackgroundColor'] : '');
209	}
210	}
211	if ( ! empty( $attributes['closeBtnTop'] ) \|\| 0 === $attributes['closeBtnTop'] ) {
212	$css['top'] = $attributes['closeBtnTop'] . 'px';
213	}
214	if ( ! empty( $attributes['closeBtnSide'] ) \|\| 0 === $attributes['closeBtnSide'] ) {
215	if ( 'left' === $attributes['closePosition'] ) {
216	$css['left'] = $attributes['closeBtnSide'] . 'px';
217	$css['right'] = 'unset';
218	} else {
219	$css['right'] = $attributes['closeBtnSide'] . 'px';
220	$css['left'] = 'unset';
221	}
222	}
223	return $css;
224	}
225	}
226