easy-elements / widgets / offcanvas / offcanvas.php

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

454 lines 13.2 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Controls_Manager;
4	use Elementor\Widget_Base;
5	use Elementor\Group_Control_Typography;
6	use Elementor\Group_Control_Background;
7
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit;
10	}
11
12	class Easyel_Offcanvas_Widget extends Widget_Base {
13
14	public function get_name() {
15	return 'eel-offcanvas';
16	}
17
18	public function get_title() {
19	return __( 'Offcanvas', 'easy-elements' );
20	}
21
22	public function get_icon() {
23	return 'easyicon easyelIcon-canvas';
24	}
25
26	public function get_categories() {
27	return [ 'easyelements_category' ];
28	}
29
30	public function get_keywords() {
31	return [ 'offcanvas', 'text', 'link', 'image' ];
32	}
33
34	public function get_style_depends() {
35	return [
36	'eel-offcanvas',
37	];
38	}
39
40	public function get_script_depends() {
41	return [
42	'eel-offcanvas',
43	];
44	}
45
46	protected function register_controls() {
47	$this->start_controls_section(
48	'section_offcanvas',
49	[
50	'label' => __( 'Offcanvas Settings', 'easy-elements' ),
51	]
52	);
53
54	$this->add_control(
55	'offcanvas_layout',
56	[
57	'label' => __( 'Offcanvas Layout', 'easy-elements' ),
58	'type' => Controls_Manager::SELECT,
59	'default' => 'classic',
60	'options' => [
61	'classic' => __( 'Classic', 'easy-elements' ),
62	'modern' => __( 'Modern', 'easy-elements' ),
63	],
64	]
65	);
66
67	$this->add_control(
68	'menu_text',
69	[
70	'label' => __( 'Canvas Menu', 'easy-elements' ),
71	'type' => Controls_Manager::TEXT,
72	'default' => __( 'Menu', 'easy-elements' ),
73	]
74	);
75
76	$this->add_control(
77	'btn_icon',
78	[
79	'label' => esc_html__('Menu Icon', 'easy-elements'),
80	'type' => Controls_Manager::ICONS,
81	'default' => [
82	'value' => '',
83	'library' => '',
84	],
85	]
86	);
87
88	$this->add_control(
89	'position_offcanvas',
90	[
91	'label' => __( 'Open Position', 'easy-elements' ),
92	'type' => Controls_Manager::SELECT,
93	'default' => 'eel-offcanvas-right',
94	'options' => [
95	'eel-offcanvas-left' => __( 'Left', 'easy-elements' ),
96	'eel-offcanvas-right' => __( 'Right', 'easy-elements' ),
97	],
98	'condition' => [
99	'offcanvas_layout' => 'classic',
100	],
101	]
102	);
103
104	$this->add_responsive_control(
105	'offcanvas_width',
106	[
107	'label' => __( 'Canvas Width', 'easy-elements' ),
108	'type' => \Elementor\Controls_Manager::SLIDER,
109	'size_units' => [ 'px', '%' ],
110	'range' => [
111	'px' => [
112	'min' => 200,
113	'max' => 800,
114	],
115	'%' => [
116	'min' => 20,
117	'max' => 100,
118	],
119	],
120	'default' => [
121	'unit' => 'px',
122	'size' => 380,
123	],
124	'selectors' => [
125	'.eel-offcanvas' => 'width: {{SIZE}}{{UNIT}} !important;',
126	],
127	'condition' => [
128	'offcanvas_layout' => ['classic', 'modern'],
129	],
130	]
131	);
132
133	$this->add_control(
134	'content_template',
135	[
136	'label' => esc_html__( 'Select Template', 'easy-elements' ),
137	'type' => \Elementor\Controls_Manager::SELECT,
138	'options' => $this->get_eligible_canvas_templates(),
139	]
140	);
141
142	$this->add_control(
143	'edit_template_button',
144	[
145	'type' => \Elementor\Controls_Manager::RAW_HTML,
146	'raw' => sprintf(
147	'<a href="%s" class="elementor-button elementor-button-primary" target="_blank">%s</a>
148	<p style="margin-top:5px; font-size:13px; color:#555;">%s</p>',
149	admin_url( 'edit.php?post_type=easy-offcanvas' ),
150	esc_html__( 'Edit Offcanvas Templates', 'easy-elements' ),
151	esc_html__( 'All your offcanvas content can be managed here in the Easy Offcanvas post type.', 'easy-elements' )
152	),
153	'separator' => 'before',
154	]
155	);
156
157	$this->add_control(
158	'close_icon',
159	[
160	'label' => esc_html__('Close Icon', 'easy-elements'),
161	'type' => Controls_Manager::ICONS,
162	'default' => [
163	'value' => '',
164	'library' => '',
165	],
166	]
167	);
168
169	$this->add_control(
170	'need_blur_effect',
171	[
172	'label' => esc_html__( 'Enable Blur', 'easy-elements' ),
173	'type' => \Elementor\Controls_Manager::SWITCHER,
174	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
175	'label_off' => esc_html__( 'No', 'easy-elements' ),
176	'return_value' => 'yes',
177	'default' => 'no',
178	]
179	);
180	$this->end_controls_section();
181
182	// Style
183	$this->start_controls_section(
184	'style_section',
185	[
186	'label' => esc_html__( 'Style', 'easy-elements' ),
187	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
188	]
189	);
190	$this->add_control(
191	'open_icon_options',
192	[
193	'label' => esc_html__( 'Opener Icon', 'easy-elements' ),
194	'type' => \Elementor\Controls_Manager::HEADING,
195	'separator' => 'after',
196	]
197	);
198	$this->add_control(
199	'offcanvas_opener_text_color',
200	[
201	'label' => esc_html__( 'Text Color', 'easy-elements' ),
202	'type' => \Elementor\Controls_Manager::COLOR,
203	'selectors' => [
204	'{{WRAPPER}} .eel-offcanvas-toggle-text .eel-icon-text' => 'color: {{VALUE}};',
205	],
206	'condition' => [
207	'menu_text!' => '',
208	],
209	]
210	);
211	$this->add_group_control(
212	\Elementor\Group_Control_Typography::get_type(),
213	[
214	'name' => 'offcanvas_opener_text_typography',
215	'label' => esc_html__('Typography', 'easy-elements' ),
216	'selector' => '{{WRAPPER}} .eel-offcanvas-toggle-text .eel-icon-text',
217	'separator' => 'after',
218	'condition' => [
219	'menu_text!' => '',
220	],
221	]
222	);
223	$this->add_control(
224	'offcanvas_opener_icon_color',
225	[
226	'label' => esc_html__( 'Hamburger Color', 'easy-elements' ),
227	'type' => \Elementor\Controls_Manager::COLOR,
228	'selectors' => [
229	'{{WRAPPER}} .eel-offcanvas-toggle-text svg' => 'fill: {{VALUE}};',
230	'{{WRAPPER}} .eel-offcanvas-toggle-text i' => 'color: {{VALUE}};',
231	'{{WRAPPER}} .eel-icon-menu' => 'border-bottom-color: {{VALUE}};',
232	],
233	'condition' => [
234	'offcanvas_layout' => 'classic',
235	],
236	]
237	);
238	$this->add_control(
239	'offcanvas_opener_icon_humburger_color',
240	[
241	'label' => esc_html__( 'Hamburger Color', 'easy-elements' ),
242	'type' => \Elementor\Controls_Manager::COLOR,
243	'selectors' => [
244	'.modern.eel-offcanvas-wrapper label span' => 'background: {{VALUE}} !important;',
245
246	],
247	'condition' => [
248	'offcanvas_layout' => 'modern',
249	],
250	]
251	);
252	$this->add_responsive_control(
253	'offcanvas_opener_icon_size',
254	[
255	'label' => __( 'Hamburger Size', 'easy-elements' ),
256	'type' => \Elementor\Controls_Manager::SLIDER,
257	'size_units' => [ 'px', '%' ],
258	'selectors' => [
259	'{{WRAPPER}} .eel-offcanvas-toggle-text svg' => 'width: {{SIZE}}{{UNIT}} !important; height: {{SIZE}}{{UNIT}} !important;',
260	'{{WRAPPER}} .eel-offcanvas-toggle-text i' => 'font-size: {{SIZE}}{{UNIT}} !important;',
261	],
262	'condition' => [
263	'offcanvas_layout' => 'classic',
264	],
265	]
266	);
267	$this->add_responsive_control(
268	'offcanvas_opener_icon_size_morden',
269	[
270	'label' => __( 'Hamburger Size', 'easy-elements' ),
271	'type' => \Elementor\Controls_Manager::SLIDER,
272	'size_units' => [ 'px', '%' ],
273	'selectors' => [
274	'{{WRAPPER}} .modern.eel-offcanvas-wrapper label' => 'width: {{SIZE}}{{UNIT}};',
275	],
276	'condition' => [
277	'offcanvas_layout' => 'modern',
278	],
279	]
280	);
281	$this->add_control(
282	'closing_icon_options',
283	[
284	'label' => esc_html__( 'Closing Icon', 'easy-elements' ),
285	'type' => \Elementor\Controls_Manager::HEADING,
286	'separator' => 'after',
287	]
288	);
289
290	$this->add_control(
291	'offcanvas_closing_icon_color',
292	[
293	'label' => esc_html__( 'Icon Color', 'easy-elements' ),
294	'type' => \Elementor\Controls_Manager::COLOR,
295	'selectors' => [
296	'.eel-offcanvas-close' => 'color: {{VALUE}} !important;',
297	],
298	'condition' => [
299	'offcanvas_layout' => 'classic',
300	],
301	]
302	);
303
304	$this->add_control(
305	'offcanvas_closing_icon_morden_color',
306	[
307	'label' => esc_html__( 'Icon Color', 'easy-elements' ),
308	'type' => \Elementor\Controls_Manager::COLOR,
309	'selectors' => [
310	'.eel-modern-close-toggle span, .modern.eel-offcanvas-wrapper label.eel-modern-close-toggle span' => 'background: {{VALUE}} !important;',
311	],
312	'condition' => [
313	'offcanvas_layout' => 'modern',
314	],
315	]
316	);
317
318	$this->add_responsive_control(
319	'offcanvas_closing_icon_size',
320	[
321	'label' => __( 'Icon Size', 'easy-elements' ),
322	'type' => \Elementor\Controls_Manager::SLIDER,
323	'size_units' => [ 'px', '%' ],
324	'selectors' => [
325	'.eel-offcanvas-close' => 'font-size: {{SIZE}}{{UNIT}} !important;',
326	],
327	'condition' => [
328	'offcanvas_layout' => 'classic',
329	],
330	]
331	);
332	$this->add_control(
333	'offcanvas_item',
334	[
335	'label' => esc_html__( 'OffCanvas Item', 'easy-elements' ),
336	'type' => \Elementor\Controls_Manager::HEADING,
337	'separator' => 'after',
338	]
339	);
340	$this->add_control(
341	'offcanvas_bg',
342	[
343	'label' => esc_html__( 'OffCanvas Background', 'easy-elements' ),
344	'type' => \Elementor\Controls_Manager::COLOR,
345	'selectors' => [
346	'body .eel-offcanvas' => 'background: {{VALUE}} !important;',
347	],
348	]
349	);
350	$this->add_responsive_control(
351	'offcanvas_padding',
352	[
353	'label' => esc_html__('OffCanvas Padding', 'easy-elements'),
354	'type' => \Elementor\Controls_Manager::DIMENSIONS,
355	'size_units' => [ 'px', 'em', '%' ],
356	'selectors' => [
357	'body .eel-offcanvas' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
358	],
359	]
360	);
361	$this->end_controls_section();
362	}
363
364	private function get_eligible_canvas_templates() {
365	$templates = [];
366
367	$posts = get_posts([
368	'post_type' => 'easy-offcanvas',
369	'posts_per_page' => -1,
370	'post_status' => 'publish',
371	]);
372
373	foreach ( $posts as $post ) {
374	$templates[ $post->ID ] = $post->post_title;
375	}
376
377	return $templates;
378	}
379
380	protected function render() {
381	$settings = $this->get_settings_for_display();
382	$position = $settings['position_offcanvas'];
383	$btn_text = ! empty( $settings['menu_text'] ) ? $settings['menu_text'] : '';
384	$content_template = ! empty( $settings['content_template'] ) ? $settings['content_template'] : '';
385	$blur = ( isset( $settings['need_blur_effect'] ) && $settings['need_blur_effect'] === 'yes' ) ? 'eel-blur-effect' : '';
386	$unique_id = 'eel-offcanvas-' . $this->get_id();
387	?>
388
389	<div class="eel-offcanvas-wrapper <?php echo esc_attr($settings['offcanvas_layout']); ?>">
390	<div class="eel-offcanvas-toggle" data-target="#<?php echo esc_attr($unique_id); ?>">
391	<span class="eel-offcanvas-toggle-text">
392	<?php if (!empty($btn_text)) : ?>
393	<em class="eel-icon-text"><?php echo esc_html($btn_text); ?></em>
394	<?php endif; ?>
395
396	<?php if ($settings['offcanvas_layout'] === 'classic') : ?>
397	<?php
398	if (!empty($settings['btn_icon']['value'])) {
399	\Elementor\Icons_Manager::render_icon($settings['btn_icon'], ['aria-hidden' => 'true']);
400	} else { ?>
401	<div class="eel-icon-menu-wrap">
402	<em class="eel-icon-menu"></em>
403	<em class="eel-icon-menu"></em>
404	</div>
405	<?php } ?>
406	<?php else : ?>
407	<label>
408	<span></span><span></span><span></span>
409	</label>
410	<?php endif; ?>
411	</span>
412	</div>
413
414	<?php
415	if (!\Elementor\Plugin::$instance->editor->is_edit_mode()) {
416	add_action('wp_footer', function() use ($settings, $unique_id, $blur) { ?>
417	<div id="<?php echo esc_attr($unique_id); ?>" class="eel-offcanvas <?php echo esc_attr($blur . ' ' . $settings['position_offcanvas'] . ' ' . $settings['offcanvas_layout']); ?>">
418	<div class="eel-offcanvas-overlay"></div>
419	<div class="eel-offcanvas-panel">
420	<?php if ($settings['offcanvas_layout'] === 'classic') { ?>
421	<span class="eel-offcanvas-close eel-offcanvas-toggle" data-target="#<?php echo esc_attr($unique_id); ?>">
422	<?php
423	if (!empty($settings['close_icon']['value'])) {
424	\Elementor\Icons_Manager::render_icon($settings['close_icon'], ['aria-hidden' => 'true']);
425	} else {
426	echo '<i class="unicon-close"></i>';
427	}
428	?>
429	</span>
430	<?php } else { ?>
431	<span class="eel-offcanvas-close eel-offcanvas-toggle eel-modern-close" data-target="#<?php echo esc_attr($unique_id); ?>">
432	<label class="eel-modern-close-toggle">
433	<span></span><span></span><span></span>
434	</label>
435	</span>
436	<?php } ?>
437
438	<div class="eel-offcanvas-content">
439	<?php
440	if (!empty($settings['content_template'])) {
441	// phpcs:ignore WordPress.Security.EscapeOutput
442	echo \Elementor\Plugin::$instance->frontend->get_builder_content_for_display($settings['content_template']);
443	}
444	?>
445	</div>
446	</div>
447	</div>
448	<?php });
449	}
450	?>
451	</div>
452	<?php
453	}
454	}