mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 01:25:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Jump to the tab where an browser validation error occurs

Browse source
This commit is contained in:
Jan Böhmer 2022-08-02 00:23:55 +02:00
parent 4847fe2fa3
commit 497def50cd
1 changed files with 27 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

35
assets/js/tab_remember.js
View file

@ -1,6 +1,7 @@
"use strict"; "use strict";
import {Tab} from "bootstrap"; import {Tab} from "bootstrap";
import tab from "bootstrap/js/src/tab";
/** /**
* This listener keeps track of which tab is currently selected (using hash and localstorage) and will try to open * This listener keeps track of which tab is currently selected (using hash and localstorage) and will try to open
@ -10,8 +11,32 @@ import {Tab} from "bootstrap";
class TabRememberHelper { class TabRememberHelper {
constructor() { constructor() {
document.addEventListener("turbo:load", this.onLoad.bind(this)); document.addEventListener("turbo:load", this.onLoad.bind(this));
//Capture is important here, as invalid events normally does not bubble
document.addEventListener("invalid", this.onInvalid.bind(this), {capture: true});
} }
/**
* This functions is called when the browser side input validation fails on an input, jump to the tab to show this up
* @param event
*/
onInvalid(event) {
this.revealElementOnTab(event.target);
}
revealElementOnTab(element) {
let parent = element.closest('.tab-pane');
//Iterate over each parent tab and show it
while(parent) {
//Invoker can either be a button or a element
let tabInvoker = document.querySelector("button[data-content='#" + parent.id + "']")
?? document.querySelector("a[href='#" + parent.id + "']");
Tab.getOrCreateInstance(tabInvoker).show();
parent = parent.parentElement.closest('.tab-pane');
}
}
onLoad(event) { onLoad(event) {
//Determine which tab should be shown (use hash if specified, otherwise use localstorage) //Determine which tab should be shown (use hash if specified, otherwise use localstorage)
@ -24,14 +49,8 @@ class TabRememberHelper {
if (activeTab) { if (activeTab) {
let parent = activeTab.parentElement.closest('.tab-pane'); //Reveal our tab selector (needed for nested tabs)
this.revealElementOnTab(element);
//Iterate over each parent tab and show it
while(parent) {
Tab.getOrCreateInstance(parent).show();
parent = parent.parentElement.closest('.tab-pane');
}
//Finally show the active tab itself //Finally show the active tab itself
Tab.getOrCreateInstance(activeTab).show(); Tab.getOrCreateInstance(activeTab).show();