[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>

actions/FindfeedAction.php

@@ -0,0 +1,89 @@
+<?php
+
+/**
+ * This action is used by the frontpage form search.
+ * It finds a bridge based off of a user input url.
+ * It uses bridges' detectParameters implementation.
+ */
+class FindfeedAction implements ActionInterface
+{
+    public function execute(array $request)
+    {
+        $targetURL = $request['url'] ?? null;
+        $format = $request['format'] ?? null;
+
+        if (!$targetURL) {
+            return new Response('You must specify a url', 400);
+        }
+        if (!$format) {
+            return new Response('You must specify a format', 400);
+        }
+
+        $bridgeFactory = new BridgeFactory();
+
+        $results = [];
+        foreach ($bridgeFactory->getBridgeClassNames() as $bridgeClassName) {
+            if (!$bridgeFactory->isEnabled($bridgeClassName)) {
+                continue;
+            }
+
+            $bridge = $bridgeFactory->create($bridgeClassName);
+
+            $bridgeParams = $bridge->detectParameters($targetURL);
+
+            if ($bridgeParams === null) {
+                continue;
+            }
+
+            // It's allowed to have no 'context' in a bridge (only a default context without any name)
+            // In this case, the reference to the parameters are found in the first element of the PARAMETERS array
+
+            $context = $bridgeParams['context'] ?? 0;
+
+            $bridgeData = [];
+            // Construct the array of parameters
+            foreach ($bridgeParams as $key => $value) {
+                // 'context' is a special case : it's a bridge parameters, there is no "name" for this parameter
+                if ($key == 'context') {
+                    $bridgeData[$key]['name'] = 'Context';
+                    $bridgeData[$key]['value'] = $value;
+                } else {
+                    $bridgeData[$key]['name'] = $this->getParameterName($bridge, $context, $key);
+                    $bridgeData[$key]['value'] = $value;
+                }
+            }
+
+            $bridgeParams['bridge'] = $bridgeClassName;
+            $bridgeParams['format'] = $format;
+            $content = [
+                'url' => get_home_page_url() . '?action=display&' . http_build_query($bridgeParams),
+                'bridgeParams' => $bridgeParams,
+                'bridgeData' => $bridgeData,
+                'bridgeMeta' => [
+                        'name' => $bridge::NAME,
+                        'description' => $bridge::DESCRIPTION,
+                        'parameters' => $bridge::PARAMETERS,
+                        'icon' => $bridge->getIcon(),
+                    ],
+            ];
+            $results[] = $content;
+        }
+        if ($results === []) {
+            return new Response(Json::encode(['message' => 'No bridge found for given url']), 404, ['content-type' => 'application/json']);
+        }
+        return new Response(Json::encode($results), 200, ['content-type' => 'application/json']);
+    }
+
+    // Get parameter name in the actual context, or in the global parameter
+    private function getParameterName($bridge, $context, $key)
+    {
+        if (isset($bridge::PARAMETERS[$context][$key]['name'])) {
+            $name = $bridge::PARAMETERS[$context][$key]['name'];
+        } else if (isset($bridge::PARAMETERS['global'][$key]['name'])) {
+            $name = $bridge::PARAMETERS['global'][$key]['name'];
+        } else {
+            $name = 'Variable "' . $key . '" (No name provided)';
+        }
+        return $name;
+    }
+}

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;
+}());

static/style.css

@@ -453,3 +453,38 @@ button {
         color: #d8d3cb;
     }
 }
+
+/* find-feed */
+.search-result {
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  padding: 15px;
+  display: flex;
+  position: relative;
+  text-align: left;
+}
+@media (prefers-color-scheme: dark) {
+    .search-result {
+        background-color: #202325;
+    }
+}
+.search-result h2 {
+  color: #288cfc;
+}
+
+.search-result a {
+  text-decoration: none;
+  color: #248afa;
+}
+.search-result .icon {
+  margin: 0 15px 0 0;
+}
+.search-result span {
+  margin-right: 10px;
+}
+.search-result .description {
+  font-size: 110%;
+  margin-right: 0 !important;
+  margin-top: 5px !important;
+}
+/* end find-feed */

templates/frontpage.html.php

@@ -2,6 +2,7 @@
 <script>
     document.addEventListener('DOMContentLoaded', rssbridge_toggle_bridge);
     document.addEventListener('DOMContentLoaded', rssbridge_list_search);
+    document.addEventListener('DOMContentLoaded', rssbridge_feed_finder);
 </script>
 
 <section class="searchbar">
@@ -15,6 +16,14 @@
         onkeyup="rssbridge_list_search()"
         value=""
     >
+    <button
+        type="button"
+	    id="findfeed"
+        name="findfeed"
+    />Find Feed from URL</button>
+    <section id="findfeedresults">
+    </section>
+
 </section>
 
 <?= raw($bridges) ?>