Egyéni JavaScript-események

A Bricks több webhelyen futó műveletnél egyéni JavaScript-eseményt vált ki. Akkor használd őket, ha a saját szkriptednek reagálnia kell a Bricks űrlapjaira, felugró ablakaira, lekérdezésszűrőire, AJAX-frissítéseire, füleire, harmonikáira vagy más interaktív elemeire. Az eseményeket a document objektumon figyeld.

Űrlap elem

Esemény	Mikor váltódik ki
bricks/form/submit	Az űrlapküldés AJAX-hívása előtt.
bricks/form/success	Sikeres űrlapküldési AJAX-hívás válasza után.
bricks/form/error	Hibával visszatérő űrlapküldési AJAX-hívás után.

Fülek és Fülek (egymásba ágyazható) elem

bricks/tabs/changed: egy fülcímre kattintás után. Az esemény detail részében ezek vannak: elementId, activeIndex, activeTitle, activePane.

document.addEventListener('bricks/tabs/changed', (event) => {
  const { elementId, activeIndex, activeTitle, activePane } = event.detail;

  // Csak az lwxvfh azonosítójú elem érdekel
  if (elementId !== 'lwxvfh') {
    return;
  }

  console.log(`Tabs Changed - Element ID: ${elementId}, Active Index: ${activeIndex}, Active Title: ${activeTitle}, Active Pane: ${activePane}`);

  // Ide jön a saját logikád
});

Harmonika és Harmonika (egymásba ágyazható) elem

• bricks/accordion/open: egy harmonikatétel kattintásra való kinyitása után.
• bricks/accordion/close: egy harmonikatétel kattintásra való becsukása után.

document.addEventListener('bricks/accordion/open', (event) => {
  const { elementId, openItem } = event.detail;

  if (elementId !== 'qwe3th') {
    return;
  }

  console.log(`Accordion Opened - Element ID: ${elementId}, Open Item ID: ${openItem}`);
});

document.addEventListener('bricks/accordion/close', (event) => {
  const { elementId, closeItem } = event.detail;

  if (elementId !== 'qwe3th') {
    return;
  }

  console.log(`Accordion Closed - Element ID: ${elementId}, Closed Item ID: ${closeItem}`);
});

Animációs események

bricks/animation/end/{animationId}: a megadott azonosítójú animáció lejátszásának végén váltódik ki.

Felugró ablak események

Esemény	Mikor váltódik ki
bricks/popup/open	A felugró ablak megnyitása után.
bricks/popup/close	A felugró ablak bezárása után.
bricks/ajax/popup/start	Egy AJAX-os felugró ablak hívása előtt.
bricks/ajax/popup/end	Az AJAX-os felugró ablak hívásának befejezése után.
bricks/ajax/popup/loaded	Az AJAX-os felugró ablak tartalmának a DOM-ba illesztése után.

AJAX-os felugró ablak megnyitásakor az események sorrendje:

1. bricks/ajax/popup/start
2. bricks/ajax/popup/end
3. bricks/ajax/popup/loaded
4. bricks/popup/open

Bricks AJAX események

Esemény	Mikor váltódik ki
bricks/ajax/start	Egy Bricks AJAX-hívás előtt.
bricks/ajax/end	Egy Bricks AJAX-hívás befejezése után.
bricks/ajax/pagination/completed	Egy AJAX-os lapozás befejezése után.
bricks/ajax/load_page/completed	Egy végtelen görgetéses AJAX-hívás befejezése után.
bricks/ajax/query_result/completed	Egy lekérdezésszűrős AJAX-hívás befejezése után.
bricks/ajax/nodes_added	Miután a Bricks új AJAX-eredménycsomópontokat illesztett a DOM-ba. Az esemény detail részében ott van a queryId.
bricks/ajax/query_result/displayed	Miután az összes szűrt eredmény bekerült a DOM-ba.
bricks/filter/submit/start	Amikor egy Szűrő - Küldés elem AJAX-os szűrőküldést indít. A detail tartalmazza a queryId és a filterId értékét.
bricks/filter/submit/end	Amikor a Szűrő - Küldés elem AJAX-os szűrőküldése befejeződik. A detail tartalmazza a queryId és a filterId értékét.

