kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added first version of tab management

Browse Source
This commit is contained in:
Kodjo Sossouvi
2025-11-16 15:29:56 +01:00
parent c38a012c74
commit ca238303b8
3 changed files with 64 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/myfasthtml/assets/myfasthtml.js
View File

@@ -152,7 +152,6 @@ function initLayoutResizer(layoutId) {
// Re-initialize after HTMX swaps within this layout
layoutElement.addEventListener('htmx:afterSwap', function (event) {
console.log('Layout swapped:', event.detail.target);
initResizers();
});
}
@@ -213,7 +212,7 @@ function initBoundaries(elementId, updateUrl) {
* This function is called when switching between tabs to update both the content visibility
* and the tab button states.
*
* @param {string} controllerId - The ID of the tabs controller element (format: "{managerId}-content-controller")
* @param {string} controllerId - The ID of the tabs controller element (format: "{managerId}-controller")
*/
function updateTabs(controllerId) {
const controller = document.getElementById(controllerId);
@@ -228,8 +227,8 @@ function updateTabs(controllerId) {
return;
}
// Extract manager ID from controller ID (remove '-content-controller' suffix)
const managerId = controllerId.replace('-content-controller', '');
// Extract manager ID from controller ID (remove '-controller' suffix)
const managerId = controllerId.replace('-controller', '');
// Hide all tab contents for this manager
const contentWrapper = document.getElementById(`${managerId}-content-wrapper`);

18
src/myfasthtml/controls/TabsManager.py
View File

@@ -60,7 +60,7 @@ class Commands(BaseCommands):
def show_tab(self, tab_id):
return Command(f"{self._prefix}ShowTab",
"Activate or show a specific tab",
self._owner.show_tab, tab_id).htmx(target=f"#{self._id}-content-controller", swap="outerHTML")
self._owner.show_tab, tab_id).htmx(target=f"#{self._id}-controller", swap="outerHTML")
def close_tab(self, tab_id):
return Command(f"{self._prefix}CloseTab",
@@ -71,20 +71,10 @@ class Commands(BaseCommands):
return (Command(f"{self._prefix}AddTab",
"Add a new tab",
self._owner.on_new_tab, label, component, auto_increment).
htmx(target=f"#{self._id}-content-controller"))
def update_boundaries(self):
return Command(f"{self._prefix}UpdateBoundaries",
"Update component boundaries",
self._owner.update_boundaries).htmx(target=None)
htmx(target=f"#{self._id}-controller"))
class TabsManager(MultipleInstance):
# Constants for width calculation
TAB_CHAR_WIDTH = 8 # pixels per character
TAB_PADDING = 40 # padding + close button space
TAB_MIN_WIDTH = 80 # minimum tab width
DROPDOWN_BTN_WIDTH = 40 # width of the dropdown button
_tab_count = 0
def __init__(self, session, _id=None):
@@ -264,8 +254,8 @@ class TabsManager(MultipleInstance):
def _mk_tabs_controller(self):
return Div(
Div(id=f"{self._id}-content-controller", data_active_tab=f"{self._state.active_tab}"),
Script(f'updateTabs("{self._id}-content-controller");'),
Div(id=f"{self._id}-controller", data_active_tab=f"{self._state.active_tab}"),
Script(f'updateTabs("{self._id}-controller");'),
)
def _mk_tabs_header(self, oob=False):