feat(PopupWindow): compute a default width based on the size of the w…

…indow opener
kyxyes · Nov 11, 2021 · 4b5f377 · 4b5f377
1 parent 8c6f799
commit 4b5f377
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/UserManagerSettings.ts b/src/UserManagerSettings.ts
@@ -18,7 +18,7 @@ export interface UserManagerSettings extends OidcClientSettings {
     /**
      * The features parameter to window.open for the popup signin window. By default, the popup is
      * placed centered in front of the window opener.
-     * (default: "location=no,toolbar=no,width=576,height=640")
+     * (default: \{ location: false, menubar: false, height: 640 \})
      */
     popupWindowFeatures?: PopupWindowFeatures;
     /** The target parameter to window.open for the popup signin window (default: "_blank") */

diff --git a/src/navigators/PopupWindow.ts b/src/navigators/PopupWindow.ts
@@ -9,7 +9,6 @@ const checkForPopupClosedInterval = 500;
 const defaultPopupWindowFeatures: PopupWindowFeatures = {
     location: false,
     toolbar: false,
-    width: 576,
     height: 640,
 };
 
@@ -36,7 +35,7 @@ export class PopupWindow extends AbstractChildWindow {
         popupWindowFeatures = {},
     }: PopupWindowParams) {
         super();
-        const centeredPopup = PopupUtils.center(Object.assign({}, defaultPopupWindowFeatures, popupWindowFeatures));
+        const centeredPopup = PopupUtils.center({ ...defaultPopupWindowFeatures, ...popupWindowFeatures });
         this._window = window.open(undefined, popupWindowTarget, PopupUtils.serialize(centeredPopup));
     }
 

diff --git a/src/utils/PopupUtils.ts b/src/utils/PopupUtils.ts
@@ -18,9 +18,15 @@ export interface PopupWindowFeatures {
 }
 
 export class PopupUtils {
+    /**
+     * Popuplates a map of window features with a placement centered in front of
+     * the current window. If no explicit width is given, a default value is
+     * binned into [800, 720, 600, 480, 360] based on the current window's width.
+     */
     static center({ ...features }: PopupWindowFeatures): PopupWindowFeatures {
-        if (features.width != null)
-            features.left ??= Math.max(0, Math.round(window.screenX + (window.outerWidth - features.width) / 2));
+        if (features.width == null)
+            features.width = [800, 720, 600, 480].find(width => width <= window.outerWidth / 1.618) ?? 360;
+        features.left ??= Math.max(0, Math.round(window.screenX + (window.outerWidth - features.width) / 2));
         if (features.height != null)
             features.top ??= Math.max(0, Math.round(window.screenY + (window.outerHeight - features.height) / 2));
         return features;