Adding support to LocalStorage on client side

Save the state of the Menu Item between session (like activation of
node-status and sidebar)

public/index.html

@@ -250,6 +250,7 @@
 <script src="red/nodes.js"></script>
 <script src="red/history.js"></script>
 <script src="red/validators.js"></script>
+<script src="red/settings.js"></script>
 <script src="red/ui/menu.js"></script>
 <script src="red/ui/keyboard.js"></script>
 <script src="red/ui/tabs.js"></script>

public/red/main.js

@@ -142,12 +142,9 @@ var RED = (function() {
     });
 
     function loadSettings() {
-        $.get('settings', function(data) {
-            RED.settings = data;
-            console.log("Node-RED: "+data.version);
-            loadNodeList();
-        });
+        RED.settings.init(loadNodeList);
     }
+
     function loadNodeList() {
         $.ajax({
             headers: {
@@ -286,7 +283,7 @@ var RED = (function() {
     $(function() {
         RED.menu.init({id:"btn-sidemenu",
             options: [
-                {id:"btn-sidebar",icon:"fa fa-columns",label:"Sidebar",toggle:true,onselect:RED.sidebar.toggleSidebar},
+                {id:"btn-sidebar",icon:"fa fa-columns",label:"Sidebar",toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true},
                 null,
                 {id:"btn-node-status",icon:"fa fa-info",label:"Node Status",toggle:true,onselect:toggleStatus},
                 null,

public/red/settings.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2014 Antoine Aflalo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+RED.settings = (function () {
+    var hasLocalStorage = function () {
+        try {
+            return 'localStorage' in window && window['localStorage'] !== null;
+        } catch (e) {
+            return false;
+        }
+    };
+
+    var set = function (key, value) {
+        if (!hasLocalStorage()) {
+            return;
+        }
+        localStorage.setItem(key, JSON.stringify(value));
+    };
+    /**
+     * If the key is not set in the localStorage it returns <i>undefined</i>
+     * Else return the JSON parsed value
+     * @param key
+     * @returns {*}
+     */
+    var get = function (key) {
+        if (!hasLocalStorage()) {
+            return undefined;
+        }
+        return JSON.parse(localStorage.getItem(key));
+    };
+
+    var remove = function (key) {
+        if (!hasLocalStorage()) {
+            return;
+        }
+        localStorage.removeItem(key);
+    };
+
+    var setProperties = function(data) {
+        for(var prop in data) {
+            if(data.hasOwnProperty(prop)) {
+                RED.settings[prop] = data[prop];
+            }
+        }
+    };
+
+    var init = function (callback) {
+        $.ajax({
+            headers: {
+                "Accept": "application/json"
+            },
+            dataType: "json",
+            cache: false,
+            url: 'settings',
+            success: function (data) {
+                setProperties(data);
+                console.log("Node-RED: " + data.version);
+                callback();
+            }
+        });
+    };
+
+
+    return {
+        set: set,
+        get: get,
+        remove: remove,
+        init : init
+    }
+})
+();

public/red/ui/menu.js

@@ -13,15 +13,34 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  **/
- 
+
 
 
 RED.menu = (function() {
-    
+
     var menuItems = {};
-    
+
     function createMenuItem(opt) {
         var item;
+
+        function setState() {
+            var savedStateActive = isSavedStateActive(opt.id);
+            if (savedStateActive) {
+                link.addClass("active");
+                opt.onselect.call(opt, true);
+            } else if (savedStateActive === false) {
+                link.removeClass("active");
+                opt.onselect.call(opt, false);
+            } else if (opt.hasOwnProperty("selected")) {
+                if (opt.selected) {
+                    link.addClass("active");
+                } else {
+                    link.removeClass("active");
+                }
+                opt.onselect.call(opt, opt.selected);
+            }
+        }
+
         if (opt === null) {
             item = $('<li class="divider"></li>');
         } else {
@@ -31,27 +50,28 @@ RED.menu = (function() {
                 (opt.icon?'<i class="'+opt.icon+'"></i> ':'')+
                 opt.label+
                 '</a>').appendTo(item);
-                
+
             menuItems[opt.id] = opt;
-            
+
             if (opt.onselect) {
                 link.click(function() {
                     if ($(this).parent().hasClass("disabled")) {
                         return;
                     }
                     if (opt.toggle) {
-                        setSelected(opt.id,!isSelected(opt.id));
+                        setSelected(opt.id, !isSelected(opt.id));
                     } else {
                         opt.onselect.call(opt);
                     }
-                })
+                });
+                setState();
             } else if (opt.href) {
                 link.attr("target","_blank").attr("href",opt.href);
             }
             if (opt.options) {
                 item.addClass("dropdown-submenu pull-left");
                 var submenu = $('<ul id="'+opt.id+'-submenu" class="dropdown-menu"></ul>').appendTo(item);
-                
+
                 for (var i=0;i<opt.options.length;i++) {
                     createMenuItem(opt.options[i]).appendTo(submenu);
                 }
@@ -60,26 +80,35 @@ RED.menu = (function() {
                 item.addClass("disabled");
             }
         }
-        
-        
+
+
         return item;
-        
+
     }
     function createMenu(options) {
-        
+
         var button = $("#"+options.id);
-        
+
         var topMenu = $("<ul/>",{class:"dropdown-menu"}).insertAfter(button);
-        
+
         for (var i=0;i<options.options.length;i++) {
             var opt = options.options[i];
             createMenuItem(opt).appendTo(topMenu);
         }
     }
-    
-    function isSelected(id) {
-        return $("#"+id).hasClass("active");
+
+    function isSavedStateActive(id) {
+        return RED.settings.get("menu-" + id);
     }
+
+    function isSelected(id) {
+        return $("#" + id).hasClass("active");
+    }
+
+    function setSavedState(id, state) {
+        RED.settings.set("menu-" + id, state);
+    }
+
     function setSelected(id,state) {
         if (isSelected(id) == state) {
             return;
@@ -93,8 +122,9 @@ RED.menu = (function() {
         if (opt.onselect) {
             opt.onselect.call(opt,state);
         }
+        setSavedState(id, state);
     }
-    
+
     function setDisabled(id,state) {
         if (state) {
             $("#"+id).parent().addClass("disabled");
@@ -102,14 +132,14 @@ RED.menu = (function() {
             $("#"+id).parent().removeClass("disabled");
         }
     }
-    
+
     function addItem(id,opt) {
         createMenuItem(opt).appendTo("#"+id+"-submenu");
     }
     function removeItem(id) {
         $("#"+id).parent().remove();
     }
-    
+
     function setAction(id,action) {
         menuItems[id].onselect = action;
         $("#"+id).click(function() {
@@ -123,7 +153,7 @@ RED.menu = (function() {
             }
         });
     }
-    
+
     return {
         init: createMenu,
         setSelected: setSelected,

public/red/ui/sidebar.js

@@ -124,12 +124,13 @@ RED.sidebar = (function() {
             $("#main-container").addClass("sidebar-closed");
         } else {
             $("#main-container").removeClass("sidebar-closed");
+            sidebar_tabs.resize();
         }
     }
     
     function showSidebar(id) {
-        RED.menu.setSelected("btn-sidebar",true);
-        sidebar_tabs.activateTab("tab-"+id);
+        //RED.menu.setSelected("btn-sidebar", true);
+        sidebar_tabs.activateTab("tab-" + id);
     }
     
     function containsTab(id) {