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

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

316 lines 8.7 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	'frontend_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	'frontend_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	'frontend_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', 'vm', 'custom' ],
99	'default' => [
100	'unit' => 'px',
101	],
102	'separator' => 'before',
103	'selectors' => [
104	'{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}}',
105	],
106	'responsive' => true,
107	];
108
109	$fields['auto_flow'] = [
110	'label' => esc_html__( 'Auto Flow', 'elementor' ),
111	'type' => Controls_Manager::SELECT,
112	'options' => [
113	'row' => esc_html__( 'Row', 'elementor' ),
114	'column' => esc_html__( 'Column', 'elementor' ),
115	],
116	'default' => 'row',
117	'separator' => 'before',
118	'selectors' => [
119	'{{SELECTOR}}' => '--grid-auto-flow: {{VALUE}}',
120	],
121	'responsive' => true,
122	'frontend_available' => true,
123	] + $this->get_responsive_autoflow_defaults();
124
125	$fields['justify_items'] = [
126	'label' => esc_html_x( 'Justify Items', 'Grid Container Control', 'elementor' ),
127	'type' => Controls_Manager::CHOOSE,
128	'options' => [
129	'start' => [
130	'title' => esc_html_x( 'Start', 'Grid Container Control', 'elementor' ),
131	'icon' => 'eicon-align-' . $icon_start . '-h',
132	],
133	'center' => [
134	'title' => esc_html_x( 'Center', 'Grid Container Control', 'elementor' ),
135	'icon' => 'eicon-align-center-h',
136	],
137	'end' => [
138	'title' => esc_html_x( 'End', 'Grid Container Control', 'elementor' ),
139	'icon' => 'eicon-align-' . $icon_end . '-h',
140	],
141	'stretch' => [
142	'title' => esc_html_x( 'Stretch', 'Grid Container Control', 'elementor' ),
143	'icon' => 'eicon-align-stretch-h',
144	],
145	],
146	'default' => '',
147	'selectors' => [
148	'{{SELECTOR}}' => '--justify-items: {{VALUE}};',
149	],
150	'responsive' => true,
151	];
152
153	$fields['align_items'] = [
154	'label' => esc_html_x( 'Align Items', 'Grid Container Control', 'elementor' ),
155	'type' => Controls_Manager::CHOOSE,
156	'options' => [
157	'start' => [
158	'title' => esc_html_x( 'Start', 'Grid Container Control', 'elementor' ),
159	'icon' => 'eicon-align-start-v',
160	],
161	'center' => [
162	'title' => esc_html_x( 'Center', 'Grid Container Control', 'elementor' ),
163	'icon' => 'eicon-align-center-v',
164	],
165	'end' => [
166	'title' => esc_html_x( 'End', 'Grid Container Control', 'elementor' ),
167	'icon' => 'eicon-align-end-v',
168	],
169	'stretch' => [
170	'title' => esc_html_x( 'Stretch', 'Grid Container Control', 'elementor' ),
171	'icon' => 'eicon-align-stretch-v',
172	],
173	],
174	'selectors' => [
175	'{{SELECTOR}}' => '--align-items: {{VALUE}};',
176	],
177	'responsive' => true,
178	];
179
180	$fields['justify_content'] = [
181	'label' => esc_html_x( 'Justify Content', 'Grid Container Control', 'elementor' ),
182	'type' => Controls_Manager::CHOOSE,
183	'label_block' => true,
184	'default' => '',
185	'options' => [
186	'start' => [
187	'title' => esc_html_x( 'Start', 'Grid Container Control', 'elementor' ),
188	'icon' => 'eicon-justify-start-h',
189	],
190	'center' => [
191	'title' => esc_html_x( 'Middle', 'Grid Container Control', 'elementor' ),
192	'icon' => 'eicon-justify-center-h',
193	],
194	'end' => [
195	'title' => esc_html_x( 'End', 'Grid Container Control', 'elementor' ),
196	'icon' => 'eicon-justify-end-h',
197	],
198	'space-between' => [
199	'title' => esc_html_x( 'Space Between', 'Grid Container Control', 'elementor' ),
200	'icon' => 'eicon-justify-space-between-h',
201	],
202	'space-around' => [
203	'title' => esc_html_x( 'Space Around', 'Grid Container Control', 'elementor' ),
204	'icon' => 'eicon-justify-space-around-h',
205	],
206	'space-evenly' => [
207	'title' => esc_html_x( 'Space Evenly', 'Grid Container Control', 'elementor' ),
208	'icon' => 'eicon-justify-space-evenly-h',
209	],
210	],
211	'selectors' => [
212	'{{SELECTOR}}' => '--grid-justify-content: {{VALUE}};',
213	],
214	'condition' => [
215	'columns_grid[unit]' => 'custom',
216	],
217	'responsive' => true,
218	];
219
220	$fields['align_content'] = [
221	'label' => esc_html_x( 'Align Content', 'Grid Container Control', 'elementor' ),
222	'type' => Controls_Manager::CHOOSE,
223	'label_block' => true,
224	'default' => '',
225	'options' => [
226	'start' => [
227	'title' => esc_html_x( 'Start', 'Grid Container Control', 'elementor' ),
228	'icon' => 'eicon-justify-start-v',
229	],
230	'center' => [
231	'title' => esc_html_x( 'Middle', 'Grid Container Control', 'elementor' ),
232	'icon' => 'eicon-justify-center-v',
233	],
234	'end' => [
235	'title' => esc_html_x( 'End', 'Grid Container Control', 'elementor' ),
236	'icon' => 'eicon-justify-end-v',
237	],
238	'space-between' => [
239	'title' => esc_html_x( 'Space Between', 'Grid Container Control', 'elementor' ),
240	'icon' => 'eicon-justify-space-between-v',
241	],
242	'space-around' => [
243	'title' => esc_html_x( 'Space Around', 'Grid Container Control', 'elementor' ),
244	'icon' => 'eicon-justify-space-around-v',
245	],
246	'space-evenly' => [
247	'title' => esc_html_x( 'Space Evenly', 'Grid Container Control', 'elementor' ),
248	'icon' => 'eicon-justify-space-evenly-v',
249	],
250	],
251	'selectors' => [
252	'{{SELECTOR}}' => '--grid-align-content: {{VALUE}};',
253	],
254	'condition' => [
255	'rows_grid[unit]' => 'custom',
256	],
257	'responsive' => true,
258	];
259
260	// Only use the auto flow prefix class inside the editor.
261	$auto_flow_prefix_class = Plugin::$instance->editor->is_edit_mode() ? [ 'prefix_class' => 'e-con--' ] : [];
262
263	$fields['_is_row'] = array_merge( $auto_flow_prefix_class, [
264	'type' => Controls_Manager::HIDDEN,
265	'default' => 'row',
266	'condition' => [
267	'auto_flow' => [
268	'row',
269	],
270	],
271	] );
272
273	$fields['_is_column'] = array_merge( $auto_flow_prefix_class, [
274	'type' => Controls_Manager::HIDDEN,
275	'default' => 'column',
276	'condition' => [
277	'auto_flow' => [
278	'column',
279	],
280	],
281	] );
282
283	return $fields;
284	}
285
286	protected function get_responsive_unit_defaults() {
287	$responsive_unit_defaults = [];
288	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
289
290	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
291	$responsive_unit_defaults[ $breakpoint_name . '_default' ] = [
292	'unit' => 'fr',
293	];
294	}
295
296	return $responsive_unit_defaults;
297	}
298
299	protected function get_responsive_autoflow_defaults() {
300	$responsive_autoflow_defaults = [];
301	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
302
303	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
304	$responsive_autoflow_defaults[ $breakpoint_name . '_default' ] = 'row';
305	}
306
307	return $responsive_autoflow_defaults;
308	}
309
310	protected function get_default_options() {
311	return [
312	'popover' => false,
313	];
314	}
315	}
316