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

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

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