elementor / includes / widgets / divider.php

divider.php in Elementor Website Builder – more than just a page builder 4.0.9, at includes/widgets/divider.php

1,142 lines 33.3 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor divider widget.
13	*
14	* Elementor widget that displays a line that divides different elements in the
15	* page.
16	*
17	* @since 1.0.0
18	*/
19	class Widget_Divider extends Widget_Base {
20
21	/**
22	* Get widget name.
23	*
24	* Retrieve divider widget name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Widget name.
30	*/
31	public function get_name() {
32	return 'divider';
33	}
34
35	/**
36	* Get widget title.
37	*
38	* Retrieve divider widget title.
39	*
40	* @since 1.0.0
41	* @access public
42	*
43	* @return string Widget title.
44	*/
45	public function get_title() {
46	return esc_html__( 'Divider', 'elementor' );
47	}
48
49	/**
50	* Get widget icon.
51	*
52	* Retrieve divider widget icon.
53	*
54	* @since 1.0.0
55	* @access public
56	*
57	* @return string Widget icon.
58	*/
59	public function get_icon() {
60	return 'eicon-divider';
61	}
62
63	/**
64	* Get widget categories.
65	*
66	* Retrieve the list of categories the divider widget belongs to.
67	*
68	* Used to determine where to display the widget in the editor.
69	*
70	* @since 2.0.0
71	* @access public
72	*
73	* @return array Widget categories.
74	*/
75	public function get_categories() {
76	return [ 'basic' ];
77	}
78
79	/**
80	* Get widget keywords.
81	*
82	* Retrieve the list of keywords the widget belongs to.
83	*
84	* @since 2.1.0
85	* @access public
86	*
87	* @return array Widget keywords.
88	*/
89	public function get_keywords() {
90	return [ 'divider', 'hr', 'line', 'border' ];
91	}
92
93	protected function is_dynamic_content(): bool {
94	return false;
95	}
96
97	public function has_widget_inner_wrapper(): bool {
98	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
99	}
100
101	/**
102	* Get style dependencies.
103	*
104	* Retrieve the list of style dependencies the widget requires.
105	*
106	* @since 3.24.0
107	* @access public
108	*
109	* @return array Widget style dependencies.
110	*/
111	public function get_style_depends(): array {
112	return [ 'widget-divider' ];
113	}
114
115	private static function get_additional_styles() {
116	static $additional_styles = null;
117
118	if ( null !== $additional_styles ) {
119	return $additional_styles;
120	}
121	$additional_styles = [];
122	/**
123	* Additional Styles.
124	*
125	* Filters the styles used by Elementor to add additional divider styles.
126	*
127	* @since 2.7.0
128	*
129	* @param array $additional_styles Additional Elementor divider styles.
130	*/
131	$additional_styles = apply_filters( 'elementor/divider/styles/additional_styles', $additional_styles );
132	return $additional_styles;
133	}
134
135	private function get_separator_styles() {
136	return array_merge(
137	self::get_additional_styles(),
138	[
139	'curly' => [
140	'label' => esc_html_x( 'Curly', 'Shapes', 'elementor' ),
141	'shape' => '<path d="M0,21c3.3,0,8.3-0.9,15.7-7.1c6.6-5.4,4.4-9.3,2.4-10.3c-3.4-1.8-7.7,1.3-7.3,8.8C11.2,20,17.1,21,24,21"/>',
142	'preserve_aspect_ratio' => false,
143	'supports_amount' => true,
144	'round' => false,
145	'group' => 'line',
146	],
147	'curved' => [
148	'label' => esc_html_x( 'Curved', 'Shapes', 'elementor' ),
149	'shape' => '<path d="M0,6c6,0,6,13,12,13S18,6,24,6"/>',
150	'preserve_aspect_ratio' => false,
151	'supports_amount' => true,
152	'round' => false,
153	'group' => 'line',
154	],
155	'multiple' => [
156	'label' => esc_html_x( 'Multiple', 'Shapes', 'elementor' ),
157	'shape' => '<path d="M24,8v12H0V8H24z M24,4v1H0V4H24z"/>',
158	'preserve_aspect_ratio' => false,
159	'supports_amount' => false,
160	'round' => false,
161	'group' => 'pattern',
162	],
163	'slashes' => [
164	'label' => esc_html_x( 'Slashes', 'Shapes', 'elementor' ),
165	'shape' => '<g transform="translate(-12.000000, 0)"><path d="M28,0L10,18"/><path d="M18,0L0,18"/><path d="M48,0L30,18"/><path d="M38,0L20,18"/></g>',
166	'preserve_aspect_ratio' => false,
167	'supports_amount' => true,
168	'round' => false,
169	'view_box' => '0 0 20 16',
170	'group' => 'line',
171	],
172	'squared' => [
173	'label' => esc_html_x( 'Squared', 'Shapes', 'elementor' ),
174	'shape' => '<polyline points="0,6 6,6 6,18 18,18 18,6 24,6 "/>',
175	'preserve_aspect_ratio' => false,
176	'supports_amount' => true,
177	'round' => false,
178	'group' => 'line',
179	],
180	'wavy' => [
181	'label' => esc_html_x( 'Wavy', 'Shapes', 'elementor' ),
182	'shape' => '<path d="M0,6c6,0,0.9,11.1,6.9,11.1S18,6,24,6"/>',
183	'preserve_aspect_ratio' => false,
184	'supports_amount' => true,
185	'round' => false,
186	'group' => 'line',
187	],
188	'zigzag' => [
189	'label' => esc_html_x( 'Zigzag', 'Shapes', 'elementor' ),
190	'shape' => '<polyline points="0,18 12,6 24,18 "/>',
191	'preserve_aspect_ratio' => false,
192	'supports_amount' => true,
193	'round' => false,
194	'group' => 'line',
195	],
196	'arrows' => [
197	'label' => esc_html_x( 'Arrows', 'Shapes', 'elementor' ),
198	'shape' => '<path d="M14.2,4c0.3,0,0.5,0.1,0.7,0.3l7.9,7.2c0.2,0.2,0.3,0.4,0.3,0.7s-0.1,0.5-0.3,0.7l-7.9,7.2c-0.2,0.2-0.4,0.3-0.7,0.3s-0.5-0.1-0.7-0.3s-0.3-0.4-0.3-0.7l0-2.9l-11.5,0c-0.4,0-0.7-0.3-0.7-0.7V9.4C1,9,1.3,8.7,1.7,8.7l11.5,0l0-3.6c0-0.3,0.1-0.5,0.3-0.7S13.9,4,14.2,4z"/>',
199	'preserve_aspect_ratio' => true,
200	'supports_amount' => true,
201	'round' => true,
202	'group' => 'pattern',
203	],
204	'pluses' => [
205	'label' => esc_html_x( 'Pluses', 'Shapes', 'elementor' ),
206	'shape' => '<path d="M21.4,9.6h-7.1V2.6c0-0.9-0.7-1.6-1.6-1.6h-1.6c-0.9,0-1.6,0.7-1.6,1.6v7.1H2.6C1.7,9.6,1,10.3,1,11.2v1.6c0,0.9,0.7,1.6,1.6,1.6h7.1v7.1c0,0.9,0.7,1.6,1.6,1.6h1.6c0.9,0,1.6-0.7,1.6-1.6v-7.1h7.1c0.9,0,1.6-0.7,1.6-1.6v-1.6C23,10.3,22.3,9.6,21.4,9.6z"/>',
207	'preserve_aspect_ratio' => true,
208	'supports_amount' => true,
209	'round' => false,
210	'group' => 'pattern',
211	],
212	'rhombus' => [
213	'label' => esc_html_x( 'Rhombus', 'Shapes', 'elementor' ),
214	'shape' => '<path d="M12.7,2.3c-0.4-0.4-1.1-0.4-1.5,0l-8,9.1c-0.3,0.4-0.3,0.9,0,1.2l8,9.1c0.4,0.4,1.1,0.4,1.5,0l8-9.1c0.3-0.4,0.3-0.9,0-1.2L12.7,2.3z"/>',
215	'preserve_aspect_ratio' => false,
216	'supports_amount' => true,
217	'round' => false,
218	'group' => 'pattern',
219	],
220	'parallelogram' => [
221	'label' => esc_html_x( 'Parallelogram', 'Shapes', 'elementor' ),
222	'shape' => '<polygon points="9.4,2 24,2 14.6,21.6 0,21.6"/>',
223	'preserve_aspect_ratio' => false,
224	'supports_amount' => true,
225	'round' => false,
226	'group' => 'pattern',
227	],
228	'rectangles' => [
229	'label' => esc_html_x( 'Rectangles', 'Shapes', 'elementor' ),
230	'shape' => '<rect x="15" y="0" width="30" height="30"/>',
231	'preserve_aspect_ratio' => false,
232	'supports_amount' => true,
233	'round' => true,
234	'group' => 'pattern',
235	'view_box' => '0 0 60 30',
236	],
237	'dots_tribal' => [
238	'label' => esc_html_x( 'Dots', 'Shapes', 'elementor' ),
239	'shape' => '<path d="M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z"/>',
240	'preserve_aspect_ratio' => true,
241	'supports_amount' => false,
242	'round' => false,
243	'group' => 'tribal',
244	'view_box' => '0 0 126 26',
245	],
246	'trees_2_tribal' => [
247	'label' => esc_html_x( 'Fir Tree', 'Shapes', 'elementor' ),
248	'shape' => '<path d="M111.9,18.3v3.4H109v-3.4H111.9z M90.8,18.3v3.4H88v-3.4H90.8z M69.8,18.3v3.4h-2.9v-3.4H69.8z M48.8,18.3v3.4h-2.9v-3.4H48.8z M27.7,18.3v3.4h-2.9v-3.4H27.7z M6.7,18.3v3.4H3.8v-3.4H6.7z M46.4,4l4.3,4.8l-1.8,0l3.5,4.4l-2.2-0.1l3,3.3l-11,0.4l3.6-3.8l-2.9-0.1l3.1-4.2l-1.9,0L46.4,4z M111.4,4l2.4,4.8l-1.8,0l3.5,4.4l-2.5-0.1l3.3,3.3h-11l3.1-3.4l-2.5-0.1l3.1-4.2l-1.9,0L111.4,4z M89.9,4l2.9,4.8l-1.9,0l3.2,4.2l-2.5,0l3.5,3.5l-11-0.4l3-3.1l-2.4,0L88,8.8l-1.9,0L89.9,4z M68.6,4l3,4.4l-1.9,0.1l3.4,4.1l-2.7,0.1l3.8,3.7H63.8l2.9-3.6l-2.9,0.1L67,8.7l-2,0.1L68.6,4z M26.5,4l3,4.4l-1.9,0.1l3.7,4.7l-2.5-0.1l3.3,3.3H21l3.1-3.4l-2.5-0.1l3.2-4.3l-2,0.1L26.5,4z M4.9,4l3.7,4.8l-1.5,0l3.1,4.2L7.6,13l3.4,3.4H0l3-3.3l-2.3,0.1l3.5-4.4l-2.3,0L4.9,4z"/>',
249	'preserve_aspect_ratio' => true,
250	'supports_amount' => false,
251	'round' => false,
252	'group' => 'tribal',
253	'view_box' => '0 0 126 26',
254	],
255	'rounds_tribal' => [
256	'label' => esc_html_x( 'Half Rounds', 'Shapes', 'elementor' ),
257	'shape' => '<path d="M11.9,15.9L11.9,15.9L0,16c-0.2-3.7,1.5-5.7,4.9-6C10,9.6,12.4,14.2,11.9,15.9zM26.9,15.9L26.9,15.9L15,16c0.5-3.7,2.5-5.7,5.9-6C26,9.6,27.4,14.2,26.9,15.9z M37.1,10c3.4,0.3,5.1,2.3,4.9,6H30.1C29.5,14.4,31.9,9.6,37.1,10z M57,15.9L57,15.9L45,16c0-3.4,1.6-5.4,4.9-5.9C54.8,9.3,57.4,14.2,57,15.9z M71.9,15.9L71.9,15.9L60,16c-0.2-3.7,1.5-5.7,4.9-6C70,9.6,72.4,14.2,71.9,15.9z M82.2,10c3.4,0.3,5,2.3,4.8,6H75.3C74,13,77.1,9.6,82.2,10zM101.9,15.9L101.9,15.9L90,16c-0.2-3.7,1.5-5.7,4.9-6C100,9.6,102.4,14.2,101.9,15.9z M112.1,10.1c2.7,0.5,4.3,2.5,4.9,5.9h-11.9l0,0C104.5,14.4,108,9.3,112.1,10.1z"/>',
258	'preserve_aspect_ratio' => true,
259	'supports_amount' => false,
260	'round' => false,
261	'group' => 'tribal',
262	'view_box' => '0 0 120 26',
263	],
264	'leaves_tribal' => [
265	'label' => esc_html_x( 'Leaves', 'Shapes', 'elementor' ),
266	'shape' => '<path d="M3,1.5C5,4.9,6,8.8,6,13s-1.7,8.1-5,11.5C0.3,21.1,0,17.2,0,13S1,4.9,3,1.5z M16,1.5c2,3.4,3,7.3,3,11.5s-1,8.1-3,11.5c-2-4.1-3-8.3-3-12.5S14,4.3,16,1.5z M29,1.5c2,4.8,3,9.3,3,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S27,4.9,29,1.5z M41.1,1.5C43.7,4.9,45,8.8,45,13s-1,8.1-3,11.5c-2-3.4-3-7.3-3-11.5S39.7,4.9,41.1,1.5zM55,1.5c2,2.8,3,6.3,3,10.5s-1.3,8.4-4,12.5c-1.3-3.4-2-7.3-2-11.5S53,4.9,55,1.5z M68,1.5c2,3.4,3,7.3,3,11.5s-0.7,8.1-2,11.5c-2.7-4.8-4-9.3-4-13.5S66,3.6,68,1.5z M82,1.5c1.3,4.8,2,9.3,2,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S79.3,4.9,82,1.5z M94,1.5c2,3.4,3,7.3,3,11.5s-1.3,8.1-4,11.5c-1.3-1.4-2-4.3-2-8.5S92,6.9,94,1.5z M107,1.5c2,2.1,3,5.3,3,9.5s-0.7,8.7-2,13.5c-2.7-3.4-4-7.3-4-11.5S105,4.9,107,1.5z"/>',
267	'preserve_aspect_ratio' => true,
268	'supports_amount' => false,
269	'round' => false,
270	'group' => 'tribal',
271	'view_box' => '0 0 117 26',
272	],
273	'stripes_tribal' => [
274	'label' => esc_html_x( 'Stripes', 'Shapes', 'elementor' ),
275	'shape' => '<path d="M54,1.6V26h-9V2.5L54,1.6z M69,1.6v23.3L60,26V1.6H69z M24,1.6v23.5l-9-0.6V1.6H24z M30,0l9,0.7v24.5h-9V0z M9,2.5v22H0V3.7L9,2.5z M75,1.6l9,0.9v22h-9V1.6z M99,2.7v21.7h-9V3.8L99,2.7z M114,3.8v20.7l-9-0.5V3.8L114,3.8z"/>',
276	'preserve_aspect_ratio' => true,
277	'supports_amount' => false,
278	'round' => false,
279	'group' => 'tribal',
280	'view_box' => '0 0 120 26',
281	],
282	'squares_tribal' => [
283	'label' => esc_html_x( 'Squares', 'Shapes', 'elementor' ),
284	'shape' => '<path d="M46.8,7.8v11.5L36,18.6V7.8H46.8z M82.4,7.8L84,18.6l-12,0.7L70.4,7.8H82.4z M0,7.8l12,0.9v9.9H1.3L0,7.8z M30,7.8v10.8H19L18,7.8H30z M63.7,7.8L66,18.6H54V9.5L63.7,7.8z M89.8,7L102,7.8v10.8H91.2L89.8,7zM108,7.8l12,0.9v8.9l-12,1V7.8z"/>',
285	'preserve_aspect_ratio' => true,
286	'supports_amount' => false,
287	'round' => false,
288	'group' => 'tribal',
289	'view_box' => '0 0 126 26',
290	],
291	'trees_tribal' => [
292	'label' => esc_html_x( 'Trees', 'Shapes', 'elementor' ),
293	'shape' => '<path d="M6.4,2l4.2,5.7H7.7v2.7l3.8,5.2l-3.8,0v7.8H4.8v-7.8H0l4.8-5.2V7.7H1.1L6.4,2z M25.6,2L31,7.7h-3.7v2.7l4.8,5.2h-4.8v7.8h-2.8v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L25.6,2z M47.5,2l4.2,5.7h-3.3v2.7l3.8,5.2l-3.8,0l0.4,7.8h-2.8v-7.8H41l4.8-5.2V7.7h-3.7L47.5,2z M66.2,2l5.4,5.7h-3.7v2.7l4.8,5.2h-4.8v7.8H65v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L66.2,2zM87.4,2l4.8,5.7h-2.9v3.1l3.8,4.8l-3.8,0v7.8h-2.8v-7.8h-4.8l4.8-4.8V7.7h-3.7L87.4,2z M107.3,2l5.4,5.7h-3.7v2.7l4.8,5.2h-4.8v7.8H106v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L107.3,2z"/>',
294	'preserve_aspect_ratio' => true,
295	'supports_amount' => false,
296	'round' => false,
297	'group' => 'tribal',
298	'view_box' => '0 0 123 26',
299	],
300	'planes_tribal' => [
301	'label' => esc_html_x( 'Tribal', 'Shapes', 'elementor' ),
302	'shape' => '<path d="M29.6,10.3l2.1,2.2l-3.6,3.3h7v2.9h-7l3.6,3.5l-2.1,1.7l-5.2-5.2h-5.8v-2.9h5.8L29.6,10.3z M70.9,9.6l2.1,1.7l-3.6,3.5h7v2.9h-7l3.6,3.3l-2.1,2.2l-5.2-5.5h-5.8v-2.9h5.8L70.9,9.6z M111.5,9.6l2.1,1.7l-3.6,3.5h7v2.9h-7l3.6,3.3l-2.1,2.2l-5.2-5.5h-5.8v-2.9h5.8L111.5,9.6z M50.2,2.7l2.1,1.7l-3.6,3.5h7v2.9h-7l3.6,3.3l-2.1,2.2L45,10.7h-5.8V7.9H45L50.2,2.7z M11,2l2.1,1.7L9.6,7.2h7V10h-7l3.6,3.3L11,15.5L5.8,10H0V7.2h5.8L11,2z M91.5,2l2.1,2.2l-3.6,3.3h7v2.9h-7l3.6,3.5l-2.1,1.7l-5.2-5.2h-5.8V7.5h5.8L91.5,2z"/>',
303	'preserve_aspect_ratio' => true,
304	'supports_amount' => false,
305	'round' => false,
306	'group' => 'tribal',
307	'view_box' => '0 0 121 26',
308	],
309	'x_tribal' => [
310	'label' => esc_html_x( 'X', 'Shapes', 'elementor' ),
311	'shape' => '<path d="M10.7,6l2.5,2.6l-4,4.3l4,5.4l-2.5,1.9l-4.5-5.2l-3.9,4.2L0.7,17L4,13.1L0,8.6l2.3-1.3l3.9,3.9L10.7,6z M23.9,6.6l4.2,4.5L32,7.2l2.3,1.3l-4,4.5l3.2,3.9L32,19.1l-3.9-3.3l-4.5,4.3l-2.5-1.9l4.4-5.1l-4.2-3.9L23.9,6.6zM73.5,6L76,8.6l-4,4.3l4,5.4l-2.5,1.9l-4.5-5.2l-3.9,4.2L63.5,17l4.1-4.7L63.5,8l2.3-1.3l4.1,3.6L73.5,6z M94,6l2.5,2.6l-4,4.3l4,5.4L94,20.1l-3.9-5l-3.9,4.2L84,17l3.2-3.9L84,8.6l2.3-1.3l3.2,3.9L94,6z M106.9,6l4.5,5.1l3.9-3.9l2.3,1.3l-4,4.5l3.2,3.9l-1.6,2.1l-3.9-4.2l-4.5,5.2l-2.5-1.9l4-5.4l-4-4.3L106.9,6z M53.1,6l2.5,2.6l-4,4.3l4,4.6l-2.5,1.9l-4.5-4.5l-3.5,4.5L43.1,17l3.2-3.9l-4-4.5l2.3-1.3l3.9,3.9L53.1,6z"/>',
312	'preserve_aspect_ratio' => true,
313	'supports_amount' => false,
314	'round' => false,
315	'group' => 'tribal',
316	'view_box' => '0 0 126 26',
317	],
318	'zigzag_tribal' => [
319	'label' => esc_html_x( 'Zigzag', 'Shapes', 'elementor' ),
320	'shape' => '<polygon points="0,14.4 0,21 11.5,12.4 21.3,20 30.4,11.1 40.3,20 51,12.4 60.6,20 69.6,11.1 79.3,20 90.1,12.4 99.6,20 109.7,11.1 120,21 120,14.4 109.7,5 99.6,13 90.1,5 79.3,14.5 71,5.7 60.6,12.4 51,5 40.3,14.5 31.1,5 21.3,13 11.5,5 "/>',
321	'preserve_aspect_ratio' => true,
322	'supports_amount' => false,
323	'round' => false,
324	'group' => 'tribal',
325	'view_box' => '0 0 120 26',
326	],
327	]
328	);
329	}
330
331	private function filter_styles_by( $styles_array, $key, $value ) {
332	return array_filter( $styles_array, function( $style ) use ( $key, $value ) {
333	return $value === $style[ $key ];
334	} );
335	}
336
337	private function get_options_by_groups( $styles, $group = false ) {
338	$groups = [
339	'line' => [
340	'label' => esc_html__( 'Line', 'elementor' ),
341	'options' => [
342	'solid' => esc_html__( 'Solid', 'elementor' ),
343	'double' => esc_html__( 'Double', 'elementor' ),
344	'dotted' => esc_html__( 'Dotted', 'elementor' ),
345	'dashed' => esc_html__( 'Dashed', 'elementor' ),
346	],
347	],
348	];
349	foreach ( $styles as $key => $style ) {
350	if ( ! isset( $groups[ $style['group'] ] ) ) {
351	$groups[ $style['group'] ] = [
352	'label' => ucwords( str_replace( '_', '', $style['group'] ) ),
353	'options' => [],
354	];
355	}
356	$groups[ $style['group'] ]['options'][ $key ] = $style['label'];
357	}
358
359	if ( $group && isset( $groups[ $group ] ) ) {
360	return $groups[ $group ];
361	}
362	return $groups;
363	}
364
365	/**
366	* Register divider widget controls.
367	*
368	* Adds different input fields to allow the user to change and customize the widget settings.
369	*
370	* @since 3.1.0
371	* @access protected
372	*/
373	protected function register_controls() {
374	$styles = $this->get_separator_styles();
375	$this->start_controls_section(
376	'section_divider',
377	[
378	'label' => esc_html__( 'Divider', 'elementor' ),
379	]
380	);
381
382	$this->add_control(
383	'style',
384	[
385	'label' => esc_html__( 'Style', 'elementor' ),
386	'type' => Controls_Manager::SELECT,
387	'groups' => array_values( $this->get_options_by_groups( $styles ) ),
388	'render_type' => 'template',
389	'default' => 'solid',
390	'selectors' => [
391	'{{WRAPPER}}' => '--divider-border-style: {{VALUE}}',
392	],
393	]
394	);
395
396	$this->add_control(
397	'separator_type',
398	[
399	'type' => Controls_Manager::HIDDEN,
400	'default' => 'pattern',
401	'prefix_class' => 'elementor-widget-divider--separator-type-',
402	'condition' => [
403	'style!' => [
404	'',
405	'solid',
406	'double',
407	'dotted',
408	'dashed',
409	],
410	],
411	'render_type' => 'template',
412	]
413	);
414
415	$this->add_control(
416	'pattern_spacing_flag',
417	[
418	'type' => Controls_Manager::HIDDEN,
419	'default' => 'no-spacing',
420	'prefix_class' => 'elementor-widget-divider--',
421	'condition' => [
422	'style' => array_keys( $this->filter_styles_by( $styles, 'supports_amount', false ) ),
423	],
424	'render_type' => 'template',
425	]
426	);
427
428	$this->add_control(
429	'pattern_round_flag',
430	[
431	'type' => Controls_Manager::HIDDEN,
432	'default' => 'bg-round',
433	'prefix_class' => 'elementor-widget-divider--',
434	'condition' => [
435	'style' => array_keys( $this->filter_styles_by( $styles, 'round', true ) ),
436	],
437	]
438	);
439
440	$this->add_responsive_control(
441	'width',
442	[
443	'label' => esc_html__( 'Width', 'elementor' ),
444	'type' => Controls_Manager::SLIDER,
445	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
446	'range' => [
447	'px' => [
448	'max' => 1000,
449	],
450	],
451	'default' => [
452	'size' => 100,
453	'unit' => '%',
454	],
455	'tablet_default' => [
456	'unit' => '%',
457	],
458	'mobile_default' => [
459	'unit' => '%',
460	],
461	'selectors' => [
462	'{{WRAPPER}} .elementor-divider-separator' => 'width: {{SIZE}}{{UNIT}};',
463	],
464	]
465	);
466
467	$this->add_responsive_control(
468	'align',
469	[
470	'label' => esc_html__( 'Alignment', 'elementor' ),
471	'type' => Controls_Manager::CHOOSE,
472	'options' => [
473	'left' => [
474	'title' => esc_html__( 'Left', 'elementor' ),
475	'icon' => 'eicon-text-align-left',
476	],
477	'center' => [
478	'title' => esc_html__( 'Center', 'elementor' ),
479	'icon' => 'eicon-text-align-center',
480	],
481	'right' => [
482	'title' => esc_html__( 'Right', 'elementor' ),
483	'icon' => 'eicon-text-align-right',
484	],
485	],
486	'selectors' => [
487	'{{WRAPPER}} .elementor-divider' => 'text-align: {{VALUE}}',
488	'{{WRAPPER}} .elementor-divider-separator' => 'margin: 0 auto; margin-{{VALUE}}: 0',
489	],
490	]
491	);
492
493	$this->add_control(
494	'look',
495	[
496	'label' => esc_html__( 'Add Element', 'elementor' ),
497	'type' => Controls_Manager::CHOOSE,
498	'default' => 'line',
499	'options' => [
500	'line' => [
501	'title' => esc_html__( 'None', 'elementor' ),
502	'icon' => 'eicon-ban',
503	],
504	'line_text' => [
505	'title' => esc_html__( 'Text', 'elementor' ),
506	'icon' => 'eicon-t-letter-bold',
507	],
508	'line_icon' => [
509	'title' => esc_html__( 'Icon', 'elementor' ),
510	'icon' => 'eicon-star',
511	],
512	],
513	'separator' => 'before',
514	'prefix_class' => 'elementor-widget-divider--view-',
515	'toggle' => false,
516	'render_type' => 'template',
517	]
518	);
519
520	$this->add_control(
521	'text',
522	[
523	'label' => esc_html__( 'Text', 'elementor' ),
524	'type' => Controls_Manager::TEXT,
525	'condition' => [
526	'look' => 'line_text',
527	],
528	'default' => esc_html__( 'Divider', 'elementor' ),
529	'dynamic' => [
530	'active' => true,
531	],
532	]
533	);
534
535	$this->add_control(
536	'html_tag',
537	[
538	'label' => esc_html__( 'HTML Tag', 'elementor' ),
539	'type' => Controls_Manager::SELECT,
540	'condition' => [
541	'look' => 'line_text',
542	],
543	'options' => [
544	'h1' => 'H1',
545	'h2' => 'H2',
546	'h3' => 'H3',
547	'h4' => 'H4',
548	'h5' => 'H5',
549	'h6' => 'H6',
550	'div' => 'div',
551	'span' => 'span',
552	'p' => 'p',
553	],
554	'default' => 'span',
555	]
556	);
557
558	$this->add_control(
559	'icon',
560	[
561	'label' => esc_html__( 'Icon', 'elementor' ),
562	'type' => Controls_Manager::ICONS,
563	'default' => [
564	'value' => 'fas fa-star',
565	'library' => 'fa-solid',
566	],
567	'condition' => [
568	'look' => 'line_icon',
569	],
570	]
571	);
572
573	$this->end_controls_section();
574
575	$this->start_controls_section(
576	'section_divider_style',
577	[
578	'label' => esc_html__( 'Divider', 'elementor' ),
579	'tab' => Controls_Manager::TAB_STYLE,
580	'condition' => [
581	'style!' => 'none',
582	],
583	]
584	);
585
586	$this->add_control(
587	'color',
588	[
589	'label' => esc_html__( 'Color', 'elementor' ),
590	'type' => Controls_Manager::COLOR,
591	'global' => [
592	'default' => Global_Colors::COLOR_SECONDARY,
593	],
594	'default' => '#000',
595	'render_type' => 'template',
596	'selectors' => [
597	'{{WRAPPER}}' => '--divider-color: {{VALUE}}',
598	],
599	]
600	);
601
602	$this->add_control(
603	'weight',
604	[
605	'label' => esc_html__( 'Weight', 'elementor' ),
606	'type' => Controls_Manager::SLIDER,
607	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
608	'default' => [
609	'size' => 1,
610	],
611	'range' => [
612	'px' => [
613	'min' => 1,
614	'max' => 10,
615	'step' => 0.1,
616	],
617	'em' => [
618	'min' => 0.1,
619	'max' => 1,
620	],
621	'rem' => [
622	'min' => 0.1,
623	'max' => 1,
624	],
625	],
626	'render_type' => 'template',
627	'condition' => [
628	'style' => array_keys( $this->get_options_by_groups( $styles, 'line' )['options'] ),
629	],
630	'selectors' => [
631	'{{WRAPPER}}' => '--divider-border-width: {{SIZE}}{{UNIT}}',
632	],
633	]
634	);
635
636	$this->add_control(
637	'pattern_height',
638	[
639	'label' => esc_html__( 'Size', 'elementor' ),
640	'type' => Controls_Manager::SLIDER,
641	'selectors' => [
642	'{{WRAPPER}}' => '--divider-pattern-height: {{SIZE}}{{UNIT}}',
643	],
644	'default' => [
645	'size' => 20,
646	],
647	'range' => [
648	'px' => [
649	'step' => 0.1,
650	],
651	],
652	'condition' => [
653	'style!' => [
654	'',
655	'solid',
656	'double',
657	'dotted',
658	'dashed',
659	],
660	],
661	]
662	);
663
664	$this->add_control(
665	'pattern_size',
666	[
667	'label' => esc_html__( 'Amount', 'elementor' ),
668	'type' => Controls_Manager::SLIDER,
669	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
670	'selectors' => [
671	'{{WRAPPER}}' => '--divider-pattern-size: {{SIZE}}{{UNIT}}',
672	],
673	'default' => [
674	'size' => 20,
675	],
676	'range' => [
677	'px' => [
678	'step' => 0.1,
679	],
680	'%' => [
681	'step' => 0.01,
682	],
683	],
684	'condition' => [
685	'style!' => array_merge( array_keys( $this->filter_styles_by( $styles, 'supports_amount', false ) ), [
686	'',
687	'solid',
688	'double',
689	'dotted',
690	'dashed',
691	] ),
692	],
693	]
694	);
695
696	$this->add_responsive_control(
697	'gap',
698	[
699	'label' => esc_html__( 'Gap', 'elementor' ),
700	'type' => Controls_Manager::SLIDER,
701	'default' => [
702	'size' => 15,
703	],
704	'range' => [
705	'px' => [
706	'min' => 2,
707	'max' => 50,
708	],
709	],
710	'selectors' => [
711	'{{WRAPPER}} .elementor-divider' => 'padding-block-start: {{SIZE}}{{UNIT}}; padding-block-end: {{SIZE}}{{UNIT}};',
712	],
713	'separator' => 'before',
714	]
715	);
716
717	$this->end_controls_section();
718
719	$this->start_controls_section(
720	'section_text_style',
721	[
722	'label' => esc_html__( 'Text', 'elementor' ),
723	'tab' => Controls_Manager::TAB_STYLE,
724	'condition' => [
725	'look' => 'line_text',
726	],
727	]
728	);
729
730	$this->add_control(
731	'text_color',
732	[
733	'label' => esc_html__( 'Color', 'elementor' ),
734	'type' => Controls_Manager::COLOR,
735	'global' => [
736	'default' => Global_Colors::COLOR_SECONDARY,
737	],
738	'selectors' => [
739	'{{WRAPPER}} .elementor-divider__text' => 'color: {{VALUE}}',
740	],
741	]
742	);
743
744	$this->add_group_control(
745	Group_Control_Typography::get_type(),
746	[
747	'name' => 'typography',
748	'global' => [
749	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
750	],
751	'selector' => '{{WRAPPER}} .elementor-divider__text',
752	]
753	);
754
755	$this->add_group_control(
756	Group_Control_Text_Stroke::get_type(),
757	[
758	'name' => 'text_stroke',
759	'selector' => '{{WRAPPER}} .elementor-divider__text',
760	]
761	);
762
763	$this->add_control(
764	'text_align',
765	[
766	'label' => esc_html__( 'Position', 'elementor' ),
767	'type' => Controls_Manager::CHOOSE,
768	'options' => [
769	'left' => [
770	'title' => esc_html__( 'Left', 'elementor' ),
771	'icon' => 'eicon-h-align-left',
772	],
773	'center' => [
774	'title' => esc_html__( 'Center', 'elementor' ),
775	'icon' => 'eicon-h-align-center',
776	],
777	'right' => [
778	'title' => esc_html__( 'Right', 'elementor' ),
779	'icon' => 'eicon-h-align-right',
780	],
781	],
782	'default' => 'center',
783	'prefix_class' => 'elementor-widget-divider--element-align-',
784	]
785	);
786
787	$this->add_responsive_control(
788	'text_spacing',
789	[
790	'label' => esc_html__( 'Spacing', 'elementor' ),
791	'type' => Controls_Manager::SLIDER,
792	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
793	'range' => [
794	'px' => [
795	'max' => 50,
796	],
797	'%' => [
798	'max' => 50,
799	],
800	'em' => [
801	'max' => 5,
802	],
803	'rem' => [
804	'max' => 5,
805	],
806	'vw' => [
807	'max' => 50,
808	],
809	],
810	'selectors' => [
811	'{{WRAPPER}}' => '--divider-element-spacing: {{SIZE}}{{UNIT}};',
812	],
813	]
814	);
815
816	$this->end_controls_section();
817
818	$this->start_controls_section(
819	'section_icon_style',
820	[
821	'label' => esc_html__( 'Icon', 'elementor' ),
822	'tab' => Controls_Manager::TAB_STYLE,
823	'condition' => [
824	'look' => 'line_icon',
825	],
826	]
827	);
828
829	$this->add_control(
830	'icon_view',
831	[
832	'label' => esc_html__( 'View', 'elementor' ),
833	'type' => Controls_Manager::SELECT,
834	'options' => [
835	'default' => esc_html__( 'Default', 'elementor' ),
836	'stacked' => esc_html__( 'Stacked', 'elementor' ),
837	'framed' => esc_html__( 'Framed', 'elementor' ),
838	],
839	'default' => 'default',
840	'prefix_class' => 'elementor-view-',
841	]
842	);
843
844	$this->add_responsive_control(
845	'icon_size',
846	[
847	'label' => esc_html__( 'Size', 'elementor' ),
848	'type' => Controls_Manager::SLIDER,
849	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
850	'range' => [
851	'px' => [
852	'max' => 100,
853	],
854	'em' => [
855	'max' => 10,
856	],
857	'rem' => [
858	'max' => 10,
859	],
860	],
861	'selectors' => [
862	'{{WRAPPER}}' => '--divider-icon-size: {{SIZE}}{{UNIT}};',
863	],
864	]
865	);
866
867	$this->add_control(
868	'icon_padding',
869	[
870	'label' => esc_html__( 'Padding', 'elementor' ),
871	'type' => Controls_Manager::SLIDER,
872	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
873	'selectors' => [
874	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
875	],
876	'range' => [
877	'px' => [
878	'max' => 50,
879	],
880	'em' => [
881	'min' => 0,
882	'max' => 5,
883	],
884	'rem' => [
885	'min' => 0,
886	'max' => 5,
887	],
888	],
889	'condition' => [
890	'icon_view!' => 'default',
891	],
892	]
893	);
894
895	$this->add_control(
896	'primary_color',
897	[
898	'label' => esc_html__( 'Primary Color', 'elementor' ),
899	'type' => Controls_Manager::COLOR,
900	'default' => '',
901	'selectors' => [
902	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
903	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'color: {{VALUE}}; border-color: {{VALUE}};',
904	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon svg' => 'fill: {{VALUE}};',
905	],
906	'global' => [
907	'default' => Global_Colors::COLOR_SECONDARY,
908	],
909	]
910	);
911
912	$this->add_control(
913	'secondary_color',
914	[
915	'label' => esc_html__( 'Secondary Color', 'elementor' ),
916	'type' => Controls_Manager::COLOR,
917	'default' => '',
918	'condition' => [
919	'icon_view!' => 'default',
920	],
921	'selectors' => [
922	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
923	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'color: {{VALUE}};',
924	'{{WRAPPER}}.elementor-view-stacked .elementor-icon svg' => 'fill: {{VALUE}};',
925	],
926	]
927	);
928
929	$this->add_control(
930	'icon_align',
931	[
932	'label' => esc_html__( 'Position', 'elementor' ),
933	'type' => Controls_Manager::CHOOSE,
934	'options' => [
935	'left' => [
936	'title' => esc_html__( 'Left', 'elementor' ),
937	'icon' => 'eicon-h-align-left',
938	],
939	'center' => [
940	'title' => esc_html__( 'Center', 'elementor' ),
941	'icon' => 'eicon-h-align-center',
942	],
943	'right' => [
944	'title' => esc_html__( 'Right', 'elementor' ),
945	'icon' => 'eicon-h-align-right',
946	],
947	],
948	'default' => 'center',
949	'prefix_class' => 'elementor-widget-divider--element-align-',
950	'separator' => 'before',
951	]
952	);
953
954	$this->add_responsive_control(
955	'icon_spacing',
956	[
957	'label' => esc_html__( 'Spacing', 'elementor' ),
958	'type' => Controls_Manager::SLIDER,
959	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
960	'range' => [
961	'px' => [
962	'max' => 50,
963	],
964	'em' => [
965	'max' => 5,
966	],
967	'rem' => [
968	'max' => 5,
969	],
970	],
971	'selectors' => [
972	'{{WRAPPER}}' => '--divider-element-spacing: {{SIZE}}{{UNIT}}',
973	],
974	'separator' => 'before',
975	]
976	);
977
978	$this->add_responsive_control(
979	'rotate',
980	[
981	'label' => esc_html__( 'Rotate', 'elementor' ),
982	'type' => Controls_Manager::SLIDER,
983	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
984	'default' => [
985	'unit' => 'deg',
986	],
987	'tablet_default' => [
988	'unit' => 'deg',
989	],
990	'mobile_default' => [
991	'unit' => 'deg',
992	],
993	'selectors' => [
994	'{{WRAPPER}} .elementor-icon i, {{WRAPPER}} .elementor-icon svg' => 'transform: rotate({{SIZE}}{{UNIT}})',
995	],
996	]
997	);
998
999	$this->add_control(
1000	'icon_border_width',
1001	[
1002	'label' => esc_html__( 'Border Width', 'elementor' ),
1003	'type' => Controls_Manager::SLIDER,
1004	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1005	'range' => [
1006	'px' => [
1007	'max' => 20,
1008	],
1009	'em' => [
1010	'max' => 2,
1011	],
1012	],
1013	'selectors' => [
1014	'{{WRAPPER}} .elementor-icon' => 'border-width: {{SIZE}}{{UNIT}}',
1015	],
1016	'condition' => [
1017	'icon_view' => 'framed',
1018	],
1019	]
1020	);
1021
1022	$this->add_control(
1023	'border_radius',
1024	[
1025	'label' => esc_html__( 'Border Radius', 'elementor' ),
1026	'type' => Controls_Manager::SLIDER,
1027	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1028	'selectors' => [
1029	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{SIZE}}{{UNIT}}',
1030	],
1031	'condition' => [
1032	'icon_view!' => 'default',
1033	],
1034	]
1035	);
1036
1037	$this->end_controls_section();
1038	}
1039
1040	/**
1041	* Build SVG
1042	*
1043	* Build SVG element markup based on the widgets settings.
1044	*
1045	* @return string - An SVG element.
1046	*
1047	* @since 2.7.0
1048	* @access private
1049	*/
1050	private function build_svg() {
1051	$settings = $this->get_settings_for_display();
1052
1053	if ( 'pattern' !== $settings['separator_type'] \|\| empty( $settings['style'] ) ) {
1054	return '';
1055	}
1056
1057	$svg_shapes = $this->get_separator_styles();
1058
1059	$selected_pattern = $svg_shapes[ $settings['style'] ];
1060	$preserve_aspect_ratio = $selected_pattern['preserve_aspect_ratio'] ? 'xMidYMid meet' : 'none';
1061	$view_box = isset( $selected_pattern['view_box'] ) ? $selected_pattern['view_box'] : '0 0 24 24';
1062
1063	$attr = [
1064	'preserveAspectRatio' => $preserve_aspect_ratio,
1065	'overflow' => 'visible',
1066	'height' => '100%',
1067	'viewBox' => $view_box,
1068	];
1069
1070	if ( 'line' !== $selected_pattern['group'] ) {
1071	$attr['fill'] = 'black';
1072	$attr['stroke'] = 'none';
1073	} else {
1074	$attr['fill'] = 'none';
1075	$attr['stroke'] = 'black';
1076	$attr['stroke-width'] = $settings['weight']['size'];
1077	$attr['stroke-linecap'] = 'square';
1078	$attr['stroke-miterlimit'] = '10';
1079	}
1080
1081	$this->add_render_attribute( 'svg', $attr );
1082
1083	$pattern_attribute_string = $this->get_render_attribute_string( 'svg' );
1084	$shape = $selected_pattern['shape'];
1085
1086	return '<svg xmlns="http://www.w3.org/2000/svg" ' . $pattern_attribute_string . '>' . $shape . '</svg>';
1087	}
1088
1089	public function svg_to_data_uri( $svg ) {
1090	return str_replace(
1091	[ '<', '>', '"', '#' ],
1092	[ '%3C', '%3E', "'", '%23' ],
1093	$svg
1094	);
1095	}
1096
1097	/**
1098	* Render divider widget output on the frontend.
1099	*
1100	* Written in PHP and used to generate the final HTML.
1101	*
1102	* @since 1.0.0
1103	* @access protected
1104	*/
1105	protected function render() {
1106	$settings = $this->get_settings_for_display();
1107	$svg_code = $this->build_svg();
1108	$has_icon = 'line_icon' === ( $settings['look'] ) && ! empty( $settings['icon'] );
1109	$has_text = 'line_text' === ( $settings['look'] ) && ! empty( $settings['text'] );
1110
1111	$this->add_render_attribute( 'wrapper', 'class', 'elementor-divider' );
1112
1113	if ( ! empty( $svg_code ) ) {
1114	$this->add_render_attribute( 'wrapper', 'style', '--divider-pattern-url: url("data:image/svg+xml,' . $this->svg_to_data_uri( $svg_code ) . '");' );
1115	}
1116
1117	?>
1118	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
1119	<span class="elementor-divider-separator">
1120	<?php if ( $has_icon ) : ?>
1121	<div class="elementor-icon elementor-divider__element">
1122	<?php
1123	Icons_Manager::render_icon( $settings['icon'], [
1124	'aria-hidden' => 'true',
1125	] );
1126	?></div>
1127	<?php elseif ( $has_text ) :
1128	$this->add_inline_editing_attributes( 'text' );
1129	$this->add_render_attribute( 'text', [ 'class' => [ 'elementor-divider__text', 'elementor-divider__element' ] ] );
1130	?>
1131	<<?php Utils::print_validated_html_tag( $settings['html_tag'] ); ?> <?php $this->print_render_attribute_string( 'text' ); ?>>
1132	<?php
1133	// PHPCS - the main text of a widget should not be escaped.
1134	echo $settings['text']; // phpcs:ignore WordPress.Security.EscapeOutput ?>
1135	</<?php Utils::print_validated_html_tag( $settings['html_tag'] ); ?>>
1136	<?php endif; ?>
1137	</span>
1138	</div>
1139	<?php
1140	}
1141	}
1142