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

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

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