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

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

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