fix preview (#4291)

* fix

* Update extra.js

* reorga the scripts

* Update extra.js

* Several fixes
https://github.com/FreshRSS/FreshRSS/pull/4291#issuecomment-1125472321

* More fixes

* Cleaning

* fix pr 4291

* Reorganise some script functions

* Remove unused popup-txt
And associated function openPopupWithMessage

* Fix archiving categories
https://github.com/FreshRSS/FreshRSS/pull/4291#issuecomment-1126924602

* Fix stats
https://github.com/FreshRSS/FreshRSS/pull/4291#issuecomment-1126983134

* Fix direct subscription
E.g. http://localhost/i/?c=subscription&id=735

* Fix subscription add
https://github.com/FreshRSS/FreshRSS/pull/4291#issuecomment-1126991621

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

5 files changed, 273 insertions, 243 deletions

diff --git a/p/scripts/category.js b/p/scripts/category.js
index d83b3b22b..1b1f2f192 100644
--- a/p/scripts/category.js
+++ b/p/scripts/category.js
@@ -154,35 +154,11 @@ function init_draggable() {
 	};
 }
 
-function archiving() {
-	const slider = document.getElementById('slider');
-	slider.addEventListener('change', function (e) {
-		if (e.target.id === 'use_default_purge_options') {
-			slider.querySelectorAll('.archiving').forEach(function (element) {
-				element.hidden = e.target.checked;
-				if (!e.target.checked) element.style.visibility = 'visible'; 	// Help for Edge 44
-			});
-		}
-	});
-	slider.addEventListener('click', function (e) {
-		if (e.target.closest('button[type=reset]')) {
-			const archiving = document.getElementById('use_default_purge_options');
-			if (archiving) {
-				slider.querySelectorAll('.archiving').forEach(function (element) {
-					element.hidden = archiving.getAttribute('data-leave-validation') == 1;
-				});
-			}
-		}
-	});
-}
-
 if (document.readyState && document.readyState !== 'loading') {
 	init_draggable();
-	archiving();
 } else if (document.addEventListener) {
 	document.addEventListener('DOMContentLoaded', function () {
 		init_draggable();
-		archiving();
 	}, false);
 }
 // @license-end
diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index d11b6c505..e20fe821c 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -1,23 +1,6 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
 'use strict';
