Introduce htmx_boost template tag; enable HTMX for user menu

This commit is contained in:
Jeremy Stretch 2024-03-25 13:23:30 -04:00
parent 16ceaef601
commit e37c943d2b
4 changed files with 63 additions and 47 deletions

View File

@ -58,8 +58,48 @@ Blocks:
<i class="mdi mdi-lightbulb-on"></i>
</button>
</div>
{# User menu #}
{% include 'inc/user_menu.html' %}
{% if request.user.is_authenticated %}
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<div class="d-xl-block ps-2">
<div>{{ request.user }}</div>
<div class="mt-1 small text-secondary">{% if request.user.is_staff %}Staff{% else %}User{% endif %}</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow" {% htmx_boost %}>
{% if config.DJANGO_ADMIN_ENABLED and request.user.is_staff %}
<a class="dropdown-item" href="{% url 'admin:index' %}">
<i class="mdi mdi-cog"></i> {% trans "Django Admin" %}
</a>
{% endif %}
<a href="{% url 'account:profile' %}" class="dropdown-item">
<i class="mdi mdi-account"></i> {% trans "Profile" %}
</a>
<a href="{% url 'account:bookmarks' %}" class="dropdown-item">
<i class="mdi mdi-bookmark"></i> {% trans "Bookmarks" %}
</a>
<a href="{% url 'account:preferences' %}" class="dropdown-item">
<i class="mdi mdi-wrench"></i> {% trans "Preferences" %}
</a>
<a href="{% url 'account:usertoken_list' %}" class="dropdown-item">
<i class="mdi mdi-key"></i> {% trans "API Tokens" %}
</a>
<div class="dropdown-divider"></div>
<a href="{% url 'logout' %}" class="dropdown-item">
<i class="mdi mdi-logout-variant"></i> {% trans "Log Out" %}
</a>
</div>
</div>
{% else %}
<div class="btn-group ps-2">
<a class="btn btn-primary" type="button" href="{% url 'login' %}?next={{ request.path }}">
<i class="mdi mdi-login-variant"></i> {% trans "Log In" %}
</a>
</div>
{% endif %}
{# /User menu #}
</div>
{# Search box #}
@ -79,7 +119,7 @@ Blocks:
{# Page content #}
<div class="page-wrapper">
<div id="page-content"{% if htmx_navigation %} hx-boost="true" hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML show:window:top"{% endif %}>
<div id="page-content" {% htmx_boost %}>
{# Page header #}
{% block header %}

View File

@ -1,41 +0,0 @@
{% load i18n %}
{% if request.user.is_authenticated %}
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<div class="d-xl-block ps-2">
<div>{{ request.user }}</div>
<div class="mt-1 small text-secondary">{% if request.user.is_staff %}Staff{% else %}User{% endif %}</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
{% if config.DJANGO_ADMIN_ENABLED and request.user.is_staff %}
<a class="dropdown-item" href="{% url 'admin:index' %}">
<i class="mdi mdi-cog"></i> {% trans "Django Admin" %}
</a>
{% endif %}
<a href="{% url 'account:profile' %}" class="dropdown-item">
<i class="mdi mdi-account"></i> {% trans "Profile" %}
</a>
<a href="{% url 'account:bookmarks' %}" class="dropdown-item">
<i class="mdi mdi-bookmark"></i> {% trans "Bookmarks" %}
</a>
<a href="{% url 'account:preferences' %}" class="dropdown-item">
<i class="mdi mdi-wrench"></i> {% trans "Preferences" %}
</a>
<a href="{% url 'account:usertoken_list' %}" class="dropdown-item">
<i class="mdi mdi-key"></i> {% trans "API Tokens" %}
</a>
<div class="dropdown-divider"></div>
<a href="{% url 'logout' %}" class="dropdown-item">
<i class="mdi mdi-logout-variant"></i> {% trans "Log Out" %}
</a>
</div>
</div>
{% else %}
<div class="btn-group ps-2">
<a class="btn btn-primary" type="button" href="{% url 'login' %}?next={{ request.path }}">
<i class="mdi mdi-login-variant"></i> {% trans "Log In" %}
</a>
</div>
{% endif %}

View File

@ -1,6 +1,7 @@
{% load helpers %}
{% load navigation %}
<ul class="navbar-nav pt-lg-2"{% if htmx_navigation %} hx-boost="true" hx-target="#page-content" hx-select="#page-content" hx-swap="outerHTML show:window:top"{% endif %}>
<ul class="navbar-nav pt-lg-2" {% htmx_boost %}>
{% for menu, groups in nav_items %}
<li class="nav-item dropdown">

View File

@ -1,11 +1,11 @@
from typing import Dict
from django import template
from django.template import Context
from django.utils.safestring import mark_safe
from netbox.navigation.menu import MENUS
__all__ = (
'nav',
'htmx_boost',
)
@ -13,7 +13,7 @@ register = template.Library()
@register.inclusion_tag("navigation/menu.html", takes_context=True)
def nav(context: Context) -> Dict:
def nav(context):
"""
Render the navigation menu.
"""
@ -43,3 +43,19 @@ def nav(context: Context) -> Dict:
'nav_items': nav_items,
'htmx_navigation': context['htmx_navigation']
}
@register.simple_tag(takes_context=True)
def htmx_boost(context, target='#page-content', select='#page-content'):
if not context.get('htmx_navigation'):
return ''
hx_params = {
'hx-boost': 'true',
'hx-target': target,
'hx-select': select,
'hx-swap': 'outerHTML show:window:top',
}
htmx_params = ' '.join([
f'{k}="{v}"' for k, v in hx_params.items()
])
return mark_safe(htmx_params)