diff options
author | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-16 19:32:18 +0300 |
---|---|---|
committer | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-17 01:28:57 +0300 |
commit | 239d68f94c6250276850fbe95eaa6cdd5c38fb26 (patch) | |
tree | c576da169afc442f51eae6213ad0ff749ed86589 /themes/hugo-theme-stack/assets/ts/menu.ts | |
parent | 8e79098193fd0a8b65305dd8054cf7c424c60bc5 (diff) |
Своя тема, полностью всё переделал
Diffstat (limited to 'themes/hugo-theme-stack/assets/ts/menu.ts')
-rw-r--r-- | themes/hugo-theme-stack/assets/ts/menu.ts | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/themes/hugo-theme-stack/assets/ts/menu.ts b/themes/hugo-theme-stack/assets/ts/menu.ts deleted file mode 100644 index 34615ba..0000000 --- a/themes/hugo-theme-stack/assets/ts/menu.ts +++ /dev/null @@ -1,83 +0,0 @@ -/** - * Slide up/down - * Code from https://dev.to/bmsvieira/vanilla-js-slidedown-up-4dkn - * @param target - * @param duration - */ -let slideUp = (target: HTMLElement, duration = 500) => { - target.classList.add('transiting'); - target.style.transitionProperty = 'height, margin, padding'; - target.style.transitionDuration = duration + 'ms'; - ///target.style.boxSizing = 'border-box'; - target.style.height = target.offsetHeight + 'px'; - target.offsetHeight; - target.style.overflow = 'hidden'; - target.style.height = "0"; - target.style.paddingTop = "0"; - target.style.paddingBottom = "0"; - target.style.marginTop = "0"; - target.style.marginBottom = "0"; - window.setTimeout(() => { - target.classList.remove('show') - target.style.removeProperty('height'); - target.style.removeProperty('padding-top'); - target.style.removeProperty('padding-bottom'); - target.style.removeProperty('margin-top'); - target.style.removeProperty('margin-bottom'); - target.style.removeProperty('overflow'); - target.style.removeProperty('transition-duration'); - target.style.removeProperty('transition-property'); - target.classList.remove('transiting'); - }, duration); -} - -let slideDown = (target: HTMLElement, duration = 500) => { - target.classList.add('transiting'); - target.style.removeProperty('display'); - - target.classList.add('show'); - - let height = target.offsetHeight; - target.style.overflow = 'hidden'; - target.style.height = "0"; - target.style.paddingTop = "0"; - target.style.paddingBottom = "0"; - target.style.marginTop = "0"; - target.style.marginBottom = "0"; - target.offsetHeight; - ///target.style.boxSizing = 'border-box'; - target.style.transitionProperty = "height, margin, padding"; - target.style.transitionDuration = duration + 'ms'; - target.style.height = height + 'px'; - target.style.removeProperty('padding-top'); - target.style.removeProperty('padding-bottom'); - target.style.removeProperty('margin-top'); - target.style.removeProperty('margin-bottom'); - window.setTimeout(() => { - target.style.removeProperty('height'); - target.style.removeProperty('overflow'); - target.style.removeProperty('transition-duration'); - target.style.removeProperty('transition-property'); - target.classList.remove('transiting'); - }, duration); -} - -let slideToggle = (target, duration = 500) => { - if (window.getComputedStyle(target).display === 'none') { - return slideDown(target, duration); - } else { - return slideUp(target, duration); - } -} - -export default function () { - const toggleMenu = document.getElementById('toggle-menu'); - if (toggleMenu) { - toggleMenu.addEventListener('click', () => { - if (document.getElementById('main-menu').classList.contains('transiting')) return; - document.body.classList.toggle('show-menu'); - slideToggle(document.getElementById('main-menu'), 300); - toggleMenu.classList.toggle('is-active'); - }); - } -}
\ No newline at end of file |