Merge pull request #469 from Belphemur/ui-localstorage

Ui localstorage

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

@@ -22,6 +22,25 @@ RED.menu = (function() {
 
     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 {
@@ -40,11 +59,12 @@ RED.menu = (function() {
                         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);
             }
@@ -77,9 +97,18 @@ RED.menu = (function() {
         }
     }
 
-    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,6 +122,7 @@ RED.menu = (function() {
         if (opt.onselect) {
             opt.onselect.call(opt,state);
         }
+        setSavedState(id, state);
     }
 
     function setDisabled(id,state) {

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) {