https://specmachinery.com.ua/plugins/system/t4/themes/base/js/offcanvas.js

1/* rechange name offcanvas before load bs5 offvancas */
2(function (w, $) {
3	"use strict";
4
5	const pluginName = "T4Offcanvas",
6		initSelector = ".js-" + pluginName;
7
8	$.fn[pluginName] = function (options) {
9		return this.each(function () {
10			new w.componentNamespace.Offcanvas(this, options).init();
11		});
12	};
13	// auto-init on enhance (which is called on domready)
14	$(w.document).on("enhance", function (e) {
15		$($(e.target).is(initSelector) && e.target).add(initSelector, e.target).filter(initSelector)[pluginName]();
16	});
17
18})(this, jQuery);
19
20jQuery(document).ready($ => {
21	const $offcanvas = $('.t4-offcanvas');
22
23	$('.t4-wrapper').addClass('c-offcanvas-content-wrap');
24
25	if ($('#triggerButton').length) {
26		$offcanvas.T4Offcanvas({
27			triggerButton: '#triggerButton',
28			onOpen: function () {
29				$('#triggerButton').addClass('active');
30				bodyScrollLock.disableBodyScroll('.t4-off-canvas-body');
31			},
32			onClose: function () {
33				$('#triggerButton').removeClass('active');
34				setTimeout(function () {
35					bodyScrollLock.enableBodyScroll('.t4-off-canvas-body');
36				}, 300);
37			}
38		});
39		setTimeout(() => {
40			$offcanvas.show();
41		}, 300);
42	} else {
43		$offcanvas.hide();
44	}
45
46	$offcanvas.find('[data-bs-toggle]').removeAttr('data-bs-toggle', false);
47	$offcanvas.find('[data-toggle]').removeAttr('data-toggle', false);
48
49	$offcanvas.find('[data-effect="drill"] ul.dropdown-menu, [data-effect="def"] ul.dropdown-menu').each((i, el) => {
50		const $el = $(el);
51		const label = $el.prev().text();
52
53		$el.prepend("<span class='sub-menu-back'><i class='fas fa-chevron-left'></i>" + label + "</span>");
54		$el.before('<span class="sub-menu-toggle btn-toggle"></span>');
55	});
56
57	$offcanvas.find('[data-effect="drill"] nav.navbar').each((i, el) => {
58		initDrilldownMenu($(el));
59	});
60
61	$offcanvas.find('[data-effect="def"] nav.navbar').each((i, el) => {
62		initAccordionMenu($(el));
63	});
64
65	function initAccordionMenu($container) {
66		const toggleSelector = '.sub-menu-toggle, .separator.dropdown-toggle, .nav-header.dropdown-toggle';
67
68		$container.find(toggleSelector).on('click', e => {
69			const $el = $(e.currentTarget);
70			const $dropdown = $el.siblings('.dropdown-menu');
71
72			$dropdown.slideToggle(300);
73		})
74	}
75
76	function initDrilldownMenu($container) {
77		$container.addClass('drilldown-effect');
78		$container.css({
79			overflow: 'unset',
80			transition: 'transform 300ms, height 300ms',
81		});
82
83		const openerSelector = '.sub-menu-toggle, .separator.dropdown-toggle, .nav-header.dropdown-toggle';
84
85		$container.find(openerSelector).on('click', e => {
86			const $el = $(e.currentTarget);
87			const $dropdown = $el.siblings('.dropdown-menu');
88			const $navItem = $el.parent();
89			const $navbar = $navItem.parent();
90			const level = +$navItem.data('level') || 0;
91
92			$dropdown.css('display', 'block');
93
94			if (!$container[0].style.height) {
95				$container.css('height', $navbar.height() + 'px');
96			}
97
98			setTimeout(() => {
99				$container.css('height', $dropdown.height() + 'px');
100				$container.css('transform', `translateX(-${level * 100}%)`);
101			});
102		});
103
104		$container.find('.sub-menu-back').on('click', e => {
105			const $el = $(e.currentTarget);
106			const $dropdown = $el.parent();
107			const currentlevel = $el.closest('li.nav-item').data('level') || 0;
108			const prevLevel = currentlevel ? currentlevel - 1 : 0;
109
110			$container.one('transitionend', () => {
111				$dropdown.css('display', '');
112			})
113
114			setTimeout(() => {
115				const $navItem = $el.closest('.nav-item');
116				const $prevNav = $navItem.parent();
117
118				$container.css('height', $prevNav.height() + 'px');
119				$container.css('transform', `translateX(-${prevLevel * 100}%)`);
120			});
121		});
122	}
123});