@madj2k/fe-frontend-kit 2.0.0

package/index.js

@@ -0,0 +1,7 @@
+// Tools
+export { Madj2kOwlThumbnail } from './tools/owl/owl-thumbnail.js';
+export { Madj2kScrolling } from './tools/scrolling/scrolling.js';
+
+// Menus
+export { Madj2kFlyoutMenu } from './menus/flyout-menu-1.0';
+export { Madj2kPulldownMenu } from './menus/pulldown-menu-1.0';

package/index.scss

@@ -0,0 +1,6 @@
+// Forward all mixins
+@forward './sass/bootstrap-5.3.0/index';
+
+// Forward all menu styles
+@forward './menus/flyout-menu';
+@forward './menus/pulldown-menu';

package/menus/flyout-menu/flyout-menu-2.0.0.js

@@ -0,0 +1,331 @@
+/**!
+ * Madj2kFlyoutMenu
+ *
+ * A JavaScript class that implements a flyout menu system with smooth animations,
+ * keyboard navigation, and scroll management. It provides a responsive menu that
+ * slides in from the top of the viewport.
+ *
+ * @author Steffen Kroggel <developer@steffenkroggel.de>
+ * @copyright 2025 Steffen Kroggel
+ * @version 2.0.0
+ * @license GNU General Public License v3.0
+ * @see https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * @example
+ * // HTML structure
+ * <button class="js-flyout-toggle" aria-controls="flyout-menu">Menu</button>
+ * <div id="flyout-menu" class="js-flyout" data-position-ref="main-content" data-padding-ref="content">
+ *   <div class="js-flyout-container">
+ *     <div class="js-flyout-inner">Menu content</div>
+ *     <button class="js-flyout-close">Close</button>
+ *   </div>
+ * </div>
+ *
+ * // JavaScript initialization
+ * const menuTrigger = document.querySelector('.js-flyout-toggle');
+ * const flyoutMenu = new Madj2kFlyoutMenu(menuTrigger, {
+ *   animationDuration: 300,
+ *   heightMode: 'maxContent'
+ * });
+ */
+
+class Madj2kFlyoutMenu {
+  /**
+   * Initializes the flyout menu with given element and options
+   * @param {HTMLElement} element - The trigger element for the menu
+   * @param {Object} options - Configuration options for the menu
+   */
+  constructor(element, options = {}) {
+    const defaults = {
+      openStatusClass: 'open',
+      animationOpenStatusClass: 'opening',
+      animationCloseStatusClass: 'closing',
+      animationBodyClassPrefix: 'flyout',
+      openStatusBodyClass: 'flyout-open',
+      openStatusBodyClassOverflow: 'flyout-open-overflow',
+      contentSectionClass: 'js-main-content',
+      menuClass: 'js-flyout',
+      menuToggleClass: "js-flyout-toggle",
+      menuCloseClass: "js-flyout-close",
+      menuContainerClass: "js-flyout-container",
+      menuInnerClass: "js-flyout-inner",
+      heightMode: 'maxContent',
+      paddingBehavior: 0,
+      paddingViewPortMinWidth: 0,
+      animationDuration: 500
+    };
+
+    this.settings = Object.assign({}, defaults, options);
+    this.$element = element;
+    this.settings.$element = element;
+
+    const controls = element.getAttribute('aria-controls');
+    this.settings.$menu = document.getElementById(controls);
+
+    const posRef = this.settings.$menu.getAttribute('data-position-ref');
+    this.settings.$positionReference = document.getElementById(posRef);
+
+    const padRef = this.settings.$menu.getAttribute('data-padding-ref');
+    this.settings.$paddingReference = document.getElementById(padRef);
+
+    this.settings.$closeBtn = this.settings.$menu.querySelector(`.${this.settings.menuCloseClass}`);
+    this.settings.$menuContainer = this.settings.$menu.querySelector(`.${this.settings.menuContainerClass}`);
+    this.settings.$menuInner = this.settings.$menu.querySelector(`.${this.settings.menuInnerClass}`);
+
+    this.initNoScrollHelper();
+    this.resizeAndPositionMenu();
+    this.paddingMenu();
+    this.bindEvents();
+  }
+
+  /**
+   * Binds all necessary event listeners
+   */
+  bindEvents() {
+    if (this.settings.$closeBtn) {
+      this.settings.$closeBtn.addEventListener('click', e => this.closeEvent(e));
+      this.settings.$closeBtn.addEventListener('keydown', e => this.keyboardEvent(e));
+    }
+
+    this.$element.addEventListener('click', e => this.toggleEvent(e));
+    this.$element.addEventListener('keydown', e => this.keyboardEvent(e));
+
+    this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
+      .forEach(el => el.addEventListener('keydown', e => this.keyboardEvent(e)));
+
+    document.addEventListener('madj2k-flyoutmenu-close', e => this.closeEvent(e));
+    document.addEventListener('madj2k-flyoutmenu-resize', e => this.resizeAndPositionMenuEvent(e));
+  }
+
+  /**
+   * Handles keyboard navigation events
+   * @param {KeyboardEvent} e - The keyboard event
+   */
+  keyboardEvent(e) {
+    const element = e.target;
+
+    switch (e.key) {
+      case 'ArrowUp':
+        if (element === this.$element) this.close();
+        break;
+      case 'Enter':
+        if (element === this.$element) {
+          e.preventDefault();
+          this.toggle();
+        }
+        break;
+      case 'ArrowDown':
+        if (element === this.$element) {
+          e.preventDefault();
+          this.open();
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        this.close();
+        this.focusToggle();
+        break;
+    }
+  }
+
+  /**
+   * Handles toggle click event
+   * @param {Event} e - The click event
+   */
+  toggleEvent(e) {
+    e.preventDefault();
+    this.toggle();
+  }
+
+  /**
+   * Toggles the menu open/closed state
+   */
+  toggle() {
+    const others = document.querySelectorAll(`.${this.settings.menuToggleClass}`);
+    others.forEach(btn => {
+      if (btn !== this.$element) btn.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    });
+
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * Opens the flyout menu
+   */
+  open() {
+    const {$menu, $element, animationOpenStatusClass, openStatusClass} = this.settings;
+    if (!$menu.classList.contains(openStatusClass) && !$menu.classList.contains(animationOpenStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-slidemenu-close'));
+      document.dispatchEvent(new CustomEvent('madj2k-pulldownmenu-close'));
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-opening'));
+
+      this.toggleNoScroll();
+      this.resizeAndPositionMenu();
+      this.paddingMenu();
+
+      $menu.classList.add(openStatusClass, animationOpenStatusClass);
+      $element.classList.add(openStatusClass, animationOpenStatusClass);
+      $element.setAttribute('aria-expanded', true);
+      document.body.classList.add(`${this.settings.animationBodyClassPrefix}-${animationOpenStatusClass}`);
+
+      this.settings.$menuContainer.style.transition = `top ${this.settings.animationDuration}ms`;
+      this.settings.$menuContainer.style.top = '0';
+
+      setTimeout(() => {
+        $menu.classList.remove(animationOpenStatusClass);
+        $element.classList.remove(animationOpenStatusClass);
+        document.body.classList.remove(`${this.settings.animationBodyClassPrefix}-${animationOpenStatusClass}`);
+        document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-opened'));
+      }, this.settings.animationDuration);
+    }
+  }
+
+  /**
+   * Handles close event
+   * @param {Event} e - The close event
+   */
+  closeEvent(e) {
+    e.preventDefault();
+    if (document.activeElement.tagName !== 'INPUT') {
+      this.close();
+      if (e.target === this.settings.$closeBtn) {
+        this.focusToggle();
+      }
+    }
+  }
+
+  /**
+   * Closes the flyout menu
+   */
+  close() {
+    const {$menu, $element, animationCloseStatusClass, openStatusClass} = this.settings;
+    if ($menu.classList.contains(openStatusClass) && !$menu.classList.contains(animationCloseStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-closing'));
+
+      $menu.classList.add(animationCloseStatusClass);
+      $element.classList.add(animationCloseStatusClass);
+      document.body.classList.add(`${this.settings.animationBodyClassPrefix}-${animationCloseStatusClass}`);
+      $element.classList.remove(openStatusClass);
+      $element.setAttribute('aria-expanded', false);
+
+      this.toggleNoScroll();
+
+      this.settings.$menuContainer.style.transition = `top ${this.settings.animationDuration}ms`;
+      this.settings.$menuContainer.style.top = '-100%';
+
+      setTimeout(() => {
+        $menu.classList.remove(openStatusClass, animationCloseStatusClass);
+        $element.classList.remove(animationCloseStatusClass);
+        document.body.classList.remove(`${this.settings.animationBodyClassPrefix}-${animationCloseStatusClass}`);
+        document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-closed'));
+      }, this.settings.animationDuration);
+    }
+  }
+
+  /**
+   * Handles menu resize event
+   * @param {Event} e - The resize event
+   */
+  resizeAndPositionMenuEvent(e) {
+    if (document.activeElement.tagName !== 'INPUT') {
+      this.resizeAndPositionMenu();
+    }
+  }
+
+  /**
+   * Resizes and positions the menu based on reference elements
+   */
+  resizeAndPositionMenu() {
+    const refObj = this.settings.$positionReference || this.$element;
+    const refPos = refObj.getBoundingClientRect();
+    const flyoutTop = refPos.top + refObj.offsetHeight;
+    let height = this.settings.$menuInner.offsetHeight || this.settings.$menu.offsetHeight;
+
+    this.settings.$menu.style.top = `${flyoutTop}px`;
+
+    // deprecated fullHeight-setting as fallback
+    if (this.settings.heightMode === 'full' || this.settings.fullHeight === true) {
+      height = window.innerHeight - refPos.top - refObj.offsetHeight;
+      this.settings.$menu.style.height = `${height}px`;
+
+    } else if (this.settings.heightMode === 'maxContent'){
+      this.settings.$menu.style.height = `max-content`;
+
+    } else {
+      this.settings.$menu.style.height = `${height}px`;
+    }
+  }
+
+  /**
+   * Adjusts menu padding based on settings
+   */
+  paddingMenu() {
+    if (!this.settings.$paddingReference) return;
+    if (this.settings.paddingBehavior === 0) return;
+    if (this.settings.paddingBehavior === 1 && this.settings.$menuInner.hasAttribute('data-padding-set')) return;
+
+    let left = this.settings.$paddingReference.getBoundingClientRect().left;
+    if (window.innerWidth < this.settings.paddingViewPortMinWidth) left = 0;
+
+    this.settings.$menuInner.style.paddingLeft = `${left}px`;
+    this.settings.$menuInner.setAttribute('data-padding-set', 'true');
+  }
+
+  /**
+   * Toggles scroll behavior of the page
+   */
+  toggleNoScroll() {
+    const body = document.body;
+    const helper = body.querySelector('.no-scroll-helper');
+    const inner = body.querySelector('.no-scroll-helper-inner');
+    let noScrollClass = this.settings.openStatusBodyClass;
+
+    if (document.documentElement.scrollHeight > window.innerHeight) {
+      noScrollClass += ' ' + this.settings.openStatusBodyClassOverflow;
+    }
+
+    if (!body.classList.contains(this.settings.openStatusBodyClass)) {
+      const scrollTop = -document.documentElement.scrollTop;
+      helper.setAttribute('data-scroll-top', scrollTop);
+      helper.style.cssText = 'position:relative;overflow:hidden;height:100vh;width:100%';
+      inner.style.cssText = `position:absolute;top:${scrollTop}px;height:100%;width:100%`;
+      body.classList.add(...noScrollClass.split(' '));
+      window.scrollTo({top: 0, behavior: 'instant'});
+    } else {
+      const scrollTop = parseInt(helper.getAttribute('data-scroll-top') || '0') * -1;
+      helper.removeAttribute('style');
+      inner.removeAttribute('style');
+      body.classList.remove(this.settings.openStatusBodyClass, this.settings.openStatusBodyClassOverflow);
+      window.scrollTo({top: scrollTop, behavior: 'instant'});
+    }
+  }
+
+  /**
+   * Initializes the no-scroll helper elements
+   */
+  initNoScrollHelper() {
+    const body = document.body;
+    let helper = body.querySelector('.no-scroll-helper');
+    const content = document.querySelector(`.${this.settings.contentSectionClass}`);
+
+    if (!helper) {
+      if (content) {
+        content.innerHTML = `<div class="no-scroll-helper"><div class="no-scroll-helper-inner">${content.innerHTML}</div></div>`;
+      } else {
+        body.innerHTML = `<div class="no-scroll-helper"><div class="no-scroll-helper-inner">${body.innerHTML}</div></div>`;
+      }
+    }
+  }
+
+  /**
+   * Sets focus to the toggle element
+   * @param {number} timeout - Delay before focusing
+   */
+  focusToggle(timeout = 0) {
+    setTimeout(() => this.$element.focus(), timeout);
+  }
+}

package/menus/flyout-menu/flyout-menu-2.0.0.scss

@@ -0,0 +1,47 @@
+.flyout {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    width: 100%;
+    z-index: -1;
+    overflow:hidden;
+    visibility: hidden;
+
+    &.open {
+        z-index: 890;
+        visibility: visible;
+
+        .flyout-container {
+            pointer-events: auto;
+        }
+    }
+
+    &.opening {
+        .flyout-container {
+            pointer-events: none;
+        }
+    }
+
+    &.closing {
+        .flyout-container {
+            pointer-events: none;
+        }
+    }
+
+    a, button {
+        span {
+            pointer-events: none;
+        }
+    }
+
+    &-container {
+        position: relative;
+        top: -100%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        overflow: hidden;
+    }
+}

package/menus/flyout-menu/index.js

@@ -0,0 +1,2 @@
+import Madj2kFlyoutMenu from './flyout-menu-2.0.0.js';
+export { Madj2kFlyoutMenu  };

package/menus/flyout-menu/index.scss

@@ -0,0 +1 @@
+@forward './flyout-menu-2.0.0';

package/menus/pulldown-menu/index.js

@@ -0,0 +1,2 @@
+import Madj2kPulldownMenu from './pulldown-menu-2.0.0.js';
+export { Madj2kPulldownMenu  };

package/menus/pulldown-menu/index.scss

@@ -0,0 +1 @@
+@forward './pulldown-menu-2.0.0';

package/menus/pulldown-menu/pulldown-menu-2.0.0.js

@@ -0,0 +1,196 @@
+/**!
+ * Madj2kFlyoutMenu
+ *
+ * A JavaScript class that implements a flyout menu system with smooth animations,
+ * keyboard navigation, and scroll management. It provides a responsive menu that
+ * slides in from the top of the viewport.
+ *
+ * @author Steffen Kroggel <developer@steffenkroggel.de>
+ * @copyright 2025 Steffen Kroggel
+ * @version 2.0.0
+ * @license GNU General Public License v3.0
+ * @see https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * @example
+ * // HTML structure
+ * <button class="js-flyout-toggle" aria-controls="flyout-menu">Menu</button>
+ * <div id="flyout-menu" class="js-flyout" data-position-ref="main-content" data-padding-ref="content">
+ *   <div class="js-flyout-container">
+ *     <div class="js-flyout-inner">Menu content</div>
+ *     <button class="js-flyout-close">Close</button>
+ *   </div>
+ * </div>
+ *
+ * // JavaScript initialization
+ * const menuTrigger = document.querySelector('.js-flyout-toggle');
+ * const flyoutMenu = new Madj2kFlyoutMenu(menuTrigger, {
+ *   animationDuration: 300,
+ *   fullHeight: true
+ * });
+ */
+class Madj2kPulldownMenu {
+
+  static defaultConfig = {
+    openStatusClass: 'open',
+    menuClass: 'js-pulldown',
+    menuToggleClass: 'js-pulldown-toggle',
+    menuWrapClass: 'js-pulldown-wrap',
+    animationDuration: 500,
+  };
+
+  /**
+   * Initializes a new pulldown menu instance
+   * @param {HTMLElement} toggleElement - The button/element that toggles the menu
+   * @param {Object} options - Optional configuration settings
+   */
+  constructor(toggleElement, options = {}) {
+    this.settings = { ...Madj2kPulldownMenu.defaultConfig, ...options };
+    this.toggleElement = toggleElement;
+
+    const controlsId = toggleElement.getAttribute('aria-controls');
+    this.menu = document.getElementById(controlsId);
+    this.menuWrap = toggleElement.closest(`.${this.settings.menuWrapClass}`);
+
+    this.init();
+  }
+
+  /**
+   * Initializes event listeners for the menu
+   */
+  init() {
+    this.toggleElement.addEventListener('click', (e) => this.toggleEvent(e));
+    this.toggleElement.addEventListener('keydown', (e) => this.keyboardEvent(e));
+
+    const focusable = this.menu.querySelectorAll('a,button,input,textarea,select');
+    focusable.forEach((el) =>
+      el.addEventListener('keydown', (e) => this.keyboardEvent(e))
+    );
+
+    window.addEventListener('resize', (e) => this.closeEvent(e));
+    document.addEventListener('click', (e) => this.closeViaDocumentClickEvent(e));
+    document.addEventListener('madj2k-pulldownmenu-close', (e) => this.closeEvent(e));
+  }
+
+  /**
+   * Handles click events on the toggle element
+   * @param {Event} e - The click event object
+   */
+  toggleEvent(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.toggle();
+  }
+
+  /**
+   * Toggles the menu open/closed state
+   */
+  toggle() {
+    const isOpen = this.toggleElement.classList.contains(this.settings.openStatusClass);
+
+    // Close other menus
+    document.querySelectorAll(`.${this.settings.menuToggleClass}`).forEach((el) => {
+      if (el !== this.toggleElement) {
+        el.dispatchEvent(new Event('madj2k-pulldownmenu-close'));
+      }
+    });
+
+    isOpen ? this.close() : this.open();
+  }
+
+  /**
+   * Opens the pulldown menu
+   */
+  open() {
+    if (!this.menu.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new Event('madj2k-slidemenu-close'));
+      document.dispatchEvent(new Event('madj2k-flyoutmenu-close'));
+
+      this.menu.classList.add(this.settings.openStatusClass);
+      this.menuWrap?.classList.add(this.settings.openStatusClass);
+      this.toggleElement.classList.add(this.settings.openStatusClass);
+      this.toggleElement.setAttribute('aria-expanded', 'true');
+
+      document.dispatchEvent(new Event('madj2k-pulldownmenu-opened'));
+    }
+  }
+
+  /**
+   * Closes the pulldown menu
+   */
+  close() {
+    if (this.menu.classList.contains(this.settings.openStatusClass)) {
+      this.menu.classList.remove(this.settings.openStatusClass);
+      this.menuWrap?.classList.remove(this.settings.openStatusClass);
+      this.toggleElement.classList.remove(this.settings.openStatusClass);
+      this.toggleElement.setAttribute('aria-expanded', 'false');
+
+      document.dispatchEvent(new Event('madj2k-pulldownmenu-closed'));
+    }
+  }
+
+  /**
+   * Handles closing the menu when clicking outside
+   * @param {Event} e - The click event object
+   */
+  closeViaDocumentClickEvent(e) {
+    if (!this.menu.contains(e.target) && !this.toggleElement.contains(e.target)) {
+      if (document.activeElement.tagName !== 'INPUT') {
+        this.close();
+      }
+    }
+  }
+
+  /**
+   * Handles generic close events
+   * @param {Event} e - The event object
+   */
+  closeEvent(e) {
+    if (document.activeElement.tagName !== 'INPUT') {
+      e.preventDefault();
+      this.close();
+    }
+  }
+
+  /**
+   * Handles keyboard navigation events
+   * @param {KeyboardEvent} e - The keyboard event object
+   */
+  keyboardEvent(e) {
+    const key = e.key;
+    const target = e.target;
+
+    switch (key) {
+      case 'ArrowUp':
+        if (target === this.toggleElement) this.close();
+        break;
+
+      case 'Enter':
+        if (target === this.toggleElement) {
+          e.preventDefault();
+          this.toggle();
+        }
+        break;
+
+      case 'ArrowDown':
+        if (target === this.toggleElement) {
+          e.preventDefault();
+          this.open();
+        }
+        break;
+
+      case 'Escape':
+        e.preventDefault();
+        this.close();
+        this.focusToggle();
+        break;
+    }
+  }
+
+  /**
+   * Sets focus to the toggle element
+   * @param {number} timeout - Optional delay in milliseconds
+   */
+  focusToggle(timeout = 0) {
+    setTimeout(() => this.toggleElement.focus(), timeout);
+  }
+}

package/menus/pulldown-menu/pulldown-menu-2.0.0.scss

@@ -0,0 +1,33 @@
+.pulldown {
+    position: absolute;
+    top:0;
+    background-color:#fff;
+    display:none;
+
+    a, button {
+        span {
+            pointer-events: none;
+        }
+    }
+
+    /** used to simulate the right padding-top for the pulldown **/
+    &-hide {
+        visibility:hidden;
+    }
+
+    &.open {
+        z-index:900;
+        display: block;
+    }
+
+    &-wrap {
+        position:relative;
+
+        &.open {
+            .pulldown-toggle {
+                z-index: 901;
+                position: relative;
+            }
+        }
+    }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@madj2k/fe-frontend-kit",
+  "version": "2.0.0",
+  "description": "Shared frontend utilities, menus and mixins for projects",
+	"main": "index.js",
+	"style": "index.scss",
+	"files": [
+		"tools/",
+		"menus/",
+		"sass/",
+		"index.js",
+		"index.scss"
+	],
+  "author": {
+    "name": "Steffen Kroggel",
+    "email": "developer@steffenkroggel.de",
+    "url": "https://www.steffenkroggel.de"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skroggel/fe-frontend-kit.git"
+  },
+	"optionalDependencies": {
+		"bootstrap": "^5.3.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+  "keywords": ["scss", "mixins", "frontend", "menu", "pulldown menu", "offcanvas menu", "slide menu", "utilities"]
+}