abortable-button.blade.php

<?php /** @var Illuminate\View\ComponentAttributeBag $attributes */ ?>
<?php /** @var Illuminate\Support\HtmlString $slot */ ?>
<?php /** @var int $delay */ ?>
<?php /** @var string $callback */ ?>

<div x-data="abortableButton()" x-init="delay = {{ $delay ?? 5000 }}; callback = () => { {{ $callback }} };" class="w-1/2">
    <template x-if="!clicked">
        <button
            type="button"
            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded w-full"
            @click.prevent="click()"
        >Delete</button>
    </template>
    <template x-if="clicked">
        <div class="flex flex-row">
            <button
                type="button"
                class="px-4 py-2 bg-gray-800 hover:bg-gray-900 text-white rounded-l"
                @click.prevent="reset()"
            >X</button>
            <div class="pl-2 pr-4 py-2 bg-gray-500 text-white rounded-r flex-grow">
                Deleting in <span x-text="Math.ceil(this.countdown / 1000)"></span> ...
            </div>
        </div>
    </template>
</div>

<script>
    window.abortableButton = function() {
        return {
            clicked: false,
            delay: 0,
            countdown: 0,
            interval: null,
            callback: null,

            click: function() {
                if(this.clicked) {
                    return;
                }

                this.clicked = true;
                this.countdown = this.delay;
                this.interval = window.setInterval(() => {
                    this.countdown -= 100;

                    if (this.countdown <= 0) {
                        this.reset();
                        this.callback();
                    }
                }, 100);
            },

            reset: function () {
                window.clearInterval(this.interval);
                this.clicked = false;
                this.countdown = 0;
            },
        };
    }
</script>