Naja - spinner

Pro vytvoření „spinneru“ potřebujete znát názvy eventů v knihovně Naja https://naja.js.org/#… konkrétně akce start a complete.

Jako „spinner“ je v tomto příkladu použit obyčejný text „Načítám…“.

HomepagePresen­ter.php

<?php

declare(strict_types=1);

namespace App\Presenters;

use Nette;


final class HomepagePresenter extends Nette\Application\UI\Presenter
{
    public function renderDefault(){
        $this->template->data = Nette\Utils\Random::generate(5);
    }

    public function handleNacti(){
        sleep(3);
        $this->redrawControl('data');
    }

}

Homepage/defau­lt.latte

{block content}

<h1>Spinner</h1>

<div n:snippet="data">
    {$data}
</div>

<a n:href="nacti!" class="ajax">Načti</a>

<div id="spinner" style="display: none;">
    <b>Načítám...</b>
</div>

<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>

<script>

    naja.initialize();

    naja.addEventListener('start', (event) => {
        //console.log(event.explicitOriginalTarget.classList.contains('spinner'));
        document.getElementById('spinner').style.display = "inline";
    });

    naja.addEventListener('complete', (event) => {
        document.getElementById('spinner').style.display = "none";
    });

</script>