# Egyéni JavaScript-események

> A Bricks által a webhelyen kiváltott JavaScript-események: űrlap, fülek, harmonika, animáció, felugró ablak, AJAX, szűrők és mega menü, sorrenddel és példákkal.

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

```javascript
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.

```javascript
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}`);
});
```

```javascript
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

```javascript
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
});
```

```javascript
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
});
```

```javascript
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
});
```

```javascript
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
});
```

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

  // Saját logika
});
```

```javascript
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
});
```

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

  // Saját logika
});
```

```javascript
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
});
```

```javascript
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.

```javascript
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
});
```