[Core] New feature : User Interface to "Detect" Feed from an URL (#3436)

* [Core] New feature : User Interface to "Detect" Feed from an URL Detect Action has been expanded to support returning a Feed in a JSON format instead of a Redirect. Existing usage of the Detect action will keep working as usual. Frontpage template has now a section to display the Feed detection result, and a button to start the Feed Detection. A new JS file contains the necessary JS (Ajax and Event management) to fill the Feed Detection section. * Coding policy fixes * [Core] New feature : User Interface to "Detect" Feed from an URL - Switch from old school XMLHttpRequest to fetch - Enhance UX of search results - Revert to it's original content - Switch to a new Action : FindfeedAction.php - Switch to template literals instead of string concatenation - FindFeed action could retrun multiple feeds - Results are sent with an absolute URL - Switch to Json::encode() helper function * [Core] New feature : User Interface to "Detect" Feed from an URL - Move specific JS code to rss-bridge.js - Change HTML tag for the button to have a consistant style with th rest of the page * [Core] New feature : User Interface to "Detect" Feed from an URL - If no context is sent, assume there is only one unnamed context - Find parameter name in global and currect context * fix * remove typo --------- Co-authored-by: Dag <me@dvikan.no>
2025-07-23 20:24:56 +02:00 · 2023-08-22 20:44:36 +02:00 · 2023-08-22 20:44:36 +02:00 · 7591b10219
commit 7591b10219
parent 54045be951
4 changed files with 212 additions and 0 deletions
--- a/static/rss-bridge.js
+++ b/static/rss-bridge.js
@ -47,3 +47,82 @@ function rssbridge_toggle_bridge(){
        bridge.getElementsByClassName('showmore-box')[0].checked = true;
    }
 }
+
+var rssbridge_feed_finder = (function() {
+    /*
+     * Code for "Find feed by URL" feature
+     */
+
+    // Start the Feed search
+    async function rssbridge_feed_search(event) {
+        const input = document.getElementById('searchfield');
+        let content = input.value;
+        if (content) {
+            const findfeedresults = document.getElementById('findfeedresults');
+            findfeedresults.innerHTML = 'Searching for matching feeds ...';
+            let baseurl = window.location.protocol + window.location.pathname;
+            let url = baseurl + '?action=findfeed&format=Html&url=' + content;
+            const response = await fetch(url);
+            if (response.ok) {
+                const data = await response.json();
+                rss_bridge_feed_display_found_feed(data);
+            } else {
+                rss_bridge_feed_display_feed_search_fail();
+            }
+        } else {
+            rss_bridge_feed_display_find_feed_empty();
+        }
+    }
+
+    // Display the found feeds
+    function rss_bridge_feed_display_found_feed(obj) {
+        const findfeedresults = document.getElementById('findfeedresults');
+
+        let content = 'Found Feed(s) :';
+
+        // Let's go throug every Feed found
+        for (const element of obj) {
+            content += `<div class="search-result">
+                        <div class="icon">
+                            <img src="${element.bridgeMeta.icon}" width="60" />
+                        </div>
+                        <div class="content">
+                        <h2><a href="${element.url}">${element.bridgeMeta.name}</a></h2>
+                        <p>
+                        <span class="description"><a href="${element.url}">${element.bridgeMeta.description}</a></span>
+                        </p>
+                        <div>
+                            <ul>`;
+
+            // Now display every Feed parameter
+            for (const param in element.bridgeData) {
+                content += `<li>${element.bridgeData[param].name} : ${element.bridgeData[param].value}</li>`;
+            }
+            content += `</div>
+              </div>
+            </div>`;
+        }
+        content += '<p><div class="alert alert-info" role="alert">This feed may be only one of the possible feeds. You may find more feeds using one of the bridges with different parameters, for example.</div></p>';
+        findfeedresults.innerHTML = content;
+    }
+
+    // Display an error if no feed were found
+    function rss_bridge_feed_display_feed_search_fail() {
+        const findfeedresults = document.getElementById('findfeedresults');
+        findfeedresults.innerHTML = 'No Feed found !<div class="alert alert-info" role="alert">Not every bridge supports feed detection. You can check below within the bridge parameters to create a feed.</div>';
+    }
+
+    // Empty the Found Feed section
+    function rss_bridge_feed_display_find_feed_empty() {
+        const findfeedresults = document.getElementById('findfeedresults');
+        findfeedresults.innerHTML = '';
+    }
+
+    // Add Event to 'Detect Feed" button
+    var rssbridge_feed_finder = function() {
+        const button = document.getElementById('findfeed');
+        button.addEventListener("click", rssbridge_feed_search);
+        button.addEventListener("keyup", rssbridge_feed_search);
+    };
+    return rssbridge_feed_finder;
+}());