@madj2k/fe-frontend-kit 2.0.33 → 2.0.35

package/package.json

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

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

@@ -8,10 +8,11 @@
  * - Reusable for any type of element (quotes, sections, etc.)
  * - Fully configurable: class name, threshold, delay
  * - Designed for CMS contexts with dynamically loaded content
+ * - Triggers an event that can be used for custom animations
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 1.0.0
+ * @version 1.0.2
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -34,11 +35,17 @@
  * document.querySelectorAll('.js-element-in-viewport').forEach((el) => {
  *   new Madj2kElementInViewport(el, {
  *     visibleClass: 'is-in-viewport',
- *     threshold: 1
+ *     threshold: 0.5
  *   });
  * });
- */
-
+ *
+ *  @example
+ *  // Event listener
+ *  document.addEventListener('madj2k-element-in-viewport-active', () => {
+ *    // do something
+ *  });
+ *
+ * */
 class Madj2kElementInViewport {
   config = {
     visibleClass: 'is-in-viewport',
@@ -64,6 +71,17 @@ class Madj2kElementInViewport {
     this.element = element;
     this.config = { ...this.config, ...config };
 
+    const viewportHeight = window.innerHeight;
+    const elementHeight = element.offsetHeight;
+
+    if (elementHeight > viewportHeight) {
+      const adjustedThreshold = (viewportHeight * this.config.threshold) / elementHeight;
+      this._log(
+        `Element taller than viewport. Original threshold ${this.config.threshold} adjusted to ${adjustedThreshold.toFixed(3)}`
+      );
+      this.config.threshold = Math.min(adjustedThreshold, 1);
+    }
+
     this._log('Initialized with config:', this.config);
     this._observe();
   }
@@ -102,6 +120,13 @@ class Madj2kElementInViewport {
     this.element.classList.add(this.config.visibleClass);
     observer.unobserve(this.element);
     this._log(`Class "${this.config.visibleClass}" added.`);
+
+    // Custom event dispatch
+    const event = new CustomEvent('madj2k-element-in-viewport-active');
+    this.element.dispatchEvent(event);
+
+    this._log(`Event fired.`);
+
   }
 
   /**