소스 검색

Fix slider behavior when using navigate back button (#8496)

Closes https://github.com/FreshRSS/FreshRSS/issues/8488

* Ensure leave confirmation is shown by preventing navigation using the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API)
* Prevent scroll lock by removing it on `hashchange` instead of `onclick` on the close buttons
Inverle 1 개월 전
부모
커밋
6b5304b825
2개의 변경된 파일27개의 추가작업 그리고 4개의 파일을 삭제
  1. 12 2
      p/scripts/extra.js
  2. 15 2
      p/scripts/main.js

+ 12 - 2
p/scripts/extra.js

@@ -362,6 +362,18 @@ function open_slider_listener(ev) {
 					f.insertAdjacentHTML('afterbegin', '<input type="hidden" name="slider" value="1" />');
 				});
 				context.ajax_loading = false;
+
+				window.addEventListener('hashchange', () => {
+					if (location.hash.substr(1) === 'slider') {
+						// Triggers when slider is closed
+						window.addEventListener('hashchange', () => {
+							location.hash = 'close';
+							slider.querySelectorAll('form').forEach(function (f) { f.reset(); });
+							document.documentElement.classList.remove('slider-active');
+						}, { once: true });
+					}
+				}, { once: true });
+
 				slider.dispatchEvent(freshrssSliderLoadEvent);
 			};
 			req.send();
@@ -384,8 +396,6 @@ function init_slider(slider) {
 function close_slider_listener(ev) {
 	const slider = document.getElementById('slider');
 	if (data_leave_validation(slider) || confirm(context.i18n.confirm_exit_slider)) {
-		slider.querySelectorAll('form').forEach(function (f) { f.reset(); });
-		document.documentElement.classList.remove('slider-active');
 		return true;
 	}
 	if (ev) {

+ 15 - 2
p/scripts/main.js

@@ -1125,8 +1125,8 @@ function init_column_categories() {
 				// Wait for dropdown to be closed so it can be removed
 				// Dropdown visibility is based on CSS :target
 				window.addEventListener('hashchange', () => {
-					dropdownMenu.nextElementSibling.remove(); // dropdown close
-					dropdownMenu.remove();
+					dropdownMenu?.nextElementSibling?.remove(); // dropdown close
+					dropdownMenu?.remove();
 				}, { once: true });
 			}, { once: true });
 
@@ -2359,12 +2359,25 @@ function init_main_beforeDOM() {
 	}
 }
 
+function init_navigation_handler() {
+	navigation.addEventListener('navigate', (e) => {
+		if (!(e.canIntercept && e.hashChange && e.navigationType === 'traverse')) {
+			return;
+		}
+
+		if (location.hash.substr(1) === 'slider' && !close_slider_listener()) {
+			e.preventDefault();
+		}
+	});
+}
+
 function init_main_afterDOM() {
 	removeFirstLoadSpinner();
 	init_notifications();
 	init_csp_alert();
 	init_confirm_action();
 	init_nav_menu();
+	init_navigation_handler();
 	const stream = document.getElementById('stream');
 	if (stream) {
 		init_load_more(stream);