Detect JSON feeds from .json URLs (#9058)

* Detect JSON feeds from .json URLs

Closes #7574. Detects .json feed URLs while adding a subscription and selects the JSON Feed source type automatically. 

* Auto open details

* Broaden JSON feed URL detection

---------

Co-authored-by: Gerard Alvear <gerard.alvear@logiqd.me>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

app/views/subscription/add.phtml

@@ -54,7 +54,7 @@
 						<option value="<?= FreshRSS_Feed::KIND_RSS ?>" selected="selected"><?= _t('sub.feed.kind.rss') ?></option>
 						<option value="<?= FreshRSS_Feed::KIND_HTML_XPATH ?>" data-show="html_xpath"><?= _t('sub.feed.kind.html_xpath') ?></option>
 						<option value="<?= FreshRSS_Feed::KIND_XML_XPATH ?>" data-show="html_xpath"><?= _t('sub.feed.kind.xml_xpath') ?></option>
-						<option value="<?= FreshRSS_Feed::KIND_JSONFEED ?>"><?= _t('sub.feed.kind.jsonfeed') ?></option>
+						<option value="<?= FreshRSS_Feed::KIND_JSONFEED ?>" data-json-feed="1"><?= _t('sub.feed.kind.jsonfeed') ?></option>
 						<option value="<?= FreshRSS_Feed::KIND_JSON_DOTNOTATION ?>" data-show="json_dotnotation"><?= _t('sub.feed.kind.json_dotnotation') ?></option>
 						<option value="<?= FreshRSS_Feed::KIND_HTML_XPATH_JSON_DOTNOTATION ?>" data-show="json_dotnotation xPathToJsonGroup"><?= _t('sub.feed.kind.html_json') ?></option>
 					</select>

p/scripts/feed.js

@@ -110,6 +110,28 @@ function init_select_show(parent) {
 	}
 }
 
+function init_json_feed_detection(parent) {
+	const url = parent.querySelector('#url_rss');
+	const kind = parent.querySelector('#feed_kind');
+	if (!url || !kind) {
+		return;
+	}
+
+	const jsonKind = kind.querySelector('option[data-json-feed="1"]');
+	const details = kind.closest('details');
+	const detect = () => {
+		if (kind.value === kind.options[0]?.value && jsonKind && /(?:\b|_)json(?:\b|_)/i.test(url.value)) {
+			kind.value = jsonKind.value;
+			kind.dispatchEvent(new Event('change', { bubbles: true }));
+			if (details) {
+				details.open = true;
+			}
+		}
+	};
+	url.addEventListener('input', detect);
+	detect();
+}
+
 /** Automatically validate XPath textarea fields */
 function init_valid_xpath(parent) {
 	const listener = (textarea) => {
@@ -157,6 +179,7 @@ function init_feed_afterDOM() {
 		init_popup();
 		init_popup_preview_selector();
 		init_select_show(document.body);
+		init_json_feed_detection(document.body);
 		init_disable_elements_on_update(document.body);
 		init_password_observers(document.body);
 		init_valid_xpath(document.body);