<style>
:root {
--nr-db-dark-text: #444;
--nr-db-light-text: #eee;
--nr-db-disabled-text: #999;
--nr-db-mid-grey: #7f7f7f;
}
.nr-db-sb {
position: absolute;
top: 1px;
bottom: 2px;
left: 1px;
right: 1px;
overflow-y: auto;
padding: 10px;
}
.nr-db-sb .form-row label {
display: block;
width: auto;
}
.nr-db-sb .form-row input,
.nr-db-sb .form-row select {
width: calc(100% - 100px);
margin-bottom:0;
}
.nr-db-sb .compact {
margin-bottom: 8px !important;
}
.nr-db-sb .red-ui-editableList-container {
padding: 0;
min-height: 250px;
height: auto;
}
.nr-db-sb-tab-list {
min-height: 250px;
height: auto;
}
.nr-db-sb-tab-list li {
padding: 0;
}
.nr-db-sb-tab-list-item {
border-radius: 4px;
color: var(--red-ui-primary-text-color, var(--nr-db-dark-text));
}
.nr-db-sb-list-header {
cursor: pointer;
position:relative;
color: var(--red-ui-header-text-color, var(--nr-db-dark-text));
padding:3px;
white-space: nowrap;
}
.nr-db-sb-list-header:hover {
color: var(--red-ui-secondary-text-color-hover, var(--nr-db-dark-text));
}
.nr-db-sb-title-hidden {
text-decoration: line-through;
}
.nr-db-sb-title-disabled {
color: var(--red-ui-secondary-text-color-disabled, var(--nr-db-disabled-text));
}
.nr-db-sb-tab-list-header {
background: var(--red-ui-secondary-background-selected, var(--nr-db-light-text));
padding:5px;
}
.nr-db-sb-group-list-header:hover,
.nr-db-sb-widget-list-header:hover {
background: var(--red-ui-secondary-background-hover, var(--nr-db-light-text));
}
.nr-db-sb-list-chevron {
width: 15px;
text-align: center;
margin: 3px 5px 3px 5px;
}
.nr-db-sb-tab-list-item .red-ui-editableList-container {
border-radius: 0;
border: none;
height: auto !important;
min-height: unset;
}
.nr-db-sb-list-handle {
vertical-align: top;
opacity: 0;
cursor: move;
}
.nr-db-sb-list-header:hover>.nr-db-sb-list-handle,
.nr-db-sb-list-header:hover>.nr-db-sb-list-header-button-group {
opacity: 1;
}
.nr-db-sb-list-header-button-group {
opacity: 0;
}
.nr-db-sb-list-handle {
color: var(--red-ui-tertiary-text-color, var(--nr-db-light-text));
padding:5px;
}
.nr-db-sb-tab-list-header>.nr-db-sb-list-chevron {
margin-left: 0px;
transition: transform 0.2s ease-in-out;
}
.nr-db-sb-group-list-header>.nr-db-sb-list-chevron {
margin-left: 20px;
transition: transform 0.2s ease-in-out;
}
.nr-db-sb-group-list {
min-height: 10px;
}
.nr-db-sb-group-list li {
border-bottom-color: var(--red-ui-secondary-border-color, var(--nr-db-light-text));
}
.nr-db-sb-group-list>li.ui-sortable-helper {
border-top: 1px solid var(--red-ui-secondary-border-color, var(--nr-db-light-text));
}
.nr-db-sb-group-list>li:last-child {
border-bottom: none;
}
.nr-db-sb-widget-list>li {
border: none !important;
}
.nr-db-sb-group-list>li>.red-ui-editableList-item-handle {
left: 10px;
}
.nr-db-sb-list-button-group {
position: absolute;
right: 3px;
top: 0px;
z-index: 2;
}
.nr-db-sb-list-header-button-group {
position: absolute;
right: 3px;
top: 4px;
}
.nr-db-sb-list-header-button {
margin-left: 5px;
}
.nr-db-sb li.ui-sortable-helper {
opacity: 0.9;
}
.nr-db-sb-widget-icon {
margin-left: 56px;
}
.nr-db-sb-icon {
margin-right: 10px;
}
.nr-db-sb-link {
display: inline-block;
padding-left: 20px;
}
.nr-db-sb-link-name-container .fa-external-link {
margin-right: 10px;
}
.nr-db-sb-link-url {
font-size: 0.8em;
color: var(--red-ui-secondary-text-color, var(--nr-db-mid-grey));
}
span.nr-db-color-pick-container {
max-width: 50px;
border-radius: 3px;
margin-left: 15px;
}
input.nr-db-field-themeColor[type="color"] {
width: 60px !important;
padding: 0px;
height: 20px;
box-shadow: none;
position: absolute;
right: 36px;
border-radius: 3px !important;
border: solid 1px #ccc;
-webkit-appearance: none;
font-size: smaller;
text-align: center;
}
input.nr-db-field-themeColor::-webkit-color-swatch {
border: none;
}
.red-ui-tabs {
margin-bottom: 15px;
}
.red-ui-tab.hidden {
display: none;
}
#dashboard-tabs-list li a:hover {
cursor: pointer;
}
#dash-link-button {
background: none;
border: none;
margin-top: 3px;
display: inline-block;
margin: 3px 0px 0px 3px;
height: 32px;
line-height: 29px;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
position: relative;
padding: 0px 7px 0px 7px;
}
ul.red-ui-dashboard-theme-styles {
list-style: none;
}
ul.red-ui-dashboard-theme-styles li {
margin-bottom: 6px;
}
.nr-db-resetIcon {
margin: 3px 6px 0px 6px;
float: right;
color: var(--red-ui-secondary-text-color, var(--nr-db-mid-grey));
opacity: 0.8;
display: block;
}
.nr-db-resetIcon:hover {
cursor: pointer;
}
#nr-db-field-font {
margin-left: 2em;
width: calc(100% - 81px);
}
.nr-db-theme-label {
font-weight: bold;
}
#custom-theme-library-container .btn-group {
margin-bottom: 10px;
}
</style>
<!-- Dashboard layout tool -->
<link rel="stylesheet" href="./ui_base/gs/gridstack.min.css">
<link rel="stylesheet" href="./ui_base/css/gridstack-extra.min.css">
<style>
.grid-stack {
background-color: #f8f8f8;
border: solid 2px #C0C0C0;
margin: auto;
min-height: 42px;
display: table-cell;
background-image: linear-gradient(#C0C0C0 1px, transparent 0),
linear-gradient(90deg, #C0C0C0 1px, transparent 0);
background-size: 40px 43px;
}
.grid-stack>.grid-stack-item>.grid-stack-item-content {
top: 3px;
left: 5px;
right: 5px;
bottom: 3px;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #b0dfe3;
border-radius: 2px;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
white-space: nowrap;
font-size: 12px;
opacity: 0.7;
}
.grid-stack-item {
cursor: move;
}
.nr-dashboard-layout-container-fluid {
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: 0px;
margin-left: 0px;
}
.nr-dashboard-layout-row {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 0px;
margin-left: 0px;
}
.nr-dashboard-layout-span12 {
width: 98.4%;
padding: 2px;
margin-left: 2px;
}
.nr-dashboard-layout-span6 {
width: 49.2%;
padding: 2px;
margin-left: 2px;
}
.nr-dashboard-layout-span4 {
width: 32.7%;
padding: 2px;
margin-left: 2px;
}
.nr-dashboard-layout-span3 {
width: 24.3%;
padding: 2px;
margin-left: 2px;
}
.nr-dashboard-layout-span2 {
width: 16.0%;
padding: 2px;
margin-left: 2px;
}
.nr-dashboard-layout-resize-disable {
cursor: pointer;
float: right;
position: relative;
z-index: 90;
margin-right: 4px;
}
.nr-dashboard-layout-resize-enable {
cursor: pointer;
float: right;
position: relative;
z-index: 90;
margin-right: 1px;
}
.grid-stack>.ui-state-disabled {
opacity: 1;
background-image: none;
}
.grid-stack>.grid-stack-item>.ui-resizable-handle {
z-index: 90;
margin-right: -7px;
}
</style>
<script type="text/javascript">
(function($) {
var editSaveEventHandler;
var nodesAddEventHandler;
var nodesRemoveEventHandler;
var layoutUpdateEventHandler; // Dashboard layout tool
var uip = 'ui';
var attemptedVendorLoad = false;
var ensureDashboardNode;
var loadTinyColor = function(path) {
$.ajax({ url: path,
success: function (data) {
var jsScript = document.createElement("script");
jsScript.type = "application/javascript";
jsScript.src = path;
document.body.appendChild(jsScript);
//console.log('Tiny Color Loaded:',path);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status === 404 && !attemptedVendorLoad) {
loadTinyColor('/'+uip+'/vendor/tinycolor2/dist/tinycolor-min.js');
attemptedVendorLoad = true;
}
//console.log('Tiny Color Failed to load:',path);
}
});
}
// convert to i18 text
function c_(x) {
return RED._("node-red-dashboard/ui_base:ui_base."+x);
}
// Try to load dist version first
// then if fails, load non dist version
loadTinyColor('ui_base/js/tinycolor-min.js');
//loadTinyColor('ui_base/tinycolor2/dist/tinycolor-min.js');
// Dashboard layout tool
// Load gridstack library
var loadGsLib = function(path, callback) {
$.ajax({ url: path,
success: function (data) {
var jsScript = document.createElement("script");
jsScript.type = "application/javascript";
jsScript.src = path;
document.body.appendChild(jsScript);
if (callback) { callback(); }
},
error: function (xhr, ajaxOptions, thrownError) {
// TODO
}
});
};
loadGsLib('ui_base/gs/gridstack.min.js', function() {
loadGsLib('ui_base/gs/gridstack.jQueryUI.min.js', null)
});
var tabDatas; // Layout editing tab data
var oldSpacer; // Spacer not needed after editing
var widthChange; // Group width change
var widgetResize; // Change widget event
var widgetDrag; // Drag wiget event
var MAX_GROUP_WIDTH = 50; // The maximum width is 30
/////////////////////////////////////////////////////////
// Get widget under specified tab from node information
/////////////////////////////////////////////////////////
function getTabDataFromNodes(tabID) {
var nodes = RED.nodes.createCompleteNodeSet(false);
var tab = {};
// Tab information
for (var cnt = 0; cnt < nodes.length; cnt++) {
if (nodes[cnt].type == "ui_tab" && nodes[cnt].id == tabID) {
tab = {
id: nodes[cnt].id,
name: nodes[cnt].name,
type: nodes[cnt].type,
order: nodes[cnt].order,
groups: []
};
break;
}
}
// Group information
for (var cnt = 0; cnt < nodes.length; cnt++) {
if (nodes[cnt].type == "ui_group" && nodes[cnt].tab == tabID) {
var group = {
id: nodes[cnt].id,
name: nodes[cnt].name,
type: nodes[cnt].type,
order: nodes[cnt].order,
width: nodes[cnt].width,
widgets: []
};
tab.groups.push(group);
}
}
// Widget information
var groupsIdx = {};
for (var cnt = 0; cnt < tab.groups.length; cnt++) {
groupsIdx[tab.groups[cnt].id] = tab.groups[cnt];
}
for (var cnt = 0; cnt < nodes.length; cnt++) {
var group = groupsIdx[nodes[cnt].group];
if (group != null && (/^ui_/.test(nodes[cnt].type) && nodes[cnt].type !== 'ui_link' && nodes[cnt].type !== 'ui_toast' && nodes[cnt].type !== 'ui_ui_control' && nodes[cnt].type !== 'ui_audio' && nodes[cnt].type !== 'ui_base' && nodes[cnt].type !== 'ui_group' && nodes[cnt].type !== 'ui_tab')) {
var widget = {
id: nodes[cnt].id,
type: nodes[cnt].type,
order: nodes[cnt].order,
width: nodes[cnt].width,
height: nodes[cnt].height,
auto: nodes[cnt].width == 0 ? true : false
};
group.widgets.push(widget);
if (!isLayoutToolSupported(nodes[cnt].type)) {
console.log("LayoutTool warning: Unsupported widget. Widget="+JSON.stringify(widget));
}
}
}
return tab;
}
//////////////////////////////////////////////////
// Update node information in the edited widget
////////////////////////////////////////////////////
function putTabDataToNodes() {
// Delete old flow spacer node
for (var cnt = 0; cnt < oldSpacer.length; cnt++) {
RED.nodes.remove(oldSpacer[cnt]);
RED.nodes.dirty(true);
RED.view.redraw(true);
}
var t_groups = tabDatas.groups;
for (var cnt1 = 0; cnt1 < t_groups.length; cnt1++) {
var n_group = RED.nodes.node(t_groups[cnt1].id);
n_group.width = t_groups[cnt1].width;
var t_widgets = t_groups[cnt1].widgets;
for (var cnt2 = 0; cnt2 < t_widgets.length; cnt2++) {
var n_widget = RED.nodes.node(t_widgets[cnt2].id);
if (n_widget != null) {
if (n_widget.group !== n_group.id) {
var oldGroupNode = RED.nodes.node(n_widget.group);
if (oldGroupNode) {
var index = oldGroupNode.users.indexOf(n_widget);
oldGroupNode.users.splice(index,1);
}
n_widget.group = n_group.id;
n_group.users.push(n_widget);
}
n_widget.order = t_widgets[cnt2].order;
if (t_widgets[cnt2].auto === true ) {
n_widget.width = 0;
n_widget.height = 0;
} else {
n_widget.width = t_widgets[cnt2].width;
n_widget.height = t_widgets[cnt2].height;
}
n_widget.changed = true;
n_widget.dirty = true;
RED.editor.validateNode(n_widget);
RED.events.emit("layout:update",n_widget);
RED.nodes.dirty(true);
RED.view.redraw(true);
}
else {
// Add a spacer node
if (t_widgets[cnt2].type === 'ui_spacer') {
var spaceNode = {
_def: RED.nodes.getType("ui_spacer"),
type: "ui_spacer",
hasUsers: false,
users: [],
id: RED.nodes.id(),
tab: tabDatas.id,
group: n_group.id,
order: t_widgets[cnt2].order,
name: "spacer",
width: t_widgets[cnt2].width,
height: t_widgets[cnt2].height,
z: RED.workspaces.active(),
label: function() { return this.name + " " + this.width + "x" + this.height; }
};
RED.nodes.add(spaceNode);
RED.editor.validateNode(spaceNode);
RED.nodes.dirty(true);
RED.view.redraw(true);
}
}
};
}
RED.sidebar.info.refresh();
}
////////////////////////////////////////
// Sort by order
////////////////////////////////////////
function compareOrder(a, b) {
var r = 0;
if (a.order < b.order) { r = -1; }
else if (a.order > b.order) { r = 1; }
return r;
}
////////////////////////////////////////
// Sort by XY
////////////////////////////////////////
function compareXY(a, b) {
var r = 0;
if (a.y < b.y) { r = -1; }
else if (a.y > b.y) { r = 1; }
else if (a.x < b.x) { r = -1; }
else if (a.x > b.x) { r = 1; }
return r;
}
///////////////////////////////////////////////////////
// Placeable location search (placed in the upper left)
///////////////////////////////////////////////////////
function search_point(width, height, maxWidth, maxHeight, tbl) {
for (var y=0; y < maxHeight; y++) {
for (var x=0; x < maxWidth; x++) {
if (check_matrix(x, y, width, height, maxWidth, tbl)) {
fill_matrix(x, y, width, height, maxWidth, tbl);
return {x:x, y:y};
}
}
}
return false;
}
// Check placement position
function check_matrix(px, py, width, height, maxWidth, tbl) {
if (px+width > maxWidth) return false;
for (var y=py; y < py+height; y++) {
for (var x=px; x<px+width; x++) {
if (tbl[maxWidth*y+x]) return false;
}
}
return true;
}
// Mark the placement position
function fill_matrix(px, py, width, height, maxWidth, tbl) {
for (var y=py; y < py+height; y++) {
for (var x=px; x < px+width; x++) {
tbl[maxWidth*y+x] = 1;
}
}
}
////////////////////////////////////////////////////
// Apply edit result to tab information for editing
////////////////////////////////////////////////////
function saveGridDatas() {
var groups = tabDatas.groups;
for (var cnt = 0; cnt < groups.length; cnt++) {
// Get layout editing results
var gridID = '#grid'+cnt;
var serializedData = [];
$(gridID+'.grid-stack > .grid-stack-item:visible').each( function (index) {
el = $(this);
var node = el.data('_gridstack_node');
serializedData.push({
id: el[0].dataset.noderedid,
type: el[0].dataset.noderedtype,
group: groups[cnt].id,
width: Number(node.width),
height: Number(node.height),
x: node.x,
y: node.y,
auto: (el[0].dataset.noderedsizeauto == 'true') ? true : false
});
});
var width = Number(groups[cnt].width);
var height = 0;
// Search group height
for (var i=0; i < serializedData.length; i++) {
var wd = serializedData[i];
if (height < wd.y + wd.height) {
height = wd.y + wd.height;
}
}
// Place widget on table
var tbl = new Array(width * height);
for (var i = 0; i< tbl.length; i++) {
tbl[i]=0;
}
for (var i = 0; i < serializedData.length; i++) {
var wd = serializedData[i];
for (var y = wd.y; y < wd.y+wd.height; y++) {
for (var x = wd.x; x < wd.x+wd.width; x++) {
tbl[width*y+x]=1;
}
}
}
// Add Spacer to Blank
for (var y = 0; y < height; y++) {
var spacerAdded = false;
for (var x = 0; x < width; x++) {
if (tbl[width*y+x]===0) {
if (!spacerAdded) {
// Add 1x1 spacer
serializedData.push({
x: x,
y: y,
z: RED.workspaces.active(),
width: 1,
height: 1,
name: 'spacer',
type: 'ui_spacer'
});
spacerAdded = true;
} else {
// Extend the spacer width by 1
serializedData[serializedData.length-1].width += 1;
}
} else {
spacerAdded = false;
}
}
}
// Sort Gridstack objects by x, y information
serializedData.sort(compareXY);
// Delete x and y elements as information for sorting, and give order
var order = 0;
for (i in serializedData) {
order++;
delete serializedData[i].x;
delete serializedData[i].y;
serializedData[i].order = order;
}
// Update widget information in group with edited data
var group = groups[cnt];
delete group.widgets;
group.widgets = serializedData;
}
// Save process call
putTabDataToNodes();
};
////////////////////////////////////////////////////
// Get default height for automatic settings
////////////////////////////////////////////////////
function getDefaultHeight(nodeID, groupWidth) {
var redNode = RED.nodes.node(nodeID);
var height = 1;
if (redNode.type === 'ui_gauge') {
if (redNode.gtype === 'gage') {
height = Math.round(groupWidth/2)+1;
} else if (redNode.gtype === 'wave') {
if (groupWidth < 3) {
height = 1;
} else {
height = Math.round(groupWidth*0.75);
}
} else { // donut or compass
if (groupWidth < 3) {
height = 1;
} else if (groupWidth < 11) {
height = groupWidth - 1;
} else {
height = Math.round(groupWidth*0.95);
}
}
} else if (redNode.type === 'ui_chart') {
height = Math.floor(groupWidth/2)+1;
} else if (redNode.type === 'ui_form') {
// var optNum = redNode.options.length; // Sub widget number
// if (redNode.label) {
// height = optNum + 2; // Label and Button
// } else {
// height = optNum + 1; // Button only
// }
height = redNode.rowCount
} else if (redNode.type === 'ui_lineargauge') {
if (redNode.unit && redNode.name) {
height = 5;
} else {
height = 4;
}
} else if (redNode.type === 'ui_list') {
height = 5;
} else if (redNode.type === 'ui_vega') {
height = 5;
}
return height;
}
/////////////////////////////
// Grid width change
////////////////////////////
var changeGroupWidth = function(id) {
var widthID = '#change-width'+id;
var gridID = '#grid'+id;
$(widthID).spinner( {
min: 1,
max: MAX_GROUP_WIDTH,
spin: function(event, ui) {
// Search current maximum width
var serializedData = [];
$(gridID+'.grid-stack > .grid-stack-item:visible').each( function (index) {
el = $(this);
var node = el.data('_gridstack_node');
serializedData.push({
width: Number(node.width),
x: node.x,
auto: (el[0].dataset.noderedsizeauto == 'true') ? true : false
});
});
var maxWidth = 0;
for (var i=0; i < serializedData.length; i++) {
var wd = serializedData[i];
if (wd.auto == false) {
if (maxWidth < wd.x + wd.width) {
maxWidth = wd.x + wd.width;
}
}
}
var width = ui.value;
if (width < maxWidth) {
width = maxWidth;
}
var grid = $(gridID+'.grid-stack').data('gridstack');
$(gridID+'.grid-stack').css("width", width * 40);
$(gridID+'.grid-stack').css("background-size", 100/width+"% 43px");
grid.setColumn(tabDatas.groups[id].width, true);
grid.setColumn(width, true);
tabDatas.groups[id].width = width;
$(gridID+'.grid-stack > .grid-stack-item:visible').each( function(idx, el) {
el = $(el);
var node = el.data('_gridstack_node');
var auto = (el[0].dataset.noderedsizeauto == 'true') ? true : false;
var type = el[0].dataset.noderedtype;
grid.resizable(el, !auto);
if (auto === true) {
grid.resize(el, width, getDefaultHeight(node.id, width));
}
});
if (width !== ui.value) {
event.stopPropagation();
event.preventDefault();
}
}
});
};
//////////////////////////////////
// Move between groups of widgets
//////////////////////////////////
function handleMove(grid) {
return function(ev, prevWidget, newWidget) {
var elem = newWidget.el[0];
if (elem.getAttribute("data-noderedsizeauto") === "true") {
var id = elem.getAttribute("data-noderedid");
var width = grid.grid.column;
var height = getDefaultHeight(id, width);
grid.move(elem, 0, newWidget.y);
grid.resize(elem, width, height);
var en = $(elem).find('.nr-dashboard-layout-resize-enable');
en.off('click');
en.on('click',layoutResizeEnable);
en[0].setAttribute("title",c_("layout.auto"));
}
else {
var ds = $(elem).find('.nr-dashboard-layout-resize-disable');
ds.off('click');
ds.on('click',layoutResizeDisable);
ds[0].setAttribute("title",c_("layout.manual"));
}
};
}
//////////////////////////////////////////
// Widget size change (start event)
//////////////////////////////////////////
var resizeGroupWidget = function(id) {
var gridID = '#grid'+id;
var grid = $(gridID+'.grid-stack').data('gridstack');
$(gridID+'.grid-stack').on('resizestart', function(event, ui) {
// Reset group width
grid.setColumn(tabDatas.groups[id].width, true);
});
}
//////////////////////////////////////////
// Widget drag (start event)
//////////////////////////////////////////
var dragGroupWidget = function(id) {
var gridID = '#grid'+id;
var grid = $(gridID+'.grid-stack').data('gridstack');
$(gridID+'.grid-stack').on('dragstart', function(event, ui) {
// Reset group width
grid.setColumn(tabDatas.groups[id].width, true);
});
}
//////////////////////////////////////////
// Layout resize Disable (Auto:false)
//////////////////////////////////////////
var layoutResizeDisable = function(e) {
var target = $(e.target);
var el = target.parents('.grid-stack-item:visible');
var grid = target.parents('.grid-stack').data('gridstack');
var node = el.data('_gridstack_node');
var id = Number(target.parents('.grid-stack').attr('id').slice(4));
var width = Number(tabDatas.groups[id].width);
var nodeID = el[0].dataset.noderedid;
var height = getDefaultHeight(nodeID, width);
grid.move(el, 0, node.y);
grid.resize(el, width, height);
grid.resizable(el, false);
el.find('.nr-dashboard-layout-resize-disable').off('click');
el.attr({'data-noderedsizeauto':'true'});
target.removeClass().addClass('fa fa-unlock nr-dashboard-layout-resize-enable');
el.find('.nr-dashboard-layout-resize-enable')[0].setAttribute("title",c_("layout.auto"));
el.find('.nr-dashboard-layout-resize-enable').on('click',layoutResizeEnable);
}
//////////////////////////////////////////
// Layout resize Enable (Auto:true)
//////////////////////////////////////////
var layoutResizeEnable = function(e) {
var target = $(e.target);
var el = target.parents('.grid-stack-item:visible');
var grid = target.parents('.grid-stack').data('gridstack');
grid.resizable(el, true);
el.find('.nr-dashboard-layout-resize-enable').off('click');
el.attr({'data-noderedsizeauto':'false'});
target.removeClass().addClass('fa fa-lock nr-dashboard-layout-resize-disable');
el.find('.nr-dashboard-layout-resize-disable')[0].setAttribute("title",c_("layout.manual"));
el.find('.nr-dashboard-layout-resize-disable').on('click',layoutResizeDisable);
}
//////////////////////////////////////////
// Check dashboard layout tool supported
//////////////////////////////////////////
function isLayoutToolSupported(nodeType) {
if (nodeType.indexOf("ui_") !== 0) {
return false;
}
else {
return true;
}
}
RED.nodes.registerType('ui_base', {
category: 'config',
defaults: {
name: {},
theme: {},
site: {}
},
hasUsers: false,
paletteLabel: 'Dashboard',
label: function() { return this.name || 'Node-RED Dashboard'; },
labelStyle: function() { return this.name ? "node_label_italic" : ""; },
onpaletteremove: function() {
RED.sidebar.removeTab("dashboard");
RED.events.off("editor:save",editSaveEventHandler);
RED.events.off("nodes:add",nodesAddEventHandler);
RED.events.off("nodes:remove",nodesRemoveEventHandler);
RED.events.off("layout:update",layoutUpdateEventHandler); // Dashboard layout tool
},
onpaletteadd: function() {
var globalDashboardNode = null;
var editor;
var baseStyles = ['base-color'];
var configurableStyles = ['page-titlebar-backgroundColor', 'page-backgroundColor', 'page-sidebar-backgroundColor',
'group-textColor', 'group-borderColor', 'group-backgroundColor',
'widget-textColor', 'widget-backgroundColor','widget-borderColor'];
var baseFontName = "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif";
var aTheme = {primary:"indigo", accents:"blue", warn:"red", background:"grey", palette:"light"};
// tiny colour implementation
var colours = {
leastReadable: function(base, colours) {
var least = tinycolor.readability(base, colours[0]);
var leastColor = colours[0];
for (var i=1; i<colours.length; i++) {
var readability = tinycolor.readability(base, colours[i]);
if (readability < least) {
least = readability;
leastColor = colours[i];
}
}
return leastColor;
},
whiteGreyMostReadable: function (base) {
var rgb = tinycolor(base).toRgb();
var level = ((rgb.r*299) + (rgb.g*587) + (rgb.b*114))/1000;
var readable = (level >= 128) ? '#111111' : '#eeeeee';
return readable;
},
whiteBlackLeastReadable: function(base) {
return this.leastReadable(base, ["#000000", "#ffffff"]);
},
calculate_page_backgroundColor: function(base) {
var pageBackground = "#fafafa";
var theme = "light";
if (globalDashboardNode && globalDashboardNode.hasOwnProperty("theme") && globalDashboardNode.theme.hasOwnProperty("name")) {
theme = globalDashboardNode.theme.name.split('-')[1];
}
if (theme === "dark") {
pageBackground = "#111111";
}
else if (theme === "custom") {
var whiteOrBlack = this.whiteBlackLeastReadable(base);
if (whiteOrBlack === "#000000") { pageBackground = "#111111"; }
}
return pageBackground;
},
calculate_page_sidebar_backgroundColor: function(base) {
if (this.whiteBlackLeastReadable(base) === "#000000") { return "#333333"; }
else { return "#ffffff"; }
},
calculate_page_titlebar_backgroundColor: function(base) {
return base;
},
calculate_group_textColor: function(base) {
var groupTextColour = tinycolor(base).lighten(15).toHexString();
//if (this.whiteBlackLeastReadable(base) === "#ffffff") { groupTextColour = "#000000"; }
return groupTextColour;
},
calculate_group_backgroundColor: function(base) {
var groupBackground = "#ffffff";
var theme = "light";
if (globalDashboardNode && globalDashboardNode.hasOwnProperty("theme") && globalDashboardNode.theme.hasOwnProperty("name")) {
theme = globalDashboardNode.theme.name.split('-')[1];
}
if (theme === "dark") {
groupBackground = "#333333";
}
else if (theme === "custom") {
var whiteOrBlack = this.whiteBlackLeastReadable(base);
if (whiteOrBlack === "#000000") { groupBackground = "#333333"; }
}
return groupBackground;
},
calculate_group_borderColor: function(base) {
var groupBackground = this.calculate_group_backgroundColor(base);
return this.leastReadable(groupBackground, ["#ffffff", "#555555"]);
},
calculate_widget_textColor: function(base) {
//most readable against group background
var groupBackground = this.calculate_group_backgroundColor(base);
return tinycolor.mostReadable(groupBackground, ["#111111", "#eeeeee"]).toHexString();
},
calculate_widget_backgroundColor: function(base) {
//return tinycolor(base).darken(5).toHexString()
return tinycolor(base).toHexString();
},
calculate_widget_borderColor: function(base) {
var widgetBorder = "#ffffff";
var theme = "light";
if (globalDashboardNode && globalDashboardNode.hasOwnProperty("theme") && globalDashboardNode.theme.hasOwnProperty("name")) {
theme = globalDashboardNode.theme.name.split('-')[1];
}
if (theme === "dark") {
widgetBorder = "#333333";
}
else if (theme === "custom") {
var whiteOrBlack = this.whiteBlackLeastReadable(base);
if (whiteOrBlack === "#000000") { widgetBorder = "#333333"; }
}
return widgetBorder;
},
calculate_base_font: function(base) {
return baseFontName;
}
}
var sizes = {
sx: 48, // width of <1> grid square
sy: 48, // height of <1> grid square
gx: 6, // gap between groups
gy: 6, // gap between groups
cx: 6, // gap between components
cy: 6, // gap between components
px: 0, // padding of group's cards
py: 0 // padding of group's cards
};
ensureDashboardNode = function(createMissing) {
if (globalDashboardNode !== null) {
// Check if it has been deleted beneath us
var n = RED.nodes.node(globalDashboardNode.id);
if (n === null) { globalDashboardNode = null; }
}
// Find the old dashboard node
if (globalDashboardNode === null) {
var bases = [];
RED.nodes.eachConfig(function(n) {
if (n.type === 'ui_base') { bases.push(n); }
});
// make sure we only have one ui_base node
// at the moment this will just use our existing one - deleting any new base node and theme
// at some point we may want to make this an option to select one or the other.
while (bases.length > 1) {
var n = bases.pop();
console.log("Removing ui_base node "+n.id);
RED.nodes.remove(n.id);
RED.nodes.dirty(true);
}
if (bases.length === 1) { globalDashboardNode = bases[0]; }
// If there is no dashboard node, ensure we create it after
// initialising
var noDashboardNode = (globalDashboardNode === null);
// set up theme state
var themeState = {};
var baseColor = "#0094CE"
for (var i=0; i<baseStyles.length; i++) {
themeState[baseStyles[i]] = { default:baseColor, value:baseColor, edited:false };
}
for (var j = 0; j < configurableStyles.length; j++) {
var underscore = configurableStyles[j].split("-").join("_");
var colour = colours['calculate_'+underscore](baseColor);
themeState[configurableStyles[j]] = {value:colour, edited:false};
}
themeState["base-font"] = {value:baseFontName};
var missingFields = (!globalDashboardNode || !globalDashboardNode.theme || !globalDashboardNode.site || !globalDashboardNode.site.sizes );
if (missingFields && createMissing) {
var lightTheme = {
default: baseColor,
baseColor: baseColor,
baseFont: baseFontName,
edited: false
}
var darkTheme = {
default: "#097479",
baseColor: "#097479",
baseFont: baseFontName,
edited: false
}
var customTheme = {
name: 'Untitled Theme 1',
default: "#4B7930",
baseColor: "#4B7930",
baseFont: baseFontName
}
var oldThemeName;
if (globalDashboardNode && typeof(globalDashboardNode.theme === 'string')) { oldThemeName = globalDashboardNode.theme; }
var theme = {
name: oldThemeName || "theme-light",
lightTheme: lightTheme,
darkTheme: darkTheme,
customTheme: customTheme,
themeState: themeState,
angularTheme: aTheme
}
var site_name = c_("site.title");
var site_date_format = c_("site.date-format");
var site = { name:site_name, hideToolbar:"false", allowSwipe:"false", lockMenu:"false", allowTempTheme:"true", dateFormat:site_date_format, sizes:sizes };
if (globalDashboardNode !== null) {
if (typeof globalDashboardNode.site !== "undefined") {
site = {
name: globalDashboardNode.site.name || globalDashboardNode.name,
hideToolbar: globalDashboardNode.site.hideToolbar,
lockMenu: globalDashboardNode.site.lockMenu,
allowSwipe: globalDashboardNode.site.allowSwipe,
allowTempTheme: globalDashboardNode.site.allowTempTheme,
dateFormat: globalDashboardNode.site.dateFormat,
sizes: globalDashboardNode.site.sizes
}
}
if (globalDashboardNode.theme.hasOwnProperty("angularTheme")) {
aTheme = globalDashboardNode.theme.angularTheme;
}
else { globalDashboardNode.theme.angularTheme = aTheme; }
}
if (noDashboardNode) {
globalDashboardNode = {
id: RED.nodes.id(),
_def: RED.nodes.getType("ui_base"),
type: "ui_base",
site: site,
theme: theme,
users: []
}
RED.nodes.add(globalDashboardNode);
RED.editor.validateNode(globalDashboardNode);
}
else {
globalDashboardNode["_def"] = RED.nodes.getType("ui_base");
globalDashboardNode.site = site;
globalDashboardNode.theme = theme;
delete globalDashboardNode.name;
}
$("#nr-db-field-font").val(baseFontName);
RED.nodes.dirty(true);
}
}
}
var content = $("<div>").css({"position":"relative","height":"100%"});
var mainContent = $("<div>",{class:"nr-db-sb"}).appendTo(content);
var form = $('<form class="dialog-form">').appendTo(mainContent);
// Dashboard Tabs markup
var divTab = $('<div class="red-ui-tabs">').appendTo(form);
var ulDashboardTabs = $('<ul id="dashboard-tabs-list"></ul>').appendTo(divTab);
var layout_label = c_("label.layout");
var site_label = c_("label.site");
var theme_label = c_("label.theme");
var angular_label = c_("label.angular");
var liLayoutTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Layout"><span>'+layout_label+'</span></a></li>').appendTo(ulDashboardTabs);
var liSiteTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Site" style="width:60px;"><span>'+site_label+'</span></a></li>').appendTo(ulDashboardTabs);
var liThemeTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Theme" style="width:80px;"><span>'+theme_label+'</span></a></li>').appendTo(ulDashboardTabs);
var liAngularTab = $('<li class="red-ui-tab" style="width:70px;"><a class="red-ui-tab-label" title="Angular" style="width:80px;"><span>'+angular_label+'</span></a></li>').appendTo(ulDashboardTabs);
// Link out to dashboard
$.getJSON('uisettings',function(data) {
if (data.hasOwnProperty("path")) { uip = data.path; }
var lnk = document.location.host+RED.settings.httpNodeRoot+"/"+uip;
var re = new RegExp('\/{1,}','g');
lnk = lnk.replace(re,'/');
if (!RED.hasOwnProperty("actions")) {
RED.keyboard.add("*",/* d */ 68,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+lnk, "nr-dashboard") });
}
else {
RED.actions.add("dashboard:show-dashboard",function() { window.open(document.location.protocol+"//"+lnk, "nr-dashboard") });
RED.keyboard.add("*","ctrl-shift-d","dashboard:show-dashboard");
}
$('<span id="dash-link-button" class="editor-button" style="position:absolute; right:0px;"><i class="fa fa-external-link"></i></span>')
.click(function(evt) {
window.open(document.location.protocol+"//"+lnk);
evt.preventDefault();
})
.appendTo(ulDashboardTabs);
});
// Dashboard Tab containers
var layoutTab = $('<div id="dashboard-layout" style="height:calc(100% - 48px)">').appendTo(form);
var siteTab = $('<div id="dashboard-site" style="display:none;">').appendTo(form);
var themeTab = $('<div id="dashboard-theme" style="display:none;">').appendTo(form);
var angularTab = $('<div id="dashboard-angular" style="display:none;">').appendTo(form);
ulDashboardTabs.children().first().addClass("active");
// Tab logic
var onTabClick = function() {
//Toggle tabs
ulDashboardTabs.children().removeClass("active");
ulDashboardTabs.children().css({"transition": "width 100ms"});
$(this).parent().addClass("active");
var selectedTab = $(this)[0].title;
if (selectedTab === 'Layout') {
themeTab.hide();
siteTab.hide();
angularTab.hide();
layoutTab.show();
}
else if (selectedTab === 'Angular') {
themeTab.hide();
siteTab.hide();
angularTab.show();
layoutTab.hide();
}
else if (selectedTab === 'Theme') {
layoutTab.hide();
siteTab.hide();
angularTab.hide();
themeTab.show();
if ($("#nr-db-field-theme option:selected").val() === 'theme-custom') { themeSettingsContainer.show(); }
else { themeSettingsContainer.hide(); }
}
else {
layoutTab.hide();
themeTab.hide();
angularTab.hide();
siteTab.show();
}
}
ulDashboardTabs.find("li.red-ui-tab a").on("click",onTabClick)
// Site Tab
var divTitle = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
$('<div>').html('<b>'+c_("label.title")+'</b>').appendTo(divTitle);
$('<input type="text" id="nr-db-field-title">').val(site_name).css("width","100%")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.site.name !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.site.name = $(this).val();
}
RED.nodes.dirty(true);
})
.appendTo(divTitle);
var divHideToolbar = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
$('<div>').html('<b>'+c_("label.options")+'</b>').appendTo(divHideToolbar);
$('<select id="nr-db-field-hideToolbar">')
.css("width","100%")
.append($('<option>', { value:"false", text:c_("title-bar.show"), selected:true }))
.append($('<option>', { value:"true", text:c_("title-bar.hide") }))
.val("false")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.site.hideToolbar !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.site.hideToolbar = $(this).val();
}
RED.nodes.dirty(true);
})
.appendTo(divHideToolbar);
var divLockMenu = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
$('<select id="nr-db-field-lockMenu">')
.css("width","100%")
.append($('<option>', { value:"false", text:c_("lock.clicked"), selected:true }))
.append($('<option>', { value:"true", text:c_("lock.locked") }))
.append($('<option>', { value:"icon", text:c_("lock.locked-icon") }))
.val("false")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.site.lockMenu !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.site.lockMenu = $(this).val();
}
RED.nodes.dirty(true);
})
.appendTo(divLockMenu);
var divAllowSwipe = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
$('<select id="nr-db-field-allowSwipe">')
.css("width","100%")
.append($('<option>', { value:"false", text:c_("swipe.no-swipe"), selected:true }))
.append($('<option>', { value:"true", text:c_("swipe.allow-swipe") }))
.append($('<option>', { value:"mouse", text:c_("swipe.allow-swipe-mouse") }))
.append($('<option>', { value:"menu", text:c_("swipe.show-menu") }))
.val("false")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.site.allowSwipe !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.site.allowSwipe = $(this).val();
RED.nodes.dirty(true);
}
})
.appendTo(divAllowSwipe);
var divAllowTempTheme = $('<div>',{class:"form-row compact"}).appendTo(siteTab);
$('<select id="nr-db-field-allowTempTheme">')
.css("width","100%")
.append($('<option>', { value:"true", text:c_("temp.allow-theme"), selected:true }))
.append($('<option>', { value:"false", text:c_("temp.no-theme") }))
.append($('<option>', { value:"none", text:c_("temp.none") }))
.val("true")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.site.allowTempTheme !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.site.allowTempTheme = $(this).val();
}
if ($('#nr-db-field-allowTempTheme').val() === "none") {
ulDashboardTabs.children().eq(2).addClass("hidden");
ulDashboardTabs.children().eq(3).removeClass("hidden");
}
else {
ulDashboardTabs.children().eq(2).removeClass("hidden");
ulDashboardTabs.children().eq(3).addClass("hidden");
}
RED.nodes.dirty(true);
})
.appendTo(divAllowTempTheme);
var site_name = c_("site.title");
var site_date_format = c_("site.date-format");
var divDateFormat = $('<div>',{class:"form-row"}).appendTo(siteTab);
$('<div>').html('<b>'+c_("label.date-format")+'</b>')
.css("width","80%")
.css("display","inline-block")
.appendTo(divDateFormat);
$('<div>').html("<a href='https://momentjs.com/docs/#/displaying/format/' target='_new'><i class='fa fa-info-circle' style='color:grey;'></i></a>")
.css("display","inline-block")
.css("margin-right","6px")
.css("float","right")
.appendTo(divDateFormat);
$('<input type="text" id="nr-db-field-dateFormat">').val(site_date_format).css("width","100%")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.site.dateFormat !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.site.dateFormat = $(this).val();
}
RED.nodes.dirty(true);
})
.appendTo(divDateFormat);
var divSetSizes = $('<div>',{class:"form-row"}).appendTo(siteTab);
$('<span style="width:45%; display:inline-block">').html('<b>'+c_("label.sizes")+'</b>').appendTo(divSetSizes);
$('<span style="width:25%; display:inline-block; font-size:smaller">').text(c_("label.horizontal")).appendTo(divSetSizes);
$('<span style="width:20%; display:inline-block; font-size:smaller">').text(c_("label.vertical")).appendTo(divSetSizes);
$('<i id="sizes-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:1.0})
.click(function(e) {
$("#nr-db-field-sx").val(sizes.sx); globalDashboardNode.site.sizes.sx = sizes.sx;
$("#nr-db-field-sy").val(sizes.sy); globalDashboardNode.site.sizes.sy = sizes.sy;
$("#nr-db-field-px").val(sizes.px); globalDashboardNode.site.sizes.px = sizes.px;
$("#nr-db-field-py").val(sizes.py); globalDashboardNode.site.sizes.py = sizes.py;
$("#nr-db-field-gx").val(sizes.gx); globalDashboardNode.site.sizes.gx = sizes.gx;
$("#nr-db-field-gy").val(sizes.gy); globalDashboardNode.site.sizes.gy = sizes.gy;
$("#nr-db-field-cx").val(sizes.cx); globalDashboardNode.site.sizes.cx = sizes.cx;
$("#nr-db-field-cy").val(sizes.cy); globalDashboardNode.site.sizes.cy = sizes.cy;
RED.nodes.dirty(true);
})
.appendTo(divSetSizes);
$('<br/><span style="width:45%; display:inline-block">').text(c_("label.widget-size")).appendTo(divSetSizes);
$('<input type="number" name="sx" min="24" id="nr-db-field-sx">').val(48).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.sx=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
$('<input type="number" name="sy" min="24" id="nr-db-field-sy">').val(48).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.sy=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<br/><span style="width:45%; display:inline-block">').text(c_("label.widget-spacing")).appendTo(divSetSizes);
$('<input type="number" name="cx" min="0" id="nr-db-field-cx">').val(6).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.cx=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
$('<input type="number" name="cy" min="0" id="nr-db-field-cy">').val(6).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.cy=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<br/><span style="width:45%; display:inline-block">').text(c_("label.group-padding")).appendTo(divSetSizes);
$('<input type="number" name="px" min="0" id="nr-db-field-px">').val(0).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.px=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
$('<input type="number" name="py" min="0" id="nr-db-field-py">').val(0).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.py=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<br/><span style="width:45%; display:inline-block">').text(c_("label.group-spacing")).appendTo(divSetSizes);
$('<input type="number" name="gx" min="0" id="nr-db-field-gx">').val(6).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.gx=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
$('<span style="width:5%; display:inline-block">').text(' ').appendTo(divSetSizes);
$('<input type="number" name="gy" min="0" id="nr-db-field-gy">').val(6).css("width","20%")
.on("change", function() {
//ensureDashboardNode(true);
globalDashboardNode.site.sizes.gy=Number($(this).val()); RED.nodes.dirty(true); } )
.appendTo(divSetSizes);
// Angular Theme Tab
var changed = function() {
ensureDashboardNode(true);
globalDashboardNode.theme.angularTheme = aTheme;
RED.nodes.dirty(true);
}
var angColorList = ["red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal", "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey"];
var angColors = "";
angColorList.forEach(function(c) { angColors += '<option value="' + c + '">' + c + '</option>'; });
var divPrimStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
$('<span style="width:45%; display:inline-block">')
.html('<b>'+c_("style.primary")+'</b>')
.appendTo(divPrimStyle);
$('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:1.0})
.click(function(e) {
$("#nr-db-field-angPrimary").val("indigo");
globalDashboardNode.theme.angularTheme.primary = "indigo";
RED.nodes.dirty(true);
})
.appendTo(divPrimStyle);
$('<select id="nr-db-field-angPrimary">'+angColors+'</select>')
.css("width","100%")
.val(aTheme.primary)
.on("change", function() { aTheme.primary = $(this).val(); changed(); })
.appendTo(divPrimStyle);
var divAccStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
$('<span style="width:45%; display:inline-block">')
.html('<b>'+c_("style.accents")+'</b>')
.appendTo(divAccStyle);
$('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:1.0})
.click(function(e) {
$("#nr-db-field-angAccents").val("blue");
globalDashboardNode.theme.angularTheme.accents = "blue";
RED.nodes.dirty(true);
})
.appendTo(divAccStyle);
$('<select id="nr-db-field-angAccents">'+angColors+'</select>')
.css("width","100%")
.val(aTheme.accents)
.on("change", function() { aTheme.accents = $(this).val(); changed(); })
.appendTo(divAccStyle);
var divWarnStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
$('<span style="width:45%; display:inline-block">')
.html('<b>'+c_("style.warnings")+'</b>')
.appendTo(divWarnStyle);
$('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:1.0})
.click(function(e) {
$("#nr-db-field-angWarn").val("red");
globalDashboardNode.theme.angularTheme.warn = "red";
RED.nodes.dirty(true);
})
.appendTo(divWarnStyle);
$('<select id="nr-db-field-angWarn">'+angColors+'</select>')
.css("width","100%")
.val(aTheme.warn)
.on("change", function() { aTheme.warn = $(this).val(); changed(); })
.appendTo(divWarnStyle);
var divBackStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
$('<span style="width:45%; display:inline-block">')
.html('<b>'+c_("style.background")+'</b>')
.appendTo(divBackStyle);
$('<i id="ang-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:1.0})
.click(function(e) {
$("#nr-db-field-angBackground").val("grey");
globalDashboardNode.theme.angularTheme.background = "grey";
RED.nodes.dirty(true);
})
.appendTo(divBackStyle);
$('<select id="nr-db-field-angBackground">'+angColors+'</select>')
.css("width","100%")
.val(aTheme.background)
.on("change", function() { aTheme.background = $(this).val(); changed(); })
.appendTo(divBackStyle);
var divPalStyle = $('<div>',{class:"form-row"}).appendTo(angularTab);
$('<span style="width:45%; display:inline-block">')
.html('<b>'+c_("style.palette")+'</b>')
.appendTo(divPalStyle);
var lightdark = '<option value="light">' +c_("style.light")+ '</option>';
lightdark += '<option value="dark">' +c_("style.dark")+ '</option>';
$('<select id="nr-db-field-angLook">'+lightdark+'</select>')
.css("width","100%")
.val(aTheme.palette)
.on("change", function() { aTheme.palette = $(this).val(); changed(); })
.appendTo(divPalStyle);
// Theme Tab
// For all customisable styles, generate and apply the css
var generateColours = function(base) {
var theme = globalDashboardNode.theme.name.split('-')[1];
if (!globalDashboardNode.theme.themeState.hasOwnProperty["base-font"]) {
if (globalDashboardNode.theme[theme+"Theme"].baseFont === "Helvetica Neue") {
globalDashboardNode.theme[theme+"Theme"].baseFont = baseFontName;
}
globalDashboardNode.theme.themeState["base-font"] = {value:globalDashboardNode.theme[theme+"Theme"].baseFont};
$("#nr-db-field-font").val(globalDashboardNode.theme[theme+"Theme"].baseFont);
}
for (var i=0; i<configurableStyles.length; i++) {
var styleID = configurableStyles[i];
var underscore = styleID.split("-").join("_");
if (!globalDashboardNode.theme.themeState.hasOwnProperty(styleID)) {
globalDashboardNode.theme.themeState[styleID] = {value:"#fff",edited:false};
}
if (!globalDashboardNode.theme.themeState[styleID].edited || globalDashboardNode.theme[theme+'Theme'].reset) {
var colour = colours['calculate_'+underscore](base);
globalDashboardNode.theme.themeState[styleID].value = colour;
}
setColourPickerColour(styleID, globalDashboardNode.theme.themeState[styleID].value, globalDashboardNode.theme.themeState[styleID].edited);
}
globalDashboardNode.theme[theme+'Theme'].reset = false;
}
var divThemeStyle = $('<div>',{class:"form-row"}).appendTo(themeTab);
$('<label class="nr-db-theme-label">').text(c_("theme.style")).appendTo(divThemeStyle);
var themeSelection = $('<select id="nr-db-field-theme">'+
'<option value="theme-light">'+c_("style.light")+'</option>'+
'<option value="theme-dark">'+c_("style.dark")+'</option>'+
'<option value="theme-custom">'+c_("style.custom")+'</option>'+
'</select>')
.css("width","100%")
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.theme.name !== $(this).val()) {
//ensureDashboardNode(true);
var theme = globalDashboardNode.theme.name.split('-')[1];
var baseColour = globalDashboardNode.theme[theme+'Theme'].baseColor;
var baseFont = globalDashboardNode.theme[theme+'Theme'].baseFont;
globalDashboardNode.theme.name = $(this).val();
theme = globalDashboardNode.theme.name.split('-')[1];
if (theme !== "custom") {
baseColour = globalDashboardNode.theme[theme+'Theme'].default;
}
else { baseColour = globalDashboardNode.theme[theme+'Theme'].baseColor; }
setColourPickerColour("base-color", baseColour);
globalDashboardNode.theme.themeState['base-color'].value = baseColour;
globalDashboardNode.theme.themeState['base-color'].default = baseColour;
globalDashboardNode.theme.themeState['base-font'] = {value:baseFont};
$("#nr-db-field-font").val(baseFont);
globalDashboardNode.theme[theme+'Theme'].reset = true;
//generate colours for all colour settings from base colour
generateColours(baseColour);
RED.nodes.dirty(true);
}
$('#base-color-reset').remove();
if ($(this).val() === 'theme-custom') {
$("#custom-theme-library-container").show(); //TODO undo this at some point
$("#custom-theme-settings").show();
//addResetButton('base-color', baseSettingsUl.children());
}
else {
$("#custom-theme-library-container").hide();
$("#custom-theme-settings").hide();
addLightAndDarkResetButton('base-color', baseSettingsUl.children().first());
}
})
.appendTo(divThemeStyle);
var customThemeLibraryContainer = $('<div id="custom-theme-library-container">').appendTo(themeTab);
$('<label class="nr-db-theme-label">').text(c_("theme.custom-profile")).appendTo(customThemeLibraryContainer);
$('<input type="text" id="ui-sidebar-name" style="vertical-align:top;" placeholder="profile name (not blank)">')
.val(c_("theme.custom-profile-name"))
.on("change", function() {
if (!globalDashboardNode || globalDashboardNode.theme.customTheme.name !== $(this).val()) {
//ensureDashboardNode(true);
globalDashboardNode.theme.customTheme.name = $(this).val();
if (editor) {
editor.setValue(JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site}),1);
RED.nodes.dirty(true);
}
}
})
.keyup(function() {
if ($(this).val().length === 0) {
$("#custom-theme-library-container div").css("pointer-events","none");
}
else { $("#custom-theme-library-container div").css("pointer-events","inherit"); }
})
.appendTo(customThemeLibraryContainer);
$('<input type="hidden" id="nr-db-field-format">').appendTo(customThemeLibraryContainer);
$('<div style="display:none;" class="node-text-editor" id="nr-db-field-format-editor"></div>').appendTo(customThemeLibraryContainer);
var baseThemeSettingsContainer = $('<div id="base-theme-settings">').appendTo(themeTab);
var baseSettings = $('<div>',{class:"form-row"}).appendTo(baseThemeSettingsContainer);
$('<label class="nr-db-theme-label">').text(c_("theme.base-settings")).appendTo(baseSettings);
var baseSettingsUl = $('<ul id="base-settings-ul" class="red-ui-dashboard-theme-styles"></ul>').appendTo(baseSettings);
var baseColourItem = $('<li class="red-ui-dashboard-theme-item"><span>'+c_("base.colour")+'</span></li>').appendTo(baseSettingsUl);
var spanColorContainer = $('<span class="nr-db-color-pick-container"></span>').appendTo(baseColourItem);
$('<input id="base-color" class="nr-db-field-themeColor" type="color" value="#ffffff"/>')
.on("change", function() {
//ensureDashboardNode(true);
var value = $(this).val();
var lightThemeMatch = globalDashboardNode.theme.lightTheme.baseColor === value;
var darkThemeMatch = globalDashboardNode.theme.darkTheme.baseColor === value;
var customThemeMatch = globalDashboardNode.theme.customTheme.baseColor === value;
if (!globalDashboardNode || !lightThemeMatch || !darkThemeMatch || !customThemeMatch) {
var theme = globalDashboardNode.theme.name.split('-')[1];
globalDashboardNode.theme[theme+'Theme'].baseColor = value;
if (globalDashboardNode.theme.name === 'theme-light' || globalDashboardNode.theme.name === 'theme-dark') {
//for light and dark themes, reset the colours
globalDashboardNode.theme[theme+'Theme'].reset = true;
}
generateColours(value);
editor.setValue(JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site}),1);
colourPickerChangeHandler($(this).attr('id'), value);
}
})
.appendTo(spanColorContainer);
var baseFontItem = $('<li class="red-ui-dashboard-theme-item"><span>'+c_("base.font")+'</span></li>').appendTo(baseSettingsUl);
var fontSelector = $('<select id="nr-db-field-font">'+
'<option value="'+baseFontName+'" style="font-family:'+baseFontName+'">'+c_("font.system")+'</option>'+
'<option value="Arial,Arial,Helvetica,sans-serif" style="font-family:Arial,Arial,Helvetica,sans-serif">Arial</option>'+
'<option value="Arial Black,Arial Black,Gadget,sans-serif" style="font-family:Arial Black,Arial Black,Gadget,sans-serif">Arial Black</option>'+
'<option value="Arial Narrow,Nimbus Sans L,sans-serif" style="font-family:Arial Narrow,Nimbus Sans L,sans-serif">Arial Narrow</option>'+
'<option value="Century Gothic,CenturyGothic,AppleGothic,sans-serif" style="font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif">Century Gothic</option>'+
'<option value="Copperplate,Copperplate Gothic Light,fantasy" style="font-family:Copperplate,Copperplate Gothic Light,fantasy;">Copperplate</option>'+
'<option value="Courier,monospace" style="font-family:Courier,monospace;">Courier</option>'+
'<option value="Georgia,Georgia,serif" style="font-family:Georgia,Georgia,serif">Georgia</option>'+
'<option value="Gill Sans,Geneva,sans-serif" style="font-family:Gill Sans,Geneva,sans-serif;">Gill Sans</option>'+
//'<option value="Helvetica Neue,Helvetica,sans-serif" style="font-family:Helvetica Neue,Helvetica,sans-serif">Helvetica Neue</option>'+
'<option value="Impact,Impact,Charcoal,sans-serif" style="font-family:Impact,Impact,Charcoal,sans-serif">Impact</option>'+
'<option value="Lucida Sans Typewriter,Lucida Console,Monaco,monospace" style="font-family:Lucida Console,Monaco,monospace">Lucida Console</option>'+
'<option value="Lucida Sans Unicode,Lucida Grande,sans-serif" style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif">Lucida Sans</option>'+
'<option value="Palatino Linotype,Palatino,Book Antiqua,serif" style="font-family:Palatino Linotype,Palatino,Book Antiqua,serif">Palatino Linotype</option>'+
'<option value="Tahoma,Geneva,sans-serif" style="font-family:Tahoma,Geneva,sans-serif">Tahoma</optionstyle="font-family:>'+
'<option value="Times New Roman,Times,serif" style="font-family:Times New Roman,Times,serif">Times New Roman</option>'+
'<option value="Trebuchet MS,Helvetica,sans-serif" style="font-family:Trebuchet MS,Helvetica,sans-serif">Trebuchet MS</option>'+
'<option value="Verdana,Verdana,Geneva,sans-serif" style="font-family:Verdana,Verdana,Geneva,sans-serif">Verdana</option>'+
'</select>')
.on("change", function() {
//ensureDashboardNode(true);
var theme = globalDashboardNode.theme.name.split('-')[1];
globalDashboardNode.theme[theme+'Theme'].baseFont = $(this).val();
globalDashboardNode.theme.themeState['base-font'] = {value:$(this).val()};
RED.nodes.dirty(true);
})
.appendTo(baseFontItem);
var themeSettingsContainer = $('<div id="custom-theme-settings">').appendTo(themeTab);
// Markup
// Page styles
var divPageStyle = $('<div>',{class:"form-row"}).appendTo(themeSettingsContainer);
$('<label class="nr-db-theme-label">').text(c_("theme.page-settings")).appendTo(divPageStyle);
var pageStyles = $('<ul class="red-ui-dashboard-theme-styles"></ul>').appendTo(themeSettingsContainer);
addCustomisableStyle('page-titlebar-backgroundColor', c_("theme.page.title"), pageStyles);
addCustomisableStyle('page-backgroundColor', c_("theme.page.page"), pageStyles);
addCustomisableStyle('page-sidebar-backgroundColor', c_("theme.page.side"), pageStyles);
// Group styles
var divGroupStyle = $('<div>',{class:"form-row"}).appendTo(themeSettingsContainer);
$('<label class="nr-db-theme-label">').text(c_("theme.group-settings")).appendTo(divGroupStyle);
var groupStyles = $('<ul class="red-ui-dashboard-theme-styles"></ul>').appendTo(themeSettingsContainer);
addCustomisableStyle('group-textColor', c_("theme.group.text"), groupStyles);
addCustomisableStyle('group-borderColor', c_("theme.group.border"), groupStyles);
addCustomisableStyle('group-backgroundColor', c_("theme.group.background"), groupStyles);
// Widget styles
var divWidgetStyle = $('<div>',{class:"form-row"}).appendTo(themeSettingsContainer);
$('<label class="nr-db-theme-label">').text(c_("theme.widget-settings")).appendTo(divWidgetStyle);
var widgetStyles = $('<ul class="red-ui-dashboard-theme-styles"></ul>').appendTo(themeSettingsContainer);
addCustomisableStyle('widget-textColor', c_("theme.widget.text"), widgetStyles);
addCustomisableStyle('widget-backgroundColor', c_("theme.widget.colour"), widgetStyles);
addCustomisableStyle('widget-borderColor', c_("theme.widget.background"), widgetStyles);
function addCustomisableStyle(id, name, parentUl) {
var styleLi = $('<li class="red-ui-dashboard-theme-item"><span>'+name+'</span></li>').appendTo(parentUl);
var spanColorContainer = $('<span class="nr-db-color-pick-container"></span>').appendTo(styleLi);
$('<input id="'+id+'" class="nr-db-field-themeColor" type="color" value="#ffffff"/>')
.on("change", function() {
colourPickerChangeHandler($(this).attr('id'), $(this).val());
})
.appendTo(spanColorContainer);
addResetButton(id, styleLi);
}
function colourPickerChangeHandler(id, value) {
$("#"+id).css("background-color", value);
$("#"+id+"-reset").css({opacity:1});
globalDashboardNode.theme.themeState[id].edited = true;
globalDashboardNode.theme.themeState[id].value = value;
if (editor) {
editor.setValue(JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site}),1);
}
RED.nodes.dirty(true);
}
function addResetButton(id, parent) {
var resetToDefault = $('<i id="'+id+'-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:0.2})
.click(function(e) { resetClick(e); })
.appendTo(parent);
}
function addLightAndDarkResetButton(id, parent) {
if ($("#" + id + "-reset").length === 0) {
var resetToDefault = $('<i id="'+id+'-reset" class="fa fa-undo nr-db-resetIcon"></i>')
.css({opacity:1})
.click(function(e) { lightAndDarkResetClick(e); })
.appendTo(parent);
globalDashboardNode.theme[globalDashboardNode.theme.name.split('-')[1] + 'Theme'].edited = true;
}
}
function lightAndDarkResetClick(e) {
var elementID = e.target.id.split('-reset')[0];
var key = globalDashboardNode.theme.name.split('-')[1] + 'Theme';
//sanity check - light and dark only allow base-color-reset
if (elementID === 'base-color') { // && globalDashboardNode.theme[key].edited) {
var defaultColor = globalDashboardNode.theme[key].default;
globalDashboardNode.theme[key].reset = true;
generateColours(defaultColor);
setColourPickerColour(elementID, defaultColor);
$("#"+elementID+"-reset").css({opacity:0.2});
globalDashboardNode.theme.themeState[elementID].value = defaultColor;
globalDashboardNode.theme[key].baseColor = defaultColor;
globalDashboardNode.theme[key].edited = false;
RED.nodes.dirty(true);
}
}
function resetClick(e) {
//take off -reset
var elementID = e.target.id.split('-reset')[0];
if (globalDashboardNode.theme.themeState[elementID].edited) {
var defaultColor = globalDashboardNode.theme.themeState['base-color'].value;
var colour;
//set colour
if (elementID === 'base-color') {
colour = defaultColor;
generateColours(colour);
}
else {
var underscore = elementID.split('-').join('_');
colour = colours['calculate_'+underscore](defaultColor);
}
setColourPickerColour(elementID, colour);
$("#"+elementID+"-reset").css({opacity:0.2});
globalDashboardNode.theme.themeState[elementID].edited = false;
globalDashboardNode.theme.themeState[elementID].value = colour;
RED.nodes.dirty(true);
}
}
function setColourPickerColour(id, val, ed) {
$("#"+id).val(val);
$("#"+id).css("background-color", val);
//call mostReadableGreyWhite to set text colour
var textColor = colours.whiteGreyMostReadable(val);
$("#"+id).css("color", textColor);
if (ed === true) { $("#"+id+"-reset").css({opacity:1}); }
else { $("#"+id+"-reset").css({opacity:0.2}); }
}
//Layout Tab
var divTabs = $('<div>',{class:"form-row",style:"position:relative"}).appendTo(layoutTab);
$('<label>').html('<b>'+c_("layout.tab-and-link")+'</b>').appendTo(divTabs);
var buttonGroup = $('<div>',{class:"nr-db-sb-list-button-group"}).appendTo(divTabs);
//Toggle expand buttons
$('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-angle-double-up"></i></a>')
.click(function(evt) {
tabContainer.find(".nr-db-sb-group-list-container").slideUp().addClass('nr-db-sb-collapsed');
tabContainer.find(".nr-db-sb-tab-list-header>.nr-db-sb-list-chevron").css({"transform":"rotate(-90deg)"});
evt.preventDefault();
})
.appendTo(buttonGroup);
$('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-angle-double-down"></i></a>')
.click(function(evt) {
tabContainer.find(".nr-db-sb-group-list-container").slideDown().removeClass('nr-db-sb-collapsed');
tabContainer.find(".nr-db-sb-tab-list-header>.nr-db-sb-list-chevron").css({"transform":""});
evt.preventDefault();
})
.appendTo(buttonGroup);
//Add item button
$('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> '+c_("layout.tab")+'</a>')
.click(function(evt) {
tabContainer.editableList('addItem',{type: 'ui_tab'});
evt.preventDefault();
})
.appendTo(buttonGroup);
$('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> '+c_("layout.link")+'</a>')
.click(function(evt) {
tabContainer.editableList('addItem',{type: 'ui_link'});
evt.preventDefault();
})
.appendTo(buttonGroup);
var tabLists = {};
var groupLists = {};
// toggle slide tab group content
var titleToggle = function (id,content,chevron) {
return function(evt) {
if (content.is(":visible")) {
content.slideUp();
chevron.css({"transform":"rotate(-90deg)"});
content.addClass('nr-db-sb-collapsed');
listStates[id] = false;
}
else {
content.slideDown();
chevron.css({"transform":""});
content.removeClass('nr-db-sb-collapsed');
listStates[id] = true;
}
};
}
var addTabOrLinkItem = function(container,i,item) {
ensureDashboardNode(true);
// create node if needed
if (!item.node) {
var defaultItem = {
'ui_tab': {
_def: RED.nodes.getType('ui_tab'),
type: 'ui_tab',
users: [],
icon: 'dashboard',
name: 'Tab'
},
'ui_link': {
_def: RED.nodes.getType('ui_link'),
type: 'ui_link',
users: [],
icon: 'open_in_browser',
name: 'Link',
target: 'newtab'
}
}
item.node = defaultItem[item.type]
item.node.id = RED.nodes.id()
item.node.order = i+1
item.node.name += ' '+item.node.order
listElements[item.node.id] = container;
if (item.type === 'ui_tab') {
item.groups = [];
}
RED.nodes.add(item.node);
RED.editor.validateNode(item.node);
RED.history.push({
t:'add',
nodes:[item.node.id],
dirty:RED.nodes.dirty()
});
RED.nodes.dirty(true);
}
else if (item.type === undefined) {
item.type = item.node.type
}
listElements[item.node.id] = container;
if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
RED.nodes.updateConfigNodeUsers(item.node);
}
// title
var titleRow = $('<div>',{class:"nr-db-sb-list-header nr-db-sb-tab-list-header"}).appendTo(container);
switch (item.type) {
case 'ui_tab': {
container.addClass("nr-db-sb-tab-list-item");
$('<i class="nr-db-sb-list-handle nr-db-sb-tab-list-handle fa fa-bars"></i>').appendTo(titleRow);
var chevron = $('<i class="fa fa-angle-down nr-db-sb-list-chevron">',{style:"width:10px;"}).appendTo(titleRow);
var tabicon = "fa-object-group";
//var tabicon = item.node.disabled ? "fa-window-close-o" : item.node.hidden ? "fa-eye-slash" : "fa-object-group";
$('<i>',{class:"nr-db-sb-icon nr-db-sb-tab-icon fa "+tabicon}).appendTo(titleRow);
var tabhide = item.node.hidden ? " nr-db-sb-title-hidden" : "";
var tabable = item.node.disabled ? " nr-db-sb-title-disabled" : "";
$('<span>',{class:"nr-db-sb-title"+tabhide+tabable}).text(item.node.name||"").appendTo(titleRow);
break;
}
case 'ui_link': {
$('<i class="nr-db-sb-list-handle fa fa-bars"></i>').appendTo(titleRow);
var title = $('<div class="nr-db-sb-link">').appendTo(titleRow);
var nameContainer = $('<div class="nr-db-sb-link-name-container">').appendTo(title);
$('<i class="fa fa-external-link"></i>').appendTo(nameContainer);
$('<span class="nr-db-sb-link-name">').text(item.node.name||"untitled").appendTo(nameContainer);
$('<div class="nr-db-sb-link-url">').text(item.node.link||"http://").appendTo(title);
break;
}
}
// buttons
var buttonGroup = $('<div>',{class:"nr-db-sb-list-header-button-group",id: item.node.id}).appendTo(titleRow);
if (item.type === 'ui_tab') {
var addGroupButton = $('<a href="#" class="nr-db-sb-tab-add-group-button editor-button editor-button-small nr-db-sb-list-header-button" ><i class="fa fa-plus"></i> '+c_("layout.group")+'</a>').appendTo(buttonGroup);
}
var editButton = $('<a href="#" class="nr-db-sb-tab-edit-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.edit")+'</a>').appendTo(buttonGroup);
editButton.on('click',function(evt) {
RED.editor.editConfig("", item.type, item.node.id);
evt.stopPropagation();
evt.preventDefault();
});
// Dashboard layout tool
if (item.type === 'ui_tab') {
var layoutButton = $('<a href="#" class="nr-db-sb-tab-edit-layout-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.layout")+'</a>').appendTo(buttonGroup);
layoutButton.on('click',function(evt) {
var editTabName = item.node.name ? item.node.name : item.node.id;
var trayOptions = {
title: c_("layout.layout-editor") + " : " + editTabName,
width: Infinity,
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
// clean editor
RED.tray.close();
}
},
{
id: "node-dialog-ok",
text: RED._("common.label.done"),
class: "primary",
click: function() {
// Save data after editing
saveGridDatas();
RED.tray.close();
}
}
],
resize: function(dimensions) {},
open: function(tray) {
// Get widget of specified tab from node information
tabDatas = getTabDataFromNodes(item.node.id);
// The width that can be handled by Layout is up to MAX_GROUP_WIDTH
// Groups exceeding the maximum width are not supported.
var tmpGroups = tabDatas.groups;
tmpGroups.sort(compareOrder);
var groups = [];
for (var cnt = 0; cnt < tmpGroups.length; cnt++) {
if (tmpGroups[cnt].width <= MAX_GROUP_WIDTH) {
groups.push(tmpGroups[cnt]);
}
}
tabDatas.groups = groups;
var editor = $('<div></div>',{addClass: 'nr-dashboard-layout-container-fluid'});
var row = $('<div></div>',{addClass: 'nr-dashboard-layout-row'});
var span_num = Math.floor(12 / groups.length); // bootstrap grid 12 splits
span_num = span_num < 2 ? 2 : span_num; // max 6 groups per row
for (var cnt = 0; cnt < groups.length; cnt++) {
if (cnt !=0 && (cnt % 6) == 0) {
editor.append(row);
editor.append('<div><br></div>');
row = $('<div></div>',{addClass: 'nr-dashboard-layout-row'});
}
var span = $('<div></div>',{addClass: 'nr-dashboard-layout-span' + span_num});
var groupName = groups[cnt].name ? groups[cnt].name : groups[cnt].id;
var title = $('<div></div>', {
style: "margin-top:2px; margin-bottom:2px;"
});
var title_group = $('<div></div>', {
title: groupName,
style: "margin-left:4px; margin-right:8px; overflow:hidden;"
}).appendTo(title);
$("<b/>").text(groupName).appendTo(title_group);
var title_width = $('<div></div>', {
style: "text-align:right; margin-right:8px;"
}).appendTo(title);
$("<span/>", {
style: "margin_right: 8px;"
}).text(c_("layout.width")+': ').appendTo(title_width);
var changeWidth = $('<input>', {
id: 'change-width' + cnt,
value: groups[cnt].width,
style: 'width:30px;',
readonly: true,
'node-id': groups[cnt].id,
});
title_width.append(changeWidth);
title.css('white-space','nowrap');
title.css('overflow','hidden');
var gridstack = $('<div></div>', {
id: 'grid'+cnt,
addClass: 'grid-stack'
});
span.append(title);
span.append(gridstack);
row.append(span);
}
if (groups.length != 0) {
editor.append(row);
}
// Show layout editor in tray
var trayBody = tray.find('.red-ui-tray-body, .editor-tray-body');
trayBody.css('overflow','auto');
trayBody.append(editor);
/////////////////////////////////////////
// Editor screen generation
/////////////////////////////////////////
oldSpacer = [];
widthChange = [];
widgetResize = [];
widgetDrag = [];
for (var cnt=0; cnt < groups.length; cnt++) {
// Gridstack.js option
var options = {
acceptWidgets: true,
alwaysShowResizeHandle: true,
cellHeight: 42,
disableOneColumnMode : true,
float: true,
verticalMargin: 1
};
var gridID='#grid' + cnt;
// gridstack generation
$(gridID).gridstack(options);
// Clear the contents of Grid
var grid = $(gridID+'.grid-stack').data('gridstack');
grid.removeAll();
$(gridID).on("dropped", handleMove(grid));
// Set the width of the display area of gridstack
var groupWidth = Number(groups[cnt].width);
$(gridID+'.grid-stack').css("width", groupWidth * 40);
$(gridID+'.grid-stack').css("background-size", 100/groupWidth+"% 43px");
$(gridID+'.grid-stack').attr("node-id", groups[cnt].id);
$(gridID+'.grid-stack').attr("grid-column", groups[cnt].width);
grid.setColumn(groupWidth, true);
// Determination of placement position of widget of Grid
var widgets = groups[cnt].widgets;
widgets.sort(compareOrder);
var tbl = {};
for (var cnt2 = 0; cnt2 < widgets.length; cnt2++) {
// Set default value when there is auto width
if (widgets[cnt2].auto == true) {
widgets[cnt2].width = groupWidth;
// Adjust to the group width
} else if (widgets[cnt2].width > groupWidth) {
widgets[cnt2].width = groupWidth;
}
// Auto support
if (widgets[cnt2].auto === true || widgets[cnt2].type === 'ui_form') {
widgets[cnt2].height = getDefaultHeight(widgets[cnt2].id, groupWidth);
}
// Calculate coordinates to be placed
var point = search_point(Number(widgets[cnt2].width), Number(widgets[cnt2].height), groupWidth, 256, tbl);
if (point) {
widgets[cnt2].x = point.x;
widgets[cnt2].y = point.y;
}
}
var items = GridStackUI.Utils.sort(widgets);
items.forEach(function (node) {
var minHeight = null;
var maxHeight = null;
// ui_form is fixed to height 2
if (node.type === 'ui_form') {
minHeight = node.height;
maxHeight = node.height;
}
if (node.type !== 'ui_spacer') {
var dispNode = RED.nodes.node(node.id);
var dispType = dispNode._def.paletteLabel;
var dispLabel = dispNode._def.label;
try {
dispLabel = (typeof dispLabel === "function" ? dispLabel.call(dispNode) : dispLabel)||"";
}
catch(err) {
console.log("Definition error: " + node.type + ".label",err);
dispLabel = dispType;
}
var item = $('<div></div>', {
'data-noderedtype': node.type,
'data-noderedid': node.id,
'data-nodereddisptype': dispType,
'data-nodereddisplabel': dispLabel,
'data-noderedsizeauto': node.auto
});
var itemContent = $('<div></div>', {
addClass: 'grid-stack-item-content',
title: dispLabel + ':' + dispType
});
if (node.auto === true) {
itemContent.append('<i class="fa fa-unlock nr-dashboard-layout-resize-enable" title="'+c_("layout.auto")+'"></i>');
} else {
itemContent.append('<i class="fa fa-lock nr-dashboard-layout-resize-disable" title="'+c_("layout.manual")+'"></i>');
}
itemContent.append('<b>'+ dispLabel +'</b><br/>'+ dispType);
item.append(itemContent);
grid.addWidget(
item,
node.x, node.y, node.width, node.height, false, null, null,
minHeight, maxHeight, node.id);
} else {
// Record the spacer node ID to be deleted
oldSpacer.push(node.id);
}
});
$(gridID+'.grid-stack > .grid-stack-item:visible').each( function(idx, el) {
el = $(el);
var node = el.data('_gridstack_node');
var auto = (el[0].dataset.noderedsizeauto == 'true') ? true : false;
grid.resizable(el, !auto);
});
// Group width change
widthChange.push(new changeGroupWidth(cnt));
// Resize widget in group (start event)
widgetResize.push(new resizeGroupWidget(cnt));
// Dragging widgets in a group (start event)
widgetDrag.push(new dragGroupWidget(cnt));
}
$('.grid-stack>.grid-stack-item>.grid-stack-item-content>.nr-dashboard-layout-resize-disable').on('click',layoutResizeDisable);
$('.grid-stack>.grid-stack-item>.grid-stack-item-content>.nr-dashboard-layout-resize-enable').on('click',layoutResizeEnable);
},
close: function() {},
show: function() {}
}
RED.tray.show(trayOptions);
evt.stopPropagation();
evt.preventDefault();
});
}
if (item.type === 'ui_tab') {
var content = $('<div>',{class:"nr-db-sb-group-list-container"}).appendTo(container);
// ui_tab group chevron
if (listStates.hasOwnProperty(item.node.id) && !listStates[item.node.id]) {
content.hide();
chevron.css({"transform":"rotate(-90deg)"});
content.addClass('nr-db-sb-collapsed');
listStates[item.node.id] = false;
}
else {
listStates[item.node.id] = true;
}
titleRow.click(titleToggle(item.node.id,content,chevron));
// ui_tab group list
var ol = $('<ol>',{class:"nr-db-sb-group-list"}).appendTo(content).editableList({
sortable:".nr-db-sb-group-list-header",
addButton: false,
height: 'auto',
connectWith: ".nr-db-sb-group-list",
addItem: function(container,i,group) {
if (!group.node) {
group.node = {
id: RED.nodes.id(),
_def: RED.nodes.getType("ui_group"),
type: "ui_group",
users: [],
tab: item.node.id,
order: i+1,
name: "Group "+(i+1),
width: 6,
disp: true
};
listElements[group.node.id] = container;
RED.nodes.add(group.node);
RED.editor.validateNode(group.node);
group.widgets = [];
RED.history.push({
t:'add',
nodes:[group.node.id],
dirty:RED.nodes.dirty()
});
RED.nodes.dirty(true);
if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
RED.nodes.updateConfigNodeUsers(group.node);
}
}
else {
if (group.node.order === undefined) {
group.node.order = i+1;
}
}
var groupNode = group.node;
elementParents[groupNode] = item.node.id;
var titleRow = $('<div>',{class:"nr-db-sb-list-header nr-db-sb-group-list-header"}).appendTo(container);
$('<i class="nr-db-sb-list-handle nr-db-sb-group-list-handle fa fa-bars"></i>').appendTo(titleRow);
var chevron = $('<i class="fa fa-angle-down nr-db-sb-list-chevron">',{style:"width:10px;"}).appendTo(titleRow);
$('<i class="nr-db-sb-icon nr-db-sb-group-icon fa fa-table"></i>').appendTo(titleRow);
var title = $('<span class="nr-db-sb-title">').text(groupNode.name||groupNode.id||"").appendTo(titleRow);
listElements[groupNode.id] = container;
var buttonGroup = $('<div>',{class:"nr-db-sb-list-header-button-group",id:groupNode.id}).appendTo(titleRow);
var spacerButton = $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> '+c_("layout.spacer")+'</a>').appendTo(buttonGroup);
spacerButton.on('click',function(evt) {
var spaceNode = {
_def: RED.nodes.getType("ui_spacer"),
type: "ui_spacer",
hasUsers: false,
users: [],
id: RED.nodes.id(),
tab: item.node.name,
group: group.node.id,
order: i+1,
name: "spacer",
width: 1,
height:1,
z: RED.workspaces.active(),
label: function() { return "spacer " + this.width + "x" + this.height; }
};
RED.nodes.add(spaceNode);
RED.editor.validateNode(spaceNode);
RED.history.push({
t:'add',
nodes:[spaceNode.id],
dirty:RED.nodes.dirty()
});
RED.nodes.dirty(true);
RED.view.redraw();
evt.stopPropagation();
evt.preventDefault();
});
var editButton = $('<a href="#" class="nr-db-sb-edit-group-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.edit")+'</a>').appendTo(buttonGroup);
var content = $('<div>',{class:"nr-db-sb-widget-list-container"}).appendTo(container);
if (!listStates.hasOwnProperty(groupNode.id) || !listStates[groupNode.id]) {
content.hide();
chevron.css({"transform":"rotate(-90deg)"});
content.addClass('nr-db-sb-collapsed');
listStates[groupNode.id] = false;
}
else {
listStates[groupNode.id] = true;
}
var ol = $('<ol>',{class:"nr-db-sb-widget-list"}).appendTo(content).editableList({
sortable:".nr-db-sb-widget-list-header",
addButton: false,
height: 'auto',
connectWith: ".nr-db-sb-widget-list",
addItem: function(container,i,widgetNode) {
elementParents[widgetNode.id] = groupNode.id;
var titleRow = $('<div>',{class:"nr-db-sb-list-header nr-db-sb-widget-list-header"}).appendTo(container);
$('<i class="nr-db-sb-list-handle nr-db-sb-widget-list-handle fa fa-bars"></i>').appendTo(titleRow);
$('<i class="nr-db-sb-icon nr-db-sb-widget-icon fa fa-picture-o"></i>').click(function(e) { e.preventDefault(); RED.search.show(widgetNode.id); }).appendTo(titleRow);
var l = widgetNode._def.label;
try {
l = (typeof l === "function" ? l.call(widgetNode) : l)||"";
}
catch(err) {
console.log("Definition error: "+d.type+".label",err);
l = d.type;
}
var title = $('<span class="nr-db-sb-title">').text(l).appendTo(titleRow);
listElements[widgetNode.id] = container;
var buttonGroup = $('<div>',{class:"nr-db-sb-list-header-button-group"}).appendTo(titleRow);
var editButton = $('<a href="#" class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> '+c_("layout.edit")+'</a>').appendTo(buttonGroup);
container.on('mouseover',function() {
widgetNode.highlighted = true;
widgetNode.dirty = true;
RED.view.redraw();
});
container.on('mouseout',function() {
widgetNode.highlighted = false;
widgetNode.dirty = true;
RED.view.redraw();
});
editButton.on('click',function(evt) {
RED.editor.edit(widgetNode);
evt.stopPropagation();
evt.preventDefault();
});
},
sortItems: function(items) {
var historyEvents = [];
items.each(function(i,el) {
var node = el.data('data');
var hev = {
t:'edit',
node:node,
changes:{
order:node.order,
group:node.group
},
dirty:node.dirty,
changed:node.changed
};
historyEvents.push(hev);
var changed = false;
if (node.order !== i+1) {
node.order = i+1;
changed = true;
}
if (node.group !== group.node.id) {
var oldGroupNode = RED.nodes.node(node.group);
if (oldGroupNode) {
var index = oldGroupNode.users.indexOf(node);
oldGroupNode.users.splice(index,1);
}
node.group = group.node.id;
group.node.users.push(node);
changed = true;
}
if (changed) {
node.dirty = true;
node.changed = true;
}
})
RED.history.push({
t:'multi',
events: historyEvents
});
RED.nodes.dirty(true);
RED.view.redraw();
}
});
ol.css("min-height","5px");
if (groupNode.id) {
groupLists[groupNode.id] = ol;
}
titleRow.click(titleToggle(groupNode.id,content,chevron));
editButton.on('click',function(evt) {
RED.editor.editConfig("", groupNode.type, groupNode.id);
evt.stopPropagation();
evt.preventDefault();
});
group.widgets.forEach(function(widget) {
ol.editableList('addItem',widget);
})
},
sortItems: function(items) {
var historyEvents = [];
items.each(function(i,el) {
var groupData = el.data('data');
var node = groupData.node;
var hev = {
t:'edit',
node:node,
changes:{
order:node.order,
tab:node.tab
},
dirty:node.dirty,
changed:node.changed
};
historyEvents.push(hev);
var changed = false;
if (node.order !== i+1) {
node.order = i+1;
changed = true;
}
if (changed) {
node.dirty = true;
node.changed = true;
}
if (node.tab !== item.node.id) {
var oldTabNode = RED.nodes.node(node.tab);
if (oldTabNode) {
var index = oldTabNode.users.indexOf(node);
oldTabNode.users.splice(index,1);
}
node.tab = item.node.id;
item.node.users.push(node);
changed = true;
}
})
RED.history.push({
t:'multi',
events: historyEvents
});
RED.nodes.dirty(true);
RED.view.redraw();
}
})
tabLists[item.node.id] = ol;
addGroupButton.click(function(evt) {
ol.editableList('addItem',{});
evt.stopPropagation();
evt.preventDefault();
});
item.groups.forEach(function(group) {
ol.editableList('addItem',group);
});
}
}
var tabContainer = $('<ol>',{class:"nr-db-sb-tab-list"}).appendTo(divTabs).editableList({
sortable:".nr-db-sb-tab-list-header",
addButton: false,
addItem: addTabOrLinkItem,
sortItems: function(items) {
var historyEvents = [];
items.each(function(i,el) {
var itemData = el.data('data');
var node = itemData.node;
var hev = {
t:'edit',
node:node,
changes:{
order:node.order
},
dirty:node.dirty,
changed:node.changed
}
historyEvents.push(hev);
var changed = false;
if (node.order !== i+1) {
node.order = i+1;
changed = true;
}
if (changed) {
node.dirty = true;
node.changed = true;
}
})
RED.history.push({
t:'multi',
events: historyEvents
});
RED.nodes.dirty(true);
RED.view.redraw();
}
});
var orphanedWidgets = $('<div>',{class:"form-row"}).appendTo(layoutTab);
$('<span><i class="fa fa-info-circle"></i> There <span id="nr-db-missing-group-count"></span> not in a group. Click <a id="nr-db-add-missing-groups" href="#">here</a> to create the missing groups</span>').appendTo(orphanedWidgets);
orphanedWidgets.find('a').click(function(event) {
var unknownGroups = {};
RED.nodes.eachNode(function(node) {
if (/^ui_/.test(node.type) && node.type !== 'ui_link' && node.type !== 'ui_toast' && node.type !== 'ui_ui_control') {
if (!RED.nodes.node(node.group)) {
var g = node.group || "_BLANK_";
unknownGroups[g] = unknownGroups[g] || [];
unknownGroups[g].push(node);
}
}
});
var tab = null;
var tabs = tabContainer.editableList('items');
tabs.first().each(function(i,el) {
var tabData = el.data('data');
tab = tabData.node;
});
var hev = [];
if (tab === null) {
tab = {
id: RED.nodes.id(),
_def: RED.nodes.getType("ui_tab"),
type: "ui_tab",
users: [],
order: 0,
name: "Tab",
icon: "dashboard"
};
RED.nodes.add(tab);
RED.editor.validateNode(tab);
hev.push(tab.id);
}
for (var groupId in unknownGroups) {
if (unknownGroups.hasOwnProperty(groupId)) {
var groupNode = {
id: RED.nodes.id(),
_def: RED.nodes.getType("ui_group"),
type: "ui_group",
users: [],
tab: tab.id,
order: i+1,
name: (groupId==="_BLANK_"?"Group":groupId),
width: 6,
disp: true
};
hev.push(groupNode.id);
RED.nodes.add(groupNode);
RED.editor.validateNode(groupNode);
if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
RED.nodes.updateConfigNodeUsers(groupNode);
}
var widgets = unknownGroups[groupId];
for (var i=0; i<widgets.length; i++) {
widgets[i].group = groupNode.id;
widgets[i].changed = true;
widgets[i].dirty = true;
if (RED.nodes.hasOwnProperty('updateConfigNodeUsers')) {
RED.nodes.updateConfigNodeUsers(widgets[i]);
}
RED.editor.validateNode(widgets[i]);
}
}
}
RED.history.push({
t:'add',
nodes: hev,
dirty:RED.nodes.dirty()
});
RED.nodes.dirty(true);
refresh();
refreshOrphanedWidgets();
RED.view.redraw();
event.preventDefault();
});
var listElements = {};
var dashboard = [];
var listStates = {};
var elementParents = {};
var awaitingGroups = {};
var awaitingTabs = {};
function getCurrentList() {
var currentList = [];
var tabs = tabContainer.editableList('items');
var open = false;
tabs.each(function(i,el) {
var tabData = el.data('data');
var tab = [];
var groups = el.find('.nr-db-sb-group-list').editableList('items');
groups.each(function(j,el) {
var group = [];
var groupData = el.data('data');
var widgets = el.find('.nr-db-sb-widget-list').editableList('items');
widgets.each(function(k,el) {
var widgetData = el.data('data');
group.push(widgetData.id);
})
tab.push({id:groupData.node.id, widgets:group});
});
currentList.push({id:tabData.node.id,groups:tab});
});
return currentList;
}
function refreshOrphanedWidgets() {
var unknownGroups = {};
var count = 0;
RED.nodes.eachNode(function(node) {
if (/^ui_/.test(node.type) && node.type !== 'ui_link' && node.type !== 'ui_toast' && node.type !== 'ui_ui_control' && (node.type === 'ui_template' && node.templateScope !== 'global')) {
if (!RED.nodes.node(node.group)) {
var g = node.group || "_BLANK_";
unknownGroups[g] = unknownGroups[g] || [];
unknownGroups[g].push(node);
count++;
}
}
});
if (count > 0) {
orphanedWidgets.show();
$("#nr-db-missing-group-count").text((count===1?"is ":"are ")+count+" widget"+(count === 1?"":"s"))
}
else {
orphanedWidgets.hide();
}
}
function refresh() {
var currentList = getCurrentList();
dashboard = [];
var tabs = {};
var groups = {};
var elements = [];
var groupElements = {};
var tabGroups = {};
var groupId;
var group;
var tabId;
var tab;
var unknownGroups = 0;
// Find all the tabs and groups
RED.nodes.eachConfig(function(node) {
switch (node.type) {
case 'ui_tab':
case 'ui_link': {
tabs[node.id] = node;
//tabContainer.editableList('addItem',node);
break;
}
case 'ui_group': {
groups[node.id] = node;
break;
}
case 'ui_spacer': {
if (groups.hasOwnProperty(node.group)) {
groupElements[node.group] = groupElements[node.group]||[];
groupElements[node.group].push(node);
}
break;
}
}
});
for (groupId in groups) {
if (groups.hasOwnProperty(groupId)) {
group = groups[groupId];
if (tabs.hasOwnProperty(group.tab)) {
// This group belongs to a tab
tabGroups[group.tab] = tabGroups[group.tab]||[];
tabGroups[group.tab].push(group);
}
else {
unknownGroups++;
}
}
}
// Find all ui widgets - list them by their group id
RED.nodes.eachNode(function(node) {
if (/^ui_/.test(node.type)) {
if (groups.hasOwnProperty(node.group)) {
groupElements[node.group] = groupElements[node.group]||[];
groupElements[node.group].push(node);
}
else if ((node.type !== 'ui_toast')&&(node.type !== 'ui_ui_control')&&(node.type === 'ui_template' && node.templateScope !== 'global')) {
unknownGroups++;
}
}
});
if (unknownGroups > 0) {
$("#nr-db-missing-group-count").text((unknownGroups===1?"is ":"are ")+unknownGroups+" widget"+(unknownGroups === 1?"":"s"))
orphanedWidgets.show();
}
else {
orphanedWidgets.hide();
}
// Sort each group's array of widgets
for (groupId in groupElements) {
if (groupElements.hasOwnProperty(groupId)) {
group = groupElements[groupId];
groupElements[groupId] = group.map(function(v,i) { return {n:v,i:i} }).sort(function(A,B) {
if (A.n.order < B.n.order) { return A.n.order!==0?-1:1;}
if (A.n.order > B.n.order) { return B.n.order!==0?1:-1;}
return A.i - B.i;
}).map(function(v) { return v.n})
}
}
// Sort each tabs's array of groups
for (tabId in tabGroups) {
if (tabGroups.hasOwnProperty(tabId)) {
tab = tabGroups[tabId];
tabGroups[tabId] = tab.map(function(v,i) { return {n:v,i:i} }).sort(function(A,B) {
if (A.n.order < B.n.order) { return -1;}
if (A.n.order > B.n.order) { return 1;}
return A.i - B.i;
}).map(function(v) { return v.n})
}
}
var tabIds = Object.keys(tabs).map(function(v,i) { return {n:tabs[v],i:i} }).sort(function(A,B) {
if (A.n.order < B.n.order) { return -1;}
if (A.n.order > B.n.order) { return 1;}
return A.i - B.i;
}).map(function(v) { return v.n.id});
tabIds.forEach(function(tabId) {
var tab = {node:tabs[tabId],groups:[]};
if (tabGroups[tabId]) {
tabGroups[tabId].forEach(function(groupNode) {
var group = {node:groupNode,widgets:[]};
if (groupElements[groupNode.id]) {
group.widgets = groupElements[groupNode.id];
}
tab.groups.push(group);
});
}
dashboard.push(tab);
});
var newList = dashboard.map(function(t) {
return {
id: t.node.id,
groups: t.groups.map(function(g) {
return {
id: g.node.id,
widgets: g.widgets.map(function(w) {
return w.id;
})
}
})
}
});
if (JSON.stringify(newList)!=JSON.stringify(currentList)) {
listElements = {};
groupLists = {};
tabLists = {};
tabs = {};
groups = {};
elementParents = {};
tabContainer.empty();
dashboard.forEach(function(tab) {
tabContainer.editableList('addItem',tab);
});
}
//ensureDashboardNode(true);
if (globalDashboardNode) {
$("#nr-db-field-title").val(globalDashboardNode.site.name);
$("#nr-db-field-allowSwipe").val(globalDashboardNode.site.allowSwipe || "false");
$("#nr-db-field-allowTempTheme").val(globalDashboardNode.site.allowTempTheme || "true");
$("#nr-db-field-hideToolbar").val(globalDashboardNode.site.hideToolbar || "false");
$("#nr-db-field-dateFormat").val(globalDashboardNode.site.dateFormat);
if (typeof globalDashboardNode.site.sizes !== "object") {
globalDashboardNode.site.sizes = sizes;
}
$("#nr-db-field-sx").val(globalDashboardNode.site.sizes.sx);
$("#nr-db-field-sy").val(globalDashboardNode.site.sizes.sy);
$("#nr-db-field-px").val(globalDashboardNode.site.sizes.px);
$("#nr-db-field-py").val(globalDashboardNode.site.sizes.py);
$("#nr-db-field-cx").val(globalDashboardNode.site.sizes.cx);
$("#nr-db-field-cy").val(globalDashboardNode.site.sizes.cy);
$("#nr-db-field-gx").val(globalDashboardNode.site.sizes.gx);
$("#nr-db-field-gy").val(globalDashboardNode.site.sizes.gy);
if (typeof globalDashboardNode.theme.angularTheme !== "object") {
globalDashboardNode.theme.angularTheme = aTheme;
}
$("#nr-db-field-angPrimary").val(globalDashboardNode.theme.angularTheme.primary || "indigo");
$("#nr-db-field-angAccents").val(globalDashboardNode.theme.angularTheme.accents || "blue");
$("#nr-db-field-angWarn").val(globalDashboardNode.theme.angularTheme.warn || "red");
$("#nr-db-field-angBackground").val(globalDashboardNode.theme.angularTheme.background || "grey");
$("#nr-db-field-angLook").val(globalDashboardNode.theme.angularTheme.palette || "light");
$("#nr-db-field-theme").val(globalDashboardNode.theme.name);
$("#ui-sidebar-name").val(globalDashboardNode.theme.customTheme.name);
if (globalDashboardNode.theme.name === 'theme-custom') {
$("#custom-theme-library-container").show();
$("#custom-theme-settings").show();
}
else {
$("#custom-theme-library-container").hide();
$("#custom-theme-settings").hide();
}
if ($('#nr-db-field-allowTempTheme').val() === "none") {
ulDashboardTabs.children().eq(2).addClass("hidden");
ulDashboardTabs.children().eq(3).removeClass("hidden");
}
else {
ulDashboardTabs.children().eq(2).removeClass("hidden");
ulDashboardTabs.children().eq(3).addClass("hidden");
}
//set colour start
if (typeof globalDashboardNode.theme.name !== "string") {
globalDashboardNode.theme.name = "theme-light";
}
var currentTheme = globalDashboardNode.theme.name.split("-")[1];
var startingValue = globalDashboardNode.theme[currentTheme+"Theme"].baseColor;
setColourPickerColour("base-color", startingValue);
$("#nr-db-field-font").val(globalDashboardNode.theme[currentTheme+"Theme"].baseFont);
generateColours(startingValue);
if (globalDashboardNode.theme.name === 'theme-light' || globalDashboardNode.theme.name === 'theme-dark') {
addLightAndDarkResetButton('base-color', $('#base-settings-ul').children().first());
}
if (editor === undefined) {
editor = RED.editor.createEditor({
id: 'nr-db-field-format-editor',
mode: 'ace/mode/javascript',
value: JSON.stringify({theme:globalDashboardNode.theme.themeState, site:globalDashboardNode.site})
});
RED.library.create({
url:"themes", // where to get the data from
type:"theme", // the type of object the library is for
editor: editor, // the field name the main text body goes to
mode:"ace/mode/javascript",
fields:['name'],
elementPrefix:"ui-sidebar-"
});
}
editor.on('input', function() {
// Check for any changes on the editor object
// i.e. has the theme been customised compared
// to what is stored
var editorObject = JSON.parse(editor.getValue());
//Update theme object if necessary
if (JSON.stringify(editorObject.theme) !== JSON.stringify(globalDashboardNode.theme.themeState)) {
globalDashboardNode.theme.themeState = editorObject.theme;
if ($("#ui-sidebar-name").val() !== globalDashboardNode.theme.customTheme.name) {
globalDashboardNode.theme.customTheme.name = $("#ui-sidebar-name").val();
globalDashboardNode.theme.customTheme.baseColor = globalDashboardNode.theme.themeState["base-color"].value;
setColourPickerColour("base-color", globalDashboardNode.theme.customTheme.baseColor);
generateColours(globalDashboardNode.theme.themeState["base-color"].value);
RED.nodes.dirty(true);
}
}
if (JSON.stringify(aTheme) !== JSON.stringify(globalDashboardNode.theme.angularTheme)) {
globalDashboardNode.theme.angularTheme = aTheme;
}
//Update site object if necessary
if (JSON.stringify(editorObject.site) !== JSON.stringify(globalDashboardNode.site)) {
globalDashboardNode.site = editorObject.site;
$("#nr-db-field-title").val(globalDashboardNode.site.name);
$("#nr-db-field-hideToolbar").val(globalDashboardNode.site.hideToolbar);
$("#nr-db-field-allowSwipe").val(globalDashboardNode.site.allowSwipe);
$("#nr-db-field-allowTempTheme").val(globalDashboardNode.site.allowTempTheme);
$("#nr-db-field-dateFormat").val(globalDashboardNode.site.dateFormat);
$("#nr-db-field-sx").val(globalDashboardNode.site.sizes.sx);
$("#nr-db-field-sy").val(globalDashboardNode.site.sizes.sy);
$("#nr-db-field-px").val(globalDashboardNode.site.sizes.px);
$("#nr-db-field-py").val(globalDashboardNode.site.sizes.py);
$("#nr-db-field-gx").val(globalDashboardNode.site.sizes.gx);
$("#nr-db-field-gy").val(globalDashboardNode.site.sizes.gy);
$("#nr-db-field-cx").val(globalDashboardNode.site.sizes.cx);
$("#nr-db-field-cy").val(globalDashboardNode.site.sizes.cy);
RED.nodes.dirty(true);
}
});
}
awaitingGroups = {};
awaitingTabs = {};
}
RED.sidebar.addTab({
id: "dashboard",
label: c_("label.dashboard"),
name: "Dashboard",
content: content,
closeable: true,
pinned: true,
iconClass: "fa fa-bar-chart",
disableOnEdit: true,
onchange: function() { refresh(); }
});
editSaveEventHandler = function(node) {
if (/^ui_/.test(node.type)) {
if (node.type === "ui_tab" || node.type === "ui_group") {
if (listElements[node.id]) {
// Existing element
listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").text(node.name||node.id);
if (node.type === "ui_group") {
refresh();
}
else {
if (node.hidden === true) { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").addClass('nr-db-sb-title-hidden'); }
else { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").removeClass('nr-db-sb-title-hidden'); }
if (node.disabled === true) { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").addClass('nr-db-sb-title-disabled'); }
else { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").removeClass('nr-db-sb-title-disabled'); }
}
}
else if (node.type === "ui_tab") {
// Adding a tab
tabContainer.editableList('addItem',{node:node,groups:[]})
}
else {
// Adding a group
if (tabLists[node.tab]) {
tabLists[node.tab].editableList('addItem',{node:node,widgets:[]})
}
}
}
else if (node.type === "ui_link") {
if (listElements[node.id]) {
var container = listElements[node.id];
container.find(".nr-db-sb-link-name").text(node.name||"untitled");
container.find(".nr-db-sb-link-url").text(node.link);
}
}
else {
refreshOrphanedWidgets();
if (listElements[node.id]) {
if (node.group != elementParents[node.id]) {
// Moved to a different group
if (groupLists[elementParents[node.id]]) {
groupLists[elementParents[node.id]].editableList('removeItem',listElements[node.id].data('data'))
}
if (groupLists[node.group]) {
groupLists[node.group].editableList('removeItem',node)
groupLists[node.group].editableList('addItem',node);
}
}
else {
var l = node._def.label;
try {
l = (typeof l === "function" ? l.call(node) : l)||"";
}
catch(err) {
console.log("Definition error: "+d.type+".label",err);
l = d.type;
}
listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").text(l);
}
}
else {
if (groupLists[node.group]) {
if (node.order === 0) { node.order = groupLists[node.group].editableList('length'); }
groupLists[node.group].editableList('addItem',node);
}
}
}
}
};
RED.events.on("editor:save",editSaveEventHandler);
// Dashboard layout tool
layoutUpdateEventHandler = function(node) {
if (/^ui_/.test(node.type) && node.type !== 'ui_link' && node.type !== 'ui_toast' && node.type !== 'ui_ui_control' && node.type !== 'ui_audio' && node.type !== 'ui_base' && node.type !== 'ui_group' && node.type !== 'ui_tab') {
if (listElements[node.id]) {
if (node.group != elementParents[node.id]) {
// Moved to a different group
if (groupLists[elementParents[node.id]]) {
groupLists[elementParents[node.id]].editableList('removeItem',listElements[node.id].data('data'))
}
if (groupLists[node.group]) {
groupLists[node.group].editableList('removeItem',node)
groupLists[node.group].editableList('addItem',node);
groupLists[node.group].editableList('sort',function(a,b) {return a.order-b.order;});
}
}
else {
groupLists[node.group].editableList('sort',function(a,b) {return a.order-b.order;});
}
}
}
};
RED.events.on("layout:update",layoutUpdateEventHandler);
var pendingAdd = [];
var pendingAddTimer = null;
function handlePendingAdds() {
var hasTabs = false;
var hasGroups = false;
pendingAdd.sort(function(A,B) {
hasTabs = hasTabs || A.type === "ui_tab" || B.type === "ui_tab";
hasGroups = hasGroups || A.type === "ui_group" || B.type === "ui_group";
if (A.type === B.type) {
return 0;
}
if (A.type === "ui_tab") {
return -1;
}
else if (B.type === "ui_tab") {
return 1;
}
else if (A.type === "ui_group") {
return -1;
}
else if (B.type === "ui_group") {
return 1;
}
return 0
});
var updateList = {};
for (var i=0; i<pendingAdd.length; i++) {
var node = pendingAdd[i];
if (listElements[node.id]) {
continue;
}
if (node.type === "ui_tab") {
tabContainer.editableList('addItem',{node:node,groups:[]});
}
else {
if (hasTabs) {
// We've added some tabs, need to give jquery time to add the lists
pendingAdd = pendingAdd.slice(i);
pendingAddTimer = setTimeout(handlePendingAdds,50);
return;
}
if (node.type === "ui_group") {
if (tabLists[node.tab]) {
tabLists[node.tab].editableList('addItem',{node:node,widgets:[]});
}
}
else {
if (hasGroups) {
// We've added some tabs, need to give jquery time to add the lists
pendingAdd = pendingAdd.slice(i);
pendingAddTimer = setTimeout(handlePendingAdds,50);
return;
}
if (groupLists[node.group]) {
groupLists[node.group].editableList('addItem',node)
if (node.order >= 0) {
updateList[node.group] = true;
}
}
else {
refreshOrphanedWidgets();
}
}
}
}
Object.keys(updateList).forEach(function (group) {
var list = groupLists[group];
if (list) {
list.editableList("sort", function(a,b) {return a.order-b.order;});
}
});
pendingAdd = [];
}
nodesAddEventHandler = function(node) {
if (/^ui_/.test(node.type) && !listElements[node.id]) {
pendingAdd.push(node);
clearTimeout(pendingAddTimer);
pendingAddTimer = setTimeout(handlePendingAdds,100);
}
};
RED.events.on("nodes:add", nodesAddEventHandler);
nodesRemoveEventHandler = function(node) {
if (/^ui_/.test(node.type)) {
if (node.type === "ui_tab" || node.type === "ui_link") {
if (listElements[node.id]) {
tabContainer.editableList('removeItem',listElements[node.id].data('data'));
delete tabLists[node.id];
}
}
else if (node.type === "ui_group") {
if (tabLists[node.tab] && listElements[node.id]) {
tabLists[node.tab].editableList('removeItem',listElements[node.id].data('data'));
}
delete groupLists[node.id];
}
else {
if (groupLists[node.group]) {
groupLists[node.group].editableList('removeItem',node)
}
}
refreshOrphanedWidgets();
delete listElements[node.id];
}
};
RED.events.on("nodes:remove", nodesRemoveEventHandler);
}
});
$.widget("nodereddashboard.elementSizerByNum", {
_create: function() {
var that = this;
var has_height = this.options.has_height;
var pos = this.options.pos;
var c_width = has_height ? '15%' : '6%';
var container = $('<div>').css({
position: 'absolute',
background: 'white',
padding: '10px 10px 10px 10px',
border: '1px solid grey',
zIndex: '20',
borderRadius: "4px",
display:"none",
width: c_width
}).appendTo(document.body);
var box0 = $("<div>").css({
fontSize: '13px',
color: '#aaa',
float: 'left',
paddingTop: '1px'
}).appendTo(container);
var width = $(this.options.width).val();
var height = has_height ? $(this.options.height).val() : undefined;
var max_w = '';
var groupNode = this.options.groupNode;
if(groupNode) {
max_w = 'max="'+groupNode.width+'"';
}
width = (width > 0) ? width : 1;
height = (height > 0) ? height : 1;
var in0 = $('<input type="number" min="1" '+max_w+'>')
.css("width", has_height ? "40%" : "100%")
.val(width)
.appendTo(box0);
if(has_height) {
var pad = $('<span>')
.text(" x ")
.appendTo(box0);
var in1 = $('<input type="number" min="1">')
.css("width", "40%")
.val(height)
.appendTo(box0);
}
var closeTimer;
var closeFunc = function() {
var w = in0.val();
var h = has_height ? in1.val() : undefined;
var label = that.options.label;
label.text(w+(has_height ? (' x '+h) : ''));
$(that.options.width).val(w).change();
if(has_height) {
$(that.options.height).val(h).change();
}
that.destroy();
};
container.keypress(function(e) {
if(e.which === 13) { // pressed ENTER
container.fadeOut(100, closeFunc);
}
});
container.on('mouseleave', function(e) {
closeTimer = setTimeout(function() {
container.fadeOut(200, closeFunc);
}, 100);
});
container.on('mouseenter', function(e) {
clearTimeout(closeTimer);
});
container.css({
top: (pos.top -10)+"px",
left: (pos.left +10)+"px"
});
container.fadeIn(200);
}
});
$.widget( "nodereddashboard.elementSizer", {
_create: function() {
var that = this;
var gridWidth = 6;
var width = parseInt($(this.options.width).val()||0);
var height = parseInt(this.options.hasOwnProperty('height')?$(this.options.height).val():"1")||0;
var hasAuto = (!this.options.hasOwnProperty('auto') || this.options.auto);
this.element.css({
minWidth: this.element.height()+4
});
var auto_text = c_("auto");
var sizeLabel = (width === 0 && height === 0)?auto_text:width+(this.options.hasOwnProperty('height')?" x "+height:"");
this.element.text(sizeLabel).on('mousedown',function(evt) {
evt.stopPropagation();
evt.preventDefault();
var width = parseInt($(that.options.width).val()||0);
var height = parseInt(that.options.hasOwnProperty('height')?$(that.options.height).val():"1")||0;
var maxWidth = 0;
var maxHeight;
var fixedWidth = false;
var fixedHeight = false;
var group = $(that.options.group).val();
if (group) {
var groupNode = RED.nodes.node(group);
if (groupNode) {
gridWidth = Math.max(6,groupNode.width,+width);
maxWidth = groupNode.width || gridWidth;
fixedWidth = true;
}
maxHeight = Math.max(6,+height+1);
}
else {
gridWidth = Math.max(12,+width);
maxWidth = gridWidth;
maxHeight = 1;
fixedHeight = true;
}
var pos = $(this).offset();
var container = $('<div>').css({
position: 'absolute',
background: 'white',
padding: '5px 10px 10px 10px',
border: '1px solid grey',
zIndex: '20',
borderRadius: "4px",
display:"none"
}).appendTo(document.body);
var closeTimer;
container.on('mouseleave',function(evt) {
closeTimer = setTimeout(function() {
container.fadeOut(200, function() { $(this).remove(); });
},100)
});
container.on('mouseenter',function() {
clearTimeout(closeTimer);
})
var label = $("<div>").css({
fontSize: '13px',
color: '#aaa',
float: 'left',
paddingTop: '1px'
}).appendTo(container).text((width === 0 && height === 0)?auto_text:(width+(that.options.hasOwnProperty('height')?" x "+height:"")));
label.hover(function() {
$(this).css('text-decoration', 'underline');
}, function() {
$(this).css('text-decoration', 'none');
});
label.click(function(e) {
var group = $(that.options.group).val();
var groupNode = null;
if(group) {
groupNode = RED.nodes.node(group);
if(groupNode === null) {
return;
}
}
$(that).elementSizerByNum({
width: that.options.width,
height: that.options.height,
groupNode: groupNode,
pos: pos,
label: that.element,
has_height: that.options.hasOwnProperty('height')
});
closeTimer = setTimeout(function() {
container.fadeOut(200, function() {
$(this).remove();
});
},100)
});
var buttonRow = $('<div>',{style:"text-align:right; height:25px;"}).appendTo(container);
if (hasAuto) {
var button = $('<a>',{href:"#",class:"editor-button editor-button-small",style:"margin-bottom:5px"})
.text(auto_text)
.appendTo(buttonRow)
.on('mouseup',function(evt) {
that.element.text(auto_text)
$(that.options.width).val(0).change();
$(that.options.height).val(0).change();
evt.preventDefault();
container.fadeOut(200, function() { $(this).remove(); });
});
}
var cellBorder = "1px dashed lightGray";
var cellBorderExisting = "1px solid gray";
var cellBorderHighlight = "1px dashed black";
var rows = [];
function addRow(i) {
var row = $('<div>').css({padding:0,margin:0,height:"25px","box-sizing":"border-box"}).appendTo(container);
rows.push(row);
cells.push([])
for (var j=0; j<gridWidth; j++) {
addCell(i,j);
}
}
function addCell(i,j) {
var row = rows[i];
var cell = $('<div>').css({
display:"inline-block",
width: "25px",
height: "25px",
borderRight: (j===(width-1)&&i<height)?cellBorderExisting:cellBorder,
borderBottom: (i===(height-1)&&j<width)?cellBorderExisting:cellBorder,
boxSizing: "border-box",
cursor:"pointer",
background: (j<maxWidth)?"#fff":"#eee"
}).appendTo(row);
cells[i].push(cell);
if (j===0) {
cell.css({borderLeft:((i<=height-1)?cellBorderExisting:cellBorder)});
}
if (i===0) {
cell.css({borderTop:((j<=width-1)?cellBorderExisting:cellBorder)});
}
if (j<maxWidth) {
cell.data("w",j);
cell.data("h",i);
cell.on("mouseup",function() {
that.element.text(($(this).data("w")+1)+(that.options.hasOwnProperty('height')?" x "+($(this).data("h")+1):""))
$(that.options.width).val($(this).data("w")+1).change();
$(that.options.height).val($(this).data("h")+1).change();
container.fadeOut(200, function() { $(this).remove(); });
});
cell.on("mouseover",function() {
var w = $(this).data("w");
var h = $(this).data("h");
label.text((w+1)+(that.options.hasOwnProperty('height')?" x "+(h+1):""));
for (var y = 0; y<maxHeight; y++) {
for (var x = 0; x<maxWidth; x++) {
cells[y][x].css({
background: (y<=h && x<=w)?'#ddd':'#fff',
borderLeft: (x===0&&y<=h)?cellBorderHighlight:(x===0)?((y<=height-1)?cellBorderExisting:cellBorder):'',
borderTop: (y===0&&x<=w)?cellBorderHighlight:(y===0)?((x<=width-1)?cellBorderExisting:cellBorder):'',
borderRight: (x===w&&y<=h)?cellBorderHighlight:((x===width-1&&y<=height-1)?cellBorderExisting:cellBorder),
borderBottom: (y===h&&x<=w)?cellBorderHighlight:((y===height-1&&x<=width-1)?cellBorderExisting:cellBorder)
})
}
}
if (!fixedHeight && h === maxHeight-1) {
addRow(maxHeight++)
}
if (!fixedWidth && w === maxWidth-1) {
maxWidth++;
gridWidth++;
for (var r=0; r<maxHeight; r++) {
addCell(r,maxWidth-1);
}
}
})
}
}
var cells = [];
for (var i=0; i<maxHeight; i++) {
addRow(i);
}
container.css({
top:(pos.top)+"px",
left:(pos.left)+"px"
});
container.fadeIn(200);
})
}
});
})(jQuery);
</script>
<script type="text/html" data-template-name="ui_base">
<div class='form-row'>
This <i>ui_base</i> node is the main node that all<br/>other dashboard widget nodes communicate to.<br/>
<br/>One instance is required to support the dashboard.<br/>
<br/>If you have no dashboard you can delete this node.<br/>
It will be re-created automatically if required.<br/>
</div>
</script>