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

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

239 lines 7.4 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	class Group_Control_Flex_Container extends Group_Control_Base {
9
10	protected static $fields;
11
12	public static function get_type() {
13	return 'flex-container';
14	}
15
16	protected function init_fields() {
17	$start = is_rtl() ? 'right' : 'left';
18	$end = is_rtl() ? 'left' : 'right';
19
20	$fields = [];
21
22	$fields['items'] = [
23	'type' => Controls_Manager::HEADING,
24	'label' => esc_html__( 'Items', 'elementor' ),
25	'separator' => 'before',
26	];
27
28	$fields['direction'] = [
29	'label' => esc_html_x( 'Direction', 'Flex Container Control', 'elementor' ),
30	'type' => Controls_Manager::CHOOSE,
31	'options' => [
32	'row' => [
33	'title' => esc_html_x( 'Row - horizontal', 'Flex Container Control', 'elementor' ),
34	'icon' => 'eicon-arrow-' . $end,
35	],
36	'column' => [
37	'title' => esc_html_x( 'Column - vertical', 'Flex Container Control', 'elementor' ),
38	'icon' => 'eicon-arrow-down',
39	],
40	'row-reverse' => [
41	'title' => esc_html_x( 'Row - reversed', 'Flex Container Control', 'elementor' ),
42	'icon' => 'eicon-arrow-' . $start,
43	],
44	'column-reverse' => [
45	'title' => esc_html_x( 'Column - reversed', 'Flex Container Control', 'elementor' ),
46	'icon' => 'eicon-arrow-up',
47	],
48	],
49	'default' => '',
50	// The `--container-widget-width` CSS variable is used for handling widgets that get an undefined width in column mode.
51	// The `--container-widget-flex-grow` CSS variable is used to give certain widgets a default `flex-grow: 1` value for the `flex row` combination.
52	'selectors_dictionary' => [
53	'row' => '--flex-direction: row; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1;',
54	'column' => '--flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0;',
55	'row-reverse' => '--flex-direction: row-reverse; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1;',
56	'column-reverse' => '--flex-direction: column-reverse; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0;',
57	],
58	'selectors' => [
59	'{{SELECTOR}}' => '{{VALUE}};',
60	],
61	'responsive' => true,
62	];
63
64	// Only use the flex direction prefix class inside the editor.
65	$flex_direction_prefix_class = Plugin::$instance->editor->is_edit_mode() ? [ 'prefix_class' => 'e-con--' ] : [];
66
67	$fields['_is_row'] = array_merge( $flex_direction_prefix_class, [
68	'type' => Controls_Manager::HIDDEN,
69	'default' => 'row',
70	'condition' => [
71	'direction' => [
72	'row',
73	'row-reverse',
74	],
75	],
76	] );
77
78	$fields['_is_column'] = array_merge( $flex_direction_prefix_class, [
79	'type' => Controls_Manager::HIDDEN,
80	'default' => 'column',
81	'condition' => [
82	'direction' => [
83	'',
84	'column',
85	'column-reverse',
86	],
87	],
88	] );
89
90	$fields['justify_content'] = [
91	'label' => esc_html_x( 'Justify Content', 'Flex Container Control', 'elementor' ),
92	'type' => Controls_Manager::CHOOSE,
93	'label_block' => true,
94	'default' => '',
95	'options' => [
96	'flex-start' => [
97	'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
98	'icon' => 'eicon-flex eicon-justify-start-h',
99	],
100	'center' => [
101	'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
102	'icon' => 'eicon-flex eicon-justify-center-h',
103	],
104	'flex-end' => [
105	'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
106	'icon' => 'eicon-flex eicon-justify-end-h',
107	],
108	'space-between' => [
109	'title' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
110	'icon' => 'eicon-flex eicon-justify-space-between-h',
111	],
112	'space-around' => [
113	'title' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
114	'icon' => 'eicon-flex eicon-justify-space-around-h',
115	],
116	'space-evenly' => [
117	'title' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
118	'icon' => 'eicon-flex eicon-justify-space-evenly-h',
119	],
120	],
121	'selectors' => [
122	'{{SELECTOR}}' => '--justify-content: {{VALUE}};',
123	],
124	'responsive' => true,
125	];
126
127	$fields['align_items'] = [
128	'label' => esc_html_x( 'Align Items', 'Flex Container Control', 'elementor' ),
129	'type' => Controls_Manager::CHOOSE,
130	'default' => '',
131	'options' => [
132	'flex-start' => [
133	'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
134	'icon' => 'eicon-flex eicon-align-start-v',
135	],
136	'center' => [
137	'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
138	'icon' => 'eicon-flex eicon-align-center-v',
139	],
140	'flex-end' => [
141	'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
142	'icon' => 'eicon-flex eicon-align-end-v',
143	],
144	'stretch' => [
145	'title' => esc_html_x( 'Stretch', 'Flex Container Control', 'elementor' ),
146	'icon' => 'eicon-flex eicon-align-stretch-v',
147	],
148	],
149	'selectors' => [
150	'{{SELECTOR}}' => '--align-items: {{VALUE}};',
151	],
152	'responsive' => true,
153	];
154
155	$fields['gap'] = [
156	'label' => esc_html_x( 'Gap', 'Flex Item Control', 'elementor' ),
157	'type' => Controls_Manager::SLIDER,
158	'range' => [
159	'px' => [
160	'min' => 0,
161	'max' => 500,
162	],
163	'%' => [
164	'min' => 0,
165	'max' => 100,
166	],
167	'vw' => [
168	'min' => 0,
169	'max' => 100,
170	],
171	'em' => [
172	'min' => 0,
173	'max' => 50,
174	],
175	],
176	'size_units' => [ 'px', '%', 'vw', 'em', 'rem' ],
177	'selectors' => [
178	'{{SELECTOR}}' => '--gap: {{SIZE}}{{UNIT}};',
179	],
180	'responsive' => true,
181	];
182
183	$fields['wrap'] = [
184	'label' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
185	'type' => Controls_Manager::CHOOSE,
186	'options' => [
187	'nowrap' => [
188	'title' => esc_html_x( 'No Wrap', 'Flex Container Control', 'elementor' ),
189	'icon' => 'eicon-flex eicon-nowrap',
190	],
191	'wrap' => [
192	'title' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
193	'icon' => 'eicon-flex eicon-wrap',
194	],
195	],
196	'description' => esc_html_x(
197	'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).',
198	'Flex Container Control',
199	'elementor'
200	),
201	'default' => '',
202	'selectors' => [
203	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
204	],
205	'responsive' => true,
206	];
207
208	$fields['align_content'] = [
209	'label' => esc_html_x( 'Align Content', 'Flex Container Control', 'elementor' ),
210	'type' => Controls_Manager::SELECT,
211	'default' => '',
212	'options' => [
213	'' => esc_html_x( 'Default', 'Flex Container Control', 'elementor' ),
214	'center' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
215	'flex-start' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
216	'flex-end' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
217	'space-between' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
218	'space-around' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
219	'space-evenly' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
220	],
221	'selectors' => [
222	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
223	],
224	'condition' => [
225	'wrap' => 'wrap',
226	],
227	'responsive' => true,
228	];
229
230	return $fields;
231	}
232
233	protected function get_default_options() {
234	return [
235	'popover' => false,
236	];
237	}
238	}
239