@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.11.0 to 1.12.0

glomex-dialog.js

@@ -315,3 +315,3 @@ const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
       position: fixed;
-      margin: 1vh auto;
+      margin: 5vh auto;
       top: 0;
@@ -321,5 +321,5 @@ left: 50%;
       z-index: ${LIGHTBOX_Z_INDEX};
-      max-height: 40vh;
+      max-height: 28vh;
       max-width: 95vw;
-      width: 850px;
+      width: 1200px;
     }
@@ -376,7 +376,6 @@
       if (!(target instanceof GlomexDialogElement) && !target.assignedSlot) return;
+      this._internalModeChange = true;
       if (this._wasInHiddenMode) {
-        this._internalModeChange = true;
         this.setAttribute('mode', 'hidden');
       } else {
-        this._internalModeChange = true;
         this.setAttribute('mode', 'inline');
@@ -410,6 +409,30 @@ }
     window.addEventListener('resize', onResize);
-
     this._disconnectResize = () => {
       window.removeEventListener('resize', onResize);
     };
+
+    const onKeyup = (event) => {
+      const currentMode = this.getAttribute('mode');
+      if (currentMode !== 'lightbox') return;
+      if (event.key === 'Escape' || event.key === 'Esc') {
+        this._internalModeChange = true;
+        if (this._wasInHiddenMode) {
+          this.setAttribute('mode', 'hidden');
+        } else {
+          this.setAttribute('mode', 'inline');
+        }
+      }
+      // restrict tab behavior in lightbox mode
+      if (event.key === 'Tab') {
+        const { activeElement } = window.document;
+        if (activeElement !== this && !this.contains(activeElement)) {
+          const dialogContent = this.shadowRoot.querySelector('.dialog-content');
+          dialogContent.focus();
+        }
+      }
+    };
+    window.document.addEventListener('keyup', onKeyup);
+    this._disconnectKeyup = () => {
+      window.document.removeEventListener('keyup', onKeyup);
+    };
   }
@@ -420,2 +443,3 @@
     this._disconnectResize();
+    this._disconnectKeyup();
   }
@@ -443,2 +467,5 @@
       }
+      window.removeEventListener('touchmove', this._onNonPassiveTouchMove, {
+        passive: false,
+      });
 
@@ -525,6 +552,11 @@ if (newValue === 'dock') {
         dialogContent.focus();
+        // prevent document scrolling on iOS
+        this._onNonPassiveTouchMove = (event) => {
+          event.preventDefault();
+        };
+        window.addEventListener('touchmove', this._onNonPassiveTouchMove, {
+          passive: false,
+        });
       } else if (newValue === 'hidden') {
         this._wasInHiddenMode = true;
-      } else {
-        this._wasInHiddenMode = false;
       }
@@ -531,0 +563,0 @@

package.json

 {
   "name": "@glomex/glomex-dialog",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "A dialog web component that allows docking a video player or putting it in a lightbox",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103232

increased by0.96%

Lines of code

866

increased by3.84%

Worsened metrics

Number of package files

9

decreased by-10%

No dependency changes