frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Merge pull request #469 from Belphemur/ui-localstorage

Browse Source 
Ui localstorage
This commit is contained in:
Nick O'Leary 2014-11-11 10:43:06 +00:00
commit f72f7cdaa7
5 changed files with 143 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -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>

9
public/red/main.js
View File

@ -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,

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

72
public/red/ui/menu.js
View File

@ -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,

5
public/red/ui/sidebar.js
View File

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