mirror of
https://github.com/netbox-community/netbox.git
synced 2024-05-10 07:54:54 +00:00
migrate url handling of tab display to typescript
This commit is contained in:
23
netbox/project-static/src/tabs.ts
Normal file
23
netbox/project-static/src/tabs.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { Tab } from 'bootstrap';
|
||||
import { getElements } from './util';
|
||||
|
||||
/**
|
||||
* Open the tab specified in the URL. For example, /dcim/device-types/1/#tab_frontports will
|
||||
* change the open tab to the Front Ports tab.
|
||||
*/
|
||||
export function initTabs() {
|
||||
const { hash } = location;
|
||||
if (hash && hash.match(/^\#tab_.+$/)) {
|
||||
// The tab element will have a data-bs-target attribute with a value of the object type for
|
||||
// the corresponding tab. Once we drop the `tab_` prefix, the hash will match the target
|
||||
// element's data-bs-target value. For example, `#tab_frontports` becomes `#frontports`.
|
||||
const target = hash.replace('tab_', '');
|
||||
for (const element of getElements(`ul.nav.nav-tabs .nav-link[data-bs-target="${target}"]`)) {
|
||||
// Instantiate a Bootstrap tab instance.
|
||||
// See https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
|
||||
const tab = new Tab(element);
|
||||
// Show the tab.
|
||||
tab.show();
|
||||
}
|
||||
}
|
||||
}
|
@ -229,17 +229,3 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% comment %} {% block javascript %}
|
||||
<script type="text/javascript">
|
||||
// Redirect user to appropriate components tab if specified
|
||||
var hash = document.location.hash;
|
||||
var prefix = "tab_";
|
||||
if (hash) {
|
||||
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
|
||||
}
|
||||
$('.nav-tabs a').on('shown.bs.tab', function (e) {
|
||||
window.location.hash = e.target.hash.replace("#", "#" + prefix);
|
||||
});
|
||||
</script>
|
||||
{% endblock %} {% endcomment %}
|
||||
|
Reference in New Issue
Block a user