@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.14.3 to 1.14.4

glomex-dialog.js

@@ -201,2 +201,14 @@ const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
 
+function adjustLightboxModeForLandscapeOnMobile(element) {
+  if (element.getAttribute('mode') !== 'lightbox') return;
+  const mobileLandscapeSelector = '(max-device-width: 450px) and (hover: none) and (pointer: coarse) and (orientation: landscape)';
+  if (window.matchMedia(mobileLandscapeSelector).matches) {
+    // allow scrolling in mobile landscape
+    // so that the user can scroll down to remove the browser bar
+    window.document.body.style.overflow = null;
+  } else {
+    window.document.body.style.overflow = 'hidden';
+  }
+}
+
 /**
@@ -398,5 +410,7 @@ * A dialog web component that allows docking a video player or
 
-    @media (hover: none) and (pointer: coarse) and (orientation: landscape) {
+    @media (hover: none) and (max-device-width: 450px) and (pointer: coarse) and (orientation: landscape) {
       :host([mode=lightbox]) .dialog-content {
         animation-name: none;
+        height: 100%;
+        width: 100%;
       }
@@ -406,4 +420,5 @@
         height: 100% !important;
-        width: 100% !important;
+        max-width: 100% !important;
         margin: 0 auto !important;
+        min-height: -webkit-fill-available !important;
       }
@@ -490,16 +505,4 @@
 
-    const adjustLightboxModeForLandscapeOnMobile = () => {
-      if (this.getAttribute('mode') !== 'lightbox') return;
-      const mobileLandscapeSelector = '(hover: none) and (pointer: coarse) and (orientation: landscape)';
-      if (window.matchMedia(mobileLandscapeSelector).matches) {
-        // allow scrolling in mobile landscape
-        // so that the user can scroll down to remove the browser bar
-        window.document.body.style.overflow = null;
-      } else {
-        window.document.body.style.overflow = 'hidden';
-      }
-    };
-
     const onResize = () => {
-      adjustLightboxModeForLandscapeOnMobile();
+      adjustLightboxModeForLandscapeOnMobile(this);
       updateViewPortWidth(this);
@@ -672,2 +675,3 @@ this.refreshDockDialog();
         });
+        adjustLightboxModeForLandscapeOnMobile(this);
       } else if (newValue === 'hidden') {
@@ -674,0 +678,0 @@ this._wasInHiddenMode = true;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

110935

increased by0.16%

Lines of code

1055

increased by0.38%

No dependency changes