@haxtheweb/simple-modal - npm Package Compare versions

Comparing version 9.0.1 to 9.0.2

lib/simple-modal-handler.js

@@ -18,7 +18,9 @@ import "@haxtheweb/simple-modal/simple-modal.js";
         globalThis.SimpleModal.requestAvailability();
-        this.addEventListener(
-          "click",
-          this.__SimpleModalHandlerClick.bind(this),
-        );
-        this.addEventListener("keypress", this._keyPress.bind(this));
+        if (this.addEventListener) {
+          this.addEventListener(
+            "click",
+            this.__SimpleModalHandlerClick.bind(this),
+          );
+          this.addEventListener("keypress", this._keyPress.bind(this));
+        }
       }, 0);
@@ -25,0 +27,0 @@ }

package.json

@@ -12,3 +12,2 @@ {
       "css": "src/simple-modal.css",
-      "scss": "src/simple-modal.scss",
       "html": "src/simple-modal.html",
@@ -21,3 +20,3 @@ "js": "src/simple-modal.js",
   },
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "A simple modal that ensures accessibility and stack order context appropriately",
@@ -47,3 +46,3 @@ "repository": {
   "dependencies": {
-    "@haxtheweb/simple-icon": "^9.0.1",
+    "@haxtheweb/simple-icon": "^9.0.2",
     "lit": "^3.1.4",
@@ -53,5 +52,5 @@ "web-dialog": "0.0.11"
   "devDependencies": {
-    "@haxtheweb/deduping-fix": "^9.0.1",
-    "@haxtheweb/simple-fields": "^9.0.1",
-    "@haxtheweb/storybook-utilities": "^9.0.1",
+    "@haxtheweb/deduping-fix": "^9.0.2",
+    "@haxtheweb/simple-fields": "^9.0.2",
+    "@haxtheweb/storybook-utilities": "^9.0.2",
     "@open-wc/testing": "4.0.0",
@@ -73,3 +72,3 @@ "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
   ],
-  "gitHead": "7f62cde6a6242afcb57715e1e2067ea767c777fd"
+  "gitHead": "f528e4aac8aeadf5350d9262fb515d14d208e376"
 }

simple-modal.js

@@ -9,3 +9,2 @@ /**
 import "@haxtheweb/simple-icon/lib/simple-icon-button-lite.js";
-import "web-dialog/index.js";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
@@ -348,6 +347,10 @@
   firstUpdated() {
-    this.shadowRoot
-      .querySelector("web-dialog")
-      .shadowRoot.querySelector("#backdrop").style.backgroundColor =
-      "var(--ddd-theme-default-potential70)";
+    import("web-dialog/index.js").then((e) => {
+      setTimeout(() => {
+        this.shadowRoot
+          .querySelector("web-dialog")
+          .shadowRoot.querySelector("#backdrop").style.backgroundColor =
+          "var(--ddd-theme-default-potential70)";
+      }, 0);
+    });
   }
@@ -370,7 +373,7 @@
     setTimeout(() => {
-      window.addEventListener("simple-modal-hide", this.close, {
+      globalThis.addEventListener("simple-modal-hide", this.close, {
         signal: this.windowControllers.signal,
       });
 
-      window.addEventListener("simple-modal-show", this.showEvent, {
+      globalThis.addEventListener("simple-modal-show", this.showEvent, {
         signal: this.windowControllers.signal,
@@ -395,3 +398,3 @@ });
     // ensure things don't conflict w/ the modal if its around
-    window.dispatchEvent(
+    globalThis.dispatchEvent(
       new CustomEvent("simple-toast-hide", {
@@ -491,3 +494,3 @@ bubbles: true,
     this.opened = false;
-    if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
+    if (globalThis.ShadyCSS && !globalThis.ShadyCSS.nativeShadow) {
       this.shadowRoot
@@ -512,3 +515,3 @@ .querySelector("web-dialog")
     }
-    if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
+    if (globalThis.ShadyCSS && !globalThis.ShadyCSS.nativeShadow) {
       this.shadowRoot
@@ -616,14 +619,19 @@ .querySelector("web-dialog")
 // register globally so we can make sure there is only one
-window.SimpleModal = window.SimpleModal || {};
+globalThis.SimpleModal = globalThis.SimpleModal || {};
 // request if this exists. This helps invoke the element existing in the dom
 // as well as that there is only one of them. That way we can ensure everything
 // is rendered through the same modal
-window.SimpleModal.requestAvailability = () => {
-  if (!window.SimpleModal.instance) {
-    window.SimpleModal.instance = document.createElement("simple-modal");
-    document.body.appendChild(window.SimpleModal.instance);
+globalThis.SimpleModal.requestAvailability = () => {
+  if (
+    !globalThis.SimpleModal.instance &&
+    globalThis.document &&
+    globalThis.document.body
+  ) {
+    globalThis.SimpleModal.instance =
+      globalThis.document.createElement("simple-modal");
+    globalThis.document.body.appendChild(globalThis.SimpleModal.instance);
   }
-  return window.SimpleModal.instance;
+  return globalThis.SimpleModal.instance;
 };
 
-export const SimpleModalStore = window.SimpleModal.requestAvailability();
+export const SimpleModalStore = globalThis.SimpleModal.requestAvailability();

src/simple-modal.js

@@ -9,3 +9,2 @@ /**
 import "@haxtheweb/simple-icon/lib/simple-icon-button-lite.js";
-import "web-dialog/index.js";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
@@ -348,6 +347,10 @@
   firstUpdated() {
-    this.shadowRoot
-      .querySelector("web-dialog")
-      .shadowRoot.querySelector("#backdrop").style.backgroundColor =
-      "var(--ddd-theme-default-potential70)";
+    import("web-dialog/index.js").then((e) => {
+      setTimeout(() => {
+        this.shadowRoot
+          .querySelector("web-dialog")
+          .shadowRoot.querySelector("#backdrop").style.backgroundColor =
+          "var(--ddd-theme-default-potential70)";
+      }, 0);
+    });
   }
@@ -370,7 +373,7 @@
     setTimeout(() => {
-      window.addEventListener("simple-modal-hide", this.close, {
+      globalThis.addEventListener("simple-modal-hide", this.close, {
         signal: this.windowControllers.signal,
       });
 
-      window.addEventListener("simple-modal-show", this.showEvent, {
+      globalThis.addEventListener("simple-modal-show", this.showEvent, {
         signal: this.windowControllers.signal,
@@ -395,3 +398,3 @@ });
     // ensure things don't conflict w/ the modal if its around
-    window.dispatchEvent(
+    globalThis.dispatchEvent(
       new CustomEvent("simple-toast-hide", {
@@ -491,3 +494,3 @@ bubbles: true,
     this.opened = false;
-    if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
+    if (globalThis.ShadyCSS && !globalThis.ShadyCSS.nativeShadow) {
       this.shadowRoot
@@ -512,3 +515,3 @@ .querySelector("web-dialog")
     }
-    if (window.ShadyCSS && !window.ShadyCSS.nativeShadow) {
+    if (globalThis.ShadyCSS && !globalThis.ShadyCSS.nativeShadow) {
       this.shadowRoot
@@ -616,14 +619,19 @@ .querySelector("web-dialog")
 // register globally so we can make sure there is only one
-window.SimpleModal = window.SimpleModal || {};
+globalThis.SimpleModal = globalThis.SimpleModal || {};
 // request if this exists. This helps invoke the element existing in the dom
 // as well as that there is only one of them. That way we can ensure everything
 // is rendered through the same modal
-window.SimpleModal.requestAvailability = () => {
-  if (!window.SimpleModal.instance) {
-    window.SimpleModal.instance = document.createElement("simple-modal");
-    document.body.appendChild(window.SimpleModal.instance);
+globalThis.SimpleModal.requestAvailability = () => {
+  if (
+    !globalThis.SimpleModal.instance &&
+    globalThis.document &&
+    globalThis.document.body
+  ) {
+    globalThis.SimpleModal.instance =
+      globalThis.document.createElement("simple-modal");
+    globalThis.document.body.appendChild(globalThis.SimpleModal.instance);
   }
-  return window.SimpleModal.instance;
+  return globalThis.SimpleModal.instance;
 };
 
-export const SimpleModalStore = window.SimpleModal.requestAvailability();
+export const SimpleModalStore = globalThis.SimpleModal.requestAvailability();

No alert changes

Improved metrics

Total package byte prevSize

117627

increased by9.73%

Number of package files

21

increased by5%

Lines of code

2274

increased by19.31%

Dependency changes

• Updated@haxtheweb/simple-icon@^9.0.2