@madj2k/fe-frontend-kit 2.0.37 → 2.0.39

package/index.js

@@ -11,3 +11,4 @@ export { Madj2kElementInViewport } from './tools/element-in-viewport';
 // Menus
 export { Madj2kFlyoutMenu } from './menus/flyout-menu';
 export { Madj2kPulldownMenu } from './menus/pulldown-menu';
+export { Madj2kSlideMenu } from './menus/slide-menu';

package/index.scss

@@ -4,6 +4,7 @@
 // Forward all menu styles
 @forward './menus/flyout-menu';
 @forward './menus/pulldown-menu';
+@forward './menus/slide-menu';
 
 // Forward all tools
 @forward 'tools/banner/index';

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

@@ -7,7 +7,7 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 2.0.2
+ * @version 2.0.4
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -49,11 +49,13 @@ class Madj2kFlyoutMenu {
       menuCloseClass: "js-flyout-close",
       menuContainerClass: "js-flyout-container",
       menuInnerClass: "js-flyout-inner",
+      hoverParentClass: 'nav-main',
       heightCalculationClass: 'calculate',
       heightMode: 'full',
+      heightModeClassPrefix: 'height-mode',
+      scrollMode: 'default',
+      scrollModeClassPrefix: 'scroll-mode',
       eventMode: 'click',
-      eventModeOpen: '',
-      eventModeClose: '',
       paddingBehavior: 0,
       paddingViewPortMinWidth: 0,
       animationDuration: 500,
@@ -77,6 +79,11 @@ class Madj2kFlyoutMenu {
     this.settings.$menuContainer = this.settings.$menu.querySelector(`.${this.settings.menuContainerClass}`);
     this.settings.$menuInner = this.settings.$menu.querySelector(`.${this.settings.menuInnerClass}`);
 
+    // add mode classes
+    this.settings.$menu.classList.add(this.settings.heightModeClassPrefix + '-' + this.settings.heightMode);
+    this.settings.$menuInner.classList.add(this.settings.scrollModeClassPrefix + '-' + this.settings.scrollMode);
+
+    // Bind persistent event handlers
     this.initNoScrollHelper();
     this.resizeAndPositionMenu();
     this.paddingMenu();
@@ -115,40 +122,102 @@ class Madj2kFlyoutMenu {
     }
   }
 
+
+  /**
+   * Handles mouseleave on menu container
+   * @param {MouseEvent} e
+   */
+  containerLeaveEvent(e) {
+    const to = e.relatedTarget;
+    const parentContainer = this.$element.closest(this.settings.hoverParentSelector) || null;
+    if (to && this.$element.contains(to)) return;
+    if (to && parentContainer?.contains(to)) return;
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    }
+  }
+
+  /**
+   * Handles mouseleave on trigger element
+   * @param {MouseEvent} e
+   */
+  triggerLeaveEvent(e) {
+    const to = e.relatedTarget;
+    const parentContainer = this.$element.closest('.' + this.settings.hoverParentClass) || null;
+
+    if (to && this.settings.$menu.contains(to)) return;
+    if (to && parentContainer?.contains(to)) return;
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    }
+  }
+
+  /**
+   * Handles touchstart outside the flyout menu
+   * @param {TouchEvent} e
+   */
+  touchStartEvent(e) {
+    const target = e.target;
+    if (!target) return;
+    if (this.settings.$menuInner.contains(target)) return;
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    }
+  }
+
   /**
    * Binds all necessary event listeners
    */
   bindEvents() {
     if (this.settings.$closeBtn) {
-
-      if (this.settings.eventModeClose) {
-        this.settings.$closeBtn.addEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
-      } else {
-        this.settings.$closeBtn.addEventListener(this.settings.eventMode, e => this.closeEvent(e));
-      }
+      const closeEvent = this.settings.eventMode === 'mouseover' ? 'mouseenter' : 'click';
+      this.settings.$closeBtn.addEventListener(closeEvent, e => this.closeEvent(e));
       this.settings.$closeBtn.addEventListener('keydown', e => this.keyboardEvent(e));
     }
 
-    if (this.settings.eventModeOpen || this.settings.eventModeClose) {
-      if (this.settings.eventModeOpen) {
-        this.$element.addEventListener(this.settings.eventModeOpen, e => this.openEvent(e));
-      }
-      if (this.settings.eventModeClose) {
-        this.$element.addEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
-      }
+    if (this.settings.eventMode === 'mouseover') {
+      this.$element.addEventListener('mouseenter', e => this.openEvent(e));
+      this.$element.addEventListener('mouseleave',e =>  this.triggerLeaveEvent(e));
+      this.settings.$menuContainer?.addEventListener('mouseleave', e => this.containerLeaveEvent(e));
+      document.addEventListener('touchstart', e => this.touchStartEvent(e), { passive: true });
     } else {
-      this.$element.addEventListener(this.settings.eventMode, e => this.toggleEvent(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));
   }
 
+
+  /**
+   * Removes all event listeners (including dynamic hover/touch)
+   */
+  destroyEvents() {
+    if (this.settings.$closeBtn) {
+      const closeEvent = this.settings.eventMode === 'mouseover' ? 'mouseenter' : 'click';
+      this.settings.$closeBtn.removeEventListener(closeEvent, e => this.closeEvent(e));
+      this.settings.$closeBtn.removeEventListener('keydown', e => this.keyboardEvent(e));
+    }
+
+    if (this.settings.eventMode === 'mouseover') {
+      this.$element.removeEventListener('mouseenter', e => this.openEvent(e));
+      this.settings.$menuContainer?.removeEventListener('mouseleave', e => this.containerLeaveEvent(e));
+      document.removeEventListener('touchstart', e => this.touchStartEvent(e), { passive: true });
+    } else {
+      this.$element.removeEventListener('click', e => this.toggleEvent(e));
+    }
+
+    this.$element.removeEventListener('keydown', e => this.keyboardEvent(e));
+    this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
+      .forEach(el => el.removeEventListener('keydown', e => this.keyboardEvent(e)));
+    document.removeEventListener('madj2k-flyoutmenu-close', e => this.closeEvent(e));
+    document.removeEventListener('madj2k-flyoutmenu-resize', e => this.resizeAndPositionMenuEvent(e));
+  }
+
+
   /**
    * Initializes ResizeObserver to auto-resize menu
    */
@@ -172,37 +241,6 @@ class Madj2kFlyoutMenu {
     }
   }
 
-  /**
-   * Unbinds all event listeners
-   */
-  destroyEvents() {
-    if (this.settings.$closeBtn) {
-      if (this.settings.eventModeClose) {
-        this.settings.$closeBtn.removeEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
-      } else {
-        this.settings.$closeBtn.removeEventListener(this.settings.eventMode, e => this.closeEvent(e));
-      }
-      this.settings.$closeBtn.removeEventListener('keydown', e => this.keyboardEvent(e));
-    }
-
-    if (this.settings.eventModeOpen || this.settings.eventModeClose) {
-      if (this.settings.eventModeOpen) {
-        this.$element.removeEventListener(this.settings.eventModeOpen, e => this.openEvent(e));
-      }
-      if (this.settings.eventModeClose) {
-        this.$element.removeEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
-      }
-    } else {
-      this.$element.removeEventListener(this.settings.eventMode, e => this.toggleEvent(e));
-    }
-    this.$element.removeEventListener('keydown', e => this.keyboardEvent(e));
-
-    this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
-      .forEach(el => el.removeEventListener('keydown', e => this.keyboardEvent(e)));
-
-    document.removeEventListener('madj2k-flyoutmenu-close', e => this.closeEvent(e));
-    document.removeEventListener('madj2k-flyoutmenu-resize', e => this.resizeAndPositionMenuEvent(e));
-  }
 
   /**
    * Destroys ResizeObserver
@@ -412,6 +450,10 @@ class Madj2kFlyoutMenu {
       newHeight = `${innerHeight}px`;
     }
 
+    if (this.settings.scrollMode === 'inner') {
+      this.settings.$menuInner.style.height = newHeight;
+    }
+
     // set max-height again so that longer flyouts do not lead to scrolling on smaller ones
     this.settings.$menu.classList.remove(this.settings.heightCalculationClass);
     this.settings.$menu.style.height = newHeight;
@@ -436,6 +478,7 @@ class Madj2kFlyoutMenu {
 
     if (!this.settings.$paddingReference) return;
     if (this.settings.paddingBehavior === 0) return;
+
     // should be re-evaluated on a resize event after re-opening the menu
     // if (this.settings.paddingBehavior === 1 && this.settings.$menuInner.hasAttribute('data-padding-set')) return;
 
@@ -472,8 +515,7 @@ class Madj2kFlyoutMenu {
    */
   toggleNoScroll() {
 
-    // heightMode "full" with deprecated fullHeight-setting as fallback
-    if (this.settings.heightMode === 'full' || this.settings.fullHeight === true) {
+    if (this.settings.scrollHelper) {
       const body = document.body;
       const helper = body.querySelector('.no-scroll-helper');
       const inner = body.querySelector('.no-scroll-helper-inner');

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

@@ -55,4 +55,10 @@ html, body {
         background-color: #fff;
         overflow: hidden;
     }
+
+    &-inner.scroll-mode-inner {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 }
+

package/menus/slide-menu/Examples/TYPO3/JsonMenuViewHelper.php

@@ -0,0 +1,146 @@
+<?php
+
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
+use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+/**
+ * Class JsonMenuViewHelper
+ *
+ * @author Steffen Kroggel <developer@steffenkroggel.de>
+ * @copyright Steffen Kroggel <developer@steffenkroggel.de>
+ * @package Madj2k_SiteDefault
+ * @license http://www.gnu.org/licenses/gpl.html GNU General Public License, version 3 or later
+ */
+class JsonMenuViewHelper extends AbstractViewHelper
+{
+
+    /**
+     * Initialize arguments
+     *
+     * @return void
+     */
+    public function initializeArguments(): void
+    {
+        parent::initializeArguments();
+        $this->registerArgument('items', 'array', 'The recursive menu-array');
+        $this->registerArgument('parseFuncTSPath', 'string', 'Path to the TypoScript parseFunc setup.',  false, '');
+    }
+
+
+    /**
+     * @param array $arguments
+     * @param \Closure $renderChildrenClosure
+     * @param \TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface $renderingContext
+     * @return string
+     */
+    public static function renderStatic(
+        array $arguments,
+        \Closure $renderChildrenClosure,
+        RenderingContextInterface $renderingContext
+    ):  string {
+
+        /** @var array $items  */
+        $items = $arguments['items'];
+
+        /** @var string $parseFuncTSPath */
+        $parseFuncTSPath = $arguments['parseFuncTSPath'];
+
+        /** @var \Psr\Http\Message\ServerRequestInterface $request */
+        $request = $renderingContext->getRequest();
+
+        /** @var \TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer $contentObject */
+        $contentObject = GeneralUtility::makeInstance(ContentObjectRenderer::class);
+        $contentObject->setRequest($request);
+        $contentObject->start([]);
+
+        $result = [];
+        foreach ($items as $item) {
+            $result[] = self::callback($item, $contentObject, $parseFuncTSPath);
+        }
+
+        return json_encode($result);
+    }
+
+
+    /**
+     * @param array $item
+     * @param \TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer $contentObject
+     * @param string $parseFuncTSPath
+     * @return array
+     */
+    public static function callback (
+        array $item,
+        ContentObjectRenderer $contentObject,
+        string $parseFuncTSPath = ''
+    ): array {
+
+        /*
+            Build a reduced structure:
+                "data": {"uid": 2, "pid": 1, "title": "Lorem Ipsum"},
+                "title": "Lorem Ipsum",
+                "link": "\/lorem\/Ipsum",
+                "target": "_blank",
+                "active": 1,
+                "current": 0,
+                "spacer": 0,
+                "hasSubpages": 1,
+                "children": [ ]
+         */
+
+        $result = $item;
+        $result['data'] = [
+            'uid' => $item['data']['uid'],
+            'pid' => $item['data']['pid'],
+            'title'=> $item['data']['title'],
+        ];
+
+        $result['children'] = [];
+        if (
+            (isset($item['children']))
+            && (is_array($item['children']))
+        ){
+            foreach ($item['children'] as $child) {
+                $result['children'][] = self::callback($child, $contentObject, $parseFuncTSPath);
+            }
+        }
+
+        if (!isset($result['hasSubpages'])) {
+            $result['hasSubpages'] = $result['children'] ? 1 : 0;
+        }
+
+        if (isset($item['data']['doktype'])) {
+            $result['linkType'] =  $item['data']['doktype'];
+        }
+
+        // Parse title with HTML-parser
+        if ($parseFuncTSPath) {
+            $result['title'] = $contentObject->parseFunc($result['title'], null, '< ' . $parseFuncTSPath);
+        }
+
+        // do not link sites, that only link to the next subpage!
+        $result['isLinked'] = 1;
+        if (
+            ($item['data']['doktype'] == 4)
+            && (in_array($item['data']['shortcut_mode'], [1,3]))
+        ){
+            $result['isLinked'] = 0;
+        }
+
+        return $result;
+    }
+}

package/menus/slide-menu/Examples/TYPO3/Templates.html

@@ -0,0 +1,165 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:siteDefault="http://typo3.org/ns/Madj2k/SiteDefault/ViewHelpers"
+      data-namespace-typo3-fluid="true"
+>
+
+    <f:if condition="{menuItems}">
+        <f:then>
+            <f:comment>
+                <!--
+                    Templates for mobile menu. We don't want this to be loaded on default because
+                     it would duplicate the menu for search engines and would enlarge the body to parse
+                -->
+            </f:comment>
+            <template class="js-slide-nav-tmpl" data-type="menuWrap">
+                <div class="slide-nav-container js-slide-nav-container">
+                    <div class="slide-nav-card js-slide-nav-card %levelClass%" id="slide-card-%uid%">
+                        <div class="slide-nav-inner pd-3">
+                            <ul class="slide-nav-list" role="none">
+                                <li class="slide-nav-headline %levelClass%" role="none">
+                                    <a href="/"
+                                       title="{f:translate(key:'menu.home', extensionName:'siteDefault')}"
+                                       role="menuitem"
+                                       class="slide-nav-headline-link level-1">
+                                        <span>{f:translate(key:'menu.home', extensionName:'siteDefault')}</span>
+                                    </a>
+                                </li>
+
+                                <li class="slide-nav-wrap">
+                                    <ul class="slide-nav-list toggle-list" role="none">
+                                        %menuItems%
+                                    </ul>
+                                </li>
+
+                                <f:if condition="{topMenuItems}">
+                                    <li class="slide-nav-item-footer" role="none">
+                                        <ul class="slide-nav-meta-list" role="none">
+                                            <f:for each="{topMenuItems}" as="menuItem" iteration="iterator">
+                                                <li class="slide-nav-meta-item level1{f:if(condition:'{menuItem.active}', then:' active')}" role="none">
+                                                    <a class="slide-nav-meta-link level1{f:if(condition:'{menuItem.active}', then:' active')}"
+                                                       href="{menuItem.link}"
+                                                       target="{menuItem.target}"
+                                                       title="{menuItem.data.title}"
+                                                       role="menuitem"
+                                                    >
+                                                        <span><f:format.html parseFuncTSPath="lib.parseFunc_Inline">{menuItem.title}</f:format.html></span>
+                                                    </a>
+                                                </li>
+                                            </f:for>
+                                        </ul>
+                                    </li>
+                                </f:if>
+
+                                <f:if condition="{footerMenuItems}">
+                                    <li class="slide-nav-item-footer" role="none">
+                                        <ul class="slide-nav-meta-list" role="none">
+                                            <f:for each="{footerMenuItems}" as="menuItem" iteration="iterator">
+                                                <li class="slide-nav-meta-item level1{f:if(condition:'{menuItem.active}', then:' active')}" role="none">
+                                                    <a class="slide-nav-meta-link level1{f:if(condition:'{menuItem.active}', then:' active')}"
+                                                       href="{menuItem.link}"
+                                                       target="{menuItem.target}"
+                                                       title="{menuItem.data.title}"
+                                                       role="menuitem"
+                                                    >
+                                                        <span><f:format.html parseFuncTSPath="lib.parseFunc_Inline">{menuItem.title}</f:format.html></span>
+                                                    </a>
+                                                </li>
+                                            </f:for>
+                                        </ul>
+                                    </li>
+                                </f:if>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <template class="js-slide-nav-tmpl" data-type="menuItem">
+                <li class="slide-nav-item toggle-list-item js-slide-nav-item %activeClass% %hasChildrenClass%" role="none">
+                    <f:comment><!-- normal link that opens the menu-item --></f:comment>
+
+                    %ifHasNoChildrenStart%
+                    <a href="%link%"
+                       title="%titleRaw%"
+                       role="menuitem"
+                       class="slide-nav-link toggle-list-link %activeClass% %hasChildrenClass%"
+                       target="%target%"
+                       aria-current="%ariaCurrent%">
+                        <span class="toggle-list-text">%title%</span>
+                    </a>
+                    %ifHasNoChildrenEnd%
+
+                    <f:comment><!-- link that opens next card --></f:comment>
+                    %ifHasChildrenStart%
+                    <a class="slide-nav-link slide-nav-next toggle-list-link js-slide-nav-next %activeClass% %hasChildrenClass%"
+                       href="#"
+                       role="button"
+                       title="{f:translate(key:'menu.openSubmenu', extensionName:'siteDefault')}"
+                       aria-label="{f:translate(key:'menu.openSubmenu', extensionName:'siteDefault')}"
+                       aria-haspopup="true"
+                       aria-expanded="%ariaExpanded%"
+                       aria-controls="slide-card-%uid%">
+                        <span class="toggle-list-text">%title%</span><span class="icon-arrow-right icon"></span>
+                    </a>
+                    %ifHasChildrenEnd%
+
+                    %submenu%
+                </li>
+            </template>
+
+            <template class="js-slide-nav-tmpl" data-type="subMenuWrap">
+                <div class="slide-nav-card js-slide-nav-card %activeClass% %levelClass%" id="slide-card-%uid%">
+                    <div class="slide-nav-inner pd-3">
+                        <ul class="slide-nav-list">
+                            <li class="slide-nav-item-back" role="none">
+                                <button class="slide-nav-back js-slide-nav-back"
+                                        title="{f:translate(key:'menu.levelUp', extensionName:'siteDefault')}"
+                                        aria-haspopup="true"
+                                        aria-label="{f:translate(key:'menu.levelUp', extensionName:'siteDefault')}"
+                                        aria-controls="slide-card-%uid%"
+                                        data-parent-card="slide-card-%parentUid%"><span class="icon-arrow-left icon"></span><span
+                                    class="slide-nav-back-label">{f:translate(key:'menu.back', extensionName:'siteDefault')}</span>
+                                </button>
+                            </li>
+                            <li class="slide-nav-headline %levelClass%" role="none">
+
+                                <f:comment><!-- normal parent --></f:comment>
+                                %ifIsNotLinkedStart%
+                                <span class="slide-nav-headline-text %currentClass% %isLinkedClass%">%title%</span>
+                                %ifIsNotLinkedEnd%
+
+                                <f:comment><!-- linked parent --></f:comment>
+                                %ifIsLinkedStart%
+                                <a href="%link%"
+                                   title="%titleRaw%"
+                                   role="menuitem"
+                                   class="slide-nav-headline-link %currentClass% %hasChildrenClass% %isLinkedClass%"
+                                   target="%target%"
+                                   aria-current="%ariaCurrent%">
+                                    <span>%title%</span>
+                                </a>
+                                %ifIsLinkedEnd%
+                            </li>
+
+                            <li class="slide-nav-wrap">
+                                <ul class="slide-nav-list toggle-list" role="none">
+                                    %menuItems%
+                                </ul>
+                            </li>
+
+                        </ul>
+                    </div>
+                </div>
+            </template>
+
+            <script>
+                let slideNavItems = <f:format.raw><siteDefault:jsonMenu items="{menuItems}" parseFuncTSPath="lib.parseFunc_Inline" /></f:format.raw>;
+            </script>
+        </f:then>
+        <f:else>
+            <script>
+                let slideNavItems = {};
+            </script>
+        </f:else>
+    </f:if>
+</html>

package/menus/slide-menu/index.js

@@ -0,0 +1,2 @@
+import Madj2kSlideMenu from './slide-menu-2.0.js';
+export { Madj2kSlideMenu  };

package/menus/slide-menu/index.scss

@@ -0,0 +1 @@
+@forward './slide-menu-2.0';