elementor / includes / controls / groups / grid-container.php

grid-container.php in Elementor Website Builder – more than just a page builder 4.2.2, at includes/controls/groups/grid-container.php

321 lines 8.2 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Plugin;
5
6	if ( ! defined( 'ABSPATH' ) ) {
7	exit; // Exit if accessed directly.
8	}
9
10	class Group_Control_Grid_Container extends Group_Control_Base {
11
12	protected static $fields;
13
14	public static function get_type() {
15	return 'grid-container';
16	}
17
18	protected function init_fields() {
19	$icon_start = is_rtl() ? 'end' : 'start';
20	$icon_end = is_rtl() ? 'start' : 'end';
21
22	$fields = [];
23
24	$fields['items_grid'] = [
25	'type' => Controls_Manager::HEADING,
26	'label' => esc_html__( 'Items', 'elementor' ),
27	'separator' => 'before',
28	];
29
30	$fields['outline'] = [
31	'label' => esc_html__( 'Grid Outline', 'elementor' ),
32	'type' => Controls_Manager::SWITCHER,
33	'label_on' => esc_html__( 'Show', 'elementor' ),
34	'label_off' => esc_html__( 'Hide', 'elementor' ),
35	'default' => 'yes',
36	'editor_available' => true,
37	];
38
39	$responsive_unit_defaults = $this->get_responsive_unit_defaults();
40
41	$fields['columns_grid'] = [
42	'label' => esc_html__( 'Columns', 'elementor' ),
43	'type' => Controls_Manager::SLIDER,
44	'range' => [
45	'fr' => [
46	'min' => 1,
47	'max' => 12,
48	'step' => 1,
49	],
50	],
51	'size_units' => [ 'fr', 'custom' ],
52	'unit_selectors_dictionary' => [
53	'custom' => '--e-con-grid-template-columns: {{SIZE}}',
54	],
55	'default' => [
56	'unit' => 'fr',
57	'size' => 3,
58	],
59	'mobile_default' => [
60	'unit' => 'fr',
61	'size' => 1,
62	],
63	'selectors' => [
64	'{{SELECTOR}}' => '--e-con-grid-template-columns: repeat({{SIZE}}, 1fr)',
65	],
66	'responsive' => true,
67	'editor_available' => true,
68	] + $responsive_unit_defaults;
69
70	$fields['rows_grid'] = [
71	'label' => esc_html__( 'Rows', 'elementor' ),
72	'type' => Controls_Manager::SLIDER,
73	'range' => [
74	'fr' => [
75	'min' => 1,
76	'max' => 12,
77	'step' => 1,
78	],
79	],
80	'size_units' => [ 'fr', 'custom' ],
81	'unit_selectors_dictionary' => [
82	'custom' => '--e-con-grid-template-rows: {{SIZE}}',
83	],
84	'default' => [
85	'unit' => 'fr',
86	'size' => 2,
87	],
88	'selectors' => [
89	'{{SELECTOR}}' => '--e-con-grid-template-rows: repeat({{SIZE}}, 1fr)',
90	],
91	'responsive' => true,
92	'editor_available' => true,
93	] + $responsive_unit_defaults;
94
95	$fields['gaps'] = [
96	'label' => esc_html__( 'Gaps', 'elementor' ),
97	'type' => Controls_Manager::GAPS,
98	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
99	'default' => [
100	'unit' => 'px',
101	],
102	'separator' => 'before',
103	'selectors' => [
104	'{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}};--row-gap: {{ROW}}{{UNIT}};--column-gap: {{COLUMN}}{{UNIT}};',
105	],
106	'responsive' => true,
107	'validators' => [
108	'Number' => [
109	'min' => 0,
110	],
111	],
112	];
113
114	$fields['auto_flow'] = [
115	'label' => esc_html__( 'Auto Flow', 'elementor' ),
116	'type' => Controls_Manager::SELECT,
117	'options' => [
118	'row' => esc_html__( 'Row', 'elementor' ),
119	'column' => esc_html__( 'Column', 'elementor' ),
120	],
121	'default' => 'row',
122	'separator' => 'before',
123	'selectors' => [
124	'{{SELECTOR}}' => '--grid-auto-flow: {{VALUE}}',
125	],
126	'responsive' => true,
127	'editor_available' => true,
128	] + $this->get_responsive_autoflow_defaults();
129
130	$fields['justify_items'] = [
131	'label' => esc_html__( 'Justify Items', 'elementor' ),
132	'type' => Controls_Manager::CHOOSE,
133	'options' => [
134	'start' => [
135	'title' => esc_html__( 'Start', 'elementor' ),
136	'icon' => 'eicon-align-' . $icon_start . '-h',
137	],
138	'center' => [
139	'title' => esc_html__( 'Center', 'elementor' ),
140	'icon' => 'eicon-align-center-h',
141	],
142	'end' => [
143	'title' => esc_html__( 'End', 'elementor' ),
144	'icon' => 'eicon-align-' . $icon_end . '-h',
145	],
146	'stretch' => [
147	'title' => esc_html__( 'Stretch', 'elementor' ),
148	'icon' => 'eicon-align-stretch-h',
149	],
150	],
151	'default' => '',
152	'selectors' => [
153	'{{SELECTOR}}' => '--justify-items: {{VALUE}};',
154	],
155	'responsive' => true,
156	];
157
158	$fields['align_items'] = [
159	'label' => esc_html__( 'Align Items', 'elementor' ),
160	'type' => Controls_Manager::CHOOSE,
161	'options' => [
162	'start' => [
163	'title' => esc_html__( 'Start', 'elementor' ),
164	'icon' => 'eicon-align-start-v',
165	],
166	'center' => [
167	'title' => esc_html__( 'Center', 'elementor' ),
168	'icon' => 'eicon-align-center-v',
169	],
170	'end' => [
171	'title' => esc_html__( 'End', 'elementor' ),
172	'icon' => 'eicon-align-end-v',
173	],
174	'stretch' => [
175	'title' => esc_html__( 'Stretch', 'elementor' ),
176	'icon' => 'eicon-align-stretch-v',
177	],
178	],
179	'selectors' => [
180	'{{SELECTOR}}' => '--align-items: {{VALUE}};',
181	],
182	'responsive' => true,
183	];
184
185	$fields['justify_content'] = [
186	'label' => esc_html__( 'Justify Content', 'elementor' ),
187	'type' => Controls_Manager::CHOOSE,
188	'label_block' => true,
189	'default' => '',
190	'options' => [
191	'start' => [
192	'title' => esc_html__( 'Start', 'elementor' ),
193	'icon' => 'eicon-justify-start-h',
194	],
195	'center' => [
196	'title' => esc_html__( 'Middle', 'elementor' ),
197	'icon' => 'eicon-justify-center-h',
198	],
199	'end' => [
200	'title' => esc_html__( 'End', 'elementor' ),
201	'icon' => 'eicon-justify-end-h',
202	],
203	'space-between' => [
204	'title' => esc_html__( 'Space Between', 'elementor' ),
205	'icon' => 'eicon-justify-space-between-h',
206	],
207	'space-around' => [
208	'title' => esc_html__( 'Space Around', 'elementor' ),
209	'icon' => 'eicon-justify-space-around-h',
210	],
211	'space-evenly' => [
212	'title' => esc_html__( 'Space Evenly', 'elementor' ),
213	'icon' => 'eicon-justify-space-evenly-h',
214	],
215	],
216	'selectors' => [
217	'{{SELECTOR}}' => '--grid-justify-content: {{VALUE}};',
218	],
219	'condition' => [
220	'columns_grid[unit]' => 'custom',
221	],
222	'responsive' => true,
223	];
224
225	$fields['align_content'] = [
226	'label' => esc_html__( 'Align Content', 'elementor' ),
227	'type' => Controls_Manager::CHOOSE,
228	'label_block' => true,
229	'default' => '',
230	'options' => [
231	'start' => [
232	'title' => esc_html__( 'Start', 'elementor' ),
233	'icon' => 'eicon-justify-start-v',
234	],
235	'center' => [
236	'title' => esc_html__( 'Middle', 'elementor' ),
237	'icon' => 'eicon-justify-center-v',
238	],
239	'end' => [
240	'title' => esc_html__( 'End', 'elementor' ),
241	'icon' => 'eicon-justify-end-v',
242	],
243	'space-between' => [
244	'title' => esc_html__( 'Space Between', 'elementor' ),
245	'icon' => 'eicon-justify-space-between-v',
246	],
247	'space-around' => [
248	'title' => esc_html__( 'Space Around', 'elementor' ),
249	'icon' => 'eicon-justify-space-around-v',
250	],
251	'space-evenly' => [
252	'title' => esc_html__( 'Space Evenly', 'elementor' ),
253	'icon' => 'eicon-justify-space-evenly-v',
254	],
255	],
256	'selectors' => [
257	'{{SELECTOR}}' => '--grid-align-content: {{VALUE}};',
258	],
259	'condition' => [
260	'rows_grid[unit]' => 'custom',
261	],
262	'responsive' => true,
263	];
264
265	// Only use the auto flow prefix class inside the editor.
266	$auto_flow_prefix_class = Plugin::$instance->editor->is_edit_mode() ? [ 'prefix_class' => 'e-con--' ] : [];
267
268	$fields['_is_row'] = array_merge( $auto_flow_prefix_class, [
269	'type' => Controls_Manager::HIDDEN,
270	'default' => 'row',
271	'condition' => [
272	'auto_flow' => [
273	'row',
274	],
275	],
276	] );
277
278	$fields['_is_column'] = array_merge( $auto_flow_prefix_class, [
279	'type' => Controls_Manager::HIDDEN,
280	'default' => 'column',
281	'condition' => [
282	'auto_flow' => [
283	'column',
284	],
285	],
286	] );
287
288	return $fields;
289	}
290
291	protected function get_responsive_unit_defaults() {
292	$responsive_unit_defaults = [];
293	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
294
295	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
296	$responsive_unit_defaults[ $breakpoint_name . '_default' ] = [
297	'unit' => 'fr',
298	];
299	}
300
301	return $responsive_unit_defaults;
302	}
303
304	protected function get_responsive_autoflow_defaults() {
305	$responsive_autoflow_defaults = [];
306	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
307
308	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
309	$responsive_autoflow_defaults[ $breakpoint_name . '_default' ] = 'row';
310	}
311
312	return $responsive_autoflow_defaults;
313	}
314
315	protected function get_default_options() {
316	return [
317	'popover' => false,
318	];
319	}
320	}
321