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

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

204 lines 5.4 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_Item extends Group_Control_Base {
9
10	protected static $fields;
11
12	public static function get_type() {
13	return 'flex-item';
14	}
15
16	protected function init_fields() {
17	$fields = [];
18
19	$fields['basis_type'] = [
20	'label' => esc_html_x( 'Flex Basis', 'Flex Item Control', 'elementor' ),
21	'type' => Controls_Manager::SELECT,
22	'options' => [
23	'' => esc_html_x( 'Default', 'Flex Item Control', 'elementor' ),
24	'custom' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
25	],
26	'responsive' => true,
27	];
28
29	$fields['basis'] = [
30	'label' => esc_html_x( 'Custom Width', 'Flex Item Control', 'elementor' ),
31	'type' => Controls_Manager::SLIDER,
32	'range' => [
33	'px' => [
34	'min' => 0,
35	'max' => 1000,
36	],
37	'%' => [
38	'min' => 0,
39	'max' => 100,
40	],
41	'vw' => [
42	'min' => 0,
43	'max' => 100,
44	],
45	],
46	'default' => [
47	'unit' => '%',
48	],
49	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
50	'selectors' => [
51	'{{SELECTOR}}' => '--flex-basis: {{SIZE}}{{UNIT}};',
52	],
53	'condition' => [
54	'basis_type' => 'custom',
55	],
56	'responsive' => true,
57	];
58
59	$fields['align_self'] = [
60	'label' => esc_html_x( 'Align Self', 'Flex Item Control', 'elementor' ),
61	'type' => Controls_Manager::CHOOSE,
62	'options' => [
63	'flex-start' => [
64	'title' => esc_html_x( 'Start', 'Flex Item Control', 'elementor' ),
65	'icon' => 'eicon-flex eicon-align-start-v',
66	],
67	'center' => [
68	'title' => esc_html_x( 'Center', 'Flex Item Control', 'elementor' ),
69	'icon' => 'eicon-flex eicon-align-center-v',
70	],
71	'flex-end' => [
72	'title' => esc_html_x( 'End', 'Flex Item Control', 'elementor' ),
73	'icon' => 'eicon-flex eicon-align-end-v',
74	],
75	'stretch' => [
76	'title' => esc_html_x( 'Stretch', 'Flex Item Control', 'elementor' ),
77	'icon' => 'eicon-flex eicon-align-stretch-v',
78	],
79	],
80	'default' => '',
81	'selectors' => [
82	'{{SELECTOR}}' => '--align-self: {{VALUE}};',
83	],
84	'responsive' => true,
85	'description' => esc_html_x( 'This control will affect contained elements only.', 'Flex Item Control', 'elementor' ),
86	];
87
88	$fields['order'] = [
89	'label' => esc_html_x( 'Order', 'Flex Item Control', 'elementor' ),
90	'type' => Controls_Manager::CHOOSE,
91	'default' => '',
92	'options' => [
93	'start' => [
94	'title' => esc_html_x( 'Start', 'Flex Item Control', 'elementor' ),
95	'icon' => 'eicon-flex eicon-order-start',
96	],
97	'end' => [
98	'title' => esc_html_x( 'End', 'Flex Item Control', 'elementor' ),
99	'icon' => 'eicon-flex eicon-order-end',
100	],
101	'custom' => [
102	'title' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
103	'icon' => 'eicon-ellipsis-v',
104	],
105	],
106	'selectors_dictionary' => [
107	// Hacks to set the order to start / end.
108	// For example, if the user has 10 widgets, but wants to set the 5th one to be first,
109	// this hack should do the trick while taking in account elements with `order: 0` or less.
110	'start' => '-99999 /* order start hack */',
111	'end' => '99999 /* order end hack */',
112	'custom' => '',
113	],
114	'selectors' => [
115	'{{SELECTOR}}' => '--order: {{VALUE}};',
116	],
117	'responsive' => true,
118	'description' => esc_html_x( 'This control will affect contained elements only.', 'Flex Item Control', 'elementor' ),
119	];
120
121	$fields['order_custom'] = [
122	'label' => esc_html_x( 'Custom Order', 'Flex Item Control', 'elementor' ),
123	'type' => Controls_Manager::NUMBER,
124	'selectors' => [
125	'{{SELECTOR}}' => '--order: {{VALUE}};',
126	],
127	'responsive' => true,
128	'condition' => [
129	'order' => 'custom',
130	],
131	];
132
133	$fields['size'] = [
134	'label' => esc_html_x( 'Size', 'Flex Item Control', 'elementor' ),
135	'type' => Controls_Manager::CHOOSE,
136	'default' => '',
137	'options' => [
138	'none' => [
139	'title' => esc_html_x( 'None', 'Flex Item Control', 'elementor' ),
140	'icon' => 'eicon-ban',
141	],
142	'grow' => [
143	'title' => esc_html_x( 'Grow', 'Flex Item Control', 'elementor' ),
144	'icon' => 'eicon-grow',
145	],
146	'shrink' => [
147	'title' => esc_html_x( 'Shrink', 'Flex Item Control', 'elementor' ),
148	'icon' => 'eicon-shrink',
149	],
150	'custom' => [
151	'title' => esc_html_x( 'Custom', 'Flex Item Control', 'elementor' ),
152	'icon' => 'eicon-ellipsis-v',
153	],
154	],
155	'selectors_dictionary' => [
156	'grow' => '--flex-grow: 1; --flex-shrink: 0;',
157	'shrink' => '--flex-grow: 0; --flex-shrink: 1;',
158	'custom' => '',
159	'none' => '--flex-grow: 0; --flex-shrink: 0;',
160	],
161	'selectors' => [
162	'{{SELECTOR}}' => '{{VALUE}};',
163	],
164	'responsive' => true,
165	];
166
167	$fields['grow'] = [
168	'label' => esc_html_x( 'Flex Grow', 'Flex Item Control', 'elementor' ),
169	'type' => Controls_Manager::NUMBER,
170	'selectors' => [
171	'{{SELECTOR}}' => '--flex-grow: {{VALUE}};',
172	],
173	'default' => 1,
174	'placeholder' => 1,
175	'responsive' => true,
176	'condition' => [
177	'size' => 'custom',
178	],
179	];
180
181	$fields['shrink'] = [
182	'label' => esc_html_x( 'Flex Shrink', 'Flex Item Control', 'elementor' ),
183	'type' => Controls_Manager::NUMBER,
184	'selectors' => [
185	'{{SELECTOR}}' => '--flex-shrink: {{VALUE}};',
186	],
187	'default' => 1,
188	'placeholder' => 1,
189	'responsive' => true,
190	'condition' => [
191	'size' => 'custom',
192	],
193	];
194
195	return $fields;
196	}
197
198	protected function get_default_options() {
199	return [
200	'popover' => false,
201	];
202	}
203	}
204