Ver Fonte

Improve scrolling into filter in sidebar (#8307)

Follow-up of https://github.com/FreshRSS/FreshRSS/pull/8281

todo:
* [x] Include labels (prefix `t_`) too
* [x] Keep sidebar scrollTop when using the nav menu
* [ ] ~~Make this work in the reader view's sidebar too~~ for separate PR
* [x] Prevent whole page from scrolling on `scrollIntoView()` call, just scroll in the sidebar (probably related: https://github.com/FreshRSS/FreshRSS/pull/8306#issuecomment-3647414618)

This TODO will be done in a separate PR since it requires optimizing the sidebar toggle code.
edit: it does work on Chrome already though, but only if `#stream` isn't too large / breaks randomly (Firefox is slower it seems)
Inverle há 3 meses atrás
pai
commit
36118117f0
2 ficheiros alterados com 22 adições e 5 exclusões
  1. 1 1
      app/layout/nav_menu.phtml
  2. 21 4
      p/scripts/main.js

+ 1 - 1
app/layout/nav_menu.phtml

@@ -98,7 +98,7 @@
 					$url_query['c'] = 'configure';
 					$url_query['a'] = 'bookmarkQuery';
 				?>
-				<li class="item<?= $classSeparator ?>"><button class="as-link" form="post-csrf" formaction="<?= Minz_Url::display($url_query) ?>"><?= _i('bookmark-add') ?> <?= _t('index.menu.bookmark_query') ?></button></li>
+				<li class="item<?= $classSeparator ?>"><button class="as-link" form="post-csrf" formaction="<?= Minz_Url::display($url_query) ?>" type="submit"><?= _i('bookmark-add') ?> <?= _t('index.menu.bookmark_query') ?></button></li>
 			</ul>
 			<a class="dropdown-close" href="#close">❌</a>
 		</div>

+ 21 - 4
p/scripts/main.js

@@ -1028,17 +1028,18 @@ function init_column_categories() {
 
 	const sidebar_scrollTop = sessionStorage.getItem('FreshRSS_sidebar_scrollTop');
 	if (sidebar_scrollTop) {
-		// Restore sidebar scroll position (navigated from sidebar)
+		// Restore sidebar scroll position (navigated from sidebar or nav menu)
 		document.querySelector('ul#sidebar').scrollTop = +sidebar_scrollTop;
 		sessionStorage.removeItem('FreshRSS_sidebar_scrollTop');
 	} else {
-		// Scroll into filtered feed/category on sidebar (navigated from anywhere)
+		// Scroll into filtered feed/category/label on sidebar (navigated from anywhere)
 		const params = new URLSearchParams(location.search);
 		const get = params.get('get');
-		if (params.has('get') && (get.startsWith('f_') || get.startsWith('c_'))) {
+		if (params.has('get') && (get.startsWith('f_') || get.startsWith('c_') || get.startsWith('t_'))) {
 			const selectedEl = document.getElementById(get);
 			if (selectedEl) {
-				selectedEl.scrollIntoView({ block: get.startsWith('f_') ? 'center' : 'start' });
+				selectedEl.scrollIntoView({ block: !get.startsWith('c_') ? 'center' : 'start' });
+				document.documentElement.scrollTop = 0; // Prevent unwanted scroll of page
 			}
 		}
 	}
@@ -2251,6 +2252,7 @@ function init_normal() {
 	init_actualize();
 	faviconNbUnread();
 
+	// Keep exact sidebar scroll state for specific navigations
 	const sidebar = document.querySelector('ul#sidebar');
 	if (sidebar) {
 		sidebar.addEventListener('click', (e) => {
@@ -2265,6 +2267,21 @@ function init_normal() {
 			}
 		});
 	}
+	const nav_menu = document.querySelector('nav.nav_menu');
+	if (nav_menu) {
+		nav_menu.addEventListener('click', (e) => {
+			const target = e.target.closest('a.btn:not(#actualize):not(.dropdown-toggle), button[type="submit"]');
+			if (target) {
+				sessionStorage.setItem('FreshRSS_sidebar_scrollTop', sidebar.scrollTop);
+			}
+		});
+	}
+	const new_article = document.querySelector('div#new-article');
+	if (new_article) {
+		new_article.addEventListener('click', () => {
+			sessionStorage.setItem('FreshRSS_sidebar_scrollTop', sidebar.scrollTop);
+		});
+	}
 
 	document.addEventListener("visibilitychange", () => {
 		if (document.visibilityState === "hidden") {