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…“.
HomepagePresenter.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/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>