Zdeňkovo poznámky

Naja - spinner

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

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

HomepagePresenter.php

int main()
<?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');
    }
 
}

default.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>