@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.9.16 to 1.10.0

glomex-dialog.js

@@ -80,28 +80,31 @@ const NON_VISIBLE_WIDTH = window.innerWidth < 720 ? 320 : 640;
 
-    const deltaX = toRect.left - fromRect.left;
-    const deltaY = toRect.top - fromRect.top;
-    const deltaScale = toRect.width / width;
+    window.requestAnimationFrame(() => {
+      const deltaX = toRect.left - fromRect.left;
+      const deltaY = toRect.top - fromRect.top;
+      const deltaScale = toRect.width / width;
 
-    element.style.transform = `translate(${(deltaX / width) * 100}%, ${(deltaY / height) * 100}%) scale(${deltaScale})`;
-    element.style.transitionProperty = 'transform, opacity, height';
-    element.style.transformOrigin = 'top left';
-    element.style.transitionTimingFunction = 'ease-out';
-    if (!downscale) {
-      // during animation is running we wait a little before scaling up
-      // to avoid the effect that the dialog gets first scaled up
-      setTimeout(() => {
+      element.style.transform = `translate(${(deltaX / width) * 100}%, ${(deltaY / height) * 100}%) scale(${deltaScale})`;
+      element.style.transitionProperty = 'transform, opacity, height';
+      element.style.transformOrigin = 'top left';
+      element.style.transitionTimingFunction = 'ease-out';
+      if (!downscale) {
         element.firstElementChild.style.width = `${toRect.width}px`;
         element.firstElementChild.style.transform = `scale(${1 / deltaScale})`;
-      }, animate ? DEFAULT_TRANSITION_DURATION / 2 : 0);
-    }
-    if (animate) {
-      element.style.transitionDuration = `${DEFAULT_TRANSITION_DURATION}ms`;
-    } else {
-      element.style.transitionDuration = null;
-      setTimeout(() => {
+        element.firstElementChild.style.transitionProperty = 'width';
+        element.firstElementChild.style.transformOrigin = 'top left';
+        element.firstElementChild.style.transitionTimingFunction = 'ease-out';
+      }
+      if (animate) {
         element.style.transitionDuration = `${DEFAULT_TRANSITION_DURATION}ms`;
-      }, 0);
-    }
-    resolve({
-      scale: downscale ? deltaScale : 1,
+        element.firstElementChild.style.transitionDuration = `${DEFAULT_TRANSITION_DURATION}ms`;
+      } else {
+        element.style.transitionDuration = null;
+        element.firstElementChild.style.transitionDuration = null;
+        element.firstElementChild.style.transitionDelay = null;
+      }
+      window.requestAnimationFrame(() => {
+        resolve({
+          scale: downscale ? deltaScale : 1,
+        });
+      });
     });
@@ -436,17 +439,37 @@ });
       } else if (newValue === 'inline') {
-        dialogContent.style.position = 'absolute';
-        dialogContent.style.transform = null;
-        dialogContent.firstElementChild.style.transform = null;
-        dialogContent.firstElementChild.style.width = null;
-        dialogContent.style.top = null;
-        dialogContent.style.left = null;
-        if (!this._wasInHiddenMode && oldValue === 'dock') {
-          dialogContent.style.transitionDuration = `${DEFAULT_TRANSITION_DURATION}ms`;
-          dialogContent.style.transitionTimingFunction = 'ease-out';
+        const goToInline = () => {
+          dialogContent.style.position = 'absolute';
+          dialogContent.style.transform = null;
+          dialogContent.firstElementChild.style.transform = null;
+          dialogContent.firstElementChild.style.width = null;
+          dialogContent.style.top = null;
+          dialogContent.style.left = null;
+          if (!this._wasInHiddenMode && oldValue === 'dock') {
+            dialogContent.style.transitionDuration = `${DEFAULT_TRANSITION_DURATION}ms`;
+            dialogContent.firstElementChild.style.transitionDuration = `${DEFAULT_TRANSITION_DURATION}ms`;
+            dialogContent.style.transitionTimingFunction = 'ease-out';
+          }
+          setTimeout(() => {
+            if (this.getAttribute('mode') === 'inline') {
+              dialogContent.setAttribute('style', '');
+              dialogContent.firstElementChild.setAttribute('style', '');
+            }
+          }, DEFAULT_TRANSITION_DURATION);
+        };
+        if (oldValue === 'dock') {
+          // reposition element without animation
+          // so that new position with scroll gets calculated
+          animateFromTo(dialogContent, {
+            from: placeholder,
+            to: getAlternativeDockTarget(this) || getDefaultDockTarget(this),
+            animate: false,
+            aspectRatio: getAspectRatioFromStrings([
+              this.getAttribute('dock-aspect-ratio'),
+              this.getAttribute('aspect-ratio'),
+            ]),
+            downscale: this.getAttribute('dock-downscale'),
+          }).then(goToInline);
+        } else if (oldValue !== 'inline') {
+          goToInline();
         }
-        setTimeout(() => {
-          if (this.getAttribute('mode') === 'inline') {
-            dialogContent.setAttribute('style', '');
-          }
-        }, DEFAULT_TRANSITION_DURATION);
         this._wasInHiddenMode = false;
@@ -453,0 +476,0 @@ } else if (newValue === 'lightbox') {

package.json

 {
   "name": "@glomex/glomex-dialog",
-  "version": "1.9.16",
+  "version": "1.10.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

100692

increased by1.18%

Lines of code

796

increased by2.98%

No dependency changes