Remove static calls to ScrimController

Using outlets instead of static calls to show and hide the scrim. Added async to show/hide to allow for future animations.
katalyst · Oct 11, 2023 · 93a9da3 · 93a9da3
1 parent a4b1baa
commit 93a9da3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 57 deletions.
diff --git a/app/assets/javascripts/controllers/kpop_controller.js b/app/assets/javascripts/controllers/kpop_controller.js
@@ -1,9 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
-import ScrimController from "controllers/scrim_controller";
 
 export default class KpopController extends Controller {
   static outlets = ["scrim"];
-  static targets = ["content", "closeButton"];
+  static targets = ["content"];
   static values = {
     open: Boolean,
   };
@@ -12,14 +11,9 @@ export default class KpopController extends Controller {
     // return if already initialized
     if (this.openValue) return;
 
-    // return if no content to show
-    if (!this.hasContentTarget) return;
-
-    // capture the scrim and then show the content
-    if (ScrimController.showScrim({ dismiss: this.hasCloseButtonTarget })) {
-      this.openValue = true;
-    } else {
-      this.#clear();
+    // Capture the scrim and then show the content
+    if (this.hasContentTarget) {
+      scrim.show().then(() => (this.openValue = true));
     }
   }
 
@@ -30,14 +24,9 @@ export default class KpopController extends Controller {
     // When switching modals a target may connect while scrim is already open
     if (this.openValue) return;
 
-    // Scrim may not be ready yet
-    if (!this.hasScrimOutlet) return;
-
-    // capture the scrim and then show the content
-    if (ScrimController.showScrim({ dismiss: this.hasCloseButtonTarget })) {
-      this.openValue = true;
-    } else {
-      this.#clear();
+    // Capture the scrim and then show the content if the scrim is ready
+    if (this.hasScrimOutlet) {
+      this.scrimOutlet.show().then(() => (this.openValue = true));
     }
   }
 
@@ -46,7 +35,9 @@ export default class KpopController extends Controller {
     if (this.hasContentTarget) return;
 
     this.openValue = false;
-    ScrimController.hideScrim();
+    if (this.hasScrimOutlet) {
+      this.scrimOutlet.hide();
+    }
   }
 
   openValueChanged(open) {

diff --git a/app/assets/javascripts/controllers/scrim_controller.js b/app/assets/javascripts/controllers/scrim_controller.js
@@ -8,8 +8,7 @@ const DEBUG = false;
  *
  * If the Scrim element receives a click event, it automatically triggers "scrim:hide".
  *
- * You can show and hide the scrim programmatically by sending "scrim:request:show" and "scrim:request:hide" events to
- * the window or by calling the provided methods.
+ * You can show and hide the scrim programmatically by calling show/hide on the controller, e.g. using an outlet.
  *
  * If you need to respond to the scrim showing or hiding you should subscribe to "scrim:show" and "scrim:hide".
  */
@@ -20,41 +19,20 @@ export default class ScrimController extends Controller {
     zIndex: Number,
   };
 
-  /**
-   * Show the scrim element. Returns true if successful.
-   */
-  static showScrim({
-    dismiss = true,
-    zIndex = undefined,
-    top = undefined,
-  } = {}) {
-    return window.dispatchEvent(
-      new CustomEvent("scrim:request:show", {
-        cancelable: true,
-        detail: { captive: !dismiss, zIndex: zIndex, top: top },
-      })
-    );
-  }
-
-  /**
-   * Hide the scrim element. Returns true if successful.
-   */
-  static hideScrim() {
-    return window.dispatchEvent(
-      new CustomEvent("scrim:request:hide", { cancelable: true })
-    );
-  }
-
   connect() {
     this.defaultZIndexValue = this.zIndexValue;
     this.defaultCaptiveValue = this.captiveValue;
   }
 
-  show(request) {
+  async show({
+    captive = this.defaultCaptiveValue,
+    zIndex = this.defaultZIndexValue,
+    top = window.scrollY,
+  } = {}) {
     if (DEBUG) console.debug("request show scrim");
 
     // hide the scrim before opening the new one if it's already open
-    if (this.openValue) this.hide(request);
+    if (this.openValue) await this.hide();
 
     // if the scrim is still open, abort
     if (this.openValue) return;
@@ -68,10 +46,10 @@ export default class ScrimController extends Controller {
     if (DEBUG) console.debug("show scrim");
 
     // update state, perform style updates
-    this.#show(request.detail);
+    return this.#show(captive, zIndex, top);
   }
 
-  hide(request) {
+  async hide() {
     if (!this.openValue) return;
 
     if (DEBUG) console.debug("request hide scrim");
@@ -85,7 +63,7 @@ export default class ScrimController extends Controller {
     if (DEBUG) console.debug("hide scrim");
 
     // update state, perform style updates
-    this.#hide();
+    return this.#hide();
   }
 
   dismiss(event) {
@@ -100,11 +78,7 @@ export default class ScrimController extends Controller {
   /**
    * Clips body to viewport size and sets the z-index
    */
-  #show({
-    captive = this.defaultCaptiveValue,
-    zIndex = this.defaultZIndexValue,
-    top = window.scrollY,
-  }) {
+  async #show(captive, zIndex, top) {
     this.captiveValue = captive;
     this.zIndexValue = zIndex;
     this.scrollY = top;
@@ -120,7 +94,7 @@ export default class ScrimController extends Controller {
   /**
    * Unclips body from viewport size and unsets the z-index
    */
-  #hide() {
+  async #hide() {
     this.captiveValue = this.defaultCaptiveValue;
     this.zIndexValue = this.defaultZIndexValue;