Nittro event pro preloader
- Barbarossa
- Člen | 74
Ahoj,
jak se dá prosím napsat event pro Nittro, který se spustí při načítání stránky a další po jejím dokončení. Chtěl bych to využít pro preloader.
Našel jsem akorát page.update
di.getService('page').on('update', function(evt) {
...
});
Díky
- Barbarossa
- Člen | 74
Používám Nittro 2.0 a mám ten samý problém. V dokumentaci jsem to nikde nenašel, a kdybych to věděl tak to tam určitě doplním, protože jsem z těch services zmatený, vůbec třeba nevím kde najdu nějaké API (co která metoda může mít apod). Může mě někdo prosím nakopnout? Díky
- jahudka
- Člen | 71
@Barbarossa ahoj, moc se omlouvám, tady na nette fóru jsem jen
občas a snadno mi tu věci uniknou.. dokumentace je bohužel pořád dost
tragická, rád bych řekl, že to časem bude lepší, ale teď vůbec
netuším, kdy na to budu mít zase čas; nicméně řešení tohohle problému
je celkem jednoduchý, jen místo události update
služby
page
musíš použít událost after-update
(a
případně before-update
) služby snippetManager
.
before-update
se spouští před aplikováním snippetů
z payloadu (tudíž je ideální pro cleanup) a after-update
se
spouští hned po aplikaci snippetů (takže ideální pro
inicializaci). Obě události dostávají v property data
changeset snippetů, ze kterého jde zjistit, který snippet se bude měnit /
přidávat / mazat a případně jaký bude jeho nový obsah. Událost
after-update
se spouští i při prvním načtení stránky (bez
changesetu, protože při prvním načtení stránky se nic nemění).
Takže např.:
di.getService('snippetManager').on('before-update', function(evt) {
// evt.data.add, evt.data.remove a evt.data.update jsou objekty obsahující
// vypočtené změny které se snippet manager chystá aplikovat:
console.log(evt.data.update['snippet--content'].element); // <div id="snippet--content"></div>
console.log(evt.data.update['snippet--content'].content); // <div></div> obsahující DOM strukturu z payloadu
});
di.getService('snippetManager').on('after-update', function(evt) {
if (!('update' in evt.data)) {
// pokud data neobsahují klíč "update", jedná se o "prázdný" after-update při úvodním načtení stránky
}
});
Editoval jahudka (6. 9. 2017 21:21)
- Barbarossa
- Člen | 74
@jahudka díky moc, trápil jsem se nad tím několik hodin. Určitě bych tuto část vepsal i do dokumentace včetně té zmínce o snippetManager. Když už jsem tomu věnoval tolik času tak tomu možná ještě chvíli dám a zkusím s dokumentací pomoct – takový tutorial z pohledu laika, myslím že si to Nittro zaslouží :) Mnoho zdaru
Editoval Barbarossa (6. 9. 2017 22:16)
- motorcb
- Člen | 552
@Barbarossa díky, za tip. Jak si sáhnu na proměnnou di?
JS includuji takto:
<script type="application/javascript" src="js/nittro-essentials/dist/nittro.min.js" async defer></script>
<script type="application/javascript" src="js/myloader.js" async defer></script>
A v myloader.js mam:
di.getService('ajax').on('request-created', function(evt) {
console.log("ajax loader");
});
A v konzoli prohlizece se mi zobrazi:
Uncaught ReferenceError: di is not defined at myloader.js
Jak na to? JS není můj šálek kávy :-) Díky
- Barbarossa
- Člen | 74
@motorcb
_context.invoke(function(di) {
di.getService('ajax').on('request-created', function(evt) {
console.log("ajax loader");
});
});
- motorcb
- Člen | 552
@Barbarossa: super, díky moc!
Dokáži ještě nějak zjistit na jaký element bylo kliknuto (spustil ajax požadavek), případně jaký element se refreshuje tímto požadavkem? Abych mohl do refreshovaného elementu dát loader. Takhe zjistím jen to, že probíhá nějaký ajaxový refresh ale nevím jaký :-(
Díky
- jahudka
- Člen | 71
@motorcb @Barbarossa vím že je to trochu s křížkem po
funuse, ale ať je to tu kompletní, ještě bych doplnil, že ten
inicializační kód s _context.invoke()
kterej psal
@Barbarossa je sice teoreticky správně, ale pokud budou skripty
načítaný obdobně jako psal @motorcb (dva separátní soubory oba
načítaný asynchronně) a ten init kód bude v tom druhým z nich, bude se
tam dost pravděpodobně taky přinejmenším občas objevovat nějakej error
s nedefinovanou proměnnou – akorát to místo di
bude
_context
– protože díky tomu, že jsou oba skripty
asynchronní, může se ten druhej načíst dřív než ten první. Tohle se dá
obejít buď tak, že se soubory spojí do jednoho (ve kterým bude nejdřív
nittro a pak až jakejkoliv custom kód), nebo s využitím např.
_stack
patternu (https://github.com/…/wiki/_stack).
Ohledně posledního dotazu @motorcb: z události
request-created
služby ajax
to zjistit nejde –
služba ajax
se stará jen o samotnej AJAXovej požadavek a neví
kdo ji volá a odkud. Vyvolávání AJAXovejch požadavků při kliknutí na
odkaz nebo submitu formuláře obstarává služba page
, na který
se v ten moment spouští dvě události: before-transaction
a
transaction-created
. „Transaction“ je v Nittro terminologii
přechod mezi dvěma stránkama; obvykle to znamená AJAXovej
požadavek, nějakou animaci, update snippetů a novou položku v historii, ale
nemusí to tak vždycky bejt. Nicméně k elementu, kterej byl zdrojem daný
transakce, se dá dostat z obou těch událostí pomocí
evt.data.context.element
(bacha ale na to, že element nemusí bejt
pro transakci definovanej, pokud ji třeba spustil nějakej skript přímo nebo
například při načítání z historie, tj. když uživatel klikne Zpět nebo
Vpřed). Rozdíl mezi těma událostma je v tom, že v
before-transaction
tu transakci jde úplně zakázat ještě než
se vytvoří (pomocí evt.preventDefault()
, popřípadě
evt.waitFor(<promise>)
která vytvoření transakce jen
pozdrží do splnění předanýho promise – ale až do momentu splnění
toho promise jde transakci pořád zrušit – využívá to např. Confirm
widget z Nittro Extras). V transaction-created
už naopak
transakci zabránit nejde – slouží zpravidla jako vstupní bod, kterým se
na transakci navazují tzv. agenti, kteří obstarávají jednotlivé úkoly
v rámci transakce (odeslání a zpracování AJAX požadavku, animace,
historie atd.).
Nicméně custom animace jde většinou řešit i jednodušejc než psaním JS kódu – všechny animace vestavěný v Nittru používaj jen CSS. Výchozí agent, kterej se stará o animace, během transakce na vybranejch elementech vyměňuje pár tříd v definovaný sekvenci. Zatím jsem asi ještě nenarazil na animaci, kterou by tím nešlo vyřešit. Tohle zrovna v dokumentaci je: https://github.com/…ge-component#…