@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.14.2 to 1.14.3

glomex-dialog.js

@@ -83,2 +83,3 @@ const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
   const toHeight = width / aspectRatio;
+  const elementInnerContainer = element.firstElementChild;
 
@@ -114,7 +115,7 @@ element.style.position = 'fixed';
       // somehow width+scale is not applied at the same time when the motion is too fast
-      element.firstElementChild.style.transitionDuration = '0s';
-      element.firstElementChild.style.transitionProperty = 'transform';
-      element.firstElementChild.style.width = `${toRect.width}px`;
-      element.firstElementChild.style.transform = `scale(${1 / deltaScale})`;
-      element.firstElementChild.style.transformOrigin = 'top left';
+      elementInnerContainer.style.transitionDuration = '0s';
+      elementInnerContainer.style.transitionProperty = 'transform';
+      elementInnerContainer.style.width = `${toRect.width}px`;
+      elementInnerContainer.style.transform = `scale(${1 / deltaScale})`;
+      elementInnerContainer.style.transformOrigin = 'top left';
     }
@@ -286,3 +287,3 @@ };
 
-    .dialog-inverse-scale-element {
+    .dialog-inner-wrapper {
       position: absolute;
@@ -301,3 +302,3 @@ top: 0;
     .dialog-content:-webkit-full-screen-ancestor:not(iframe),
-    .dialog-inverse-scale-element:-webkit-full-screen-ancestor:not(iframe) {
+    .dialog-inner-wrapper:-webkit-full-screen-ancestor:not(iframe) {
       will-change: auto;
@@ -370,12 +371,20 @@ }
       position: fixed;
-      margin: 5vh auto;
       top: 0;
-      left: 50%;
-      transform: translateX(-50%);
+      left: 0;
       z-index: ${LIGHTBOX_Z_INDEX};
-      max-height: 28vh;
-      max-width: 95vw;
-      width: 1200px;
+      overflow: auto;
     }
 
+    :host([mode=lightbox]) .dialog-inner-wrapper {
+      max-width: 80%;
+      margin: 5vh auto 0 auto;
+      position: relative;
+    }
+
+    @media (max-width: 1024px) {
+      :host([mode=lightbox]) .dialog-inner-wrapper {
+        max-width: 95%;
+      }
+    }
+
     :host([mode=lightbox]):before {
@@ -396,11 +405,10 @@ content: " ";
         animation-name: none;
-        margin: 0;
-        top: 0;
-        left: 0;
-        transform: none;
-        height: 100%;
-        width: 100%;
-        margin: 0 auto;
       }
 
+      :host([mode=lightbox]) .dialog-inner-wrapper {
+        height: 100% !important;
+        width: 100% !important;
+        margin: 0 auto !important;
+      }
+
       :host([mode=lightbox]):before {
@@ -432,3 +440,3 @@ background: #000;
     <div class="dialog-content" part="dialog-content">
-      <div class="dialog-inverse-scale-element">
+      <div class="dialog-inner-wrapper">
         <slot name="dialog-element"></slot>
@@ -524,4 +532,4 @@ <slot name="dock-overlay">
         if (activeElement !== this && !isInDocument(activeElement, this)) {
-          const dialogContent = this.shadowRoot.querySelector('.dialog-content');
-          dialogContent.focus();
+          const dialogInnerWrapper = this.shadowRoot.querySelector('.dialog-inner-wrapper');
+          dialogInnerWrapper.focus();
         }
@@ -558,2 +566,3 @@ }
     const dialogContent = this.shadowRoot.querySelector('.dialog-content');
+    const dialogInnerWrapper = dialogContent.querySelector('.dialog-inner-wrapper');
     const placeholder = this.shadowRoot.querySelector('.placeholder');
@@ -615,4 +624,4 @@ const dockMode = this.getAttribute('dock-mode');
           dialogContent.style.transform = 'scale(1)';
-          dialogContent.firstElementChild.style.transform = null;
-          dialogContent.firstElementChild.style.width = null;
+          dialogInnerWrapper.style.transform = null;
+          dialogInnerWrapper.style.width = null;
           dialogContent.style.top = null;
@@ -622,3 +631,3 @@ dialogContent.style.left = null;
             dialogContent.style.transitionDuration = `${transitionDuration}ms`;
-            dialogContent.firstElementChild.style.transitionDuration = null;
+            dialogInnerWrapper.style.transitionDuration = null;
             dialogContent.style.transitionTimingFunction = 'ease-out';
@@ -629,3 +638,3 @@ }
               dialogContent.setAttribute('style', '');
-              dialogContent.firstElementChild.setAttribute('style', '');
+              dialogInnerWrapper.setAttribute('style', '');
             }
@@ -661,6 +670,5 @@ }, transitionDuration);
         dialogContent.setAttribute('style', '');
-        dialogContent.firstElementChild.setAttribute('style', '');
-        // TODO: rethink focus-handling?
-        dialogContent.setAttribute('tabindex', '-1');
-        dialogContent.focus();
+        dialogInnerWrapper.setAttribute('style', '');
+        dialogInnerWrapper.setAttribute('tabindex', '-1');
+        dialogInnerWrapper.focus();
         // prevent document scrolling on iOS
@@ -681,3 +689,3 @@ this._onNonPassiveTouchMove = (event) => {
         window.document.body.style.overflow = null;
-        dialogContent.removeAttribute('tabindex');
+        dialogInnerWrapper.removeAttribute('tabindex');
       }
@@ -745,3 +753,3 @@
       if (newValue) {
-        dialogContent.firstElementChild.setAttribute('style', '');
+        dialogInnerWrapper.setAttribute('style', '');
       } else {
@@ -748,0 +756,0 @@ // No implementation when dock-downscale gets reset

package.json

 {
   "name": "@glomex/glomex-dialog",
-  "version": "1.14.2",
+  "version": "1.14.3",
   "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

110753

increased by0.17%

Lines of code

1051

increased by0.48%

No dependency changes