[WebProfilerBundle] Simplified session storage implementation

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig

@@ -199,10 +199,22 @@
     {% endif %}
 
     <script>
-    function Toggler(togglerStorage) {
+    function Toggler(storage) {
         "use strict";
 
-        var expand = function (button) {
+        var STORAGE_KEY = 'sf_toggle_data',
+
+            states = {},
+
+            isCollapsed = function (button) {
+                return Sfjs.hasClass(button, 'closed');
+            },
+
+            isExpanded = function (button) {
+                return !isCollapsed(button);
+            },
+
+            expand = function (button) {
                 var targetId = button.dataset.toggleTargetId,
                     target = document.getElementById(targetId);
 
@@ -210,10 +222,13 @@
                     throw "Toggle target " + targetId + " does not exist";
                 }
 
-                togglerStorage.store(targetId, 'visible');
+                if (isCollapsed(button)) {
+                    Sfjs.removeClass(button, 'closed');
+                    Sfjs.removeClass(target, 'hidden');
 
-                Sfjs.removeClass(button, 'closed');
-                Sfjs.removeClass(target, 'hidden');
+                    states[targetId] = 1;
+                    storage.setItem(STORAGE_KEY, states);
+                }
             },
 
             collapse = function (button) {
@@ -224,10 +239,13 @@
                     throw "Toggle target " + targetId + " does not exist";
                 }
 
-                togglerStorage.store(targetId, 'hidden');
+                if (isExpanded(button)) {
+                    Sfjs.addClass(button, 'closed');
+                    Sfjs.addClass(target, 'hidden');
 
-                Sfjs.addClass(button, 'closed');
-                Sfjs.addClass(target, 'hidden');
+                    states[targetId] = 0;
+                    storage.setItem(STORAGE_KEY, states);
+                }
             },
 
             toggle = function (button) {
@@ -239,16 +257,26 @@
             },
 
             initButtons = function (buttons) {
-                for (var i = 0, l = buttons.length; i < l; ++i) {
-                    var toggleTargetId = buttons[i].dataset.toggleTargetId,
-                        toggleTarget = document.getElementById(toggleTargetId);
+                states = storage.getItem(STORAGE_KEY, {});
 
-                    if (!toggleTarget) {
-                        throw "Toggle target " + toggleTargetId + " does not exist";
+                // must be an object, not an array or anything else
+                // `typeof` returns "object" also for arrays, so the following
+                // check must be done
+                // see http://stackoverflow.com/questions/4775722/check-if-object-is-array
+                if ('[object Object]' !== Object.prototype.toString.call(states)) {
+                    states = {};
+                }
+
+                for (var i = 0, l = buttons.length; i < l; ++i) {
+                    var targetId = buttons[i].dataset.toggleTargetId,
+                        target = document.getElementById(targetId);
+
+                    if (!target) {
+                        throw "Toggle target " + targetId + " does not exist";
                     }
 
                     // correct the initial state of the button
-                    if (Sfjs.hasClass(toggleTarget, 'hidden')) {
+                    if (Sfjs.hasClass(target, 'hidden')) {
                         Sfjs.addClass(buttons[i], 'closed');
                     }
 
@@ -261,6 +289,15 @@
 
                         return false;
                     });
+
+                    if (states.hasOwnProperty(targetId)) {
+                        // open or collapse based on stored data
+                        if (0 === states[targetId]) {
+                            collapse(buttons[i]);
+                        } else {
+                            expand(buttons[i]);
+                        }
+                    }
                 }
             };
 
@@ -269,66 +306,38 @@
 
             toggle: toggle,
 
+            isExpanded: isExpanded,
+
+            isCollapsed: isCollapsed,
+
             expand: expand,
 
             collapse: collapse
         };
     }
 
-    function TogglerStorage(key) {
-        var key = 'sf_' + (key || 'toggle_data'),
-            store = function (id, state) {
-                var toggleData = sessionStorage.getItem(key);
-                if (!toggleData) {
-                    toggleData = [];
-                } else {
-                    toggleData = toggleData.split('|');
-                }
-
-                if ('visible' == state) {
-                    toggleData.push(id);
-                } else {
-                    var index = toggleData.indexOf(id);
-                    if (-1 < index) {
-                        toggleData.splice(index, 1);
-                    }
-                }
-
-                sessionStorage.setItem(key, toggleData.join('|'));
+    function JsonStorage(storage) {
+        var setItem = function (key, data) {
+                storage.setItem(key, JSON.stringify(data));
             },
 
-            initStorage = function (buttonsSelector) {
-                var toggleData = sessionStorage.getItem(key);
+            getItem = function (key, defaultValue) {
+                var data = storage.getItem(key);
 
-                if (!toggleData) {
-                    return;
-                }
-                toggleData = toggleData.split('|');
-
-                var buttons = document.getElementsByClassName(buttonsSelector || 'toggle-button');
-                for (i in toggleData) {
-                    var element = document.getElementById(toggleData[i]);
-                    if (!element) {
-                        continue;
-                    }
-
-                    if (Sfjs.hasClass(element, 'hidden')) {
-                        for (var i = -1; button = buttons[++i]; ) {
-                            if (button.dataset.toggleTargetId && button.dataset.toggleTargetId == element.getAttribute('id')) {
-                                break;
-                            }
-                        }
-
-                        Sfjs.removeClass(element, 'hidden');
-                        Sfjs.removeClass(button, 'closed');
+                if (null !== data) {
+                    try {
+                        return JSON.parse(data);
+                    } catch(e) {
                     }
                 }
+
+                return defaultValue;
             };
 
         return {
-            store: store,
+            setItem: setItem,
 
-            initStorage: initStorage
+            getItem: getItem
         };
     }
 
@@ -396,12 +405,10 @@
     }
 
     var tabTarget = new TabView(),
-        storage = new TogglerStorage(),
-        toggler = new Toggler(storage);
+        toggler = new Toggler(new JsonStorage(sessionStorage));
 
     tabTarget.initTabs(document.querySelectorAll('.tree .tree-inner'));
     toggler.initButtons(document.querySelectorAll('a.toggle-button'));
-    storage.initStorage();
     </script>
 {% endblock %}