Merge pull request #1306 from yogeshojha/1155-bug-href-link-with-html…

…-id-does-not-link-to-the-expected-url

Handle hash in url, added navigation for Tabs, Fixes #1155 bug href link with html id does not link to the expected url

web/static/custom/custom.js

@@ -3276,3 +3276,18 @@ function convertToCamelCase(inputString) {
 
 	return camelCaseString;
 }
+
+function handleHashInUrl(){
+	// this function handles hash in url used to tab navigation
+	const hash = window.location.hash;
+	if (hash) {
+		const targetId = hash.substring(1);
+		const tabLink = $(`a[href="#${targetId}"][data-bs-toggle="tab"]`);
+		if (tabLink.length) {
+			tabLink.tab('show');
+			setTimeout(() => {
+				tabLink.click();
+			}, 100);
+		}
+	}
+}

web/templates/base/base.html

@@ -109,6 +109,14 @@ <h4 class="page-title">{% block page_title %}{% endblock page_title %}</h4>
     <script src="https://cdn.datatables.net/rowgroup/1.4.0/js/dataTables.rowGroup.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function(){
+        // for tabs with urls, we need to append the hash in the url
+        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
+          var href = $(e.target).attr('href');
+          if (href && href.startsWith('#')) {
+            history.pushState(null, null, href);
+          }
+        });
+        $(window).on('hashchange', handleHashInUrl);
         render_search_history('{{current_project.slug}}');
 
         // rengine will also check everyday if update exists for rengine
@@ -132,6 +140,7 @@ <h4 class="page-title">{% block page_title %}{% endblock page_title %}</h4>
         else{
           $('#dark-mode-check').prop("checked", false).change();
         }
+        handleHashInUrl();
       });
 
       function render_search_history(slug){