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

Close #13
FlowingCode · Jun 28, 2024 · 81ee2b9 · 81ee2b9
1 parent c3332b4
commit 81ee2b9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;
+			}
+		};
+
 	}	
   }
 })();