Merge pull request #3880 from Icinga/feature/sidebar-state-per-tab

Maintain sidebar state per tab/window

public/js/icinga/behavior/navigation.js

@@ -38,22 +38,12 @@
          */
         this.storage = Icinga.Storage.BehaviorStorage('navigation');
 
+        this.storage.setBackend(window.sessionStorage);
+
         // Restore collapsed sidebar if necessary
         if (this.storage.get('sidebar-collapsed')) {
             $('#layout').addClass('sidebar-collapsed');
         }
-
-        // Ensure we'll get notified if the sidebar is toggled in another window
-        this.storage.onChange('sidebar-collapsed', function (collapsed) {
-            // Not using toggleClass here to avoid inconsistencies
-            if (collapsed) {
-                $('#layout').addClass('sidebar-collapsed');
-            } else {
-                $('#layout').removeClass('sidebar-collapsed');
-            }
-
-            $(window).trigger('resize');
-        }, this);
     };
 
     Navigation.prototype = new Icinga.EventListener();

public/js/icinga/storage.js

@@ -21,6 +21,13 @@
          * @type {string}
          */
         this.prefix = prefix;
+
+        /**
+         * Storage backend
+         *
+         * @type {Storage}
+         */
+        this.backend = window.localStorage;
     };
 
     /**
@@ -85,6 +92,15 @@
 
     Icinga.Storage.prototype = {
 
+        /**
+         * Set the storage backend
+         *
+         * @param {Storage} backend
+         */
+        setBackend: function(backend) {
+            this.backend = backend;
+        },
+
         /**
          * Prefix the given key
          *
@@ -110,7 +126,7 @@
          * @returns {void}
          */
         set: function(key, value) {
-            window.localStorage.setItem(this.prefixKey(key), JSON.stringify(value));
+            this.backend.setItem(this.prefixKey(key), JSON.stringify(value));
         },
 
         /**
@@ -122,14 +138,14 @@
          */
         get: function(key) {
             key = this.prefixKey(key);
-            var value = window.localStorage.getItem(key);
+            var value = this.backend.getItem(key);
 
             try {
                 return JSON.parse(value);
             } catch(error) {
                 icinga.logger.error('[Storage] Failed to parse value (\`' + value
                     + '\`) of key "' + key + '". Error was: ' + error);
-                window.localStorage.removeItem(key);
+                this.backend.removeItem(key);
                 return null;
             }
         },
@@ -142,7 +158,7 @@
          * @returns {void}
          */
         remove: function(key) {
-            window.localStorage.removeItem(this.prefixKey(key));
+            this.backend.removeItem(this.prefixKey(key));
         },
 
         /**
@@ -155,6 +171,10 @@
          * @returns {void}
          */
         onChange: function(key, callback, context) {
+            if (this.backend !== window.localStorage) {
+                throw new Error('[Storage] Only the localStorage emits events');
+            }
+
             var prefixedKey = this.prefixKey(key);
 
             if (typeof Icinga.Storage.subscribers[prefixedKey] === 'undefined') {
@@ -257,7 +277,10 @@
             this.storage = storage;
             this.key = key;
 
-            storage.onChange(key, this.onChange, this);
+            if (storage.backend === window.localStorage) {
+                storage.onChange(key, this.onChange, this);
+            }
+
             return this;
         },