Always open in popup when possible

riccardobl · Jan 3, 2024 · 162f399 · 162f399
1 parent dbb0e3b
commit 162f399
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 5 deletions.
diff --git a/src/assets/app/index.html b/src/assets/app/index.html
@@ -15,6 +15,11 @@
         <link rel="stylesheet" href="page.css" />
         <link rel="stylesheet" href="static/tp/fonts/lato/lato.css" />
         <link rel="stylesheet" href="static/tp/material-symbols/material-symbols.css" />
+        <script>
+            function isOpen() {
+                return true;
+            }
+        </script>
     </head>
 
     <body>

diff --git a/src/assets/index.html b/src/assets/index.html
@@ -37,6 +37,7 @@
                 box-sizing: border-box;
                 flex-shrink: 1;
             }
+
             html,
             body {
                 margin: 0;
@@ -247,23 +248,73 @@
             }
 
             function openPopupLandscape() {
-                window.open(
+                return window.open(
                     "/app/index.html",
                     "_blank",
                     "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=900,height=600,screenX=200,screenY=200",
                 );
             }
 
             function openPopupPortrait() {
-                window.open(
+                return window.open(
                     "/app/index.html",
                     "_blank",
                     "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=500,height=800,screenX=200,screenY=200",
                 );
             }
 
             function openBlank() {
-                window.open("/app/index.html", "_blank");
+                document.location.href = "/app/index.html";
+            }
+
+            function openBlank() {
+                return window.open("/app/index.html", "_blank");
+            }
+
+            function openSame() {
+                document.location.href = "/app/index.html";
+            }
+
+            async function openAuto() {
+                try {
+                    const launchBtn = document.querySelector("#launch");
+                    if (!launchBtn.getAttribute("originText")) {
+                        launchBtn.setAttribute("originText", launchBtn.innerText);
+                    }
+                    launchBtn.innerText = "Launching...";
+                } catch (e) {
+                    console.log(e);
+                }
+                let popup;
+                try {
+                    if (window.innerWidth > 1000) {
+                        popup = openPopupLandscape();
+                        await new Promise((res, rej) => {
+                            setTimeout(() => {
+                                res();
+                            }, 4000);
+                        });
+                        if (!popup || popup.closed || typeof popup.closed == "undefined") {
+                            popup = undefined;
+                        }
+                        if (popup && (!popup.isOpen || !popup.isOpen())) {
+                            popup = undefined;
+                        }
+                    }
+                } catch (e) {
+                    console.log(e);
+                    popup = undefined;
+                }
+                if (!popup) {
+                    openSame();
+                }
+
+                try {
+                    const launchBtn = document.querySelector("#launch");
+                    launchBtn.innerText = launchBtn.getAttribute("originText") || "Launch";
+                } catch (e) {
+                    console.log(e);
+                }
             }
         </script>
     </head>
@@ -294,7 +345,7 @@ <h2>Liquid in the browser</h2>
             </p>
             <br /><br />
 
-            <div id="screenshot" onclick="openPopupLandscape()">
+            <div id="screenshot" onclick="openAuto()">
                 <div class="cover"></div>
                 <div class="img"></div>
             </div>
@@ -310,7 +361,7 @@ <h2>Liquid in the browser</h2>
             <br />
             <br />
             <div class="hlist">
-                <button onclick="openBlank()">Launch</button>
+                <button id="launch" onclick="openAuto()">Launch</button>
                 <!-- <i onclick="openPopupPortrait()" class="button fa-solid fa-mobile"></i>
                 <i onclick="openPopupLandscape()" class="button fa-solid fa-computer"></i> -->
             </div>