Highlight active section in navigation (#13)

Highlight, in the navigation bar, the section of the app that the user is currently using.
artefactual-labs · Oct 22, 2023 · fd4417d · fd4417d
1 parent 112d31b
commit fd4417d
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 20 deletions.
diff --git a/AIPscan/__init__.py b/AIPscan/__init__.py
@@ -4,6 +4,7 @@
 from flask_sqlalchemy import SQLAlchemy
 
 from AIPscan.celery import configure_celery
+from AIPscan.navbar import NavBar
 from config import CONFIGS
 
 db = SQLAlchemy()
@@ -34,6 +35,24 @@ def create_app(config_name="default"):
 
         db.create_all()
 
+        # Define navigation bar sections and route-to-section mapping (needed
+        # given that the "AIPs" and "Reports" sections are in the same Blueprint)
+        navbar = NavBar()
+        navbar.add_section(
+            "Archivematica Storage Services", "aggregator.storage_services"
+        )
+        navbar.add_section("AIPs", "reporter.view_aips")
+        navbar.add_section("Reports", "reporter.reports")
+
+        navbar.map_route("reporter.view_aip", "AIPs")
+        navbar.map_route("reporter.view_file", "AIPs")
+
+        # Inject navigation bar into templates
+        @app.context_processor
+        def inject_navbar():
+            return dict(navbar=navbar)
+
+        # Set up 404 handling
         @app.errorhandler(404)
         def page_not_found(e):
             return render_template("error/404.html"), 404

diff --git a/AIPscan/navbar.py b/AIPscan/navbar.py
@@ -0,0 +1,65 @@
+from flask import url_for
+
+
+class NavBar:
+    sections: list
+    route_map: dict
+
+    def __init__(self):
+        self.sections = []
+        self.route_map = {}
+
+    def add_section(self, label, route):
+        self.sections.append(NavBarSection(label, route, self))
+
+    def map_route(self, route, label):
+        self.route_map[route] = label
+
+
+class NavBarSection:
+    label: str
+    route: str
+    nav_bar: NavBar
+
+    def __init__(self, label, route, nav_bar):
+        self.label = label  # Navigation link text
+        self.route = route  # Route ("transfer.index" for example)
+        self.nav_bar = nav_bar  # Parent NavBar (Needed to access route map)
+
+    def get_url(self):
+        return url_for(self.route)
+
+    def is_active(self, request):
+        # Don't check if request isn't for a static asset
+        request_rule = request.url_rule
+
+        if request_rule is None:
+            return False
+
+        # Check for arbitrary mapping of request route to nav bar section
+        if request_rule.endpoint in self.nav_bar.route_map:
+            return self.nav_bar.route_map[request_rule.endpoint] == self.label
+
+        request_blueprint = self.blueprint_of(request_rule.endpoint)
+
+        if request_rule.endpoint == self.route:
+            # A section's default route has been requested
+            return True
+        elif not self.blueprint_has_mapped_route(request_blueprint):
+            # A route within a section representing an entire Blueprint may have been requested
+            section_route_blueprint = self.blueprint_of(self.route)
+
+            # Found Blueprint-level match between section and request
+            return request_blueprint == section_route_blueprint
+
+    def blueprint_has_mapped_route(self, blueprint):
+        for mapped_route in self.nav_bar.route_map:
+            route_map_blueprint = self.blueprint_of(mapped_route)
+
+            if route_map_blueprint == blueprint:
+                return True
+
+        return False
+
+    def blueprint_of(self, route):
+        return route.split(".")[0]
diff --git a/AIPscan/templates/base.html b/AIPscan/templates/base.html
@@ -21,26 +21,7 @@
 
 </head>
 <body>
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" href="/">AIPscan</a>
-    <div class="navbar-collapse" id="navbarNavDropdown">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('aggregator.storage_services') }}">Archivematica Storage Services</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('reporter.view_aips') }}">AIPs</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('reporter.reports') }}">Reports</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ url_for('api.doc') }}" target="apiframe">API</a>
-        </li>
-      </ul>
-    </div>
-  <span style="font-style: italic" class="navbar-text">Crawl Archivematica AIPs to provide repository-wide reporting</span>
-</nav>
+{% include "partials/navbar.html" %}
 
 <div class="container-fluid" style="margin: 20px 0;">
 

diff --git a/AIPscan/templates/partials/navbar.html b/AIPscan/templates/partials/navbar.html
@@ -0,0 +1,18 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <a class="navbar-brand" href="/">AIPscan</a>
+  <div class="navbar-collapse" id="navbarNavDropdown">
+    <ul class="navbar-nav">
+
+      {% for section in navbar.sections %}
+        <li class="nav-item">
+          <a class="nav-link {{ 'active fw-bold' if section.is_active(request) else '' }}" href="{{ section.get_url() }}">{{ section.label }}</a>
+        </li>
+      {% endfor %}
+
+      <li class="nav-item">
+        <a class="nav-link" href="{{ url_for('api.doc') }}" target="apiframe">API</a>
+      </li>
+    </ul>
+  </div>
+  <span style="font-style: italic" class="navbar-text">Crawl Archivematica AIPs to provide repository-wide reporting</span>
+</nav>