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

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

225 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_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; --container-widget-align-self: stretch;',
54	'column' => '--flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial;',
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;',
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;',
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}}; --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );',
151	],
152	'responsive' => true,
153	];
154
155	$fields['gaps'] = [
156	'label' => esc_html__( 'Gaps', 'elementor' ),
157	'type' => Controls_Manager::GAPS,
158	'size_units' => [ 'px', '%', 'em', 'rem', 'vm', 'custom' ],
159	'default' => [
160	'unit' => 'px',
161	],
162	'separator' => 'before',
163	'selectors' => [
164	'{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}}',
165	],
166	'responsive' => true,
167	];
168
169	$fields['wrap'] = [
170	'label' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
171	'type' => Controls_Manager::CHOOSE,
172	'options' => [
173	'nowrap' => [
174	'title' => esc_html_x( 'No Wrap', 'Flex Container Control', 'elementor' ),
175	'icon' => 'eicon-flex eicon-nowrap',
176	],
177	'wrap' => [
178	'title' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
179	'icon' => 'eicon-flex eicon-wrap',
180	],
181	],
182	'description' => esc_html_x(
183	'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).',
184	'Flex Container Control',
185	'elementor'
186	),
187	'default' => '',
188	'selectors' => [
189	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
190	],
191	'responsive' => true,
192	];
193
194	$fields['align_content'] = [
195	'label' => esc_html_x( 'Align Content', 'Flex Container Control', 'elementor' ),
196	'type' => Controls_Manager::SELECT,
197	'default' => '',
198	'options' => [
199	'' => esc_html_x( 'Default', 'Flex Container Control', 'elementor' ),
200	'center' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
201	'flex-start' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
202	'flex-end' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
203	'space-between' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
204	'space-around' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
205	'space-evenly' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
206	],
207	'selectors' => [
208	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
209	],
210	'condition' => [
211	'wrap' => 'wrap',
212	],
213	'responsive' => true,
214	];
215
216	return $fields;
217	}
218
219	protected function get_default_options() {
220	return [
221	'popover' => false,
222	];
223	}
224	}
225