Alerts library

[michalsn]

We need an alert library to display messages after actions taken by the user.

Normally, we would probably use: https://github.com/tattersoftware/codeigniter4-alerts

But since we often use htmx, we rarely do a full page reload. Given this, the usefulness of the above library is limited.

We need something that will work in both cases:

• with a full page reload,
• with htmx page content swap (with oob).

Ideally, we should be able to define how the alert is displayed:

• default (after page reload)
• or inline (after htmx content swap, with oob)

What do you think?

[lonnieezell]

I think that sounds perfect! I hadn't stumbled across OOB yet, but that sounds like exactly what we need for there.

[jozefrebjak]

@michalsn I really like what you added here for alerts.

I'm using also https://github.com/tattersoftware/codeigniter4-alerts, but as I'm in implementing HTMX everywhere it's less and less used in my projects.

I tried to follow this PR #118 in my new project, but I'm not fan of frontend/backend development, I'm not using node_modules at all and I'm just publishing assets from CDN like jsdelivr with and handle them with https://github.com/tattersoftware/codeigniter4-assets , so I can't follow js modules etc approach in my project.

So I would like to share how I implemented toast features like it was implemented here with PR #125, but whole AlpineJS logic is done without external JS files. I'm using Tabler, not Daisy UI, but maybe somebody will find it useful:

app/Controllers/Home.php

<?php

namespace App\Controllers;

class Home extends BaseController
{
    public function index(): string
    {
        alerts()->set('error', 'Message 1')->session();

        alerts()->set('info', 'Message 2')->session();

        alerts()->set('success', 'Message 3')->session();

        return view('welcome_message');
    }
}

app/Views/_alerts/alerts.php

<?php foreach ($alerts as $type => $messages): ?>
<?php foreach ($messages as $key => $message): ?>
<div
    class="mb-3"
    x-data="{ countdown<?= esc($key); ?>: <?= $message['seconds'] ?>, paused: false }"
>
    <div
        class="toast show"
        x-show="countdown<?= esc($key); ?> > 0"
        x-init="
            let timer;
            function countdownTimer() {
                timer = setInterval(() => {
                    if (!paused && countdown<?= esc($key); ?> > 0) countdown<?= esc($key); ?>--;
                    else clearInterval(timer);
                }, 1000);
            }
            countdownTimer();
            $watch('paused', (value) => {
                if (!value) countdownTimer();
            });
        "
        @mouseenter="paused = true"
        @mouseleave="paused = false"
    >
        <div class="toast-header">
            <span class="bg-<?= esc($type, 'attr'); ?> avatar avatar-xs me-2"></span>
            <strong class="me-auto"><?= setting('Site.siteName') ?></strong>
            <button
                type="button"
                class="ms-2 btn-close"
                data-bs-dismiss="toast"
                aria-label="Close"
            ></button>
        </div>
        <div class="toast-body">
            <?= esc($message['message']); ?>
            <div class="progress progress-sm mt-3">
                <div
                    class="progress-bar"
                    role="progressbar"
                    :style="'width: ' + (countdown<?= esc($key); ?> / <?= $message['seconds'] ?> * 100) + '%'"
                    :aria-valuenow="countdown<?= esc($key); ?>"
                    aria-valuemin="0"
                    :aria-valuemax="<?= $message['seconds'] ?>"
                    :aria-label="(countdown<?= esc($key); ?> / <?= $message['seconds'] ?> * 100) + '% Complete'"
                >
                    <span
                        class="visually-hidden"
                        x-text="(countdown<?= esc($key); ?> / <?= $message['seconds'] ?> * 100) + '% Complete'"
                    ></span>
                </div>
            </div>
        </div>
    </div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>

Here is how it looks like:

CleanShot.2023-11-12.at.11.45.23.mp4

[michalsn]

Pretty cool. Thanks for sharing.