From a5cea7d3f50589bb2a7904466825465dca1c5cf2 Mon Sep 17 00:00:00 2001
From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com>
Date: Fri, 28 Jun 2024 14:05:39 -0300
Subject: [PATCH] feat: move selected tab to the main part of the menu-bar

Close #13
---
 pom.xml                                       |  2 +-
 .../addons/enhancedtabs/EnhancedTabs.java     |  4 ++-
 .../frontend/fcEnhancedTabs/connector.js      | 25 +++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/pom.xml b/pom.xml
index bfe0f95..0458ea7 100644
--- a/pom.xml
+++ b/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>
diff --git a/src/main/java/com/flowingcode/vaadin/addons/enhancedtabs/EnhancedTabs.java b/src/main/java/com/flowingcode/vaadin/addons/enhancedtabs/EnhancedTabs.java
index 7c0c1be..fd2e937 100644
--- a/src/main/java/com/flowingcode/vaadin/addons/enhancedtabs/EnhancedTabs.java
+++ b/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));
diff --git a/src/main/resources/META-INF/frontend/fcEnhancedTabs/connector.js b/src/main/resources/META-INF/frontend/fcEnhancedTabs/connector.js
index 34b3aca..b7c351b 100644
--- a/src/main/resources/META-INF/frontend/fcEnhancedTabs/connector.js
+++ b/src/main/resources/META-INF/frontend/fcEnhancedTabs/connector.js
@@ -47,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;
+			}
+		};
+	
 	}	
   }
 })();