Allow tabs to be hidden via x-button on tab

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -337,10 +337,11 @@ RED.tabs = (function() {
             if (link.length === 0) {
                 return;
             }
-            var wasUnhidden = false;
             if (link.parent().hasClass("hide")) {
-                wasUnhidden = true;
                 link.parent().removeClass("hide");
+                if (options.onshow) {
+                    options.onshow(tabs[link.attr('href').slice(1)])
+                }
             }
             if (!link.parent().hasClass("active")) {
                 ul.children().removeClass("active");
@@ -358,7 +359,7 @@ RED.tabs = (function() {
                     }
                 }
                 if (options.onchange) {
-                    options.onchange(tabs[link.attr('href').slice(1)],wasUnhidden);
+                    options.onchange(tabs[link.attr('href').slice(1)]);
                 }
                 updateTabWidths();
                 setTimeout(function() {
@@ -542,6 +543,47 @@ RED.tabs = (function() {
             }
             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 =  {
             addTab: function(tab,targetIndex) {
@@ -711,6 +753,15 @@ RED.tabs = (function() {
                         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);
                 if (options.onselect) {
@@ -831,45 +882,9 @@ RED.tabs = (function() {
             contains: function(id) {
                 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) {
                 tabs[id].label = label;
                 var tab = ul.find("a[href='#"+id+"']");

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -35,6 +35,9 @@ RED.workspaces = (function() {
 
     function addWorkspace(ws,skipHistoryEntry,targetIndex) {
         if (ws) {
+            if (!ws.closeable) {
+                ws.hideable = true;
+            }
             workspace_tabs.addTab(ws,targetIndex);
             workspace_tabs.resize();
         } else {
@@ -43,7 +46,7 @@ RED.workspaces = (function() {
                 workspaceIndex += 1;
             } 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);
             workspace_tabs.addTab(ws,targetIndex);
             workspace_tabs.activateTab(tabId);
@@ -245,7 +248,7 @@ RED.workspaces = (function() {
     function createWorkspaceTabs() {
         workspace_tabs = RED.tabs.create({
             id: "red-ui-workspace-tabs",
-            onchange: function(tab, wasUnhidden) {
+            onchange: function(tab) {
                 var event = {
                     old: activeWorkspace
                 }
@@ -260,9 +263,6 @@ RED.workspaces = (function() {
                     window.location.hash = '';
                 }
                 event.workspace = activeWorkspace;
-                if (wasUnhidden) {
-                    RED.events.emit("workspace:show",event);
-                }
                 RED.events.emit("workspace:change",event);
                 RED.sidebar.config.refresh();
                 RED.view.focus();
@@ -322,6 +322,12 @@ RED.workspaces = (function() {
                     $(".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,
             scrollable: true,
             addButton: "core:add-flow",
@@ -527,9 +533,7 @@ RED.workspaces = (function() {
                 id = activeWorkspace;
             }
             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) {
@@ -546,9 +550,7 @@ RED.workspaces = (function() {
                 }
             }
             if (unhideOnly) {
-                if (workspace_tabs.showTab(id)) {
+                workspace_tabs.showTab(id);
-                    RED.events.emit("workspace:show",{workspace: id})
-                }
             } else {
                 if (!skipStack && activeWorkspace !== id) {
                     addToViewStack(activeWorkspace)