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 09:35:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Do not use jQuery for TabRemember Helper.

Browse source
This commit is contained in:
Jan Böhmer 2022-07-29 23:26:30 +02:00
parent 47130846a2
commit 9519150fb9
1 changed files with 32 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

44
assets/js/tab_remember.js
View file

@ -1,5 +1,7 @@
"use strict";
import {Tab} from "bootstrap";
/**
* This listener keeps track of which tab is currently selected (using hash and localstorage) and will try to open
* that tab on reload. That means that if the user changes something, he does not have to switch back to the tab
@ -7,42 +9,48 @@
*/
class TabRememberHelper {
constructor() {
document.addEventListener("turbo:load", this.onLoad);
document.addEventListener("turbo:load", this.onLoad.bind(this));
}
onLoad(event) {
//Determine which tab should be shown (use hash if specified, otherwise use localstorage)
let $activeTab = null;
let activeTab = null;
if (location.hash) {
$activeTab = $('a[href=\'' + location.hash + '\']');
activeTab = document.querySelector('[href=\'' + location.hash + '\']');
} else if (localStorage.getItem('activeTab')) {
$activeTab = $('a[href="' + localStorage.getItem('activeTab') + '"]');
activeTab = document.querySelector('[href="' + localStorage.getItem('activeTab') + '"]');
}
if (activeTab) {
let parent = activeTab.parentElement.closest('.tab-pane');
//Iterate over each parent tab and show it
while(parent) {
Tab.getOrCreateInstance(parent).show();
parent = parent.parentElement.closest('.tab-pane');
}
if ($activeTab) {
//Findout if the tab has any parent tab we have to show before
var parents = $($activeTab).parents('.tab-pane');
parents.each(function (n) {
$('a[href="#' + $(this).attr('id') + '"]').tab('show');
});
//Finally show the active tab itself
$activeTab.tab('show');
Tab.getOrCreateInstance(activeTab).show();
}
$('body').on('click', 'a[data-bs-toggle=\'tab\']', function (e) {
e.preventDefault()
var tab_name = this.getAttribute('href')
//Register listener for tab change
document.addEventListener('shown.bs.tab', this.onTabChange.bind(this));
}
onTabChange(event) {
const tab = event.target;
let tab_name = tab.getAttribute('href')
if (history.replaceState) {
history.replaceState(null, null, tab_name)
} else {
location.hash = tab_name
}
localStorage.setItem('activeTab', tab_name)
$(this).tab('show');
return false;
});
}
}