@madj2k/fe-frontend-kit 2.0.21 → 2.0.23

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

@@ -371,15 +371,17 @@ class Madj2kFlyoutMenu {
    * 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;
+    // 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;
 
     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');
+    // this.settings.$menuInner.setAttribute('data-padding-set', 'true');
   }
 
   /**

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

@@ -18,6 +18,7 @@
     }
 
     &.opening {
+        z-index: 891;
         .flyout-container {
             pointer-events: none;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "description": "Shared frontend utilities, menus and mixins for projects",
 	"main": "index.js",
 	"style": "index.scss",

package/readme.md

@@ -1,9 +1,9 @@
-#  @madj2k/frontend-kit
+#  @madj2k/fe-frontend-kit
 Reusable frontend toolkit including SCSS mixins and menu components (JS/SCSS).
 
 # #  Installation
 ```
-npm install @madj2k/frontend-kit
+npm install @madj2k/fe-frontend-kit
 ```
 Requirements:
 For SCSS mixins: Bootstrap SCSS (your project needs to install bootstrap and include it in the build)
@@ -17,11 +17,11 @@ For menu components: none
 ##  Usage in your project
 ###  SCSS Mixins
 ```
-@use '@madj2k/frontend-kit' as *;
+@use '@madj2k/fe-frontend-kit' as *;
 ```
 Or import individual mixins:
 ```
-@use '@madj2k/frontend-kit/sass/00_mixins/colors' as *;
+@use '@madj2k/fe-frontend-kit/sass/00_mixins/colors' as *;
 ```
 ###  Menu components (JS and SCSS):
 Each menu component can be used separately.
@@ -32,7 +32,7 @@ with opening and closing animation and optional cookie persistence.
 
 Init:
 ```
-import { Madj2kBanner } from '@madj2k/frontend-kit/tools/banner';
+import { Madj2kBanner } from '@madj2k/fe-frontend-kit/tools/banner';
 const banner = new Madj2kBanner({
   bannerId: 'my-banner',
   activeClass: 'active',
@@ -138,7 +138,7 @@ resize-events during user scrolling on mobile, and respects active input fields
 
 Init with available options:
 ```
-import { Madj2kBetterResizeEvent } from '@madj2k/frontend-kit/tools/better-resize-event';
+import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
 const betterResizeEvent = new Madj2kBetterResizeEvent({
     resizeEndTimeout: 300,
     scrollingEndTimeout: 600,
@@ -165,7 +165,7 @@ where elements can be added, removed or re-ordered dynamically.
 
 Init with available options:
 ```
-import { Madj2kScrolling } from '@madj2k/frontend-kit/tools/scrolling';
+import { Madj2kScrolling } from '@madj2k/fe-frontend-kit/tools/scrolling';
 const scrolling = new Madj2kScrolling({
     anchorScrolling: {
       selector: ['a[href^="#"]', 'a[href*="#"]'],
@@ -200,7 +200,7 @@ and allows overlays to be closed externally via a custom event.
 
 Init with available options:
 ```
-import { Madj2kToggledOverlay } from '@madj2k/frontend-kit/tools/toggled-overlay';
+import { Madj2kToggledOverlay } from '@madj2k/fe-frontend-kit/tools/toggled-overlay';
 const overlayToggle = new Madj2kToggledOverlay('.js-toggled-overlay');
 ```
 
@@ -223,14 +223,22 @@ HTML:
 Integrate the CSS- and JS-file into your project. Make sure jQuery is included.
 Then init the menu with
 ```
-import { Madj2kFlyoutMenu } from '@madj2k/frontend-kit/menus/flyout-menu';
+import { Madj2kFlyoutMenu } from '@madj2k/fe-frontend-kit/menus/flyout-menu';
 document.querySelectorAll('.js-flyout-toggle').forEach((el) => {
   new Madj2kFlyoutMenu(el, { animationDuration: 800 });
 });
 ```
+Optional for automatically closing of the flyout menu resizing the browser window:
+```
+import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
+document.addEventListener('madj2k-better-resize-event', () => {
+    document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+});
+```
+
 CSS:
 ```
-@use '@madj2k/frontend-kit/menus/flyout-menu' as *;
+@use '@madj2k/fe-frontend-kit/menus/flyout-menu' as *;
 ```
 
 ## Basic HTML
@@ -275,7 +283,7 @@ Otherwise in the opened menu the scrolling won't work.
 ```
 Then we deactivate the fullHeight of the flyout menu and make the blurry background clickable
 ```
-import { Madj2kFlyoutdownMenu } from '@madj2k/frontend-kit/menus/flyout-menu';
+import { Madj2kFlyoutdownMenu } from '@madj2k/fe-frontend-kit/menus/flyout-menu';
 document.querySelectorAll('.js-flyout-toggle').forEach((el) => {
   new Madj2kFlyoutMenu(el, { fullHeight: false });
 });
@@ -329,14 +337,22 @@ html,body {
 Integrate the CSS- and JS-file into your project. Make sure jQuery is included.
 Then init the menu with
 ```
-import { Madj2kPulldownMenu } from '@madj2k/frontend-kit/menus/pulldown-menu';
+import { Madj2kPulldownMenu } from '@madj2k/fe-frontend-kit/menus/pulldown-menu';
 document.querySelectorAll('.js-pulldown-toggle').forEach((el) => {
   new Madj2kPulldownMenu(el);
 });
 ```
+Optional for automatically closing of the flyout menu resizing the browser window:
+```
+import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
+document.addEventListener('madj2k-better-resize-event', () => {
+    document.dispatchEvent(new CustomEvent('madj2k-pulldownmenu-close'));
+});
+```
+
 CSS:
 ```
-@use '@madj2k/frontend-kit/menus/pulldown-menu' as *;
+@use '@madj2k/fe-frontend-kit/menus/pulldown-menu' as *;
 ```
 
 ## Basic HTML

package/sass/bootstrap-5.3/10_mixins/_format.scss

@@ -19,11 +19,13 @@
 /// @group Typography
 /// @param {Map} $font-formats - A map of font style definitions. Defaults to the global `$font-formats` map.
 /// @param {String} $font-format - The key name of the format to apply (e.g., 'h1', 'copy-small').
+/// @param {String} $tablet-breakpoint - The breakpoint name for tablet styles (default: lg).
+/// @param {String} $desktop-breakpoint - The breakpoint name for desktop styles (default: xl).
 ///
 /// @author Steffen Kroggel <developer@steffenkroggel>
 /// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
 ///
-@mixin font-format($font-formats, $font-format: 'h1') {
+@mixin font-format($font-formats, $font-format: 'h1', $tablet-breakpoint: lg, $desktop-breakpoint: xl) {
     $format-data: map-get($font-formats, $font-format);
     $mobile-data: map-get($format-data, 'mobile');
     $default-data: map-get($format-data, 'default');
@@ -38,7 +40,7 @@
     }
 
     @if map-has-key($format-data, 'tablet') {
-        @include media-breakpoint-up(lg) {
+        @include media-breakpoint-up($tablet-breakpoint) {
             @each $key in $keys {
                 #{$key}: map-get(map-get($format-data, 'tablet'), $key);
             }
@@ -46,12 +48,23 @@
     }
 
     @if map-has-key($format-data, 'desktop') {
-        @include media-breakpoint-up(xl) {
+        @include media-breakpoint-up($desktop-breakpoint) {
             @each $key in $keys {
                 #{$key}: map-get(map-get($format-data, 'desktop'), $key);
             }
         }
     }
+
+    // dynamic breakpoints (but not mobile, default, tablet, desktop)
+    @each $variant, $values in $format-data {
+        @if not index(('mobile', 'default', 'tablet', 'desktop'), $variant) {
+            @include media-breakpoint-up($variant) {
+                @each $key in $keys {
+                    #{$key}: map-get($values, $key);
+                }
+            }
+        }
+    }
 }
 
 /// Enables word breaking and hyphenation for improved long text handling.

package/sass/bootstrap-5.3/10_mixins/_page.scss

@@ -144,7 +144,7 @@
 
                     /** addition class for usage with position:absolute */
                     #{$wrap-class}-padding {
-                        @include page-padding-only($default-padding);
+                        @include page-padding-only($padding-x);
                     }
                 }