feat(auto_source): enhance UI and improve form handling

Author: gildesmarais

public/auto_source.css

@@ -4,6 +4,14 @@
   flex-direction: column;
 }
 
+.auto_source__wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 1em;
+  background: var(--background-alt);
+  padding: 0.75em 1em;
+  border-radius: 1em;
+}
 .auto_source input,
 .auto_source button {
   width: 100%;
@@ -14,11 +22,6 @@
   flex-direction: column;
 }
 
-.auto_source > form input[type="submit"] {
-  flex: 1 1;
-  margin-right: 0;
-}
-
 .auto_source > form label {
   display: flex;
   justify-content: center;
@@ -33,22 +36,24 @@
   flex: 0;
 }
 
-.auto_source > nav {
+.auto_source nav {
   display: flex;
   flex-direction: column;
 }
 
 @media screen and (min-width: 768px) {
-  .auto_source > nav {
+  .auto_source nav {
     justify-content: space-between;
     flex-direction: row;
   }
 }
 
-.auto_source > nav button {
+.auto_source nav button {
   margin-left: 0.25em;
   margin-right: 0;
   flex: 1;
+  font-size: 0.9em;
+  padding: 0.75em;
 }
 
 .auto_source__bookmarklet {
@@ -63,7 +68,7 @@
 }
 
 .auto_source iframe {
-  margin-top: 2em;
+  margin-top: 1em;
   border: 2px groove transparent;
   border-radius: 0.5em;
   display: none; /* Hide by default */

public/auto_source.js

@@ -47,13 +47,19 @@ const autoSource = (function () {
     initEventListeners() {
       // Event listener for URL input change
       this.urlInput.addEventListener("change", () => this.clearRssUrl());
+      this.urlInput.addEventListener("blur", (event) => this.handleFormSubmit(event));
 
       // Event listener for form submit
       this.form.addEventListener("submit", (event) => this.handleFormSubmit(event));
 
+      const $radios = this.form?.querySelectorAll('input[type="radio"]');
+      Array.from($radios).forEach(($radio) => {
+        $radio.addEventListener("change", (event) => this.handleFormSubmit(event));
+      });
+
       // Event listener for RSS URL input focus
       this.rssUrlInput.addEventListener("focus", () => {
-        const strippedIframeSrc = this.iframe.src.replace("#items", "").trim();
+        const strippedIframeSrc = this.iframe.src.trim();
         if (this.rssUrlInput.value.trim() !== strippedIframeSrc) {
           this.updateIframeSrc(this.rssUrlInput.value.trim());
         }
@@ -104,8 +110,9 @@ const autoSource = (function () {
         this.rssUrlInput.value = autoSourceUrl;
         this.rssUrlInput.select();
 
-        if (window.location.search !== `?url=${url}`) {
-          window.history.pushState({}, "", `?url=${url}`);
+        const targetSearch = `?url=${url}&strategy=${strategy}`;
+        if (window.location.search !== targetSearch) {
+          window.history.pushState({}, "", targetSearch);
         }
       }
     }
@@ -151,7 +158,7 @@ const autoSource = (function () {
      * @param {string} rssUrlValue - The RSS URL value.
      */
     updateIframeSrc(rssUrlValue) {
-      this.iframe.src = rssUrlValue === "" ? "" : `${rssUrlValue}#items`;
+      this.iframe.src = rssUrlValue === "" ? "about://blank" : `${rssUrlValue}`;
     }
   }
 
@@ -196,7 +203,7 @@ const autoSource = (function () {
      */
     async copyText() {
       try {
-        const textToCopy = this.rssUrlField.value;
+        const textToCopy = this.rssUrlWithAuth;
         await navigator.clipboard.writeText(textToCopy);
       } catch (error) {
         console.error("Failed to copy text to clipboard:", error);
@@ -207,7 +214,7 @@ const autoSource = (function () {
      * Opens the link specified in the text field.
      */
     openLink() {
-      const linkToOpen = this.rssUrlField?.value;
+      const linkToOpen = this.rssUrlWithAuth;
 
       if (typeof linkToOpen === "string" && linkToOpen.trim() !== "") {
         window.open(linkToOpen, "_blank", "noopener,noreferrer");
@@ -218,6 +225,10 @@ const autoSource = (function () {
      * Subscribes to the feed specified in the text field.
      */
     async subscribeToFeed() {
+      window.open(this.rssUrlWithAuth);
+    }
+
+    get rssUrlWithAuth() {
       const feedUrl = this.rssUrlField.value;
       const storedUser = LocalStorageFacade.getOrAsk("username");
       const storedPassword = LocalStorageFacade.getOrAsk("password");
@@ -226,9 +237,7 @@ const autoSource = (function () {
       url.username = storedUser;
       url.password = storedPassword;
 
-      const feedUrlWithAuth = `feed:${url.toString()}`;
-
-      window.open(feedUrlWithAuth);
+      return `feed:${url.toString()}`;
     }
 
     resetCredentials() {

public/styles.css

@@ -19,9 +19,20 @@ html {
 
 body {
   scroll-behavior: smooth;
+  margin: 0 auto;
 }
 
 /* General Styles */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1rem 0;
+}
+
 label {
   font-weight: bold;
   cursor: pointer;

views/auto_source/index.erb

@@ -8,11 +8,8 @@
 
 <section class="auto_source">
   <h1>Auto Source</h1>
-  <p>
-    Automatically sources an RSS feed from a website.
-  </p>
 
-  <form>
+  <form class="auto_source__wrapper">
     <input
       id="url"
       type="url"
@@ -37,21 +34,22 @@
         </label>
       <% end %>
     </fieldset>
-    <input type="submit" value="Generate">
   </form>
 
-  <label>
-    <img src="/feed.svg" height="16" width="16" alt="the orange RSS icon" role="presentation"/>
-    Feed URL
-    <input type="url" id="rss_url" readonly>
-  </label>
+  <section class="auto_source__wrapper">
+    <label>
+      <img src="/feed.svg" height="16" width="16" alt="the orange RSS icon" role="presentation"/>
+      Feed URL
+      <input type="url" id="rss_url" readonly>
+    </label>
 
-  <nav>
-    <button id="resetCredentials" class="muted">Remove credentials</button>
-    <button id="copy">Copy URL</button>
-    <button id="goto">Open</button>
-    <button id="openInFeed">Subscribe</button>
-  </nav>
+    <nav>
+      <button id="resetCredentials" class="muted">Remove credentials</button>
+      <button id="copy">Copy URL</button>
+      <button id="goto">Open</button>
+      <button id="openInFeed">Subscribe</button>
+    </nav>
+  </section>
 
   <iframe loading="lazy"></iframe>
 </section>