Highlight active navbar links (#157)

* Adding active class to current page in navbar

* Optimizing code and handling dropdowns

* Tweaking navbar links rendering

coderedcms/templates/coderedcms/blocks/base_link_block.html

@@ -1,47 +1,52 @@
-{% load wagtailcore_tags wagtailimages_tags coderedcms_tags %}
+{% load coderedcms_tags wagtailcore_tags wagtailimages_tags %}
 
 {% block menu_item %}
+    {% if value.page.live or value.link or value.document %}
     {% is_menu_item_dropdown value as has_dropdown %}
-
-    <a href="{% block url %}#{% endblock %}"
-    {% if value.settings.custom_id %}id="{{value.settings.custom_id}}"{% endif %}
-    class="{{aclass}} {% if has_dropdown %}dropdown-toggle{% endif %} {% if value.settings.custom_css_class %}{{value.settings.custom_css_class}}{% endif %}"
-    {% if has_dropdown %}data-toggle="dropdown"
-    role="button"
-    aria-haspopup="true"
-    aria-expanded="false"
-    {% endif %}
-    {% if ga_event_label %}
-    data-ga-event-label="{{ ga_event_label }}"
-    {% endif %}
-    {% if ga_event_category %}
-    data-ga-event-category="{{ ga_event_category }}"
-    {% endif %}
-    >
-        {% if value.image %}
-            {% image value.image max-200x200 as img %}
-            <img src="{{img.url}}" class="w-100" alt="{{img.image.title}}"/>
-        {% elif value.display_text %}
-            {{value.display_text|safe}}
-        {% elif value.page %}
-            {{value.page.title}}
-        {% elif value.document %}
-            {{value.document.title}}
+    <li class="{{liclass}} {% if has_dropdown %}dropdown{% endif %}">
+        {% is_active_page page value.page request as is_active_url %}
+        <a href="{% block url %}#{% endblock %}"
+        {% if value.settings.custom_id %}id="{{value.settings.custom_id}}"{% endif %}
+        class="{{aclass}} {% if has_dropdown %}dropdown-toggle{% endif %} {% if is_active_url %}active{% endif %} {% if value.settings.custom_css_class %}{{value.settings.custom_css_class}}{% endif %}"
+        {% if has_dropdown %}data-toggle="dropdown"
+        role="button"
+        aria-haspopup="true"
+        aria-expanded="false"
+        {% endif %}
+        {% if ga_event_label %}
+        data-ga-event-label="{{ ga_event_label }}"
+        {% endif %}
+        {% if ga_event_category %}
+        data-ga-event-category="{{ ga_event_category }}"
         {% endif %}
-    </a>
+        >
+            {% if value.image %}
+                {% image value.image max-200x200 as img %}
+                <img src="{{img.url}}" class="w-100" alt="{{img.image.title}}"/>
+            {% elif value.display_text %}
+                {{value.display_text|safe}}
+            {% elif value.page %}
+                {{value.page.title}}
+            {% elif value.document %}
+                {{value.document.title}}
+            {% endif %}
+        </a>
 
 
-    {% if has_dropdown %}
-    <ul class="dropdown-menu">
-        {% for sub_link in value.sub_links %}
-            <li>{% include_block sub_link with aclass="dropdown-item" %}</li>
-        {% endfor %}
-        {% if value.show_child_links %}
-            {% for child in value.page.specific.get_index_children %}
-                <li><a class="dropdown-item" href="{% pageurl child %}">{{child.title}}</a></li>
+        {% if has_dropdown %}
+        <ul class="dropdown-menu">
+            {% for sub_link in value.sub_links %}
+                {% include_block sub_link with liclass="" aclass="dropdown-item" %}
             {% endfor %}
+            {% if value.show_child_links %}
+                {% for child in value.page.specific.get_index_children %}
+                    {% is_active_page page child request as is_active_child %}
+                    <li><a class="dropdown-item {% if is_active_child %}active{% endif %}" href="{% pageurl child %}">{{child.title}}</a></li>
+                {% endfor %}
+            {% endif %}
+        </ul>
         {% endif %}
-    </ul>
+    </li>
     {% endif %}
 
 {% endblock %}

coderedcms/templates/coderedcms/snippets/navbar.html

@@ -34,10 +34,7 @@
       <ul class="navbar-nav {% if navbar.custom_css_class %}{{navbar.custom_css_class}}{% endif %}"
         {% if navbar.custom_id %}id="{{navbar.custom_id}}"{% endif %} >
         {% for item in navbar.menu_items %}
-          {% if item.value.page.live %}
-            {% is_menu_item_dropdown item.value as has_dropdown %}
-            <li class="nav-item {% if has_dropdown %}dropdown{% endif %}">{% include_block item with aclass="nav-link" ga_event_category="Navbar" %}</li>
-          {% endif %}
+            {% include_block item with liclass="nav-item" aclass="nav-link" ga_event_category="Navbar" %}
         {% endfor %}
       </ul>
       {% endfor %}

coderedcms/templatetags/coderedcms_tags.py

@@ -63,6 +63,15 @@ def is_menu_item_dropdown(value):
             len(value.get('page', []).get_children().live()) > 0
         )
 
+@register.simple_tag
+def is_active_page(curr_page, other_page, request):
+    try:
+        curr_url = curr_page.get_url(request)
+        other_url = other_page.get_url(request)
+        return curr_url == other_url
+    except:
+        return False
+
 @register.simple_tag
 def get_pictures(collection_id):
     collection = Collection.objects.get(id=collection_id)
@@ -134,6 +143,6 @@ def richtext_amp(value):
         value = richtext(value.source)
     else:
         value = richtext(value)
-    
+
     value = utils.convert_to_amp(value)
     return mark_safe(value)