PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.78
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.78
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 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Off_Canvas_Content / Off_Canvas_Content.php

Off_Canvas_Content.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.78, at includes/widgets/Off_Canvas_Content/Off_Canvas_Content.php

695 lines 26.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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:bug@kingaddons.com?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 // Moves all off-canvases to right after the <body> opens
643 document.body.insertBefore(overlay, document.body.firstChild);
644 document.body.insertBefore(offCanvas, document.body.firstChild);
645
646 // Change display from none to block to prevent dancing of the off-canvas before the DOM content loaded
647 offCanvas.style.display = 'block';";
648
649 $inline_js_2 = "";
650 if ('' != $settings['kng_off_canvas_class']) {
651 $inline_js_2 = "
652 // Adds click listener for custom triggers that have the custom class
653 const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_off_canvas_class']) . "');
654 customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
655 offCanvas.classList.toggle('king-addons-off-canvas-active');
656 document.body.style.pointerEvents = 'none';
657 if (offCanvas.classList.contains('king-addons-off-canvas-active')) {
658 overlay.style.display = 'block';
659 setTimeout(function () {
660 overlay.style.opacity = '1';
661 }, 1);
662 }
663 setTimeout(function () {
664 document.body.style.pointerEvents = '';
665 }, 300);
666 }));
667 customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
668 }
669
670 $inline_js_3 = "});";
671
672 $inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
673 wp_print_inline_script_tag($inline_js);
674 }
675
676 public function getTagsAndAttributes($node, &$tags): void
677 {
678 if ($node->nodeType == XML_ELEMENT_NODE) {
679 $tagName = $node->nodeName;
680 if (!isset($tags[$tagName])) {
681 $tags[$tagName] = [];
682 }
683
684 foreach ($node->attributes as $attr) {
685 if (!isset($tags[$tagName][$attr->nodeName])) {
686 $tags[$tagName][$attr->nodeName] = true;
687 }
688 }
689 }
690
691 foreach ($node->childNodes as $child) {
692 $this->getTagsAndAttributes($child, $tags);
693 }
694 }
695 }