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

1 files changed, 64 insertions, 0 deletions

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');