npm package: @hunsziszi/modal-popup
Description: Lightweight helper to show HTML or remote pages inside Bootstrap modals (iframe or inline content).
Author: Váczi Szilárd
Latest version: 1.0.5

# modal-popup

Kis, könnyű JavaScript segédlet Bootstrap 5 modális ablakokhoz. Lehetővé teszi inline HTML vagy távoli oldal (iframe) megjelenítését; egyszerű API-val irányítható megnyitás/bezárás és alapvető beállítások.

**Követelmény**: Bootstrap 5 (CSS + JS bundle) szükséges a modális működéséhez.

## Telepítés

Nyilvános package név (scoped):

```bash
npm install @hunsziszi/modal-popup
```

vagy helyileg importáld a `modalPopup.js` fájlt, ha nem használod a csomagot.

## Gyors beállítás (Bootstrap 5 CDN)

Példa HTML (Bootstrap 5 szükséges):

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <button id="open-inline" class="btn btn-primary">Inline megnyitás</button>
    <button id="open-iframe" class="btn btn-secondary">Iframe megnyitás</button>

    <script type="module">
      import { ModalPopup } from '@hunsziszi/modal-popup';

      // Inline HTML példa
      const inlinePopup = new ModalPopup('Inline példa', '<p>Ez egy inline tartalom</p>', { width: '600px' });
      document.getElementById('open-inline').addEventListener('click', () => inlinePopup.open());

      // Iframe (remote) példa
      const iframePopup = new ModalPopup('Távoli oldal', null, { width: '80%', height: '70vh' });
      iframePopup.setSrc('https://example.com');
      document.getElementById('open-iframe').addEventListener('click', () => iframePopup.open());
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
```

## Default import és global attach

Ha egyszerűbb importot szeretnél használni, a csomag default exportot is kínál:

```js
import ModalPopup from '@hunsziszi/modal-popup';

new ModalPopup('Egyszerű import', '<p>Default import példa</p>').open();
```

Az `attachToWindow` segítségével opcionálisan felteheted a `ModalPopup`-ot egy globális névtérre (pl. `window.App` vagy `window`):

```js
import { attachToWindow } from '@hunsziszi/modal-popup';
attachToWindow('App'); // vagy attachToWindow('global') a window.ModalPopup-hoz

// Automatikus attach meta tag segítségével:
// <meta name="modal-popup-auto-attach" content="1">
```

## Alapfunkciók és API



## Részletes API — mit csinál minden publikus függvény

Az alábbi lista a `modalPopup.js` ben található publikus metódusokra és azok viselkedésére vonatkozik. Minden, ahol értelmezett, chainable (`this`-t ad vissza).

- Konstruktor: `new ModalPopup(title = "", html = "", config = {})`
  - Létrehoz egy új példányt a megadott alapbeállításokkal, beállítja az alapértelmezett konfigurációt, generál egy azonosítót, és előkészíti a belső állapotot.

- `getID()`
  - Visszaadja a modal DOM elemének `id`-ját (ha létrehozva).

- `getIframeID()`
  - Visszaadja az iframe DOM elemének `id`-ját (`frame_<modal-id>`), ha iframe módban van.

- `setWidth(width)`
  - Beállítja a modal szélességét (pl. `'80%'`, `'600px'`). Azonnal frissíti a konfigurációt.

- `setHeight(height)`
  - Beállítja a modal magasságát (pl. `'70vh'`, `'500px'`).

- `setSrc(url)`
  - Beállítja a remote forrást (`src`) — ha meg van adva `src`, a popup iframe módban fog működni. A `get_params` és `force_get_params` alapján query stringet állít össze.

- `setTitle(text)`
  - Beállítja a modal fejlécben megjelenő címsort.

- `setHtml(html)`
  - Beállítja az inline HTML tartalmat, ha nem iframe módban használjuk.

- `setOnOpen(func)`
  - Beállít egy callbacket, ami a modal megnyitása után fut le (`shown.bs.modal` eseménykor).

- `setOnBeforeOpen(func)`
  - Beállít egy callbacket, ami a modal megjelenése előtt fut le (`show.bs.modal` eseménykor).

- `setOnClose(func)`
  - Beállít egy callbacket, ami a modal teljes bezárása után fut le (`hidden.bs.modal` eseménykor). A callback a modal objektum kontextusában hajtódik végre.

- `setOnBeforeClose(func)`
  - Beállít egy callbacket, ami a modal bezáródása előtt fut le (`hide.bs.modal`).

- `setGetParams(obj)`
  - Beállítja a `get_params` objektumot, majd újraépíti a modal `src`-át (query string). Hasznos iframe GET-kérésekhez.

- `setPostParams(obj)`
  - Beállítja a `post_params` objektumot; ha érvényes (nem üres JSON), a popup POST módban fog iframe-et létrehozni, azaz a tartalom POST-tal fog betöltődni egy dinamikus formon keresztül.

- `setBackdrop(value)`
  - `value` lehet `'static'` (mellékattintás nem zárja), vagy `true`/`false` — beállítja a Bootstrap `data-bs-backdrop` attribútumot.

- `setKeyboard(value)`
  - Engedélyezi vagy tiltja az Escape billentyűvel történő bezárást (Bootstrap `data-bs-keyboard`).

- `setFocus(value)`
  - Ha `true`, a modal megnyitása után a `.modal-content` elem fókuszt kap.

- `setClassModal(string)`, `setClassModalDialog(string)`, `setClassModalContent(string)`, `setClassModalHeader(string)`, `setClassModalTitle(string)`
  - Ezekkel további CSS osztályokat adhatsz a modal különböző részeihez (pl. `fade`, `modal-dialog-centered`).

 - `setAutoCsrfToken(bool)`
  - Ha `true`, akkor a `#generateForm()` metódus automatikusan megpróbálja felismerni és hozzáadni a CSRF token mezőt (Laravel/CodeIgniter4 meta tag-ek vagy cookie alapján). Ezáltal POST iframe-kérések CI4/Laravel kompatibilisek lesznek.

