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

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

238 lines 7.2 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	$fields['_is_row'] = [
65	'type' => Controls_Manager::HIDDEN,
66	'prefix_class' => 'e-container--',
67	'default' => 'row',
68	'condition' => [
69	'direction' => [
70	'row',
71	'row-reverse',
72	],
73	],
74	];
75
76	$fields['_is_column'] = [
77	'type' => Controls_Manager::HIDDEN,
78	'prefix_class' => 'e-container--',
79	'default' => 'column',
80	'condition' => [
81	'direction' => [
82	'',
83	'column',
84	'column-reverse',
85	],
86	],
87	];
88
89	$fields['justify_content'] = [
90	'label' => esc_html_x( 'Justify Content', 'Flex Container Control', 'elementor' ),
91	'type' => Controls_Manager::CHOOSE,
92	'label_block' => true,
93	'default' => '',
94	'options' => [
95	'flex-start' => [
96	'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
97	'icon' => 'eicon-flex eicon-justify-start-h',
98	],
99	'center' => [
100	'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
101	'icon' => 'eicon-flex eicon-justify-center-h',
102	],
103	'flex-end' => [
104	'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
105	'icon' => 'eicon-flex eicon-justify-end-h',
106	],
107	'space-between' => [
108	'title' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
109	'icon' => 'eicon-flex eicon-justify-space-between-h',
110	],
111	'space-around' => [
112	'title' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
113	'icon' => 'eicon-flex eicon-justify-space-around-h',
114	],
115	'space-evenly' => [
116	'title' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
117	'icon' => 'eicon-flex eicon-justify-space-evenly-h',
118	],
119	],
120	'selectors' => [
121	'{{SELECTOR}}' => '--justify-content: {{VALUE}};',
122	],
123	'responsive' => true,
124	];
125
126	$fields['align_items'] = [
127	'label' => esc_html_x( 'Align Items', 'Flex Container Control', 'elementor' ),
128	'type' => Controls_Manager::CHOOSE,
129	'default' => '',
130	'options' => [
131	'flex-start' => [
132	'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
133	'icon' => 'eicon-flex eicon-align-start-v',
134	],
135	'center' => [
136	'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
137	'icon' => 'eicon-flex eicon-align-center-v',
138	],
139	'flex-end' => [
140	'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
141	'icon' => 'eicon-flex eicon-align-end-v',
142	],
143	'stretch' => [
144	'title' => esc_html_x( 'Stretch', 'Flex Container Control', 'elementor' ),
145	'icon' => 'eicon-flex eicon-align-stretch-v',
146	],
147	],
148	'selectors' => [
149	'{{SELECTOR}}' => '--align-items: {{VALUE}};',
150	],
151	'responsive' => true,
152	];
153
154	$fields['gap'] = [
155	'label' => esc_html_x( 'Gap', 'Flex Item Control', 'elementor' ),
156	'type' => Controls_Manager::SLIDER,
157	'range' => [
158	'px' => [
159	'min' => 0,
160	'max' => 500,
161	],
162	'%' => [
163	'min' => 0,
164	'max' => 100,
165	],
166	'vw' => [
167	'min' => 0,
168	'max' => 100,
169	],
170	'em' => [
171	'min' => 0,
172	'max' => 50,
173	],
174	],
175	'size_units' => [ 'px', '%', 'vw', 'em' ],
176	'selectors' => [
177	'{{SELECTOR}}' => '--gap: {{SIZE}}{{UNIT}};',
178	],
179	'responsive' => true,
180	];
181
182	$fields['wrap'] = [
183	'label' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
184	'type' => Controls_Manager::CHOOSE,
185	'options' => [
186	'nowrap' => [
187	'title' => esc_html_x( 'No Wrap', 'Flex Container Control', 'elementor' ),
188	'icon' => 'eicon-flex eicon-nowrap',
189	],
190	'wrap' => [
191	'title' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
192	'icon' => 'eicon-flex eicon-wrap',
193	],
194	],
195	'description' => esc_html_x(
196	'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).',
197	'Flex Container Control',
198	'elementor'
199	),
200	'default' => '',
201	'selectors' => [
202	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
203	],
204	'responsive' => true,
205	];
206
207	$fields['align_content'] = [
208	'label' => esc_html_x( 'Align Content', 'Flex Container Control', 'elementor' ),
209	'type' => Controls_Manager::SELECT,
210	'default' => '',
211	'options' => [
212	'' => esc_html_x( 'Default', 'Flex Container Control', 'elementor' ),
213	'center' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
214	'flex-start' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
215	'flex-end' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
216	'space-between' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
217	'space-around' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
218	'space-evenly' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
219	],
220	'selectors' => [
221	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
222	],
223	'condition' => [
224	'wrap' => 'wrap',
225	],
226	'responsive' => true,
227	];
228
229	return $fields;
230	}
231
232	protected function get_default_options() {
233	return [
234	'popover' => false,
235	];
236	}
237	}
238