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

Allow tabs to be hidden via x-button on tab

This commit is contained in:
Nick O'Leary 2021-08-25 11:34:41 +01:00
parent c8949f5eeb
commit 7962278475
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 70 additions and 53 deletions

View File

@ -337,10 +337,11 @@ RED.tabs = (function() {
if (link.length === 0) { if (link.length === 0) {
return; return;
} }
var wasUnhidden = false;
if (link.parent().hasClass("hide")) { if (link.parent().hasClass("hide")) {
wasUnhidden = true;
link.parent().removeClass("hide"); link.parent().removeClass("hide");
if (options.onshow) {
options.onshow(tabs[link.attr('href').slice(1)])
}
} }
if (!link.parent().hasClass("active")) { if (!link.parent().hasClass("active")) {
ul.children().removeClass("active"); ul.children().removeClass("active");
@ -358,7 +359,7 @@ RED.tabs = (function() {
} }
} }
if (options.onchange) { if (options.onchange) {
options.onchange(tabs[link.attr('href').slice(1)],wasUnhidden); options.onchange(tabs[link.attr('href').slice(1)]);
} }
updateTabWidths(); updateTabWidths();
setTimeout(function() { setTimeout(function() {
@ -542,6 +543,47 @@ RED.tabs = (function() {
} }
return next; return next;
} }
function showTab(id) {
if (tabs[id]) {
var li = ul.find("a[href='#"+id+"']").parent();
if (li.hasClass("hide")) {
li.removeClass("hide");
if (ul.find("li.red-ui-tab:not(.hide)").length === 1) {
activateTab(li.find("a"))
}
updateTabWidths();
if (options.onshow) {
options.onshow(tabs[id])
}
}
}
}
function hideTab(id) {
if (tabs[id]) {
var li = ul.find("a[href='#"+id+"']").parent();
if (!li.hasClass("hide")) {
if (li.hasClass("active")) {
var tab = findPreviousVisibleTab(li);
if (tab.length === 0) {
tab = findNextVisibleTab(li);
}
if (tab.length > 0) {
activateTab(tab.find("a"));
} else {
if (options.onchange) {
options.onchange(null);
}
}
}
li.removeClass("active");
li.addClass("hide");
updateTabWidths();
if (options.onhide) {
options.onhide(tabs[id])
}
}
}
}
var tabAPI = { var tabAPI = {
addTab: function(tab,targetIndex) { addTab: function(tab,targetIndex) {
@ -711,6 +753,15 @@ RED.tabs = (function() {
removeTab(tab.id); removeTab(tab.id);
}); });
} }
if (tab.hideable) {
li.addClass("red-ui-tabs-closeable")
var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
closeLink.append('<i class="fa fa-times" />');
closeLink.on("click",function(event) {
event.preventDefault();
hideTab(tab.id);
});
}
var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li); var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
if (options.onselect) { if (options.onselect) {
@ -831,45 +882,9 @@ RED.tabs = (function() {
contains: function(id) { contains: function(id) {
return ul.find("a[href='#"+id+"']").length > 0; return ul.find("a[href='#"+id+"']").length > 0;
}, },
showTab: function(id) { showTab: showTab,
if (tabs[id]) { hideTab: hideTab,
var li = ul.find("a[href='#"+id+"']").parent();
if (li.hasClass("hide")) {
li.removeClass("hide");
if (ul.find("li.red-ui-tab:not(.hide)").length === 1) {
activateTab(li.find("a"))
}
updateTabWidths();
return true;
}
}
return false;
},
hideTab: function(id) {
if (tabs[id]) {
var li = ul.find("a[href='#"+id+"']").parent();
if (!li.hasClass("hide")) {
if (li.hasClass("active")) {
var tab = findPreviousVisibleTab(li);
if (tab.length === 0) {
tab = findNextVisibleTab(li);
}
if (tab.length > 0) {
activateTab(tab.find("a"));
} else {
if (options.onchange) {
options.onchange(null);
}
}
}
li.removeClass("active");
li.addClass("hide");
updateTabWidths();
return true;
}
}
return false;
},
renameTab: function(id,label) { renameTab: function(id,label) {
tabs[id].label = label; tabs[id].label = label;
var tab = ul.find("a[href='#"+id+"']"); var tab = ul.find("a[href='#"+id+"']");

View File

@ -35,6 +35,9 @@ RED.workspaces = (function() {
function addWorkspace(ws,skipHistoryEntry,targetIndex) { function addWorkspace(ws,skipHistoryEntry,targetIndex) {
if (ws) { if (ws) {
if (!ws.closeable) {
ws.hideable = true;
}
workspace_tabs.addTab(ws,targetIndex); workspace_tabs.addTab(ws,targetIndex);
workspace_tabs.resize(); workspace_tabs.resize();
} else { } else {
@ -43,7 +46,7 @@ RED.workspaces = (function() {
workspaceIndex += 1; workspaceIndex += 1;
} while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0); } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})}; ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex}), hideable: true};
RED.nodes.addWorkspace(ws,targetIndex); RED.nodes.addWorkspace(ws,targetIndex);
workspace_tabs.addTab(ws,targetIndex); workspace_tabs.addTab(ws,targetIndex);
workspace_tabs.activateTab(tabId); workspace_tabs.activateTab(tabId);
@ -245,7 +248,7 @@ RED.workspaces = (function() {
function createWorkspaceTabs() { function createWorkspaceTabs() {
workspace_tabs = RED.tabs.create({ workspace_tabs = RED.tabs.create({
id: "red-ui-workspace-tabs", id: "red-ui-workspace-tabs",
onchange: function(tab, wasUnhidden) { onchange: function(tab) {
var event = { var event = {
old: activeWorkspace old: activeWorkspace
} }
@ -260,9 +263,6 @@ RED.workspaces = (function() {
window.location.hash = ''; window.location.hash = '';
} }
event.workspace = activeWorkspace; event.workspace = activeWorkspace;
if (wasUnhidden) {
RED.events.emit("workspace:show",event);
}
RED.events.emit("workspace:change",event); RED.events.emit("workspace:change",event);
RED.sidebar.config.refresh(); RED.sidebar.config.refresh();
RED.view.focus(); RED.view.focus();
@ -322,6 +322,12 @@ RED.workspaces = (function() {
$(".red-ui-sidebar-shade").show(); $(".red-ui-sidebar-shade").show();
} }
}, },
onhide: function(tab) {
RED.events.emit("workspace:hide",{workspace: tab.id})
},
onshow: function(tab) {
RED.events.emit("workspace:show",{workspace: tab.id})
},
minimumActiveTabWidth: 150, minimumActiveTabWidth: 150,
scrollable: true, scrollable: true,
addButton: "core:add-flow", addButton: "core:add-flow",
@ -527,9 +533,7 @@ RED.workspaces = (function() {
id = activeWorkspace; id = activeWorkspace;
} }
if (workspace_tabs.contains(id)) { if (workspace_tabs.contains(id)) {
if (workspace_tabs.hideTab(id)) { workspace_tabs.hideTab(id);
RED.events.emit("workspace:hide",{workspace: id})
}
} }
}, },
show: function(id,skipStack,unhideOnly) { show: function(id,skipStack,unhideOnly) {
@ -546,9 +550,7 @@ RED.workspaces = (function() {
} }
} }
if (unhideOnly) { if (unhideOnly) {
if (workspace_tabs.showTab(id)) { workspace_tabs.showTab(id);
RED.events.emit("workspace:show",{workspace: id})
}
} else { } else {
if (!skipStack && activeWorkspace !== id) { if (!skipStack && activeWorkspace !== id) {
addToViewStack(activeWorkspace) addToViewStack(activeWorkspace)