-/* globals openNotification, openPopupWithSource, xmlHttpRequestJson */
-
-function fix_popup_preview_selector() {
-	const link = document.getElementById('popup-preview-selector');
-
-	if (!link) {
-		return;
-	}
-
-	link.addEventListener('click', function (ev) {
-		const selector_entries = document.getElementById('path_entries').value;
-		const href = link.href.replace('selector-token', encodeURIComponent(selector_entries));
-
-		openPopupWithSource(href);
-
-		ev.preventDefault();
-	});
-}
+/* globals context, openNotification, xmlHttpRequestJson */
 
 // <crypto form (Web login)>
 function poormanSalt() {	// If crypto.getRandomValues is not available
@@ -98,6 +81,7 @@ function init_crypto_form() {
 }
 // </crypto form (Web login)>
 
+// <show password>
 let timeoutHide;
 
 function showPW_this(ev) {
@@ -129,11 +113,83 @@ function hidePW(id_passwordField) {
 	return false;
 }
 
-function init_password_observers() {
-	document.querySelectorAll('.toggle-password').forEach(function (btn) {
+function init_password_observers(parent) {
+	parent.querySelectorAll('.toggle-password').forEach(function (btn) {
 		btn.addEventListener('click', showPW_this);
 	});
 }
+// </show password>
+
+function init_archiving(parent) {
+	parent.addEventListener('change', function (e) {
+		if (e.target.id === 'use_default_purge_options') {
+			parent.querySelectorAll('.archiving').forEach(function (element) {
+				element.hidden = e.target.checked;
+				if (!e.target.checked) element.style.visibility = 'visible'; 	// Help for Edge 44
+			});
+		}
+	});
+	parent.addEventListener('click', function (e) {
+		if (e.target.closest('button[type=reset]')) {
+			const archiving = document.getElementById('use_default_purge_options');
+			if (archiving) {
+				parent.querySelectorAll('.archiving').forEach(function (element) {
+					element.hidden = archiving.getAttribute('data-leave-validation') == 1;
+				});
+			}
+		}
+	});
+}
+
+// <slider>
+const freshrssSliderLoadEvent = new Event('freshrss:slider-load');
+
+function open_slider_listener(ev) {
+	const a = ev.target.closest('.open-slider');
+	if (a) {
+		if (!context.ajax_loading) {
+			location.href = '#'; // close menu/dropdown
+			context.ajax_loading = true;
+
+			const req = new XMLHttpRequest();
+			req.open('GET', a.href + '&ajax=1', true);
+			req.responseType = 'document';
+			req.onload = function (e) {
+				const slider = document.getElementById('slider');
+				const closer = document.getElementById('close-slider');
+				slider.scrollTop = 0;
+				slider.innerHTML = this.response.body.innerHTML;
+				slider.classList.add('active');
+				closer.classList.add('active');
+				context.ajax_loading = false;
+				slider.dispatchEvent(freshrssSliderLoadEvent);
+			};
+			req.send();
+			return false;
+		}
+	}
+}
+
+function init_slider(slider) {
+	window.onclick = open_slider_listener;
+
+	const closer = document.getElementById('close-slider');
+	closer.addEventListener('click', function (ev) {
+		if (data_leave_validation(slider) || confirm(context.i18n.confirmation_default)) {
+			slider.querySelectorAll('form').forEach(function (f) { f.reset(); });
+			closer.classList.remove('active');
+			slider.classList.remove('active');
+			return true;
+		} else {
+			return false;
+		}
+	});
+
+	if (slider.children.length > 0) {
+		slider.dispatchEvent(freshrssSliderLoadEvent);
+	}
+}
+// </slider>
 
 // overwrites the href attribute from the url input
 function updateHref(ev) {
@@ -177,8 +233,8 @@ function init_select_observers() {
 	});
 }
 
-function data_leave_validation() {
-	const ds = document.querySelectorAll('[data-leave-validation]');
+function data_leave_validation(parent) {
+	const ds = parent.querySelectorAll('[data-leave-validation]');
 
 	for (let i = ds.length - 1; i >= 0; i--) {
 		const input = ds[i];
@@ -201,71 +257,35 @@ function init_configuration_alert() {
 		if (window.hasSubmit) {
 			return;
 		}
-		if (!data_leave_validation()) {
+		if (!data_leave_validation(document.body)) {
 			return false;
 		}
 	};
 }
 
-/**
- * Allow a <select class="select-show"> to hide/show elements defined by <option data-show="elem-id"></option>
- */
-function init_select_show() {
-	const listener = (select) => {
-		const options = select.querySelectorAll('option[data-show]');
-		for (const option of options) {
-			const elem = document.getElementById(option.dataset.show);
-			if (elem) {
-				elem.style.display = option.selected ? 'block' : 'none';
-			}
-		}
-	};
-
-	const selects = document.querySelectorAll('select.select-show');
-	for (const select of selects) {
-		select.addEventListener('change', (e) => listener(e.target));
-		listener(select);
-	}
-}
-
-/**
- * Automatically validate XPath textarea fields
- */
-function init_valid_xpath() {
-	const listener = (textarea) => {
-		const evaluator = new XPathEvaluator();
-		try {
-			if (textarea.value === '' || evaluator.createExpression(textarea.value) != null) {
-				textarea.setCustomValidity('');
-			}
-		} catch (ex) {
-			textarea.setCustomValidity(ex);
-		}
-	};
-
-	const textareas = document.querySelectorAll('textarea.valid-xpath');
-	for (const textarea of textareas) {
-		textarea.addEventListener('change', (e) => listener(e.target));
-		listener(textarea);
-	}
-}
-
-function init_extra() {
+function init_extra_afterDOM() {
 	if (!window.context) {
 		if (window.console) {
 			console.log('FreshRSS extra waiting for JS…');
 		}
-		window.setTimeout(init_extra, 50);	// Wait for all js to be loaded
+		setTimeout(init_extra_afterDOM, 50);
 		return;
 	}
-	init_crypto_form();
-	init_password_observers();
-	init_url_observers();
-	init_select_observers();
-	init_configuration_alert();
-	fix_popup_preview_selector();
-	init_select_show();
-	init_valid_xpath();
+	if (!['normal', 'global', 'reader'].includes(context.current_view)) {
+		init_crypto_form();
+		init_password_observers(document.body);
+		init_url_observers();
+		init_select_observers();
+		init_configuration_alert();
+
+		const slider = document.getElementById('slider');
+		if (slider) {
+			init_slider(slider);
+			init_archiving(slider);
+		} else {
+			init_archiving(document.body);
+		}
+	}
 
 	if (window.console) {
 		console.log('FreshRSS extra init done.');
@@ -273,13 +293,13 @@ function init_extra() {
 }
 
 if (document.readyState && document.readyState !== 'loading') {
-	init_extra();
+	init_extra_afterDOM();
 } else {
 	document.addEventListener('DOMContentLoaded', function () {
 		if (window.console) {
 			console.log('FreshRSS extra waiting for DOMContentLoaded…');
 		}
-		init_extra();
+		init_extra_afterDOM();
 	}, false);
 }
 // @license-end
diff --git a/p/scripts/feed.js b/p/scripts/feed.js
new file mode 100644
index 000000000..b206b79d4
--- /dev/null
+++ b/p/scripts/feed.js
@@ -0,0 +1,153 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
+'use strict';
+/* globals init_archiving, init_password_observers, init_slider */
+
+// <popup>
+let popup = null;
+let popup_iframe_container = null;
+let popup_iframe = null;
+let popup_working = false;
+
+function openPopupWithSource(source) {
+	if (popup_working === true) {
+		return false;
+	}
+	popup_working = true;
+	popup_iframe.src = source;
+	popup_iframe_container.style.display = 'table-row';
+	popup.style.display = 'block';
+}
+
+function closePopup() {
+	popup.style.display = 'none';
+	popup_iframe_container.style.display = 'none';
+	popup_iframe.src = 'about:blank';
+	popup_working = false;
+}
+
+function init_popup() {
+	// Fetch elements.
+	popup = document.getElementById('popup');
+	if (popup) {
+		popup_iframe_container = document.getElementById('popup-iframe-container');
+		popup_iframe = document.getElementById('popup-iframe');
+
+		// Configure close button.
+		document.getElementById('popup-close').addEventListener('click', function (ev) {
+			closePopup();
+		});
+
+		// Configure close-on-click.
+		window.addEventListener('click', function (ev) {
+			if (ev.target == popup) {
+				closePopup();
+			}
+		});
+	}
+}
+// </popup>
+
+function init_popup_preview_selector() {
+	const link = document.getElementById('popup-preview-selector');
+
+	if (!link) {
+		return;
+	}
+
+	link.addEventListener('click', function (ev) {
+		const selector_entries = document.getElementById('path_entries').value;
+		const href = link.href.replace('selector-token', encodeURIComponent(selector_entries));
+
+		openPopupWithSource(href);
+
+		ev.preventDefault();
+	});
+}
+
+/**
+ * Allow a <select class="select-show"> to hide/show elements defined by <option data-show="elem-id"></option>
+ */
+function init_select_show(parent) {
+	const listener = (select) => {
+		const options = select.querySelectorAll('option[data-show]');
+		for (const option of options) {
+			const elem = document.getElementById(option.dataset.show);
+			if (elem) {
+				elem.style.display = option.selected ? 'block' : 'none';
+			}
+		}
+	};
+
+	const selects = parent.querySelectorAll('select.select-show');
+	for (const select of selects) {
+		select.addEventListener('change', (e) => listener(e.target));
+		listener(select);
+	}
+}
+
+/** Automatically validate XPath textarea fields */
+function init_valid_xpath(parent) {
+	const listener = (textarea) => {
+		const evaluator = new XPathEvaluator();
+		try {
+			if (textarea.value === '' || evaluator.createExpression(textarea.value) != null) {
+				textarea.setCustomValidity('');
+			}
+		} catch (ex) {
+			textarea.setCustomValidity(ex);
+		}
+	};
+
+	const textareas = parent.querySelectorAll('textarea.valid-xpath');
+	for (const textarea of textareas) {
+		textarea.addEventListener('change', (e) => listener(e.target));
+		listener(textarea);
+	}
+}
+
+function init_feed_afterDOM() {
+	if (!window.init_slider) {
+		if (window.console) {
+			console.log('FreshRSS feed waiting for JS…');
+		}
+		setTimeout(init_feed_afterDOM, 50);
+		return;
+	}
+
+	const slider = document.getElementById('slider');
+	if (slider) {
+		slider.addEventListener('freshrss:slider-load', function (e) {
+			init_popup();
+			init_popup_preview_selector();
+			init_select_show(slider);
+			init_password_observers(slider);
+			init_valid_xpath(slider);
+		});
+		init_slider(slider);
+		init_archiving(slider);
+	} else {
+		init_archiving(document.body);
+		init_popup();
+		init_popup_preview_selector();
+		init_select_show(document.body);
+		init_password_observers(document.body);
+		init_valid_xpath(document.body);
+	}
+
+	if (window.console) {
+		console.log('FreshRSS feed init done.');
+	}
+}
+
+if (document.readyState && document.readyState !== 'loading') {
+	init_feed_afterDOM();
+} else {
+	document.addEventListener('DOMContentLoaded', function () {
+		if (window.console) {
+			console.log('FreshRSS feed waiting for DOMContentLoaded…');
+		}
+		init_feed_afterDOM();
+	}, false);
+}
+
+// @license-end
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 95822e412..03a04c989 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -767,6 +767,17 @@ function openCategory(category_id) {
 	img.alt = '🔼';
 }
 
+function loadJs(name) {
+	if (!document.getElementById(name)) {
+		const script = document.createElement('script');
+		script.setAttribute('id', name);
+		script.setAttribute('src', '../scripts/' + name + '?' + context.mtime[name]);
+		script.setAttribute('defer', 'defer');
+		script.setAttribute('async', 'async');
+		document.head.appendChild(script);
+	}
+}
+
 function init_column_categories() {
 	if (context.current_view !== 'normal' && context.current_view !== 'reader') {
 		return;
@@ -821,6 +832,8 @@ function init_column_categories() {
 
 		a = ev.target.closest('.tree-folder-items > .feed .dropdown-toggle');
 		if (a) {
+			loadJs('extra.js');
+			loadJs('feed.js');
 			const itemId = a.closest('.item').id;
 			const templateId = itemId.substring(0, 2) === 't_' ? 'tag_config_template' : 'feed_config_template';
 			const id = itemId.substr(2);
@@ -1436,139 +1449,6 @@ function init_notifications() {
 }
 // </notification>
 
-// <slider>
-function init_slider_observers() {
-	const slider = document.getElementById('slider');
-	const closer = document.getElementById('close-slider');
-	if (!slider) {
-		return;
-	}
-
-	window.onclick = open_slider_listener;
-
-	closer.addEventListener('click', function (ev) {
-		if (slider_data_leave_validation() || confirm(context.i18n.confirmation_default)) {
-			slider.querySelectorAll('form').forEach(function (f) { f.reset(); });
-			closer.classList.remove('active');
-			slider.classList.remove('active');
-			return true;
-		} else {
-			return false;
-		}
-	});
-}
-
-function open_slider_listener(ev) {
-	const a = ev.target.closest('.open-slider');
-	if (a) {
-		if (!context.ajax_loading) {
-			location.href = '#'; // close menu/dropdown
-			context.ajax_loading = true;
-
-			const req = new XMLHttpRequest();
-			req.open('GET', a.href + '&ajax=1', true);
-			req.responseType = 'document';
-			req.onload = function (e) {
-				const slider = document.getElementById('slider');
-				const closer = document.getElementById('close-slider');
-				slider.innerHTML = this.response.body.innerHTML;
-				slider.classList.add('active');
-				closer.classList.add('active');
-				context.ajax_loading = false;
-			};
-			req.send();
-			return false;
-		}
-	}
-}
-
-function slider_data_leave_validation() {
-	const ds = document.querySelectorAll('[data-leave-validation]');
-
-	for (let i = ds.length - 1; i >= 0; i--) {
-		const input = ds[i];
-		if (input.type === 'checkbox' || input.type === 'radio') {
-			if (input.checked != input.getAttribute('data-leave-validation')) {
-				return false;
-			}
-		} else if (input.value != input.getAttribute('data-leave-validation')) {
-			return false;
-		}
-	}
-	return true;
-}
-// </slider>
-
-// <popup>
-let popup = null;
-let popup_iframe_container = null;
-let popup_iframe = null;
-let popup_txt = null;
-let popup_working = false;
-
-/* eslint-disable no-unused-vars */
-// TODO: Re-enable no-unused-vars
-function openPopupWithMessage(msg) {
-	if (popup_working === true) {
-		return false;
-	}
-
-	popup_working = true;
-
-	popup_txt.innerHTML = msg;
-
-	popup_txt.style.display = 'table-row';
-	popup.style.display = 'block';
-}
-
-function openPopupWithSource(source) {
-	if (popup_working === true) {
-		return false;
-	}
-
-	popup_working = true;
-
-	popup_iframe.src = source;
-
-	popup_iframe_container.style.display = 'table-row';
-	popup.style.display = 'block';
-}
-/* eslint-enable no-unused-vars */
-
-function closePopup() {
-	popup.style.display = 'none';
-	popup_iframe_container.style.display = 'none';
-	popup_txt.style.display = 'none';
-
-	popup_iframe.src = 'about:blank';
-
-	popup_working = false;
-}
-
-function init_popup() {
-	// Fetch elements.
-	popup = document.getElementById('popup');
-	if (popup) {
-		popup_iframe_container = document.getElementById('popup-iframe-container');
-		popup_iframe = document.getElementById('popup-iframe');
-
-		popup_txt = document.getElementById('popup-txt');
-
-		// Configure close button.
-		document.getElementById('popup-close').addEventListener('click', function (ev) {
-			closePopup();
-		});
-
-		// Configure close-on-click.
-		window.addEventListener('click', function (ev) {
-			if (ev.target == popup) {
-				closePopup();
-			}
-		});
-	}
-}
-// </popup>
-
 // <notifs html5>
 let notifs_html5_permission = 'denied';
 
@@ -1853,18 +1733,16 @@ function init_normal() {
 	};
 }
 
-function init_beforeDOM() {
+function init_main_beforeDOM() {
 	document.scrollingElement.scrollTop = 0;
 	if (['normal', 'reader', 'global'].indexOf(context.current_view) >= 0) {
 		init_normal();
 	}
 }
 
-function init_afterDOM() {
+function init_main_afterDOM() {
 	removeFirstLoadSpinner();
 	init_notifications();
-	init_slider_observers();
-	init_popup();
 	init_confirm_action();
 	const stream = document.getElementById('stream');
 	if (stream) {
@@ -1881,14 +1759,14 @@ function init_afterDOM() {
 	}
 }
 
-init_beforeDOM();	// Can be called before DOM is fully loaded
+init_main_beforeDOM();	// Can be called before DOM is fully loaded
 
 if (document.readyState && document.readyState !== 'loading') {
-	init_afterDOM();
+	init_main_afterDOM();
 } else {
 	if (window.console) {
 		console.log('FreshRSS waiting for DOMContentLoaded…');
 	}
-	document.addEventListener('DOMContentLoaded', init_afterDOM, false);
+	document.addEventListener('DOMContentLoaded', init_main_afterDOM, false);
 }
 // @license-end
diff --git a/p/scripts/preview.js b/p/scripts/preview.js
index 48675d42c..e27645f23 100644
--- a/p/scripts/preview.js
+++ b/p/scripts/preview.js
@@ -18,6 +18,9 @@ function update_ui() {
 
 function init_afterDOM() {
 	rendered_node = document.getElementById('freshrss_rendered');
+	if (!rendered_node) {
+		return;
+	}
 	rendered_view = document.getElementById('freshrss_rendered_view');
 
 	raw_node = document.getElementById('freshrss_raw');
@@ -32,7 +35,7 @@ if (document.readyState && document.readyState !== 'loading') {
 } else {
 	document.addEventListener('DOMContentLoaded', function () {
 		if (window.console) {
-			console.log('FreshRSS waiting for DOMContentLoaded…');
+			console.log('FreshRSS preview waiting for DOMContentLoaded…');
 		}
 		init_afterDOM();
 	}, false);