diff --git a/district/templates/district/district_geo_feature_collection_page.html b/district/templates/district/district_geo_feature_collection_page.html index fc4db17635440219a3f541a7a0999aefbc21c5b9..82c3d403f2247f5171c37288bf5d36b1b4be7a28 100644 --- a/district/templates/district/district_geo_feature_collection_page.html +++ b/district/templates/district/district_geo_feature_collection_page.html @@ -79,9 +79,9 @@ {% for feature in features %} <li> <span class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-xs w-5 h-5 mr-2 no-underline"> - <a href="#{{feature.pk}}-{{feature.slug}}" class="no-underline">{{ feature.index }}</a> + <a href="?item={{feature.pk}}-{{feature.slug}}" class="no-underline js-feature-item-anchor">{{ feature.index }}</a> </span> - <a href="#{{feature.pk}}-{{feature.slug}}"><span class="text-sm underline">{{ feature.title }}</span></a> + <a href="?item={{feature.pk}}-{{feature.slug}}" class="js-feature-item-anchor"><span class="text-sm underline">{{ feature.title }}</span></a> </a> </li> {% endfor %} @@ -109,3 +109,24 @@ </div> </article> {% endblock %} + + +{% block scripts %} +<script> + /* Handle .js-feature-item-anchor clicks without page reloads. */ + Array.from(document.getElementsByClassName("js-feature-item-anchor")).forEach((el) => { + el.addEventListener("click", (evt) => { + evt.preventDefault(); + const url = new URL(window.location); + + // Set slug from URL. + url.searchParams.set("item", el.getAttribute("href").substring(6)); + + // Emulate user browser navigation event. + history.pushState({}, "", url); + window.dispatchEvent(new Event("popstate")); + return false; + }) + }) +</script> +{% endblock %}