- `setForceGetParams(obj)` / `setForcePostParams(obj)` / `forcePostParams(obj)`
  - Kötelezően hozzáadandó paraméterek, amelyek minden GET vagy POST kéréshez hozzá lesznek fűzve. (`forcePostParams` a hátsó kompatibilitás miatt is elérhető.)

- `open()`
  - Létrehozza a modal DOM struktúráját (`#createPopupContainer()`), hozzáadja a dokumentumhoz, regisztrálja a Bootstrap eseménykezelőket (`show.bs.modal`, `shown.bs.modal`, `hide.bs.modal`, `hidden.bs.modal`) és megjeleníti a modal-t. Ha iframe POST módban van, beágyaz egy űrlapot és automatikusan elküldi.

- `close()`
  - Lekéri a Bootstrap modal példányt és meghívja a `hide()` metódust, amely elindítja a bezárási folyamatot és a későbbi cleanup-ot.

- Privát segédmetódusok (belső működés):
  - `#processUrl()` — összeállítja az iframe `src`-át a `src` + `get_params` + `force_get_params` alapján.
  - `#checkIframeMode()` — eldönti, hogy iframe-re van-e szükség (ha `src` megadott), és beállítja a POST/GET módot a `post_params` alapján.
  - `#regenID(force)` — generál véletlen `id`-t a modalhoz, ha szükséges.
  - `#createPopupContainer()` — létrehozza a valódi DOM struktúrát (modal, dialog, content, header, body), és ha iframe módban van, beilleszti az iframe-et és a POST-űrlapot.
  - `#generateForm()` — rekurzívan legenerálja a hidden input mezőket a `post_params`/`force_post_params` objektumokból (tömböket, beágyazott objektumokat is kezeli), amit iframe POST betöltéshez használ.
  - `#remove()` — eltávolítja a modal DOM elemet a dokumentumból és kitakarítja a weakmap bejegyzést.

Példa: láncolható inicializáció és megnyitás
## Licence

MIT — lásd a `LICENSE` fájlt.
```html
<a href="#" data-modal-src="/terms.html" data-modal-title="Általános Szerződési Feltételek" id="terms">ÁSZF</a>
<script type="module">
  import { bindDataAttributes } from '@hunsziszi/modal-popup';
  bindDataAttributes();
  // bindDataAttributes automatikusan kattintásra megnyitja a modal-t a data- attribútumok szerint
</script>
```

## Telepítés és tesztelés lokálisan

1. Telepítés:

```bash
npm install
```

2. Csomag ellenőrzése:

```bash
npm pack
```

3. Lokális telepítés egy teszt mappába:

```powershell
npm pack
npm install .\\modal-popup-*.tgz --prefix ..\\tmp-install
```

## Publish megjegyzések

- Scoped csomag esetén (`@username/package`) publikus kiadáshoz futtasd: `npm publish --access public`.
- Ha 2FA vagy granuláris access token van beállítva, előfordulhat, hogy újra be kell jelentkezned (`npm login`) vagy friss token kell.

## Hozzájárulás

Ha találsz hibát vagy szeretnél új funkciót javasolni, nyiss egy issue-t vagy pull request-et a GitHub tárolóban.

## Licence

MIT — lásd a `LICENSE` fájlt.
# modal-popup

Kis, egyszerű JavaScript segédlet Bootstrap modális ablakokhoz. Megjeleníthetsz inline HTML-t vagy távoli oldalt iframe-ben (GET/POST).

## Telepítés

```bash
npm install modal-popup
```

## Gyors példa

```html
<script type="module">
  import { ModalPopup } from 'modal-popup';

  const popup = new ModalPopup('Cím', '<p>Szia világ</p>');
  popup.open();
</script>
```

## API

- `new ModalPopup(title, html, config)` - létrehoz egy példányt
- láncolható setterek: `setHtml()`, `setWidth()`, `setSrc()` stb.
- `open()` - megnyitja a modalt
- `close()` - bezárja a modalt

Részletes használat lásd a forrás kommentjeiben.

## Publish

1. Frissítsd a `package.json` mezőit (`name`, `version`, `author`, `repository`).
2. Jelentkezz be: `npm login`
3. Lokálisan ellenőrizd: `npm pack`
4. Publikálás: `npm publish --access public`

## Licence

MIT