Improve: manage feed in view within a slider (#4226)

* it works

* small improvements

* Update slider.js

* fixed JS syntax

* slider.js included in main.js

* fix syntax

* delete including of slider.js

* Update extra.js

2 files changed, 70 insertions, 44 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index d89342720..a96e471b6 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -1,6 +1,6 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
 'use strict';
-/* globals context, openNotification, openPopupWithSource, xmlHttpRequestJson */
+/* globals openNotification, openPopupWithSource, xmlHttpRequestJson */
 
 function fix_popup_preview_selector() {
 	const link = document.getElementById('popup-preview-selector');
@@ -165,50 +165,9 @@ function init_select_observers() {
 	});
 }
 
-function init_slider_observers() {
-	const slider = document.getElementById('slider');
-	const closer = document.getElementById('close-slider');
-	if (!slider) {
-		return;
-	}
-
-	document.querySelector('.post').onclick = function (ev) {
-		const a = ev.target.closest('.open-slider');
-		if (a) {
-			if (!context.ajax_loading) {
-				context.ajax_loading = true;
-
-				const req = new XMLHttpRequest();
-				req.open('GET', a.href + '&ajax=1', true);
-				req.responseType = 'document';
-				req.onload = function (e) {
-					slider.innerHTML = this.response.body.innerHTML;
-					slider.classList.add('active');
-					closer.classList.add('active');
-					context.ajax_loading = false;
-					fix_popup_preview_selector();
-					init_extra();
-				};
-				req.send();
-				return false;
-			}
-		}
-	};
-
-	closer.onclick = function (ev) {
-		if (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 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') {
@@ -291,11 +250,14 @@ function init_extra() {
 	init_password_observers();
 	init_url_observers();
 	init_select_observers();
-	init_slider_observers();
 	init_configuration_alert();
 	fix_popup_preview_selector();
 	init_select_show();
 	init_valid_xpath();
+
+	if (window.console) {
+		console.log('FreshRSS extra init done.');
+	}
 }
 
 if (document.readyState && document.readyState !== 'loading') {
diff --git a/p/scripts/main.js b/p/scripts/main.js
index be1f7c924..6e9f761cc 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1389,6 +1389,69 @@ 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;
@@ -1753,6 +1816,7 @@ function init_beforeDOM() {
 function init_afterDOM() {
 	removeFirstLoadSpinner();
 	init_notifications();
+	init_slider_observers();
 	init_popup();
 	init_confirm_action();
 	const stream = document.getElementById('stream');