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

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

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