Remember open categories (#3185)

* feature(normal) - Remember opened categories in the left menu

Session storage based implementation to remember opened categories in left menu

Issue Ref: #2248

* lib_phpQuery updates

* Updates covering feedback points and functionality fixes

* Feedback updates

* Revert "lib_phpQuery updates"

This reverts commit dcd23b9418405a2d14ee03c1fcadf90c04b267e1.

* First review

Change variable name to "remember" instead of "open".
Start using localStorage instead of sessionStorage.
Simplify code.

* Simplify remember categories init function

Replace 'session' with 'local' in function names and comment

Set open categories CSS as same as when category is opened in 'active' unfold mode

* Remove URLSearchParams check in remember categories init function

* Delete open categories on login and logout

* JSHint check fix

* Second review

* Make new mode the default for new users
* Always open active category
* Reduce / simplify code

* i18n French

* Revert default value

Wait a bit more for this decision / change

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

2 files changed, 37 insertions, 0 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index fe4e54739..d34042e05 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -30,6 +30,10 @@ function poormanSalt() {	//If crypto.getRandomValues is not available
 	return text;
 }
 
+function forgetOpenCategories() {
+	localStorage.removeItem('FreshRSS_open_categories');
+}
+
 function init_crypto_form() {
 	/* globals dcodeIO */
 	const crypto_form = document.getElementById('crypto-form');
@@ -45,6 +49,8 @@ function init_crypto_form() {
 		return;
 	}
 
+	forgetOpenCategories();
+
 	crypto_form.onsubmit = function (e) {
 		const submit_button = this.querySelector('button[type="submit"]');
 		submit_button.disabled = true;
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 6823f3119..21141f210 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -692,6 +692,26 @@ function init_posts() {
 	}
 }
 
+function rememberOpenCategory(category_id, isOpen) {
+	if (context.display_categories === 'remember') {
+		const open_categories = JSON.parse(localStorage.getItem('FreshRSS_open_categories') || '{}');
+		if (isOpen) {
+			open_categories[category_id] = true;
+		} else {
+			delete open_categories[category_id];
+		}
+		localStorage.setItem('FreshRSS_open_categories', JSON.stringify(open_categories));
+	}
+}
+
+function openCategory(category_id) {
+	const category_element = document.getElementById(category_id);
+	category_element.querySelector('.tree-folder-items').classList.add('active');
+	const img = category_element.querySelector('a.dropdown-toggle img');
+	img.src = img.src.replace('/icons/down.', '/icons/up.');
+	img.alt = '△';
+}
+
 function init_column_categories() {
 	if (context.current_view !== 'normal' && context.current_view !== 'reader') {
 		return;
@@ -700,16 +720,27 @@ function init_column_categories() {
 	//Restore sidebar scroll position
 	document.getElementById('sidebar').scrollTop = +sessionStorage.getItem('FreshRSS_sidebar_scrollTop');
 
+	//Restore open categories
+	if (context.display_categories === 'remember') {
+		const open_categories = JSON.parse(localStorage.getItem('FreshRSS_open_categories') || '{}');
+		Object.keys(open_categories).forEach(function (category_id) {
+			openCategory(category_id);
+		});
+	}
+
 	document.getElementById('aside_feed').onclick = function (ev) {
 		let a = ev.target.closest('.tree-folder > .tree-folder-title > a.dropdown-toggle');
 		if (a) {
 			const img = a.querySelector('img');
+			const category_id = a.closest('.category').id;
 			if (img.alt === '▽') {
 				img.src = img.src.replace('/icons/down.', '/icons/up.');
 				img.alt = '△';
+				rememberOpenCategory(category_id, true);
 			} else {
 				img.src = img.src.replace('/icons/up.', '/icons/down.');
 				img.alt = '▽';
+				rememberOpenCategory(category_id, false);
 			}
 
 			const ul = a.closest('li').querySelector('.tree-folder-items');