diff --git a/README.md b/README.md index 2bb8052..4f386e1 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,7 @@ Represents the main tab container. * `closeButtonText` (default: `"✖"`): "close tab" button text. * `newTabButtonText` (default: `"+"`): "New Tab" button text. * `newTab` (default: `undefined`): arguments to use when `.addTab()` is called without parameters. It can be an object or a function which returns an object. It determines the options to use when the "New Tab" button is triggered. If you leave it undefined then the "New Tab" button won't be displayed. +* `visibilityThreshold` (default: `0`): the minimum number of tabs necessary for the tabGroup to be displayed. `0` means tabGround will always remain visible. * `ready` (default: `undefined`): a callback function to call once the tab group is ready. The `TabGroup` instance is passed as the only parameter. #### `tabGroup.addTab(options)` diff --git a/electron-tabs.css b/electron-tabs.css index 1202bb4..8b91f7f 100644 --- a/electron-tabs.css +++ b/electron-tabs.css @@ -7,6 +7,11 @@ font-size: 14px; -webkit-user-select: none; user-select: none; + display: none; +} + +.etabs-tabgroup.visible { + display: block; } .etabs-tabs { diff --git a/index.js b/index.js index 0f615b0..4b3b7b0 100644 --- a/index.js +++ b/index.js @@ -34,6 +34,7 @@ class TabGroup extends EventEmitter { closeButtonText: args.closeButtonText || "×", newTab: args.newTab, newTabButtonText: args.newTabButtonText || "+", + visibilityThreshold: args.visibilityThreshold || 0, ready: args.ready }; this.tabContainer = document.querySelector(options.tabContainerSelector); @@ -41,6 +42,7 @@ class TabGroup extends EventEmitter { this.tabs = []; this.newTabId = 0; TabGroupPrivate.initNewTabButton.bind(this)(); + TabGroupPrivate.initVisibility.bind(this)(); if (typeof this.options.ready === "function") { this.options.ready(this); } @@ -122,6 +124,21 @@ const TabGroupPrivate = { button.addEventListener("click", this.addTab.bind(this, undefined), false); }, + initVisibility: function () { + function toggleTabsVisibility(tab, tabGroup) { + var visibilityThreshold = this.options.visibilityThreshold; + var el = tabGroup.tabContainer.parentNode; + if (this.tabs.length >= visibilityThreshold) { + el.classList.add("visible"); + } else { + el.classList.remove("visible"); + } + } + + this.on("tab-added", toggleTabsVisibility); + this.on("tab-removed", toggleTabsVisibility); + }, + removeTab: function (tab, triggerEvent) { let id = tab.id; for (let i in this.tabs) {