Shortcuts for adding labels (#7274)

* add shortcut in config

* open my labels menu with shortcut

* the first 9 items are selectable + input field

* i18n

* Update app/i18n/nl/conf.php

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

* index.menu.mylabels

* order fixed

---------

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

1 files changed, 50 insertions, 5 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 2face429d..112b38bce 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -747,6 +747,41 @@ function show_share_menu(el) {
 	return true;
 }
 
+function mylabels(key) {
+	const mylabelsDropdown = document.querySelector('.flux.current.active .dropdown-target[id^="dropdown-labels"]');
+
+	if (!mylabelsDropdown) {
+		return;
+	}
+
+	if (typeof key === 'undefined') {
+		show_labels_menu(mylabelsDropdown);
+	}
+	// Display the mylabels div
+	location.hash = mylabelsDropdown.id;
+	// Force scrolling to the mylabels div
+	const scrollTop = needsScroll(mylabelsDropdown.closest('.horizontal-list'));
+	if (scrollTop !== 0) {
+		if (mylabelsDropdown.closest('.horizontal-list.flux_header')) {
+			mylabelsDropdown.nextElementSibling.nextElementSibling.scrollIntoView({ behavior: "smooth", block: "start" });
+		} else {
+			mylabelsDropdown.nextElementSibling.nextElementSibling.scrollIntoView({ behavior: "smooth", block: "end" });
+		}
+	}
+
+	key = parseInt(key);
+
+	if (key === 0) {
+		mylabelsDropdown.parentElement.querySelector('.dropdown-menu .item .newTag').focus();
+	} else {
+		const mylabelsCheckboxes = mylabelsDropdown.parentElement.querySelectorAll('.dropdown-menu .item .checkboxTag');
+
+		if (key <= mylabelsCheckboxes.length) {
+			mylabelsCheckboxes[key].click();
+		}
+	}
+}
+
 function auto_share(key) {
 	const share = document.querySelector('.flux.current.active .dropdown-target[id^="dropdown-share"]');
 	if (!share) {
@@ -987,11 +1022,19 @@ function init_shortcuts() {
 
 		if (location.hash.match(/^#dropdown-/)) {
 			const n = parseInt(k);
-			if (n) {
-				if (location.hash === '#dropdown-query') {
-					user_filter(n);
-				} else {
-					auto_share(n);
+			if (Number.isInteger(n)) {
+				switch (location.hash.substring(0, 15)) {
+					case '#dropdown-query':
+						user_filter(n);
+						break;
+					case '#dropdown-share':
+						auto_share(n);
+						break;
+					case '#dropdown-label':
+						mylabels(n);
+						break;
+					default:
+						return;
 				}
 				ev.preventDefault();
 				return;
@@ -1107,6 +1150,7 @@ function init_shortcuts() {
 		if (k === s.skip_next_entry) { next_entry(true); ev.preventDefault(); return; }
 		if (k === s.skip_prev_entry) { prev_entry(true); ev.preventDefault(); return; }
 		if (k === s.collapse_entry) { collapse_entry(); ev.preventDefault(); return; }
+		if (k === s.mylabels) { mylabels(); ev.preventDefault(); return; }
 		if (k === s.auto_share) { auto_share(); ev.preventDefault(); return; }
 		if (k === s.user_filter) { user_filter(); ev.preventDefault(); return; }
 		if (k === s.load_more) { load_more_posts(); ev.preventDefault(); return; }
@@ -1431,6 +1475,7 @@ function loadDynamicTags(div) {
 			const input_newTag = document.createElement('input');
 			input_newTag.setAttribute('type', 'text');
 			input_newTag.setAttribute('name', 'newTag');
+			input_newTag.setAttribute('class', 'newTag');
 			input_newTag.setAttribute('list', 'datalist-labels');
 			input_newTag.addEventListener('keydown', function (ev) { if (ev.key.toUpperCase() == 'ENTER') { this.parentNode.previousSibling.click(); } });