feat: move selected tab to the main part of the menu-bar

pom.xml

@@ -4,7 +4,7 @@
 
 	<groupId>com.flowingcode.vaadin.addons</groupId>
 	<artifactId>enhanced-tabs-addon</artifactId>
-	<version>1.1.1-SNAPSHOT</version>
+	<version>1.2.0-SNAPSHOT</version>
 	<name>Enhanced Tabs Add-on</name>
 	<description>Enhanced Tabs Add-on for Vaadin Flow</description>
 	<url>https://www.flowingcode.com/en/open-source/</url>

src/main/java/com/flowingcode/vaadin/addons/enhancedtabs/EnhancedTabs.java

@@ -187,7 +187,8 @@ public void add(Tab... tabs) {
           ev ->
               tab.getElement()
                   .executeJs(
-                      "this.addEventListener('click', ()=>{let overlay = this.closest('vaadin-menu-bar-overlay, vaadin-context-menu-overlay'); overlay && overlay.close();})"));
+                  "this.addEventListener('click', ()=>{let overlay = this.closest('vaadin-menu-bar-overlay, vaadin-context-menu-overlay'); overlay && overlay.close();})",
+                  this));
     }
 
     if (tabs.length == 0) {
@@ -506,6 +507,7 @@ private void updateSelectedTab(boolean changedFromClient) {
 
       if (selectedTab != null) {
         selectedTab.setSelected(true);
+        getElement().executeJs("this.__detectOverflow()");
       }
 
       fireEvent(new SelectedChangeEvent(this, previousTab, changedFromClient));

src/main/resources/META-INF/frontend/fcEnhancedTabs/connector.js

@@ -2,7 +2,7 @@
  * #%L
  * Enhanced Tabs Add-on
  * %%
- * Copyright (C) 2023 Flowing Code
+ * Copyright (C) 2023-2024 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,6 +21,9 @@
 (function () { 
   window.Vaadin.Flow.fcEnhancedTabsConnector = {
 	initLazy: tabs => {
+
+		if (tabs.fcEnhancedTabsConnector) return;
+		tabs.fcEnhancedTabsConnector = true;
 
 		let close = tabs._close;
 
@@ -44,6 +47,31 @@
 			}
 		});
 
+		const __detectOverflow = tabs.__detectOverflow.bind(tabs);
+
+		tabs.__detectOverflow = function() {
+			//restore the normal order of buttons
+			var buttons  = tabs._buttons;
+			const selectedButton = buttons.find(e=>e._position!==undefined);
+			if (selectedButton) {
+				buttons[0].parentElement.insertBefore(selectedButton, buttons[selectedButton._position+1]);
+				__detectOverflow();
+				selectedButton._position=undefined;
+			}
+
+			__detectOverflow();
+
+			// move the selected tab out of the overflow button
+			buttons  = tabs._buttons;
+			const selectedIndex = buttons.findIndex(e=>e.item.component && e.item.component.querySelector('vaadin-tab[selected]'));
+			const overflowIndex  = buttons.findIndex(e=>e.style.visibility);
+			if (selectedIndex>=overflowIndex && overflowIndex>0) {
+				buttons[0].parentElement.insertBefore(buttons[selectedIndex], buttons[overflowIndex-1]);
+				__detectOverflow();
+				buttons[selectedIndex]._position = selectedIndex;
+			}
+		};
+
 	}	
   }
 })();