Home Explore Help
Register Sign In
simo
/
SimoSearch
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

more embed fix

simo 1 month ago
parent
8d727b41d3
commit
2b45c0c307
3 changed files with 42 additions and 10 deletions
Unified View Show Diff Stats
  1. 39 9
      templates/home.html
  2. 1 1
      templates/images.html
  3. 2 0
      templates/results.html

+ 39 - 9
templates/home.html
View File 

@@ -17,21 +17,51 @@
 
         />
 
         />
 
         <script>
 
         <script>
 
             (function () {
 
             (function () {
 
+                function isEmbedMode() {
 
+                    return (
 
+                        (window.location.hash || "").indexOf("#embed") !== -1
 
+                    );
 
+                }
 
+
 
                 function syncEmbedClassFromHash() {
 
                 function syncEmbedClassFromHash() {
 
-                    const isEmbed =
 
-                        (window.location.hash || "").indexOf("#embed") !== -1;
 
+                    document.body.classList.toggle("embed", isEmbedMode());
 
+                }
 
+
 
+                function wireEmbedPreservingHomeSearchSubmit() {
 
+                    const form = document.querySelector(
 
+                        "form.home-search-form",
 
+                    );
 
+                    if (!form) return;
 
+
 
+                    form.addEventListener("submit", function (ev) {
 
+                        if (!isEmbedMode()) return;
 
 
 
-                    // Toggle a class on <body>. CSS handles the layout changes.
 
-                    document.body.classList.toggle("embed", isEmbed);
 
+                        // Default GET form submission omits the fragment.
 
+                        // In embed mode, submit by navigating to action + querystring + #embed.
 
+                        ev.preventDefault();
 
+
 
+                        const actionAttr =
 
+                            form.getAttribute("action") || "/search";
 
+                        const actionUrl = new URL(
 
+                            actionAttr,
 
+                            window.location.origin,
 
+                        );
 
+                        const params = new URLSearchParams(new FormData(form));
 
+                        actionUrl.search = params.toString();
 
+
 
+                        window.location.assign(actionUrl.toString() + "#embed");
 
+                    });
 
+                }
 
+
 
+                function init() {
 
+                    syncEmbedClassFromHash();
 
+                    wireEmbedPreservingHomeSearchSubmit();
 
                 }
 
                 }
 
 
 
                 if (document.readyState === "loading") {
 
                 if (document.readyState === "loading") {
 
-                    document.addEventListener(
 
-                        "DOMContentLoaded",
 
-                        syncEmbedClassFromHash,
 
-                    );
 
+                    document.addEventListener("DOMContentLoaded", init);
 
                 } else {
 
                 } else {
 
-                    syncEmbedClassFromHash();
 
+                    init();
 
                 }
 
                 }
 
 
 
                 window.addEventListener("hashchange", syncEmbedClassFromHash);
 
                 window.addEventListener("hashchange", syncEmbedClassFromHash);

+ 1 - 1
templates/images.html
View File 

@@ -13,7 +13,7 @@
 
 
 
     <body class="images-view">
 
     <body class="images-view">
 
         <header>
 
         <header>
 
-            <h1>Simo <span>Search</span></h1>
 
+            <h1>Simo<span>Search</span></h1>
 
             <form action="/images" method="GET" class="search-form">
 
             <form action="/images" method="GET" class="search-form">
 
                 <input
 
                 <input
 
                     name="q"
 
                     name="q"

+ 2 - 0
templates/results.html
View File 

@@ -33,6 +33,8 @@
 
                 />
 
                 />
 
             </form>
 
             </form>
 
 
 
+            ,
 
+
 
             <script>
 
             <script>
 
                 (function () {
 
                 (function () {
 
                     const isEmbed =
 
                     const isEmbed =