feat: keep section when changing features

ing-bank · Jul 4, 2022 · 7b12d06 · 7b12d06
1 parent 88c3f4a
commit 7b12d06
Showing 1 changed file with 30 additions and 9 deletions.
diff --git a/popmon/visualization/templates/assets/js/custom-script.js b/popmon/visualization/templates/assets/js/custom-script.js
@@ -1,19 +1,30 @@
 // hide all except first feature data for each section
-$( "section" ).each(function() {
-    $( this ).find(".section_feature:not(:first)").hide();
+$("section").each(function() {
+    $(this).find(".section_feature:not(:first)").hide();
 });
+
 // show corresponding feature's data based on the filter
 $(document).on("click", "button.dropdown-item", function() {
     obj = $(this)
 
-//    obj.closest("section").find("div.section_feature").hide()
-//    obj.closest("section").find("div[data-section-feature='" + obj.attr("data-feature") + "']").show()
-//    obj.parent().siblings("button").text("Feature: " + obj.text())
-
     // Linked dropdowns
     $("div.section_feature").hide()
     $("div[data-section-feature='" + obj.attr("data-feature") + "']").show()
     $("button.dropdown-toggle").text("Feature: " + obj.text())
+
+    // Current section (if any), e.g. #histograms
+    var type = window.location.hash.substr(1);
+    if (type.length > 0){
+        // Find link to that section
+        var o = $("a.nav-link.js-scroll-trigger[href='#" + type +"'");
+
+        // If exists
+        if (o.length == 1){
+            // Move to that location
+            var offset = $("section[data-section-title='" + o.attr("data-scroll-to-section") + "']").offset().top;
+            window.scrollTo(0, offset);
+        }
+    }
 });
 
 $(document).on("click", "a.table-item", function(){
@@ -23,18 +34,28 @@ $(document).on("click", "a.table-item", function(){
 
 // making navigation work: after clicking a nav link scrolling to the corresponding section's position
 $(document).on("click", "a.nav-link,a.navbar-brand", function(e) {
-    e.preventDefault();
+    /*e.preventDefault();*/
     obj = $(this)
     $([document.documentElement, document.body]).animate({
         scrollTop: $("section[data-section-title='" + obj.attr("data-scroll-to-section") + "']").offset().top
     }, 1000);
 });
+
+function slugify(str) {
+    // Convert string to id used in url
+    str = str.replace(/^\s+|\s+$/g, '').toLowerCase();
+    str = str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
+    return str;
+};
+
 // automatic insertion of navigation links based on section titles
 $('section').each(function(i, el){
     title = $(this).attr("data-section-title");
-    code = '<li class="nav-item"><a class="nav-link js-scroll-trigger" data-scroll-to-section="' + title + '">' + title + '</a></li>'
+    slug = slugify(title)
+    $(this).attr('id', slug);
+    code = '<li class="nav-item"><a class="nav-link js-scroll-trigger" data-scroll-to-section="' + title + '" href="#'+ slug +'">' + title + '</a></li>'
     $("ul#navigation-sections").append(code);
-    if ( i === 0) {
+    if ( i === 0 ) {
         $("a.navbar-brand").attr('data-scroll-to-section', title);
     }
 });