migrate url handling of tab display to typescript

netbox/project-static/src/tabs.ts

@@ -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();
+    }
+  }
+}

netbox/templates/dcim/devicetype.html

@@ -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 %}