PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.11.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.11.0
2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 1.1.2 All 80 releases
ablocks / includes / blocks / filterable-cards / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.11.0, at includes/blocks/filterable-cards/block.php

384 lines 16.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace ABlocks\Blocks\FilterableCards;
3
4 if ( ! defined( 'ABSPATH' ) ) {
5 exit;
6 }
7
8 use ABlocks\Classes\BlockBaseAbstract;
9 use ABlocks\Classes\CssGenerator;
10 use ABlocks\Controls\Typography;
11 use ABlocks\Controls\Border;
12 use ABlocks\Controls\Dimensions;
13 use ABlocks\Controls\Range;
14 use ABlocks\Controls\Alignment;
15 use ABlocks\Controls\BoxShadow;
16 use ABlocks\Classes\CssGeneratorV2;
17 use ABlocks\Controls\Color;
18
19
20 class Block extends BlockBaseAbstract {
21 protected $block_name = 'filterable-cards';
22
23 public function build_css_v1( $attributes ) {
24 $css_generator = new CssGenerator( $attributes, $this->block_name );
25
26 $css_generator->add_class_styles(
27 '{{WRAPPER}} .filterable-cards_filter , {{WRAPPER}} .filterable-cards-filter-wrap',
28 $this->get_filter_wrap_CSS( $attributes ),
29 $this->get_filter_wrap_CSS( $attributes, 'Tablet' ),
30 $this->get_filter_wrap_CSS( $attributes, 'Mobile' )
31 );
32 $css_generator->add_class_styles(
33 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button',
34 $this->get_filter_CSS( $attributes ),
35 $this->get_filter_CSS( $attributes, 'Tablet' ),
36 $this->get_filter_CSS( $attributes, 'Mobile' )
37 );
38 $css_generator->add_class_styles(
39 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button:hover',
40 $this->get_filter_hover_CSS( $attributes ),
41 $this->get_filter_hover_CSS( $attributes, 'Tablet' ),
42 $this->get_filter_hover_CSS( $attributes, 'Mobile' )
43 );
44 $css_generator->add_class_styles(
45 '{{WRAPPER}} .filterable-cards-filter-wrap .filterable-cards_filter .filterable-search-toggle-btn , {{WRAPPER}} .filterable-cards-filter-wrap .filterable-searchInput',
46 $this->get_search_menu_CSS( $attributes ),
47 $this->get_search_menu_CSS( $attributes, 'Tablet' ),
48 $this->get_search_menu_CSS( $attributes, 'Mobile' )
49 );
50 $css_generator->add_class_styles(
51 '{{WRAPPER}} .filterable-cards_filter .filterable-search-toggle-btn:hover , {{WRAPPER}} .filterable-cards-filter-wrap .filterable-searchInput:hover',
52 $this->get_search_menu_hover_CSS( $attributes ),
53 $this->get_search_menu_hover_CSS( $attributes, 'Tablet' ),
54 $this->get_search_menu_hover_CSS( $attributes, 'Mobile' )
55 );
56 $css_generator->add_class_styles(
57 '{{WRAPPER}} .filterable-cards-filter-wrap .filterable-searchInput::placeholder ',
58 $this->get_search_input_placeholder_CSS( $attributes ),
59 );
60 $css_generator->add_class_styles(
61 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button.filterable-filter-button-active',
62 $this->get_Filter_active_class_CSS( $attributes ),
63 $this->get_Filter_active_class_CSS( $attributes, 'Tablet' ),
64 $this->get_Filter_active_class_CSS( $attributes, 'Mobile' ),
65 );
66 $css_generator->add_class_styles(
67 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button.filterable-filter-button-active:hover',
68 $this->get_Filter_active_class_hover_CSS( $attributes ),
69 $this->get_Filter_active_class_hover_CSS( $attributes, 'Tablet' ),
70 $this->get_Filter_active_class_hover_CSS( $attributes, 'Mobile' ),
71 );
72 $css_generator->add_class_styles(
73 '{{WRAPPER}} .filterable-cards-wrap',
74 $this->filterable_cards_WrapCSS( $attributes ),
75 $this->filterable_cards_WrapCSS( $attributes, 'Tablet' ),
76 $this->filterable_cards_WrapCSS( $attributes, 'Mobile' )
77 );
78 $css_generator->add_class_styles(
79 '{{WRAPPER}} .filterable-cards-wrap > .ablocks-block--filterable-cards-item',
80 $this->filterable_cards_items( $attributes ),
81 $this->filterable_cards_items( $attributes, 'Tablet' ),
82 $this->filterable_cards_items( $attributes, 'Mobile' ),
83 );
84 // button style
85 $css_generator->add_class_styles(
86 '{{WRAPPER}} .filterable-cards-load-more-wrapper',
87 $this->filterable_Cards_More_Wrapper( $attributes ),
88 $this->filterable_Cards_More_Wrapper( $attributes, 'Tablet' ),
89 $this->filterable_Cards_More_Wrapper( $attributes, 'Mobile' ),
90 );
91 $css_generator->add_class_styles(
92 '{{WRAPPER}} .filterable-cards-showMore-button',
93 $this->filterable_loadMore_button( $attributes ),
94 $this->filterable_loadMore_button( $attributes, 'Tablet' ),
95 $this->filterable_loadMore_button( $attributes, 'Mobile' )
96 );
97 $css_generator->add_class_styles(
98 '{{WRAPPER}} .filterable-cards-showMore-button:hover',
99 $this->filterable_loadMore_button_hover( $attributes ),
100 $this->filterable_loadMore_button_hover( $attributes, 'Tablet' ),
101 $this->filterable_loadMore_button_hover( $attributes, 'Mobile' )
102 );
103 return $css_generator->generate_css();
104 }
105 public function build_css_v2( $attributes ) {
106 $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
107
108 $css_generator->add_class_styles(
109 '{{WRAPPER}} .filterable-cards_filter , {{WRAPPER}} .filterable-cards-filter-wrap',
110 $this->get_filter_wrap_CSS( $attributes ),
111 $this->get_filter_wrap_CSS( $attributes, 'Tablet' ),
112 $this->get_filter_wrap_CSS( $attributes, 'Mobile' )
113 );
114 $css_generator->add_class_styles(
115 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button',
116 $this->get_filter_CSS( $attributes ),
117 $this->get_filter_CSS( $attributes, 'Tablet' ),
118 $this->get_filter_CSS( $attributes, 'Mobile' )
119 );
120 $css_generator->add_class_styles(
121 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button:hover',
122 $this->get_filter_hover_CSS( $attributes ),
123 $this->get_filter_hover_CSS( $attributes, 'Tablet' ),
124 $this->get_filter_hover_CSS( $attributes, 'Mobile' )
125 );
126 $css_generator->add_class_styles(
127 '{{WRAPPER}} .filterable-cards-filter-wrap .filterable-cards_filter .filterable-search-toggle-btn , {{WRAPPER}} .filterable-cards-filter-wrap .filterable-searchInput',
128 $this->get_search_menu_CSS( $attributes ),
129 $this->get_search_menu_CSS( $attributes, 'Tablet' ),
130 $this->get_search_menu_CSS( $attributes, 'Mobile' )
131 );
132 $css_generator->add_class_styles(
133 '{{WRAPPER}} .filterable-cards_filter .filterable-search-toggle-btn:hover , {{WRAPPER}} .filterable-cards-filter-wrap .filterable-searchInput:hover',
134 $this->get_search_menu_hover_CSS( $attributes ),
135 $this->get_search_menu_hover_CSS( $attributes, 'Tablet' ),
136 $this->get_search_menu_hover_CSS( $attributes, 'Mobile' )
137 );
138 $css_generator->add_class_styles(
139 '{{WRAPPER}} .filterable-cards-filter-wrap .filterable-searchInput::placeholder ',
140 $this->get_search_input_placeholder_CSS( $attributes ),
141 );
142 $css_generator->add_class_styles(
143 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button.filterable-filter-button-active',
144 $this->get_Filter_active_class_CSS( $attributes ),
145 $this->get_Filter_active_class_CSS( $attributes, 'Tablet' ),
146 $this->get_Filter_active_class_CSS( $attributes, 'Mobile' ),
147 );
148 $css_generator->add_class_styles(
149 '{{WRAPPER}} .filterable-cards_filter .filterable-filter-button.filterable-filter-button-active:hover',
150 $this->get_Filter_active_class_hover_CSS( $attributes ),
151 $this->get_Filter_active_class_hover_CSS( $attributes, 'Tablet' ),
152 $this->get_Filter_active_class_hover_CSS( $attributes, 'Mobile' ),
153 );
154 $css_generator->add_class_styles(
155 '{{WRAPPER}} .filterable-cards-wrap',
156 $this->filterable_cards_WrapCSS( $attributes ),
157 $this->filterable_cards_WrapCSS( $attributes, 'Tablet' ),
158 $this->filterable_cards_WrapCSS( $attributes, 'Mobile' )
159 );
160 $css_generator->add_class_styles(
161 '{{WRAPPER}} .filterable-cards-wrap > .ablocks-block--filterable-cards-item',
162 $this->filterable_cards_items( $attributes ),
163 $this->filterable_cards_items( $attributes, 'Tablet' ),
164 $this->filterable_cards_items( $attributes, 'Mobile' ),
165 );
166 // button style
167 $css_generator->add_class_styles(
168 '{{WRAPPER}} .filterable-cards-load-more-wrapper',
169 $this->filterable_Cards_More_Wrapper( $attributes ),
170 $this->filterable_Cards_More_Wrapper( $attributes, 'Tablet' ),
171 $this->filterable_Cards_More_Wrapper( $attributes, 'Mobile' ),
172 );
173 $css_generator->add_class_styles(
174 '{{WRAPPER}} .filterable-cards-showMore-button',
175 $this->filterable_loadMore_button( $attributes ),
176 $this->filterable_loadMore_button( $attributes, 'Tablet' ),
177 $this->filterable_loadMore_button( $attributes, 'Mobile' )
178 );
179 $css_generator->add_class_styles(
180 '{{WRAPPER}} .filterable-cards-showMore-button:hover',
181 $this->filterable_loadMore_button_hover( $attributes ),
182 $this->filterable_loadMore_button_hover( $attributes, 'Tablet' ),
183 $this->filterable_loadMore_button_hover( $attributes, 'Mobile' )
184 );
185 return $css_generator->generate_css();
186 }
187 public function build_css( $attributes ) {
188 if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
189 return $this->build_css_v2( $attributes );
190 }
191 return $this->build_css_v1( $attributes );
192 }
193 private function get_filter_wrap_CSS( $attributes, $device = '' ) {
194 $css = [];
195 if ( ! empty( $horizontal_alignment ) ) {
196 $css['justify-content'] = $horizontal_alignment;
197 }
198 $alignment_css = isset( $attributes['filterAlignment'] ) ? Alignment::get_css( $attributes['filterAlignment'], 'justify-content', $device )
199 : [];
200 $css = array_merge( $css, $alignment_css );
201 return array_merge(
202 $css,
203 Range::get_css([
204 'attributeValue' => $attributes['filterButtonGap'],
205 'attribute_object_key' => 'value',
206 'isResponsive' => true,
207 'hasUnit' => false,
208 'defaultValue' => 8,
209 'unitDefaultValue' => 'px',
210 'property' => 'gap',
211 'device' => $device,
212 ])
213 );
214 }
215 private function get_filter_CSS( $attributes, $device = '' ) {
216 $filter_border_css = ! empty( $attributes['filterButtonBorder'] )
217 ? Border::get_css( $attributes['filterButtonBorder'], '', $device )
218 : array();
219 $typographyGlobal = ( isset( $attributes['filterButtonTypographyGlobal'] ) ? $attributes['filterButtonTypographyGlobal'] : '' );
220 $css = array_merge(
221 [ 'color' => Color::get_css( isset( $attributes['filterButtonColor'] ) ? $attributes['filterButtonColor'] : '' ) ],
222 [ 'background' => Color::get_css( isset( $attributes['filterButtonBackground'] ) ? $attributes['filterButtonBackground'] : '' ) ],
223 $filter_border_css,
224 Typography::get_css( isset( $attributes['filterButtonTypography'] ) ? $attributes['filterButtonTypography'] : [], '', $device, $typographyGlobal ),
225 Dimensions::get_css( isset( $attributes['filterButtonPadding'] ) ? $attributes['filterButtonPadding'] : [], 'padding', $device ),
226 Dimensions::get_css( isset( $attributes['filterButtonMargin'] ) ? $attributes['filterButtonMargin'] : [], 'margin', $device ),
227 );
228 return $css;
229 }
230 private function get_filter_hover_CSS( $attributes, $device = '' ) {
231 $css = array_merge(
232 [ 'color' => Color::get_css( isset( $attributes['filterButtonColorH'] ) ? $attributes['filterButtonColorH'] : '' ) ],
233 [ 'background' => Color::get_css( isset( $attributes['filterButtonBackgroundH'] ) ? $attributes['filterButtonBackgroundH'] : '' ) ],
234 Border::get_hover_css( isset( $attributes['filterButtonBorder'] ) ? $attributes['filterButtonBorder'] : [], $device )
235 );
236 if ( ! empty( $attributes['filterButtonTransition'] ) ) {
237 $css['transition'] = $attributes['filterButtonTransition'];
238 }
239
240 return $css;
241 }
242 private function get_search_menu_CSS( $attributes, $device = '' ) {
243 $searchMenu_menu_border_css = ! empty( $attributes['searchMenuBorder'] )
244 ? Border::get_css( $attributes['searchMenuBorder'], '', $device )
245 : array();
246 $css = array_merge(
247 [ 'color' => Color::get_css( isset( $attributes['searchMenuColor'] ) ? $attributes['searchMenuColor'] : '' ) ],
248 [ 'background' => Color::get_css( isset( $attributes['searchMenuBackground'] ) ? $attributes['searchMenuBackground'] : '' ) ],
249 $searchMenu_menu_border_css,
250 Dimensions::get_css( isset( $attributes['searchMenuPadding'] ) ? $attributes['searchMenuPadding'] : [], 'padding', $device ),
251 Dimensions::get_css( isset( $attributes['searchMenuMargin'] ) ? $attributes['searchMenuMargin'] : [], 'margin', $device )
252 );
253 return $css;
254 }
255
256 private function get_search_menu_hover_CSS( $attributes, $device = '' ) {
257 $css = array_merge(
258 [ 'color' => Color::get_css( isset( $attributes['searchMenuColorH'] ) ? $attributes['searchMenuColorH'] : '' ) ],
259 [ 'background' => Color::get_css( isset( $attributes['searchMenuBackgroundH'] ) ? $attributes['searchMenuBackgroundH'] : '' ) ],
260 Border::get_hover_css( isset( $attributes['searchMenuBorder'] ) ? $attributes['searchMenuBorder'] : [], $device )
261 );
262 if ( ! empty( $attributes['searchMenuTransition'] ) ) {
263 $css['transition'] = $attributes['searchMenuTransition'];
264 }
265
266 return $css;
267 }
268 private function get_search_input_placeholder_CSS( $attributes ) {
269 return [ 'color' => Color::get_css( isset( $attributes['searchMenuColor'] ) ? $attributes['searchMenuColor'] : '' ) ];
270 }
271 private function get_filter_active_class_CSS( $attributes, $device = '' ) {
272 $css = array_merge(
273 [ 'color' => Color::get_css( isset( $attributes['activeClassColor'] ) ? $attributes['activeClassColor'] : '' ) ],
274 [ 'background' => Color::get_css( isset( $attributes['activeClassBackground'] ) ? $attributes['activeClassBackground'] : '' ) ],
275 Border::get_css( isset( $attributes['activeClassBorder'] ) ? $attributes['activeClassBorder'] : [], $device )
276 );
277 return $css;
278 }
279 private function get_Filter_active_class_hover_CSS( $attributes, $device = '' ) {
280 $hover_border = Border::get_hover_css( isset( $attributes['activeClassBorder'] ) ? $attributes['activeClassBorder'] : [], $device );
281 return $hover_border;
282 }
283 private function filterable_cards_wrapCSS( $attributes, $device = '' ) {
284 $css = [];
285 if ( $attributes['gridStyle'] === 'grid' ) {
286 $css['display'] = 'grid';
287 if ( $device === 'Tablet' ) {
288 $css['grid-template-columns'] = 'repeat(2, 1fr)';
289 } elseif ( $device === 'Mobile' ) {
290 $css['grid-template-columns'] = 'repeat(1, 1fr)';
291 } elseif ( ! empty( $attributes['gridColumns'] ) ) {
292 $css['grid-template-columns'] = 'repeat(' . $attributes['gridColumns'] . ', 1fr)';
293 }
294 }
295 if ( $attributes['gridStyle'] === 'masonry' ) {
296 if ( $device === 'Tablet' ) {
297 $css['column-count'] = '2';
298 } elseif ( $device === 'Mobile' ) {
299 $css['column-count'] = '1';
300 } elseif ( ! empty( $attributes['gridColumns'] ) ) {
301 $css['column-count'] = $attributes['gridColumns'];
302 }
303 }
304
305 return array_merge(
306 $css,
307 Range::get_css([
308 'attributeValue' => $attributes['itemGap'],
309 'attribute_object_key' => 'value',
310 'isResponsive' => true,
311 'hasUnit' => false,
312 'unitDefaultValue' => 'px',
313 'defaultValue' => 10,
314 'property' => 'gap',
315 'device' => $device,
316 ])
317 );
318 }
319
320 private function filterable_cards_items( $attributes, $device = '' ) {
321 $css = [];
322
323 if ( ! empty( $attributes['cardHeight'] ) && $attributes['gridStyle'] === 'grid' ) {
324 $css['height'] = $attributes['cardHeight'] . 'px';
325 }
326 if ( $attributes['gridStyle'] === 'masonry' ) {
327 $css['break-inside'] = 'avoid';
328 $css['width'] = '100%';
329 $css = array_merge($css, Range::get_css([
330 'attributeValue' => $attributes['itemGap'] ?? null,
331 'attribute_object_key' => 'value',
332 'isResponsive' => true,
333 'hasUnit' => false,
334 'unitDefaultValue' => 'px',
335 'defaultValue' => 10,
336 'property' => 'margin-bottom',
337 'device' => $device,
338 ]));
339 }
340 return $css;
341 }
342 private function filterable_Cards_More_Wrapper( $attributes, $device = '' ) {
343 $css = [];
344 if ( isset( $attributes['moreButtonAlignment'] ) ) {
345 $css['justify-content'] = $attributes['moreButtonAlignment'];
346 }
347 $css = array_merge($css, Range::get_css([
348 'attributeValue' => $attributes['loadMoreButtonGap'] ?? null,
349 'attribute_object_key' => 'value',
350 'isResponsive' => true,
351 'hasUnit' => false,
352 'unitDefaultValue' => 'px',
353 'defaultValue' => '',
354 'property' => 'margin-top',
355 'device' => $device,
356 ]));
357 return $css;
358 }
359 private function filterable_loadMore_button( $attributes, $device = '' ) {
360 $typographyGlobal = ( isset( $attributes['moreButtonTypographyGlobal'] ) ? $attributes['moreButtonTypographyGlobal'] : '' );
361 return array_merge(
362 [ 'color' => Color::get_css( isset( $attributes['loadMoreButtonTextColor'] ) ? $attributes['loadMoreButtonTextColor'] : '' ) ],
363 [ 'background' => Color::get_css( isset( $attributes['loadMoreButtonBackground'] ) ? $attributes['loadMoreButtonBackground'] : '' ) ],
364 Border::get_css( $attributes['moreButtonBorder'], '', $device ),
365 BoxShadow::get_css( $attributes['moreButtonboxShadow'], '', $device ),
366 Typography::get_css( $attributes['moreButtonTypography'], '', $device, $typographyGlobal ),
367 Dimensions::get_css( $attributes['moreButtonPadding'], 'padding', $device ),
368 );
369 }
370 private function filterable_loadMore_button_hover( $attributes, $device = '' ) {
371 $css = [];
372 if ( ! empty( $attributes['loadMoreButtonTransition'] ) ) {
373 $css['transition-duration'] = $attributes['loadMoreButtonTransition'] . 's';
374 }
375 return array_merge(
376 [ 'color' => Color::get_css( isset( $attributes['loadMoreButtonTextColorH'] ) ? $attributes['loadMoreButtonTextColorH'] : '' ) ],
377 [ 'background' => Color::get_css( isset( $attributes['loadMoreButtonBackgroundH'] ) ? $attributes['loadMoreButtonBackgroundH'] : '' ) ],
378 $css,
379 Border::get_hover_css( $attributes['moreButtonBorder'], '', $device ),
380 BoxShadow::get_hover_css( $attributes['moreButtonboxShadow'], '', $device )
381 );
382 }
383 }
384