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

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

252 lines 7.5 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__( 'Direction', 'elementor' ),
30	'type' => Controls_Manager::CHOOSE,
31	'options' => [
32	'row' => [
33	'title' => esc_html__( 'Row - horizontal', 'elementor' ),
34	'icon' => 'eicon-arrow-' . $end,
35	],
36	'column' => [
37	'title' => esc_html__( 'Column - vertical', 'elementor' ),
38	'icon' => 'eicon-arrow-down',
39	],
40	'row-reverse' => [
41	'title' => esc_html__( 'Row - reversed', 'elementor' ),
42	'icon' => 'eicon-arrow-' . $start,
43	],
44	'column-reverse' => [
45	'title' => esc_html__( 'Column - reversed', '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; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap;',
54	'column' => '--flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap;',
55	'row-reverse' => '--flex-direction: row-reverse; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap-reverse;',
56	'column-reverse' => '--flex-direction: column-reverse; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap;',
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__( 'Justify Content', 'elementor' ),
92	'type' => Controls_Manager::CHOOSE,
93	'label_block' => true,
94	'default' => '',
95	'options' => [
96	'flex-start' => [
97	'title' => esc_html__( 'Start', 'elementor' ),
98	'icon' => 'eicon-flex eicon-justify-start-h',
99	],
100	'center' => [
101	'title' => esc_html__( 'Center', 'elementor' ),
102	'icon' => 'eicon-flex eicon-justify-center-h',
103	],
104	'flex-end' => [
105	'title' => esc_html__( 'End', 'elementor' ),
106	'icon' => 'eicon-flex eicon-justify-end-h',
107	],
108	'space-between' => [
109	'title' => esc_html__( 'Space Between', 'elementor' ),
110	'icon' => 'eicon-flex eicon-justify-space-between-h',
111	],
112	'space-around' => [
113	'title' => esc_html__( 'Space Around', 'elementor' ),
114	'icon' => 'eicon-flex eicon-justify-space-around-h',
115	],
116	'space-evenly' => [
117	'title' => esc_html__( 'Space Evenly', '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__( 'Align Items', 'elementor' ),
129	'type' => Controls_Manager::CHOOSE,
130	'default' => '',
131	'options' => [
132	'flex-start' => [
133	'title' => esc_html__( 'Start', 'elementor' ),
134	'icon' => 'eicon-flex eicon-align-start-v',
135	],
136	'center' => [
137	'title' => esc_html__( 'Center', 'elementor' ),
138	'icon' => 'eicon-flex eicon-align-center-v',
139	],
140	'flex-end' => [
141	'title' => esc_html__( 'End', 'elementor' ),
142	'icon' => 'eicon-flex eicon-align-end-v',
143	],
144	'stretch' => [
145	'title' => esc_html__( 'Stretch', 'elementor' ),
146	'icon' => 'eicon-flex eicon-align-stretch-v',
147	],
148	],
149	'selectors' => [
150	'{{SELECTOR}}' => '--align-items: {{VALUE}}; --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );',
151	],
152	'responsive' => true,
153	];
154
155	$fields['gap'] = [
156	'label' => esc_html__( 'Gaps', 'elementor' ),
157	'type' => Controls_Manager::GAPS,
158	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
159	'default' => [
160	'unit' => 'px',
161	],
162	'separator' => 'before',
163	'selectors' => [
164	'{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}};--row-gap: {{ROW}}{{UNIT}};--column-gap: {{COLUMN}}{{UNIT}};',
165	],
166	'responsive' => true,
167	'conversion_map' => [
168	'old_key' => 'size',
169	'new_key' => 'column',
170	],
171	'upgrade_conversion_map' => [
172	'old_key' => 'size',
173	'new_keys' => [ 'column', 'row' ],
174	],
175	'validators' => [
176	'Number' => [
177	'min' => 0,
178	],
179	],
180	];
181
182	$fields['wrap'] = [
183	'label' => esc_html__( 'Wrap', 'elementor' ),
184	'type' => Controls_Manager::CHOOSE,
185	'options' => [
186	'nowrap' => [
187	'title' => esc_html__( 'No Wrap', 'elementor' ),
188	'icon' => 'eicon-flex eicon-nowrap',
189	],
190	'wrap' => [
191	'title' => esc_html__( 'Wrap', 'elementor' ),
192	'icon' => 'eicon-flex eicon-wrap',
193	],
194	],
195	'description' => esc_html__( 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).', 'elementor' ),
196	'default' => '',
197	'selectors' => [
198	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
199	],
200	'responsive' => true,
201	];
202
203	$fields['align_content'] = [
204	'label' => esc_html__( 'Align Content', 'elementor' ),
205	'type' => Controls_Manager::CHOOSE,
206	'label_block' => true,
207	'default' => '',
208	'options' => [
209	'flex-start' => [
210	'title' => esc_html__( 'Start', 'elementor' ),
211	'icon' => 'eicon-justify-start-v',
212	],
213	'center' => [
214	'title' => esc_html__( 'Middle', 'elementor' ),
215	'icon' => 'eicon-justify-center-v',
216	],
217	'flex-end' => [
218	'title' => esc_html__( 'End', 'elementor' ),
219	'icon' => 'eicon-justify-end-v',
220	],
221	'space-between' => [
222	'title' => esc_html__( 'Space Between', 'elementor' ),
223	'icon' => 'eicon-justify-space-between-v',
224	],
225	'space-around' => [
226	'title' => esc_html__( 'Space Around', 'elementor' ),
227	'icon' => 'eicon-justify-space-around-v',
228	],
229	'space-evenly' => [
230	'title' => esc_html__( 'Space Evenly', 'elementor' ),
231	'icon' => 'eicon-justify-space-evenly-v',
232	],
233	],
234	'selectors' => [
235	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
236	],
237	'condition' => [
238	'wrap' => 'wrap',
239	],
240	'responsive' => true,
241	];
242
243	return $fields;
244	}
245
246	protected function get_default_options() {
247	return [
248	'popover' => false,
249	];
250	}
251	}
252