@madj2k/fe-frontend-kit 2.0.38 → 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.3
+ * @version 2.0.4
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -49,9 +49,12 @@ class Madj2kFlyoutMenu {
       menuCloseClass: "js-flyout-close",
       menuContainerClass: "js-flyout-container",
       menuInnerClass: "js-flyout-inner",
-      heightCalculationClass: 'calculate',
       hoverParentClass: 'nav-main',
+      heightCalculationClass: 'calculate',
       heightMode: 'full',
+      heightModeClassPrefix: 'height-mode',
+      scrollMode: 'default',
+      scrollModeClassPrefix: 'scroll-mode',
       eventMode: 'click',
       paddingBehavior: 0,
       paddingViewPortMinWidth: 0,
@@ -76,8 +79,11 @@ class Madj2kFlyoutMenu {
     this.settings.$menuContainer = this.settings.$menu.querySelector(`.${this.settings.menuContainerClass}`);
     this.settings.$menuInner = this.settings.$menu.querySelector(`.${this.settings.menuInnerClass}`);
 
-    // Bind persistent event handlers
+    // 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();
@@ -444,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;
@@ -468,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;
 
@@ -504,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';