aboutsummaryrefslogtreecommitdiff
path: root/themes/hugo-theme-stack/assets/ts/menu.ts
diff options
context:
space:
mode:
Diffstat (limited to 'themes/hugo-theme-stack/assets/ts/menu.ts')
-rw-r--r--themes/hugo-theme-stack/assets/ts/menu.ts83
1 files changed, 83 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/assets/ts/menu.ts b/themes/hugo-theme-stack/assets/ts/menu.ts
new file mode 100644
index 0000000..34615ba
--- /dev/null
+++ b/themes/hugo-theme-stack/assets/ts/menu.ts
@@ -0,0 +1,83 @@
+/**
+ * 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