1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Adding support to LocalStorage on client side

Save the state of the Menu Item between session (like activation of
node-status and sidebar)
This commit is contained in:
Antoine Aflalo 2014-10-30 16:19:44 +02:00
parent ed9951f065
commit 01f0d5390f
5 changed files with 143 additions and 29 deletions

View File

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

View File

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

85
public/red/settings.js Normal file
View File

@ -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
}
})
();

View File

@ -22,6 +22,25 @@ RED.menu = (function() {
function createMenuItem(opt) { function createMenuItem(opt) {
var item; 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) { if (opt === null) {
item = $('<li class="divider"></li>'); item = $('<li class="divider"></li>');
} else { } else {
@ -44,7 +63,8 @@ RED.menu = (function() {
} else { } else {
opt.onselect.call(opt); opt.onselect.call(opt);
} }
}) });
setState();
} else if (opt.href) { } else if (opt.href) {
link.attr("target","_blank").attr("href",opt.href); link.attr("target","_blank").attr("href",opt.href);
} }
@ -77,9 +97,18 @@ RED.menu = (function() {
} }
} }
function isSavedStateActive(id) {
return RED.settings.get("menu-" + id);
}
function isSelected(id) { function isSelected(id) {
return $("#" + id).hasClass("active"); return $("#" + id).hasClass("active");
} }
function setSavedState(id, state) {
RED.settings.set("menu-" + id, state);
}
function setSelected(id,state) { function setSelected(id,state) {
if (isSelected(id) == state) { if (isSelected(id) == state) {
return; return;
@ -93,6 +122,7 @@ RED.menu = (function() {
if (opt.onselect) { if (opt.onselect) {
opt.onselect.call(opt,state); opt.onselect.call(opt,state);
} }
setSavedState(id, state);
} }
function setDisabled(id,state) { function setDisabled(id,state) {

View File

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