Az események sorrendje

Végtelen görgetés:

1. bricks/ajax/start
2. bricks/ajax/nodes_added
3. bricks/ajax/end
4. bricks/ajax/load_page/completed

AJAX-os lapozás:

1. bricks/ajax/start
2. bricks/ajax/nodes_added
3. bricks/ajax/end
4. bricks/ajax/pagination/completed

AJAX-os lekérdezésszűrő:

1. bricks/ajax/start
2. bricks/ajax/end
3. bricks/ajax/query_result/completed
4. bricks/ajax/nodes_added
5. bricks/ajax/query_result/displayed

Szűrő küldése:

A bricks/filter/submit/start és a bricks/filter/submit/end esemény csak a Szűrő - Küldés elemre jellemző. Csak olyan AJAX-os szűrőküldésnél futnak, amely az aktuális oldal eredményeit frissíti. Ha a Küldés elem másik URL-re irányít át, nem váltódnak ki.

1. bricks/filter/submit/start
2. bricks/ajax/start
3. bricks/ajax/end
4. bricks/ajax/query_result/completed
5. bricks/ajax/nodes_added
6. bricks/ajax/query_result/displayed
7. bricks/filter/submit/end

Ezeket az eseményeket akkor használd, ha a szkriptednek csak a szándékos küldésre kell reagálnia, nem minden szűrős AJAX-kérésre.

Példák

document.addEventListener('bricks/ajax/start', (event) => {
  const queryId = event.detail.queryId || false;

  if (!queryId) {
    return;
  }

  // Például indíts egy töltésjelzőt
});

document.addEventListener('bricks/ajax/end', (event) => {
  const queryId = event.detail.queryId || false;

  if (!queryId) {
    return;
  }

  // Például állítsd le a töltésjelzőt
});

document.addEventListener('bricks/ajax/pagination/completed', (event) => {
  const queryId = event.detail.queryId;

  // Például kezeld az adott lekérdezés befejezett lapozását
});

document.addEventListener('bricks/ajax/load_page/completed', (event) => {
  const { queryTrailElement, queryId } = event.detail;

  // Például kezeld az adott lekérdezés és lekérdezésvég-elem betöltött oldalát
});

document.addEventListener('bricks/ajax/query_result/completed', (event) => {
  const queryId = event.detail.queryId;

  // Saját logika
});

document.addEventListener('bricks/ajax/nodes_added', (event) => {
  const queryId = event.detail.queryId;

  // Például indítsd el azokat a szkripteket, amelyeknek már léteznie kell az új AJAX-csomópontoknak
});

document.addEventListener('bricks/ajax/query_result/displayed', (event) => {
  const queryId = event.detail.queryId;

  // Saját logika
});

document.addEventListener('bricks/filter/submit/start', (event) => {
  const { queryId, filterId } = event.detail;

  // Csak az xnueeh azonosítójú Szűrő - Küldés elemre reagálunk
  if (filterId !== 'xnueeh') {
    return;
  }

  // Saját logika
});

document.addEventListener('bricks/filter/submit/end', (event) => {
  const { queryId, filterId } = event.detail;

  // Csak a kpmnav azonosítójú lekérdezésre reagálunk
  if (queryId !== 'kpmnav') {
    return;
  }

  // Saját logika
});

Mega menü események

bricks/megamenu/repositioned: miután egy mega menü almenüje a webhelyen új helyre került. A detail tartalmazza a menuItem és a submenu értékét.

document.addEventListener('bricks/megamenu/repositioned', (event) => {
  const { menuItem, submenu } = event.detail;

  // Például frissíts harmadik féltől származó szkripteket az áthelyezett almenüben
});