ablocks / includes / blocks / modal / block.php

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

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