https://htmx.org logo
views.py ```python import secrets from django_htmx...
# 🔥-django-htmx
r
views.py
Copy code
python
import secrets
from django_htmx.http import trigger_client_event

class MessageMixin:
    """Provide a way to add a formatable message (like toast) to a class based view, using attributes. Kwargs can be added to format message with dynamic data.
    An HX-Trigger event is fired to be handled client-side.
    """

    message: str | None = None
    message_level: str | None = None
    message_kwargs: dict = {}

    def build_response(self, request, *args, **kwargs):
        response = super().build_response(self, request, *args, **kwargs)

        trigger_client_event(
            response,
            name="showMessage",
            params=dict(
                level=self.message_level,
                message=self.message.format(**self.message_kwargs),
                randomId=secrets.token_urlsafe(nbytes=5),  # allow to handle multiple toasts concurrenly
            ),
        )

        return response
toaster.html
Copy code
html
{# Toast template used to create actual toasts with render hyperscript method #}
<template id="toast-template">
  <div
    id="toast-${randomId}"
    class="alert alert-${level} shadow-lg mb-3"
    _="init
      wait 2s
      transition my opacity to 0
      remove me"
  >

    <span>${message}</span>
    <button
      _="on click remove #toast-${randomId}"
      class="btn btn-xs btn-circle">
      ✕
    </button>
  </template>

  {# Toaster (toasts wrapper) #}
  <div
    class="z-20 fixed bottom-4 right-8 ml-8"
    _="on showMessage(message,level,randomId) from body
      render #toast-template with (message: message, level: level, randomId: randomId)
      then put it at the end of me"
  >
  </div>