Add visibilityThreshold option

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)`

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 {

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