JavaScript fixes + new navigation loop behaviour (#2255)

* Fixed user configuration 404
https://github.com/FreshRSS/FreshRSS/pull/2234#issuecomment-466561555
* Fixed "SPACE" shortcut bug
https://github.com/FreshRSS/FreshRSS/pull/2234#issuecomment-466626412
* Use next feed / previous feed when reaching last / first article
instead of looping
* Jump to next / previous category when reaching last / first feed
instead of looping

3 files changed, 52 insertions, 22 deletions

diff --git a/app/views/user/manage.phtml b/app/views/user/manage.phtml
index 9d457f7a5..d0e5928ef 100644
--- a/app/views/user/manage.phtml
+++ b/app/views/user/manage.phtml
@@ -53,7 +53,7 @@
 		<div class="form-group">
 			<label class="group-name" for="current_user"><?php echo _t('admin.user.selected'); ?></label>
 			<div class="group-controls">
-				<select id="current_user" class="select-change" name="username">
+				<select id="current_user" name="username">
 					<option selected="selected"> </option>
 					<?php foreach (listUsers() as $username) { ?>
 					<option value="<?php echo $username; ?>"><?php echo $username; ?></option>
diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 7a0ef0477..c0d0c89e1 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -142,8 +142,14 @@ function init_password_observers() {
 function init_select_observers() {
 	document.querySelectorAll('.select-change').forEach(function (s) {
 			s.onchange = function (ev) {
-					const opt = s.options[s.selectedIndex];
-					location.href = opt.getAttribute('data-url');
+					const opt = s.options[s.selectedIndex],
+						url = opt.getAttribute('data-url');
+					if (url) {
+						s.form.querySelectorAll('[type=submit]').forEach(function (b) {
+								b.disabled = true;
+							});
+						location.href = url;
+					}
 				};
 		});
 }
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 345cbe749..90a41d767 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -374,41 +374,65 @@ function toggleContent(new_active, old_active, skipping) {
 }
 
 function prev_entry(skipping) {
-	const old_active = document.querySelector('.flux.current'),
-		new_active = old_active ? old_active.previousElementSibling : document.querySelector('.flux');
+	const old_active = document.querySelector('.flux.current');
+	let new_active = old_active;
+	if (new_active) {
+		do new_active = new_active.previousElementSibling;
+		while (new_active && !new_active.classList.contains('flux'));
+		if (!new_active) {
+			prev_feed();
+		}
+	} else {
+		new_active = document.querySelector('.flux');
+	}
 	toggleContent(new_active, old_active, skipping);
 }
 
 function next_entry(skipping) {
-	const old_active = document.querySelector('.flux.current'),
-		new_active = old_active ? old_active.nextElementSibling : document.querySelector('.flux');
+	const old_active = document.querySelector('.flux.current');
+	let new_active = old_active;
+	if (new_active) {
+		do new_active = new_active.nextElementSibling;
+		while (new_active && !new_active.classList.contains('flux'));
+		if (!new_active) {
+			next_feed();
+		}
+	} else {
+		new_active = document.querySelector('.flux');
+	}
 	toggleContent(new_active, old_active, skipping);
 }
 
 function prev_feed() {
-	const active_feed = document.querySelector('#aside_feed .feed.active');
-	if (active_feed) {
-		let feed = active_feed;
-		do feed = feed.previousElementSibling;
-		while (feed && getComputedStyle(feed).display === 'none');
-		if (feed) {
+	let found = false;
+	const feeds = document.querySelectorAll('#aside_feed .feed');
+	for (let i = feeds.length - 1; i >= 0; i--) {
+		const feed = feeds[i];
+		if (found && getComputedStyle(feed).display !== 'none') {
 			feed.querySelector('a.item-title').click();
+			break;
+		} else if (feed.classList.contains('active')) {
+			found = true;
 		}
-	} else {
+	}
+	if (!found) {
 		last_feed();
 	}
 }
 
 function next_feed() {
-	const active_feed = document.querySelector('#aside_feed .feed.active');
-	if (active_feed) {
-		let feed = active_feed;
-		do feed = feed.nextElementSibling;
-		while (feed && getComputedStyle(feed).display === 'none');
-		if (feed) {
+	let found = false;
+	const feeds = document.querySelectorAll('#aside_feed .feed');
+	for (let i = 0; i < feeds.length; i++) {
+		const feed = feeds[i];
+		if (found && getComputedStyle(feed).display !== 'none') {
 			feed.querySelector('a.item-title').click();
+			break;
+		} else if (feed.classList.contains('active')) {
+			found = true;
 		}
-	} else {
+	}
+	if (!found) {
 		first_feed();
 	}
 }
@@ -664,7 +688,7 @@ function init_shortcuts() {
 			}
 
 			const s = context.shortcuts,
-				k = ev.key.toUpperCase();
+				k = (ev.key.trim() || ev.code).toUpperCase();
 			if (location.hash.match(/^#dropdown-/)) {
 				const n = parseInt(k);
 				if (n) {