PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.86
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.86
51.1.87 51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 All 41 releases
← All changes | includes/widgets/Off_Canvas_Content/Off_Canvas_Content.php +702 -0 51.1.2 → 51.1.86 View file →
@@ -1,0 +1,702 @@
1 +<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2 +
3 +namespace King_Addons;
4 +
5 +use DOMDocument;
6 +use Elementor\Controls_Manager;
7 +use Elementor\Group_Control_Border;
8 +use Elementor\Group_Control_Box_Shadow;
9 +use Elementor\Group_Control_Typography;
10 +use Elementor\Icons_Manager;
11 +use Elementor\Plugin;
12 +use Elementor\Widget_Base;
13 +
14 +/** @noinspection SpellCheckingInspection */
15 +if (!defined('ABSPATH')) {
16 + exit; // Exit if accessed directly.
17 +}
18 +
19 +
20 +
21 +class Off_Canvas_Content extends Widget_Base
22 +{
23 +
24 +
25 + public function get_name(): string
26 + {
27 + return 'king-addons-off-canvas-content';
28 + }
29 +
30 + public function get_title(): string
31 + {
32 + return esc_html__('Off-Canvas Content', 'king-addons');
33 + }
34 +
35 + public function get_icon(): string
36 + {
37 + /** @noinspection SpellCheckingInspection */
38 + return 'king-addons-icon king-addons-off-canvas-content';
39 + }
40 +
41 + public function get_style_depends(): array
42 + {
43 + return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-off-canvas-content-style'];
44 + }
45 +
46 + public function get_categories(): array
47 + {
48 + return ['king-addons'];
49 + }
50 +
51 + public function get_keywords(): array
52 + {
53 + return ['off', 'canvas', 'offcanvas', 'ofcavas', 'off-canvas', 'content', 'button', 'sidebar', 'side', 'bar',
54 + 'menu', 'popup', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link', 'left',
55 + 'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture',
56 + 'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons', 'mouseover', 'page',
57 + 'kingaddons', 'king-addons', 'off canvas', 'pop up', 'popup', 'lightbox', 'box', 'modal', 'window', 'tab',
58 + 'appear', 'show', 'hide', 'center', 'up', 'frame', 'iframe', 'embed'];
59 + }
60 +
61 + public function get_custom_help_url()
62 + {
63 + return 'mailto:[email protected]?subject=Bug Report - King Addons&body=Please describe the issue';
64 + }
65 +
66 + protected function register_controls(): void
67 + {
68 + /** START TAB: CONTENT ===================== */
69 + /** SECTION: General ===================== */
70 + $this->start_controls_section(
71 + 'kng_off_canvas_section_general',
72 + [
73 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
74 + ]
75 + );
76 +
77 + $this->add_control(
78 + 'kng_off_canvas_template',
79 + [
80 + 'label' => esc_html__('Select Template', 'king-addons'),
81 + 'type' => 'king-addons-ajax-select2',
82 + 'options' => 'ajaxselect2/getElementorTemplates',
83 + 'label_block' => true,
84 + ]
85 + );
86 +
87 + $this->add_control(
88 + 'kng_off_canvas_box_position',
89 + [
90 + 'label' => esc_html__('Box Position', 'king-addons'),
91 + 'type' => Controls_Manager::CHOOSE,
92 + 'default' => 'left',
93 + 'options' => [
94 + 'top' => [
95 + 'title' => esc_html__('Top', 'king-addons'),
96 + 'icon' => 'eicon-v-align-top',
97 + ],
98 + 'right' => [
99 + 'title' => esc_html__('Right', 'king-addons'),
100 + 'icon' => 'eicon-h-align-right',
101 + ],
102 + 'bottom' => [
103 + 'title' => esc_html__('Bottom', 'king-addons'),
104 + 'icon' => 'eicon-v-align-bottom',
105 + ],
106 + 'left' => [
107 + 'title' => esc_html__('Left', 'king-addons'),
108 + 'icon' => 'eicon-h-align-left',
109 + ],
110 + ],
111 + ]
112 + );
113 +
114 + $this->add_responsive_control(
115 + 'kng_off_canvas_box_max_width',
116 + [
117 + 'label' => esc_html__('Maximum Width (px)', 'king-addons'),
118 + 'type' => Controls_Manager::NUMBER,
119 + 'min' => 0,
120 + 'step' => 1,
121 + 'default' => 300,
122 + 'selectors' => [
123 + '.king-addons-off-canvas-{{ID}}' => 'max-width: {{VALUE}}px;',
124 + ],
125 + 'condition' => [
126 + 'kng_off_canvas_box_position' => ['left', 'right']
127 + ]
128 + ]
129 + );
130 +
131 + $this->add_control(
132 + 'kng_off_canvas_box_max_height_switcher',
133 + [
134 + 'label' => esc_html__('Set the Maximum Height of Off-Canvas Content', 'king-addons'),
135 + 'type' => Controls_Manager::SWITCHER
136 + ]
137 + );
138 +
139 + $this->add_responsive_control(
140 + 'kng_off_canvas_box_max_height',
141 + [
142 + 'label' => esc_html__('Maximum Height (px)', 'king-addons'),
143 + 'type' => Controls_Manager::NUMBER,
144 + 'min' => 0,
145 + 'step' => 1,
146 + 'default' => 300,
147 + 'selectors' => [
148 + '.king-addons-off-canvas-{{ID}}' => 'max-height: {{VALUE}}px;',
149 + ],
150 + 'condition' => [
151 + 'kng_off_canvas_box_max_height_switcher!' => '',
152 + 'kng_off_canvas_box_position' => ['top', 'bottom']
153 + ]
154 + ]
155 + );
156 +
157 + $this->add_control(
158 + 'kng_off_canvas_btn_text',
159 + [
160 + 'label' => esc_html__('Button Text', 'king-addons'),
161 + 'type' => Controls_Manager::TEXT,
162 + 'default' => esc_html__('Open Off-Canvas Content', 'king-addons'),
163 + ]
164 + );
165 +
166 + $this->add_control(
167 + 'kng_off_canvas_disable_btn',
168 + [
169 + 'label' => esc_html__('Disable Button', 'king-addons'),
170 + 'type' => Controls_Manager::SWITCHER,
171 + 'description' => esc_html__('This is a useful feature if there is a need to set a custom element as the trigger instead of the default button.', 'king-addons'),
172 + 'separator' => 'before'
173 + ]
174 + );
175 +
176 + $this->add_control(
177 + 'kng_off_canvas_class',
178 + [
179 + 'label' => esc_html__('CSS Class of trigger element (optional)', 'king-addons'),
180 + 'description' => esc_html__('Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the off-canvas content will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode.', 'king-addons'),
181 + 'type' => Controls_Manager::TEXT,
182 + 'placeholder' => esc_html__('Type your class here', 'king-addons'),
183 + 'label_block' => true,
184 + 'ai' => [
185 + 'active' => false,
186 + ],
187 + ]
188 + );
189 +
190 + $this->end_controls_section();
191 + /** END SECTION: General ===================== */
192 + /** END TAB: CONTENT ===================== */
193 +
194 + /** TAB: STYLE ===================== */
195 + /** SECTION: Button ===================== */
196 + $this->start_controls_section(
197 + 'kng_off_canvas_section_style_btn',
198 + [
199 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
200 + 'tab' => Controls_Manager::TAB_STYLE,
201 + ]
202 + );
203 +
204 + $this->add_control(
205 + 'kng_off_canvas_btn_h_position',
206 + [
207 + 'label' => esc_html__('Button Horizontal Position', 'king-addons'),
208 + 'type' => Controls_Manager::CHOOSE,
209 + 'default' => 'center',
210 + 'options' => [
211 + 'left' => [
212 + 'title' => esc_html__('Left', 'king-addons'),
213 + 'icon' => 'eicon-h-align-left',
214 + ],
215 + 'center' => [
216 + 'title' => esc_html__('Center', 'king-addons'),
217 + 'icon' => 'eicon-h-align-center',
218 + ],
219 + 'right' => [
220 + 'title' => esc_html__('Right', 'king-addons'),
221 + 'icon' => 'eicon-h-align-right',
222 + ],
223 + ],
224 + 'selectors' => [
225 + '{{WRAPPER}}' => 'text-align: {{VALUE}};',
226 + ],
227 + ]
228 + );
229 +
230 + $this->add_control(
231 + 'kng_off_canvas_btn_tabs_title',
232 + [
233 + 'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
234 + 'type' => Controls_Manager::RAW_HTML,
235 + 'separator' => 'before'
236 + ]
237 + );
238 +
239 + $this->start_controls_tabs('kng_off_canvas_btn_tabs');
240 +
241 + $this->start_controls_tab(
242 + 'kng_off_canvas_btn_tab_normal',
243 + [
244 + 'label' => esc_html__('Normal', 'king-addons'),
245 + ]
246 + );
247 +
248 + $this->add_group_control(
249 + Group_Control_Typography::get_type(),
250 + [
251 + 'name' => 'kng_off_canvas_btn_typography',
252 + 'selector' => '{{WRAPPER}} .king-addons-off-canvas-button',
253 + ]
254 + );
255 +
256 + $this->add_control(
257 + 'kng_off_canvas_btn_txt_color',
258 + [
259 + 'label' => esc_html__('Text Color', 'king-addons'),
260 + 'type' => Controls_Manager::COLOR,
261 + 'default' => '#ffffff',
262 + 'selectors' => [
263 + '{{WRAPPER}} .king-addons-off-canvas-button' => 'color: {{VALUE}}'
264 + ],
265 + ]
266 + );
267 +
268 + $this->add_control(
269 + 'kng_off_canvas_btn_bg_color',
270 + [
271 + 'label' => esc_html__('Background Color', 'king-addons'),
272 + 'type' => Controls_Manager::COLOR,
273 + 'default' => '#574ff7',
274 + 'selectors' => [
275 + '{{WRAPPER}} .king-addons-off-canvas-button' => 'background-color: {{VALUE}}',
276 + ],
277 + ]
278 + );
279 +
280 + $this->add_responsive_control(
281 + 'kng_off_canvas_btn_padding',
282 + [
283 + 'label' => esc_html__('Padding', 'king-addons'),
284 + 'type' => Controls_Manager::DIMENSIONS,
285 + 'size_units' => ['px'],
286 + 'default' => [
287 + 'top' => 10,
288 + 'right' => 10,
289 + 'bottom' => 10,
290 + 'left' => 10,
291 + ],
292 + 'selectors' => [
293 + '{{WRAPPER}} .king-addons-off-canvas-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
294 + ]
295 + ]
296 + );
297 +
298 + $this->add_group_control(
299 + Group_Control_Box_Shadow::get_type(),
300 + [
301 + 'name' => 'kng_off_canvas_btn_box_shadow',
302 + 'selector' => '{{WRAPPER}} .king-addons-off-canvas-button',
303 + ]
304 + );
305 +
306 + $this->add_group_control(
307 + Group_Control_Border::get_type(),
308 + [
309 + 'name' => 'kng_off_canvas_btn_border',
310 + 'selector' => '{{WRAPPER}} .king-addons-off-canvas-button',
311 + 'fields_options' => [
312 + 'border' => [
313 + 'default' => 'none',
314 + ],
315 + ],
316 + ]
317 + );
318 +
319 + $this->add_responsive_control(
320 + 'kng_off_canvas_btn_border_radius',
321 + [
322 + 'label' => esc_html__('Border Radius', 'king-addons'),
323 + 'type' => Controls_Manager::DIMENSIONS,
324 + 'size_units' => ['px', '%'],
325 + 'default' => [
326 + 'top' => 0,
327 + 'right' => 0,
328 + 'bottom' => 0,
329 + 'left' => 0,
330 + ],
331 + 'selectors' => [
332 + '{{WRAPPER}} .king-addons-off-canvas-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
333 + ]
334 + ]
335 + );
336 +
337 + $this->end_controls_tab();
338 +
339 + $this->start_controls_tab(
340 + 'kng_off_canvas_btn_tab_hover',
341 + [
342 + 'label' => esc_html__('Hover', 'king-addons'),
343 + ]
344 + );
345 +
346 + $this->add_group_control(
347 + Group_Control_Typography::get_type(),
348 + [
349 + 'name' => 'kng_off_canvas_btn_typography_hover',
350 + 'selector' => '{{WRAPPER}} .king-addons-off-canvas-button:hover',
351 + ]
352 + );
353 +
354 + $this->add_control(
355 + 'kng_off_canvas_btn_txt_color_hover',
356 + [
357 + 'label' => esc_html__('Text Color', 'king-addons'),
358 + 'type' => Controls_Manager::COLOR,
359 + 'selectors' => [
360 + '{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'color: {{VALUE}}'
361 + ],
362 + ]
363 + );
364 +
365 + $this->add_control(
366 + 'kng_off_canvas_btn_bg_color_hover',
367 + [
368 + 'label' => esc_html__('Background Color', 'king-addons'),
369 + 'type' => Controls_Manager::COLOR,
370 + 'selectors' => [
371 + '{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'background-color: {{VALUE}}',
372 + ],
373 + ]
374 + );
375 +
376 + $this->add_responsive_control(
377 + 'kng_off_canvas_btn_padding_hover',
378 + [
379 + 'label' => esc_html__('Padding', 'king-addons'),
380 + 'type' => Controls_Manager::DIMENSIONS,
381 + 'size_units' => ['px'],
382 + 'selectors' => [
383 + '{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
384 + ]
385 + ]
386 + );
387 +
388 + $this->add_group_control(
389 + Group_Control_Box_Shadow::get_type(),
390 + [
391 + 'name' => 'kng_off_canvas_btn_box_shadow_hover',
392 + 'selector' => '{{WRAPPER}} .king-addons-off-canvas-button:hover',
393 + ]
394 + );
395 +
396 + $this->add_group_control(
397 + Group_Control_Border::get_type(),
398 + [
399 + 'name' => 'kng_off_canvas_btn_border_hover',
400 + 'selector' => '{{WRAPPER}} .king-addons-off-canvas-button:hover',
401 + ]
402 + );
403 +
404 + $this->add_responsive_control(
405 + 'kng_off_canvas_btn_border_radius_hover',
406 + [
407 + 'label' => esc_html__('Border Radius', 'king-addons'),
408 + 'type' => Controls_Manager::DIMENSIONS,
409 + 'size_units' => ['px', '%'],
410 + 'selectors' => [
411 + '{{WRAPPER}} .king-addons-off-canvas-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412 + ]
413 + ]
414 + );
415 +
416 + $this->end_controls_tab();
417 +
418 + $this->end_controls_tabs();
419 +
420 + $this->end_controls_section();
421 + /** END SECTION: Button ===================== */
422 +
423 + /** SECTION: Off-Canvas box ===================== */
424 + $this->start_controls_section(
425 + 'kng_off_canvas_section_style_off_canvas_box',
426 + [
427 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Off-Canvas box', 'king-addons'),
428 + 'tab' => Controls_Manager::TAB_STYLE,
429 + ]
430 + );
431 +
432 + $this->add_control(
433 + 'kng_off_canvas_box_bg_color',
434 + [
435 + 'label' => esc_html__('Background Color', 'king-addons'),
436 + 'type' => Controls_Manager::COLOR,
437 + 'default' => '#ffffff',
438 + 'selectors' => [
439 + '.king-addons-off-canvas-{{ID}}' => 'background-color: {{VALUE}};',
440 + ],
441 + ]
442 + );
443 +
444 + $this->add_responsive_control(
445 + 'kkng_off_canvas_box_padding',
446 + [
447 + 'label' => esc_html__('Padding', 'king-addons'),
448 + 'type' => Controls_Manager::DIMENSIONS,
449 + 'size_units' => ['px', '%'],
450 + 'default' => [
451 + 'top' => 10,
452 + 'right' => 10,
453 + 'bottom' => 10,
454 + 'left' => 10,
455 + 'unit' => 'px',
456 + ],
457 + 'selectors' => [
458 + '.king-addons-off-canvas-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
459 + ]
460 + ]
461 + );
462 +
463 + $this->add_control(
464 + 'kng_off_canvas_box_z_index',
465 + [
466 + 'label' => esc_html__('Z-Index of Off-Canvas box (optional)', 'king-addons'),
467 + 'description' => esc_html__('Note: The Off-Canvas box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Off-Canvas box will display properly over all elements on the live website. Please check it there.', 'king-addons'),
468 + 'type' => Controls_Manager::NUMBER,
469 + 'step' => 1,
470 + 'default' => 999999,
471 + 'separator' => 'before',
472 + 'selectors' => [
473 + '.king-addons-off-canvas-{{ID}}' => 'z-index: {{VALUE}};',
474 + '.king-addons-off-canvas-overlay-{{ID}}' => 'z-index: calc({{VALUE}} - 1);',
475 + ],
476 + ]
477 + );
478 +
479 + $this->end_controls_section();
480 + /** END SECTION: Off-Canvas box ===================== */
481 +
482 + /** SECTION: Close Button ===================== */
483 + $this->start_controls_section(
484 + 'kng_off_canvas_section_style_close_btn',
485 + [
486 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Close Button', 'king-addons'),
487 + 'tab' => Controls_Manager::TAB_STYLE,
488 + ]
489 + );
490 +
491 + $this->add_control(
492 + 'kng_off_canvas_close_btn_icon',
493 + [
494 + 'label' => esc_html__('Select Icon', 'king-addons'),
495 + 'type' => Controls_Manager::ICONS,
496 + 'skin' => 'inline',
497 + 'label_block' => false,
498 + 'exclude_inline_options' => ['svg'],
499 + 'default' => [
500 + 'value' => 'fas fa-times',
501 + 'library' => 'fa-solid',
502 + ],
503 + ]
504 + );
505 +
506 + $this->add_control(
507 + 'kng_off_canvas_close_btn_color',
508 + [
509 + 'label' => esc_html__('Color', 'king-addons'),
510 + 'type' => Controls_Manager::COLOR,
511 + 'default' => '#000000',
512 + 'selectors' => [
513 + '.king-addons-off-canvas-close-button-{{ID}}' => 'color: {{VALUE}};',
514 + ],
515 + ]
516 + );
517 +
518 + $this->add_control(
519 + 'kng_off_canvas_close_btn_size',
520 + [
521 + 'label' => esc_html__('Size (px)', 'king-addons'),
522 + 'type' => Controls_Manager::NUMBER,
523 + 'min' => 1,
524 + 'step' => 1,
525 + 'default' => 20,
526 + 'separator' => 'before',
527 + 'selectors' => [
528 + '.king-addons-off-canvas-close-button-{{ID}}' => 'font-size: {{VALUE}}px;',
529 + ],
530 + ]
531 + );
532 +
533 + $this->end_controls_section();
534 + /** END SECTION: Close Button ===================== */
535 +
536 + /** SECTION: Overlay ===================== */
537 + $this->start_controls_section(
538 + 'kng_off_canvas_overlay',
539 + [
540 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
541 + 'tab' => Controls_Manager::TAB_STYLE,
542 + ]
543 + );
544 +
545 + $this->add_control(
546 + 'kng_off_canvas_overlay_color',
547 + [
548 + 'label' => esc_html__('Overlay Background Color', 'king-addons'),
549 + 'type' => Controls_Manager::COLOR,
550 + 'default' => 'rgba(0, 0, 0, 0.5)',
551 + 'selectors' => [
552 + '.king-addons-off-canvas-overlay-{{ID}}' => 'background-color: {{VALUE}};',
553 + ],
554 + ]
555 + );
556 +
557 + $this->end_controls_section();
558 + /** END SECTION: Overlay ===================== */
559 + /** END TAB: STYLE ===================== */
560 + }
561 +
562 + public function getOffCanvasTemplate($template_id): ?string
563 + {
564 + if (empty($template_id)) {
565 + return null;
566 + }
567 +
568 + $type = get_post_meta(get_the_ID(), '_king_addons_template_type', true);
569 + $has_css = 'internal' === get_option('elementor_css_print_method') || '' !== $type;
570 +
571 + return Plugin::instance()->frontend->get_builder_content_for_display($template_id, $has_css);
572 + }
573 +
574 + protected function render(): void
575 + {
576 + $settings = $this->get_settings_for_display();
577 + $this_ID = $this->get_id();
578 + $class_ID = 'king-addons-off-canvas-' . $this_ID;
579 + $overlay_ID = 'king-addons-off-canvas-overlay-' . $this_ID;
580 +
581 + $class_selector_js = esc_attr(wp_json_encode('.' . $class_ID));
582 + $overlay_selector_js = esc_attr(wp_json_encode('.' . $overlay_ID));
583 +
584 + if (!empty($settings['kng_off_canvas_template'])) {
585 +
586 + echo '<div class="king-addons-off-canvas-overlay ' .
587 + esc_attr($overlay_ID) . '" onclick="';
588 + echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-off-canvas-active'); document.querySelector(" . $overlay_selector_js . ").style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.display = 'none'; document.body.style.pointerEvents = '';}, 300);";
589 + echo '"></div>';
590 +
591 + echo '<div class="king-addons-off-canvas ' .
592 + esc_attr($class_ID) . ' king-addons-off-canvas-position-' .
593 + esc_attr($settings['kng_off_canvas_box_position']) . ' king-addons-off-canvas-animation-slide"';
594 + if (!Plugin::$instance->editor->is_edit_mode()) {
595 + echo ' style="display: none;"';
596 + }
597 + echo '>';
598 +
599 + if ('' != $settings['kng_off_canvas_close_btn_icon']['value']) {
600 +
601 + echo '<div class="king-addons-off-canvas-close-button king-addons-off-canvas-close-button-' .
602 + esc_attr($this_ID) . '" onclick="';
603 + echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-off-canvas-active'); document.querySelector(" . $overlay_selector_js . ").style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.display = 'none'; document.body.style.pointerEvents = '';}, 300);";
604 + echo '">';
605 +
606 + Icons_Manager::render_icon($settings['kng_off_canvas_close_btn_icon']);
607 + echo '</div>';
608 + }
609 +
610 + $html = $this->getOffCanvasTemplate(esc_html($settings['kng_off_canvas_template']));
611 + $dom = new DOMDocument;
612 + libxml_use_internal_errors(true); // Disable libxml errors
613 + $dom->loadHTML($html);
614 + libxml_clear_errors();
615 +
616 + $tags = [];
617 + $this->getTagsAndAttributes($dom->documentElement, $tags);
618 +
619 + echo wp_kses($html, $tags);
620 +
621 + echo '</div>';
622 +
623 + if ('' == $settings['kng_off_canvas_disable_btn']) {
624 +
625 + echo '<button class="king-addons-off-canvas-button king-addons-off-canvas-button-' .
626 + esc_attr($this_ID) . '" onclick="';
627 + echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-off-canvas-active'); document.querySelector(" . $overlay_selector_js . ").style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 300);";
628 + echo '">' .
629 + esc_html($settings['kng_off_canvas_btn_text']) . '</button>';
630 +
631 + }
632 + } else {
633 + echo '<p>' . esc_html__('Please select a template', 'king-addons') . '</p>';
634 + }
635 +
636 + $inline_js_1 = "
637 + document.addEventListener('DOMContentLoaded', function () {
638 +
639 + const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
640 + const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
641 +
642 + // With no template picked the widget prints a placeholder instead of
643 + // the panel markup, so these lookups come back empty. Bail out rather
644 + // than throwing on insertBefore and losing the handlers below.
645 + if (!offCanvas || !overlay) {
646 + return;
647 + }
648 +
649 + // Moves all off-canvases to right after the <body> opens
650 + document.body.insertBefore(overlay, document.body.firstChild);
651 + document.body.insertBefore(offCanvas, document.body.firstChild);
652 +
653 + // Change display from none to block to prevent dancing of the off-canvas before the DOM content loaded
654 + offCanvas.style.display = 'block';";
655 +
656 + $inline_js_2 = "";
657 + if ('' != $settings['kng_off_canvas_class']) {
658 + $inline_js_2 = "
659 + // Adds click listener for custom triggers that have the custom class
660 + const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_off_canvas_class']) . "');
661 + customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
662 + offCanvas.classList.toggle('king-addons-off-canvas-active');
663 + document.body.style.pointerEvents = 'none';
664 + if (offCanvas.classList.contains('king-addons-off-canvas-active')) {
665 + overlay.style.display = 'block';
666 + setTimeout(function () {
667 + overlay.style.opacity = '1';
668 + }, 1);
669 + }
670 + setTimeout(function () {
671 + document.body.style.pointerEvents = '';
672 + }, 300);
673 + }));
674 + customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
675 + }
676 +
677 + $inline_js_3 = "});";
678 +
679 + $inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
680 + wp_print_inline_script_tag($inline_js);
681 + }
682 +
683 + public function getTagsAndAttributes($node, &$tags): void
684 + {
685 + if ($node->nodeType == XML_ELEMENT_NODE) {
686 + $tagName = $node->nodeName;
687 + if (!isset($tags[$tagName])) {
688 + $tags[$tagName] = [];
689 + }
690 +
691 + foreach ($node->attributes as $attr) {
692 + if (!isset($tags[$tagName][$attr->nodeName])) {
693 + $tags[$tagName][$attr->nodeName] = true;
694 + }
695 + }
696 + }
697 +
698 + foreach ($node->childNodes as $child) {
699 + $this->getTagsAndAttributes($child, $tags);
700 + }
701 + }
702 +}