drab 6.5.1 → 7.0.0

package/dist/intersect/index.js

@@ -1,64 +1,57 @@
-import { Base } from "../base/index.js";
+import { Content, Lifecycle, Trigger, } from "../base/index.js";
 /**
- * Uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to add a `data-intersect` attribute to `content` when the `trigger` is intersecting.
+ * Uses the
+ * [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * to add a `data-intersect` attribute to `content` when the `trigger` is intersecting.
  *
- * Use `onIntersect` and `onExit` to customize further with JavaScript.
+ * ### Events
+ *
+ * `intersect`
+ *
+ * Fired when the `trigger` enters the viewport.
+ *
+ * `exit`
+ *
+ * Fired when the `trigger` exits the viewport.
  *
  * ### Attributes
  *
  * `threshold`
  *
- * Specify a `threshold` between `0` and `1` to determine how much of the `trigger` should be visible for the intersection to occur.
+ * Specify a `threshold` between `0` and `1` to determine how much of the
+ * `trigger` should be visible for the intersection to occur.
  */
-export class Intersect extends Base {
-    /** Functions to run when the `trigger` intersects. */
-    #intersectCallbacks = [];
-    /** Functions to run when the `trigger` exits. */
-    #exitCallbacks = [];
+export class Intersect extends Lifecycle(Trigger(Content())) {
     constructor() {
         super();
     }
     /**
-     * How much of the `trigger` should be visible for the intersection to occur. For example, given a threshold of `.5`, the intersection would occur when the `trigger` is 50% visible.
+     * How much of the `trigger` should be visible for the intersection to occur.
+     * For example, given a threshold of `.5`, the intersection would occur when
+     * the `trigger` is 50% visible.
      *
      * @default 0
      */
     get #threshold() {
         return Number(this.getAttribute("threshold") ?? 0);
     }
-    /**
-     * @param callback Runs when `trigger` intersects.
-     */
-    onIntersect(callback) {
-        this.#intersectCallbacks.push(callback);
-    }
-    /**
-     * @param callback Runs when `trigger` exits.
-     */
-    onExit(callback) {
-        this.#exitCallbacks.push(callback);
-    }
     mount() {
         const observer = new IntersectionObserver((entries) => {
-            /** Attribute to add or remove from `content`. */
+            // attribute to add or remove from `content`
             const attr = "data-intersect";
             for (const entry of entries) {
                 if (entry.isIntersecting) {
-                    this.getContent().setAttribute(attr, "");
-                    for (const callback of this.#intersectCallbacks) {
-                        callback();
-                    }
+                    this.content().setAttribute(attr, "");
                 }
                 else {
-                    this.getContent().removeAttribute(attr);
-                    for (const callback of this.#exitCallbacks) {
-                        callback();
-                    }
+                    this.content().removeAttribute(attr);
                 }
+                this.dispatchEvent(new CustomEvent(entry.isIntersecting ? "intersect" : "exit", {
+                    detail: { entry },
+                }));
             }
         }, { threshold: this.#threshold });
-        for (const trigger of this.getTrigger()) {
+        for (const trigger of this.triggers())
             observer.observe(trigger);
-        }
     }
 }