From b7e4f47f5cca21a2f7f04b6bd6a87873b5cef853 Mon Sep 17 00:00:00 2001 From: Javier Sánchez Parra Date: Mon, 24 Jan 2022 16:21:38 +0100 Subject: Keep scopes tree state Otherwise, users have to expand the scopes tree every time they switch view. This commit adds two hooks to capture when an element of the tree is shown or is hidden[1]. When they are shown, ogcp (front-end) stores them in browser's local storage[2]. When they are hidden, ogcp removes them from local storage. Every time users load a page with the scopes tree, ogcp checks local storage to restore the scopes tree state. Store and remove functions use stopPropagation() to prevent ancestors of clicked elements to also be stored or removed from local storage.[3] 1. https://getbootstrap.com/docs/4.1/components/collapse/#events 2. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API 3. https://javascript.info/bubbling-and-capturing --- ogcp/static/js/ogcp.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'ogcp/static/js') diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js index 8a538ca..c6dbdf0 100644 --- a/ogcp/static/js/ogcp.js +++ b/ogcp/static/js/ogcp.js @@ -2,6 +2,25 @@ const Endpoint = '/scopes/status'; const Interval = 1000; let updateTimeoutId = null; +function keepScopesTreeState() { + const scopes_tree = $('#scopes .collapse') + + scopes_tree.on('hidden.bs.collapse', function (event) { + event.stopPropagation(); + localStorage.removeItem(this.id); + }); + scopes_tree.on('shown.bs.collapse', function (event) { + event.stopPropagation(); + localStorage.setItem(this.id, 'show'); + }); + + scopes_tree.each(function () { + if (localStorage.getItem(this.id) == 'show') { + $(this).collapse('show'); + } + }); +} + function updateScopeState() { if (updateTimeoutId) { clearTimeout(updateTimeoutId); -- cgit v1.2.3-18-g5258