Create ModalEntry and DrawerEntry classes

packages/core/src/js/Collection.js

@@ -38,9 +38,7 @@ export class Collection {
   }
 
   async deregister(id) {
-    const index = this.collection.findIndex((entry) => {
-      return (entry.id === id);
-    });
+    const index = this.collection.findIndex((entry) => entry.id === id);
     if (~index) {
       // Get the collection entry object from the collection and unmount it.
       const entry = this.collection[index];
@@ -87,6 +85,8 @@ export class Collection {
     if ("afterMount" in this && typeof this.afterMount == "function") {
       await this.afterMount();
     }
+
+    return this;
   }
 
   async unmount() {
@@ -104,5 +104,7 @@ export class Collection {
     if ("afterUnmount" in this && typeof this.afterUnmount == "function") {
       await this.afterUnmount();
     }
+
+    return this;
   }
 }

packages/drawer/index.js

@@ -1,3 +1,3 @@
-import Drawer from "./src/js";
+import { Drawer } from "./src/js/Drawer";
 
 export default Drawer;

packages/drawer/src/js/index.js → packages/drawer/src/js/Drawer.js

@@ -1,14 +1,13 @@
 import { Collection, FocusTrap, localStore } from "@vrembem/core";
 
 import defaults from "./defaults";
+import { DrawerEntry } from "./DrawerEntry";
 import { handleClick, handleKeydown } from "./handlers";
-import { register } from "./register";
-import { deregister } from "./deregister";
 import { open } from "./open";
 import { close } from "./close";
 import { toggle } from "./toggle";
 
-export default class Drawer extends Collection {
+export class Drawer extends Collection {
   #handleClick;
   #handleKeydown;
 
@@ -28,6 +27,10 @@ export default class Drawer extends Collection {
     });
   }
 
+  async createEntry(context, el, config) {
+    return new DrawerEntry(context, el, config);
+  }
+
   async open(id, transition, focus) {
     return open.call(this, id, transition, focus);
   }
@@ -40,14 +43,6 @@ export default class Drawer extends Collection {
     return toggle.call(this, id, transition, focus);
   }
 
-  async beforeRegister(entry, config) {
-    return register.call(this, entry, config);
-  }
-
-  async beforeDeregister(entry) {
-    return deregister.call(this, entry);
-  }
-
   async afterMount() {
     document.addEventListener("click", this.#handleClick, false);
     document.addEventListener("keydown", this.#handleKeydown, false);

packages/drawer/src/js/DrawerEntry.js

@@ -0,0 +1,134 @@
+import { Entry, Breakpoint } from "@vrembem/core";
+import { switchMode } from "./switchMode";
+import { applyInitialState } from "./helpers";
+import { getBreakpoint } from "./helpers";
+
+export class DrawerEntry extends Entry {
+  #mode;
+  #state;
+  #breakpoint;
+
+  constructor(context, query) {
+    super(context, query);
+    this.dialog = null;
+    this.trigger = null;
+    // Create an instance of the Breakpoint class.
+    this.#breakpoint = new Breakpoint();
+    // Set indeterminate values of mode, state and inlineState.
+    this.#mode, this.#state, this.inlineState = "indeterminate";
+  }
+
+  get breakpoint() {
+    return getBreakpoint.call(this.context, this.el);
+  }
+
+  get store() {
+    return this.context.store.get(this.id);
+  }
+
+  get mode() {
+    return this.#mode;
+  }
+
+  set mode(value) {
+    this.#mode = value;
+    switchMode.call(this.context, this);
+  }
+
+  get state() {
+    return this.#state;
+  }
+
+  set state(value) {
+    this.#state = value;
+
+    // If mode is inline and not in a transitioning state...
+    if (this.mode === "inline" && value != "opening" && value != "closing") {
+      // Save the inline state.
+      this.inlineState = value;
+
+      // Save the store state if enabled.
+      if (this.getSetting("store")) {
+        this.context.store.set(this.id, value);
+      }
+    }
+
+    // If state is indeterminate, remove the state classes.
+    if (value === "indeterminate") {
+      this.el.classList.remove(this.getSetting("stateOpened"));
+      this.el.classList.remove(this.getSetting("stateOpening"));
+      this.el.classList.remove(this.getSetting("stateClosed"));
+      this.el.classList.remove(this.getSetting("stateClosing"));
+    }
+  }
+
+  async beforeMount() {
+    // Set the dialog element. If none is found, use the root element.
+    const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
+    this.dialog = (dialog) ? dialog : this.el;
+
+    // Set tabindex="-1" so dialog is focusable via JS or click.
+    if (this.getSetting("setTabindex")) {
+      this.dialog.setAttribute("tabindex", "-1");
+    }
+
+    // Set both the initial state and inline state.
+    applyInitialState(this);
+
+    // Set the inline state.
+    this.inlineState = this.state;
+
+    // Set the initial mode.
+    this.mode = (this.el.classList.contains(this.getSetting("classModal"))) ? "modal" : "inline";
+
+    if (this.breakpoint) {
+      this.mountBreakpoint();
+    }
+  }
+
+  async beforeUnmount(close = true) {
+    // If entry is in the opened state, close it.
+    if (close && this.state === "opened") {
+      await this.close(false);
+    }
+
+    // Remove entry from local store.
+    this.store.set(this.id);
+
+    // Unmount the MatchMedia functionality.
+    this.unmountBreakpoint();
+  }
+
+  async open(transition, focus) {
+    return this.context.open(this, transition, focus);
+  }
+
+  async close(transition, focus) {
+    return this.context.close(this, transition, focus);
+  }
+
+  async toggle(transition, focus) {
+    return this.context.toggle(this, transition, focus);
+  }
+
+  async deregister() {
+    return this.context.deregister(this.id);
+  }
+
+  mountBreakpoint() {
+    const value = this.breakpoint;
+    const handler = this.handleBreakpoint.bind(this);
+    this.#breakpoint.mount(value, handler);
+  }
+
+  unmountBreakpoint() {
+    this.#breakpoint.unmount();
+  }
+
+  handleBreakpoint(event) {
+    const bpMode = (event.matches) ? "inline" : "modal";
+    if (this.mode != bpMode) {
+      this.mode = bpMode;
+    }
+  }
+}

packages/modal/index.js

@@ -1,3 +1,3 @@
-import Modal from "./src/js";
+import { Modal } from "./src/js/Modal";
 
 export default Modal;

packages/modal/src/js/index.js → packages/modal/src/js/Modal.js

@@ -1,17 +1,16 @@
 import { Collection, FocusTrap } from "@vrembem/core";
 
 import defaults from "./defaults";
+import { ModalEntry } from "./ModalEntry";
 import { handleClick, handleKeydown } from "./handlers";
-import { register } from "./register";
-import { deregister } from "./deregister";
 import { open } from "./open";
 import { close } from "./close";
 import { closeAll } from "./closeAll";
 import { replace } from "./replace";
 import { stack } from "./stack";
 import { updateFocusState } from "./helpers";
 
-export default class Modal extends Collection {
+export class Modal extends Collection {
   #handleClick;
   #handleKeydown;
 
@@ -30,6 +29,10 @@ export default class Modal extends Collection {
     return this.stack.top;
   }
 
+  async createEntry(context, el, config) {
+    return new ModalEntry(context, el, config);
+  }
+
   async open(id, transition, focus) {
     return open.call(this, id, transition, focus);
   }
@@ -51,14 +54,6 @@ export default class Modal extends Collection {
     return result;
   }
 
-  async beforeRegister(entry, config) {
-    return register.call(this, entry, config);
-  }
-
-  async beforeDeregister(entry) {
-    return deregister.call(this, entry);
-  }
-
   async afterMount() {
     document.addEventListener("click", this.#handleClick, false);
     document.addEventListener("keydown", this.#handleKeydown, false);