easy-elements / widgets / breadcrumb / breadcrumb.php

breadcrumb.php in Easy Elements for Elementor – Addons & Website Templates 1.4.7, at widgets/breadcrumb/breadcrumb.php

642 lines 22.5 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	/**
4	* Easy Elements Breadcrumb Widget
5	*
6	* @package EasyElements
7	*/
8	use Elementor\Utils;
9	use Elementor\Controls_Manager;
10	// Prevent direct access
11	if ( ! defined( 'ABSPATH' ) ) {
12	exit;
13	}
14	include 'helper.php';
15
16
17	class Easyel_Breadcrumb_Widget extends \Elementor\Widget_Base {
18
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30
31	public function get_name() {
32	return 'eel-breadcrumb';
33	}
34
35
36	/**
37	* Get widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Breadcrumb', 'easy-elements' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* @since 1.0.0
52	* @access public
53	*
54	* @return string Widget icon.
55	*/
56	public function get_icon() {
57	return 'easyicon easyelIcon-breadcumb';
58	}
59
60	public function get_categories() {
61	return [ 'easyelements_category' ];
62	}
63
64	public function get_keywords() {
65	return [ 'breadcrumb', 'text', 'link', 'click' ];
66	}
67
68	public function get_style_depends() {
69	return [
70	'eel-breadcrumb',
71	];
72	}
73
74	protected function register_controls() {
75	$this->start_controls_section(
76	'breadcrumb_section',
77	[
78	'label' => esc_html__( 'Content Settings', 'easy-elements' ),
79	'tab' => Controls_Manager::TAB_CONTENT,
80	]
81	);
82
83	$this->add_control(
84	'show_home_icon',
85	[
86	'label' => esc_html__( 'Show Home Icon', 'easy-elements' ),
87	'type' => Controls_Manager::SWITCHER,
88	'label_on' => esc_html__( 'Show', 'easy-elements' ),
89	'label_off' => esc_html__( 'Hide', 'easy-elements' ),
90	'return_value' => 'yes',
91	'default' => 'yes',
92	]
93	);
94
95	$this->add_control(
96	'home_icon_picker',
97	[
98	'label' => esc_html__( 'Choose Icon', 'easy-elements' ),
99	'type' => Controls_Manager::ICONS,
100	'default' => [
101	'value' => 'fas fa-home',
102	'library' => 'fa-solid',
103	],
104	'description' => esc_html__('Pick an icon for the home.', 'easy-elements'),
105	'condition' => [
106	'show_home_icon' => 'yes',
107	],
108	]
109	);
110
111	$this->add_control(
112	'home_title',
113	[
114	'label' => esc_html__( 'Home Page Title', 'easy-elements' ),
115	'type' => Controls_Manager::TEXT,
116	'default' => esc_html__( 'Home', 'easy-elements' ),
117	'placeholder' => esc_html__( 'Home', 'easy-elements' ),
118	]
119	);
120
121	$this->add_control(
122	'show_category_path',
123	[
124	'label' => esc_html__( 'Show Category Path', 'easy-elements' ),
125	'type' => Controls_Manager::SWITCHER,
126	'label_on' => esc_html__( 'Show', 'easy-elements' ),
127	'label_off' => esc_html__( 'Hide', 'easy-elements' ),
128	'return_value' => 'yes',
129	'default' => 'yes',
130	]
131	);
132
133	$this->add_control(
134	'show_separator_icon',
135	[
136	'label' => esc_html__( 'Show Separator Icon', 'easy-elements' ),
137	'type' => Controls_Manager::SWITCHER,
138	'label_on' => esc_html__( 'Show', 'easy-elements' ),
139	'label_off' => esc_html__( 'Hide', 'easy-elements' ),
140	'return_value' => 'yes',
141	'default' => '',
142	]
143	);
144
145	$this->add_control(
146	'separator_icon',
147	[
148	'label' => esc_html__( 'Separator Icon', 'easy-elements' ),
149	'type' => Controls_Manager::ICONS,
150	'default' => [
151	'value' => 'fas fa-chevron-right',
152	'library' => 'fa-solid',
153	],
154	'condition' => [
155	'show_separator_icon' => 'yes',
156	],
157	]
158	);
159
160	$this->end_controls_section();
161
162	// Style Section for Colors
163	$this->start_controls_section(
164	'breadcrumb_style_section',
165	[
166	'label' => esc_html__( 'Breadcrumb', 'easy-elements' ),
167	'tab' => Controls_Manager::TAB_STYLE,
168	]
169	);
170
171	$this->add_control(
172	'breadcrumb_text_color',
173	[
174	'label' => esc_html__( 'Text Color', 'easy-elements' ),
175	'type' => Controls_Manager::COLOR,
176	'selectors' => [
177	'{{WRAPPER}} .eel-breadcrumb, {{WRAPPER}} .eel-breadcrumb a' => 'color: {{VALUE}};',
178	],
179	]
180	);
181
182	$this->add_control(
183	'brea_text_active_color',
184	[
185	'label' => esc_html__( 'Active Color', 'easy-elements' ),
186	'type' => Controls_Manager::COLOR,
187	'selectors' => [
188	'{{WRAPPER}} .eel-breadcrumb' => 'color: {{VALUE}};',
189	],
190	]
191	);
192
193	$this->add_group_control(
194	\Elementor\Group_Control_Typography::get_type(),
195	[
196	'name' => 'breadcrumb_typography',
197	'selector' => '{{WRAPPER}} .eel-breadcrumb a, {{WRAPPER}} .eel-breadcrumb, {{WRAPPER}} .eel-breadcrumb span',
198	]
199	);
200
201	$this->add_responsive_control(
202	'text_padding',
203	[
204	'label' => esc_html__( 'Padding Normal', 'easy-elements' ),
205	'type' => Controls_Manager::DIMENSIONS,
206	'size_units' => [ 'px', '%', 'em' ],
207	'selectors' => [
208	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-path a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
209	],
210	]
211	);
212
213	$this->add_responsive_control(
214	'text_padding_active',
215	[
216	'label' => esc_html__( 'Padding Active', 'easy-elements' ),
217	'type' => Controls_Manager::DIMENSIONS,
218	'size_units' => [ 'px', '%', 'em' ],
219	'selectors' => [
220	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
221	],
222	]
223	);
224
225	$this->add_control(
226	'text_bg_color',
227	[
228	'label' => esc_html__( 'Background Color Normal', 'easy-elements' ),
229	'type' => Controls_Manager::COLOR,
230	'selectors' => [
231	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-path a' => 'background-color: {{VALUE}};',
232	],
233	]
234	);
235
236	$this->add_control(
237	'text_bg_color_active',
238	[
239	'label' => esc_html__( 'Background Color Active', 'easy-elements' ),
240	'type' => Controls_Manager::COLOR,
241	'selectors' => [
242	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-text' => 'background-color: {{VALUE}};',
243	],
244	]
245	);
246
247	$this->add_responsive_control(
248	'text_border_radius',
249	[
250	'label' => esc_html__( 'Border Radius Normal', 'easy-elements' ),
251	'type' => Controls_Manager::DIMENSIONS,
252	'size_units' => [ 'px', '%', 'em' ],
253	'selectors' => [
254	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-path a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
255	],
256	]
257	);
258
259	$this->add_responsive_control(
260	'text_border_radius_active',
261	[
262	'label' => esc_html__( 'Border Radius Active', 'easy-elements' ),
263	'type' => Controls_Manager::DIMENSIONS,
264	'size_units' => [ 'px', '%', 'em' ],
265	'selectors' => [
266	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-text' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
267	],
268	]
269	);
270	$this->end_controls_section();
271
272	// Style Section for Separator
273	$this->start_controls_section(
274	'breadcrumb_home_icon_section',
275	[
276	'label' => esc_html__( 'Home Icon', 'easy-elements' ),
277	'tab' => Controls_Manager::TAB_STYLE,
278	'condition' => [
279	'show_home_icon' => 'yes',
280	]
281	]
282	);
283
284	$this->add_control(
285	'breadcrumb_icon_color',
286	[
287	'label' => esc_html__( 'Color', 'easy-elements' ),
288	'type' => Controls_Manager::COLOR,
289	'selectors' => [
290	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-home-icon' => 'color: {{VALUE}};',
291	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-home-icon, {{WRAPPER}} .eel-breadcrumb .breadcrumb-home-icon path' => 'fill: {{VALUE}};',
292	],
293	]
294	);
295
296	$this->add_control(
297	'home_icon_bg_color',
298	[
299	'label' => esc_html__( 'Background Color', 'easy-elements' ),
300	'type' => Controls_Manager::COLOR,
301	'selectors' => [
302	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-home-icon' => 'background-color: {{VALUE}};',
303	],
304	]
305	);
306
307	$this->add_control(
308	'icon_size_',
309	[
310	'label' => esc_html__( 'Size', 'easy-elements' ),
311	'type' => \Elementor\Controls_Manager::SLIDER,
312	'size_units' => [ 'px', '%' ],
313	'range' => [
314	'px' => [
315	'min' => -100,
316	'max' => 100,
317	],
318	'%' => [
319	'min' => -50,
320	'max' => 50,
321	],
322	],
323	'selectors' => [
324	'{{WRAPPER}} .breadcrumb-home-icon' => 'font-size: {{SIZE}}{{UNIT}};',
325	'{{WRAPPER}} svg.breadcrumb-home-icon' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
326	],
327	]
328	);
329
330	$this->add_responsive_control(
331	'home_icon_border_radius',
332	[
333	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
334	'type' => Controls_Manager::DIMENSIONS,
335	'size_units' => [ 'px', '%', 'em' ],
336	'selectors' => [
337	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-home-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
338	],
339	]
340	);
341
342	$this->add_responsive_control(
343	'home_icon_padding',
344	[
345	'label' => esc_html__( 'Padding', 'easy-elements' ),
346	'type' => Controls_Manager::DIMENSIONS,
347	'size_units' => [ 'px', '%', 'em' ],
348	'selectors' => [
349	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-home-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
350	],
351	]
352	);
353
354	$this->add_control(
355	'icon_size_postition',
356	[
357	'label' => esc_html__( 'Vartical Position', 'easy-elements' ),
358	'type' => \Elementor\Controls_Manager::SLIDER,
359	'size_units' => [ 'px', '%' ],
360	'range' => [
361	'px' => [
362	'min' => -100,
363	'max' => 100,
364	],
365	'%' => [
366	'min' => -50,
367	'max' => 50,
368	],
369	],
370	'selectors' => [
371	'{{WRAPPER}} .breadcrumb-home-icon' => 'top: {{SIZE}}{{UNIT}};',
372	],
373	]
374	);
375
376	$this->add_control(
377	'icon_size_postition_left',
378	[
379	'label' => esc_html__( 'Horizontal Position', 'easy-elements' ),
380	'type' => \Elementor\Controls_Manager::SLIDER,
381	'size_units' => [ 'px', '%' ],
382	'range' => [
383	'px' => [
384	'min' => -100,
385	'max' => 100,
386	],
387	'%' => [
388	'min' => -50,
389	'max' => 50,
390	],
391	],
392	'selectors' => [
393	'{{WRAPPER}} .breadcrumb-home-icon' => 'left: {{SIZE}}{{UNIT}};',
394	],
395	]
396	);
397
398	$this->end_controls_section();
399
400	// Style Section for Separator
401	$this->start_controls_section(
402	'breadcrumb_separator_section',
403	[
404	'label' => esc_html__( 'Separator', 'easy-elements' ),
405	'tab' => Controls_Manager::TAB_STYLE,
406	]
407	);
408
409	$this->add_control(
410	'breadcrumb_separator_color',
411	[
412	'label' => esc_html__( 'Color', 'easy-elements' ),
413	'type' => Controls_Manager::COLOR,
414	'selectors' => [
415	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'color: {{VALUE}};',
416	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator, {{WRAPPER}} .eel-breadcrumb .breadcrumb-separator path' => 'fill: {{VALUE}};',
417	],
418	]
419	);
420
421	$this->add_control(
422	'separator_icon_bg_color',
423	[
424	'label' => esc_html__( 'Background Color', 'easy-elements' ),
425	'type' => Controls_Manager::COLOR,
426	'selectors' => [
427	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'background-color: {{VALUE}};',
428	],
429	]
430	);
431
432	$this->add_responsive_control(
433	'separator_icon_border_radius',
434	[
435	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
436	'type' => Controls_Manager::DIMENSIONS,
437	'size_units' => [ 'px', '%', 'em' ],
438	'selectors' => [
439	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
440	],
441	]
442	);
443
444	$this->add_responsive_control(
445	'separator_icon_padding',
446	[
447	'label' => esc_html__( 'Padding', 'easy-elements' ),
448	'type' => Controls_Manager::DIMENSIONS,
449	'size_units' => [ 'px', '%', 'em' ],
450	'selectors' => [
451	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
452	],
453	]
454	);
455
456	$this->add_control(
457	'separator_icon_size',
458	[
459	'label' => esc_html__( 'Size', 'easy-elements' ),
460	'type' => \Elementor\Controls_Manager::SLIDER,
461	'size_units' => [ 'px', '%' ],
462	'range' => [
463	'px' => [
464	'min' => -100,
465	'max' => 100,
466	],
467	'%' => [
468	'min' => -50,
469	'max' => 50,
470	],
471	],
472	'selectors' => [
473	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'font-size: {{SIZE}}{{UNIT}};',
474	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
475	],
476	]
477	);
478
479	$this->add_responsive_control(
480	'separator_icon_gap',
481	[
482	'label' => __( 'Gap', 'easy-elements' ),
483	'type' => Controls_Manager::DIMENSIONS,
484	'size_units' => [ 'px', '%' ],
485	'selectors' => [
486	'{{WRAPPER}} .eel-breadcrumb .breadcrumb-separator' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
487	],
488	]
489	);
490
491	$this->add_control(
492	'icon_sap_size_postition',
493	[
494	'label' => esc_html__( 'Vartical Position', 'easy-elements' ),
495	'type' => \Elementor\Controls_Manager::SLIDER,
496	'size_units' => [ 'px', '%' ],
497	'range' => [
498	'px' => [
499	'min' => -100,
500	'max' => 100,
501	],
502	'%' => [
503	'min' => -50,
504	'max' => 50,
505	],
506	],
507	'selectors' => [
508	'{{WRAPPER}} .breadcrumb-separator' => 'top: {{SIZE}}{{UNIT}}; position: relative;',
509	],
510	]
511	);
512
513	$this->add_control(
514	'icon_size_sap_postition_left',
515	[
516	'label' => esc_html__( 'Horizontal Position', 'easy-elements' ),
517	'type' => \Elementor\Controls_Manager::SLIDER,
518	'size_units' => [ 'px', '%' ],
519	'range' => [
520	'px' => [
521	'min' => -100,
522	'max' => 100,
523	],
524	'%' => [
525	'min' => -50,
526	'max' => 50,
527	],
528	],
529	'selectors' => [
530	'{{WRAPPER}} .breadcrumb-separator' => 'left: {{SIZE}}{{UNIT}}; position: relative;',
531	],
532	]
533	);
534
535	$this->end_controls_section();
536	}
537
538	protected function easy_enqueue_styles() {
539	$handle = 'eel-breadcrumb-style';
540	$custom_css = '';
541
542	$settings = $this->get_settings_for_display();
543	$text_color = !empty($settings['breadcrumb_text_color']) ? $settings['breadcrumb_text_color'] : '';
544	$icon_color = !empty($settings['breadcrumb_icon_color']) ? $settings['breadcrumb_icon_color'] : '';
545	$separator_color = !empty($settings['breadcrumb_separator_color']) ? $settings['breadcrumb_separator_color'] : '';
546
547	if ($text_color) {
548	$custom_css .= '.eel-breadcrumb { color: ' . esc_attr($text_color) . '; }';
549	}
550
551	if ($icon_color) {
552	$custom_css .= '.eel-breadcrumb .breadcrumb-icon { color: ' . esc_attr($icon_color) . '; }';
553	}
554
555	if ($separator_color) {
556	$custom_css .= '.eel-breadcrumb .breadcrumb-separator { color: ' . esc_attr($separator_color) . '; }';
557	}
558
559	wp_register_style( $handle, false, [], EASYELEMENTS_VER );
560	wp_enqueue_style( $handle );
561
562	if ( $custom_css ) {
563	wp_add_inline_style( $handle, $custom_css );
564	}
565	}
566
567	protected function render() {
568	$settings = $this->get_settings_for_display();
569
570	$show_category_path = isset($settings['show_category_path']) && $settings['show_category_path'] === 'yes';
571
572	// =========================
573	// Home Icon (Condition + SVG Fix)
574	// =========================
575	$home_icon_html = '';
576	if ( !empty($settings['show_home_icon']) && $settings['show_home_icon'] === 'yes' && !empty($settings['home_icon_picker']) ) {
577	ob_start();
578	\Elementor\Icons_Manager::render_icon($settings['home_icon_picker'], [
579	'aria-hidden' => 'true',
580	'class' => 'breadcrumb-home-icon',
581	]);
582	$home_icon_html = ob_get_clean();
583
584
585	if (strpos($home_icon_html, 'breadcrumb-home-icon') === false) {
586	$home_icon_html = preg_replace(
587	'/<svg\b(?![^>]*class=)/',
588	'<svg class="breadcrumb-home-icon" ',
589	$home_icon_html,
590	1
591	);
592	$home_icon_html = preg_replace(
593	'/<img\b(?![^>]*class=)/',
594	'<img class="breadcrumb-home-icon" ',
595	$home_icon_html,
596	1
597	);
598	}
599	}
600	$home_icon_picker = $home_icon_html;
601
602
603
604	$separator_html = '';
605	if ( !empty($settings['show_separator_icon']) && $settings['show_separator_icon'] === 'yes' && !empty($settings['separator_icon']['value']) ) {
606	ob_start();
607	\Elementor\Icons_Manager::render_icon($settings['separator_icon'], [
608	'aria-hidden' => 'true',
609	'class' => 'breadcrumb-separator',
610	]);
611	$separator_html = ob_get_clean();
612	if (strpos($separator_html, 'breadcrumb-separator') === false) {
613	$separator_html = preg_replace(
614	'/<svg\b(?![^>]*class=)/',
615	'<svg class="breadcrumb-separator" ',
616	$separator_html,
617	1
618	);
619	$separator_html = preg_replace(
620	'/<img\b(?![^>]*class=)/',
621	'<img class="breadcrumb-separator" ',
622	$separator_html,
623	1
624	);
625	}
626	}
627
628
629	$custom_separator = !empty($separator_html) ? $separator_html : '';
630
631	$this->easy_enqueue_styles();
632
633	if (function_exists('easyel_get_easyel_breadcrumb')) {
634	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
635	echo easyel_get_easyel_breadcrumb(
636	'', '', $custom_separator, $settings['home_title'] ?? '', '', '', $show_category_path, '', $home_icon_picker
637	);
638	} else {
639	echo '<!-- Breadcrumb function not found -->';
640	}
641	}
642	}