summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJavier Sánchez Parra <jsanchez@soleta.eu>2022-01-24 16:21:38 +0100
committerJavier Sánchez Parra <jsanchez@soleta.eu>2022-01-28 08:23:43 +0100
commitb7e4f47f5cca21a2f7f04b6bd6a87873b5cef853 (patch)
tree3fd2d800f4e12332d90d40ea8aeaab7d000e8895
parent5fbcff64f2d5fabc1b889759b6e9c387ffc22544 (diff)
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
-rw-r--r--ogcp/static/js/ogcp.js19
-rw-r--r--ogcp/templates/macros.html1
2 files changed, 20 insertions, 0 deletions
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);
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 4ae5982..dd26818 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -9,6 +9,7 @@
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
updateScopeState();
+ keepScopesTreeState();
}
});
</script>