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>

1 files changed, 98 insertions, 78 deletions

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