@madj2k/fe-frontend-kit 2.0.31 → 2.0.32

package/index.js

@@ -6,6 +6,7 @@ export { Madj2kResizeEnd } from './tools/resize-end';
 export { Madj2kScrolling } from './tools/scrolling';
 export { Madj2kSimpleFadeSlider } from './tools/simple-fade-slider';
 export { Madj2kToggledOverlay } from './tools/toggled-overlay';
+export { Madj2kElementInViewport } from './tools/element-in-viewport';
 
 // Menus
 export { Madj2kFlyoutMenu } from './menus/flyout-menu';

package/index.scss

@@ -12,3 +12,4 @@
 @forward 'tools/scrolling/index';
 @forward 'tools/simple-fade-slider/index';
 @forward 'tools/toggled-overlay/index';
+@forward 'tools/element-in-viewport/index';

package/package.json

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

package/readme.md

@@ -366,6 +366,52 @@ Usage with Appear-On-Scroll (HTML):
 </div>
 ```
 
+# JS: Element In Viewport
+A lightweight helper class that adds a configurable class to any DOM element once it becomes visible in the viewport.
+Perfect for triggering CSS-based animations (e.g., quote reveals, fade-ins, transitions) when an element enters view.
+* Works with IntersectionObserver API
+* Purely DOM-based (no keyframes required)
+* Fully configurable (threshold, delay, class)
+* Ideal for CMS-driven content (dynamic DOM)
+* Designed for performance and flexibility
+
+Init:
+```
+document.querySelectorAll('.js-inview').forEach((el) => {
+    new Madj2kElementInViewport(el, {
+        visibleClass: 'is-in-viewport',
+        threshold: 0.5,
+        debug: false
+    });
+});
+```
+
+HTML-Example
+```
+<section class="my-element js-inview">
+    <div class="my-element-content">Lorem ipsum dolor sit amet.</div>
+</section>
+```
+
+SCSS-Example
+```
+.my-element {
+    .my-element-content {
+        opacity: 0;
+        transform: translateY(20%);
+        transition: opacity 0.6s ease, transform 0.6s ease;
+    }
+
+    &.is-in-viewport {
+        .my-element-content {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+```
+
+
 # JS: Toggled Overlay
 This class toggles the visibility of any target element referenced by the `aria-controls`
 attribute of a trigger element (button, link, etc.). It manages ARIA attributes for accessibility

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

@@ -43,6 +43,15 @@
 ///     [...]
 ///   </div>
 ///
+/// @example html
+///   <div class="csp-section">
+///     [...]
+///   </div>
+///   <!-- With vertical padding instead of margin -->
+///   <div class="csp-section csp-section-padding">
+///     [...]
+///   </div>
+///
 /// @example scss
 ///   .layout-default {
 ///     @include section-spacing();
@@ -56,6 +65,7 @@
     $block-class: 'csp-block',
     $not-last-class: 'csp-not-last',
     $utility-append-class: 'sp',
+    $padding-append-class: 'padding',
     $csp-blocks: (
         'text',
         'text-image',
@@ -101,9 +111,17 @@
             }
 
             .#{$section-class}.#{$not-last-class}:not(:has(+ .#{$section-class})),
+            .#{$section-class}.#{$section-class}-#{$padding-append-class},
+            .#{$section-class}:has(+ .#{$section-class}-#{$padding-append-class}),
             .#{$section-class}-#{$utility-append-class}.#{$not-last-class}:not(:has(+ .#{$section-class})) {
                 margin-bottom: 0;
             }
+
+            .#{$section-class}-#{$padding-append-class},
+            .#{$section-class}-#{$padding-append-class}-#{$utility-append-class} {
+                padding-top: rem-calc($spacer-section);
+                padding-bottom: rem-calc($spacer-section);
+            }
         }
 
         // block-spacing

package/tools/element-in-viewport/element-in-viewport-2.0.js

@@ -0,0 +1,117 @@
+/**
+ * Madj2kElementInViewport
+ *
+ * Adds a CSS class to any DOM element once it becomes fully (or partially) visible
+ * in the viewport using the IntersectionObserver API.
+ *
+ * - Purely CSS-triggered transitions via class
+ * - Reusable for any type of element (quotes, sections, etc.)
+ * - Fully configurable: class name, threshold, delay
+ * - Designed for CMS contexts with dynamically loaded content
+ *
+ * @author Steffen Kroggel <developer@steffenkroggel.de>
+ * @copyright 2025 Steffen Kroggel
+ * @version 1.0.0
+ * @license GNU General Public License v3.0
+ * @see https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * @example
+ * // Single element with defaults
+ * const el = document.querySelector('.js-animate-in');
+ * new Madj2kElementInViewport(el);
+ *
+ * @example
+ * // Single element with custom config
+ * new Madj2kElementInViewport(el, {
+ *   visibleClass: 'is-visible',
+ *   threshold: 0.75,
+ *   delay: 200,
+ *   debug: true
+ * });
+ *
+ * @example
+ * // Multiple elements
+ * document.querySelectorAll('.js-element-in-viewport').forEach((el) => {
+ *   new Madj2kElementInViewport(el, {
+ *     visibleClass: 'is-in-viewport',
+ *     threshold: 1
+ *   });
+ * });
+ */
+
+class Madj2kElementInViewport {
+  config = {
+    visibleClass: 'is-in-viewport',
+    threshold: 0.5,
+    delay: 0,
+    debug: false
+  };
+
+  /**
+   * @param {HTMLElement} element - DOM element to observe
+   * @param {Object} config - configuration options
+   * @param {string} [config.visibleClass='in-viewport'] - class to apply when element is in view
+   * @param {number} [config.threshold=1.0] - how much of the element must be visible (0–1)
+   * @param {number} [config.delay=0] - optional delay before applying class (in ms)
+   * @param {boolean} [config.debug=false] - enable debug logs
+   */
+  constructor(element, config = {}) {
+    if (!(element instanceof HTMLElement)) {
+      console.warn('[Madj2kElementInViewport] No valid element provided.');
+      return;
+    }
+
+    this.element = element;
+    this.config = { ...this.config, ...config };
+
+    this._log('Initialized with config:', this.config);
+    this._observe();
+  }
+
+  /**
+   * Initializes the IntersectionObserver
+   * @private
+   */
+  _observe() {
+    const observer = new IntersectionObserver(
+      ([entry], observerInstance) => {
+        if (entry.isIntersecting && entry.intersectionRatio >= this.config.threshold) {
+          this._log('Element in viewport:', this.element);
+
+          if (this.config.delay > 0) {
+            setTimeout(() => this._activate(observerInstance), this.config.delay);
+          } else {
+            this._activate(observerInstance);
+          }
+        }
+      },
+      {
+        threshold: this.config.threshold
+      }
+    );
+
+    observer.observe(this.element);
+  }
+
+  /**
+   * Applies the visible class and stops observing
+   * @param {IntersectionObserver} observer
+   * @private
+   */
+  _activate(observer) {
+    this.element.classList.add(this.config.visibleClass);
+    observer.unobserve(this.element);
+    this._log(`Class "${this.config.visibleClass}" added.`);
+  }
+
+  /**
+   * Logs debug messages
+   * @param  {...any} args
+   * @private
+   */
+  _log(...args) {
+    if (this.config.debug) {
+      console.log('[Madj2kElementInViewport]', ...args);
+    }
+  }
+}

package/tools/element-in-viewport/index.js

@@ -0,0 +1,2 @@
+import Madj2kElementInViewport from './element-in-viewport-2.0';
+export { Madj2kElementInViewport };

package/tools/element-in-viewport/index.scss

@@ -0,0 +1 @@
+@forward './element-in-viewport-2.0';