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

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

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