@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.10.0 to 1.10.1

glomex-dialog.js

@@ -64,3 +64,4 @@ const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
 const animateFromTo = (element, {
-  from, to, animate = false, aspectRatio, downscale = false,
+  from, to, animate = false, aspectRatio,
+  initialAspectRatio, downscale = false,
 } = {}) => new Promise((resolve) => {
@@ -73,3 +74,6 @@ window.requestAnimationFrame(() => {
     const width = fromRect.width === 0 ? NON_VISIBLE_WIDTH : fromRect.width;
-    const height = width / aspectRatio;
+    const height = fromRect.height === 0
+      ? (NON_VISIBLE_WIDTH / initialAspectRatio)
+      : fromRect.height;
+    const toHeight = width / aspectRatio;
 
@@ -81,2 +85,3 @@ element.style.position = 'fixed';
     element.style.left = `${fromRect.left + visualViewport.offsetLeft}px`;
+    element.style.transform = 'scale(1.001)';
 
@@ -88,3 +93,4 @@ window.requestAnimationFrame(() => {
 
-      element.style.transform = `translate(${(deltaX / width) * 100}%, ${(deltaY / height) * 100}%) scale(${deltaScale})`;
+      element.style.height = `${toHeight}px`;
+      element.style.transform = `translate(${(deltaX / width) * 100}%, ${(deltaY / toHeight) * 100}%) scale(${deltaScale})`;
       element.style.transitionProperty = 'transform, opacity, height';
@@ -425,2 +431,5 @@ element.style.transformOrigin = 'top left';
           animate: !this._wasInHiddenMode,
+          initialAspectRatio: getAspectRatioFromStrings([
+            this.getAttribute('aspect-ratio'),
+          ]),
           aspectRatio: getAspectRatioFromStrings([
@@ -445,3 +454,3 @@ this.getAttribute('dock-aspect-ratio'),
           dialogContent.style.position = 'absolute';
-          dialogContent.style.transform = null;
+          dialogContent.style.transform = 'scale(1.001)';
           dialogContent.firstElementChild.style.transform = null;
@@ -470,2 +479,5 @@ dialogContent.firstElementChild.style.width = null;
             animate: false,
+            initialAspectRatio: getAspectRatioFromStrings([
+              this.getAttribute('aspect-ratio'),
+            ]),
             aspectRatio: getAspectRatioFromStrings([
@@ -562,2 +574,5 @@ this.getAttribute('dock-aspect-ratio'),
         animate: false,
+        initialAspectRatio: getAspectRatioFromStrings([
+          this.getAttribute('aspect-ratio'),
+        ]),
         aspectRatio: getAspectRatioFromStrings([
@@ -564,0 +579,0 @@ this.getAttribute('dock-aspect-ratio'),

package.json

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

101292

increased by0.6%

Lines of code

811

increased by1.88%

No dependency changes