# Egyéni szkriptek panel

> A modul saját CSS- és JavaScript-kódja, a beszúrható elemnevek, API-parancsok, események és kész példaszkriptek.

A modulnak lehet saját CSS- és JavaScript-kódja a szerkesztőben megadott beállítások mellett. A CSS a modul megjelenését változtatja, a JavaScript vezérli a modult, vagy reagál arra, amit a modul csinál (például diaváltásra). Az **Egyéni szkriptek** panelen írod meg ezt a kódot. A panelnek egy CSS- és egy JavaScript-szerkesztője van, mindkettőhöz külön fiókból illeszthetsz be kész részleteket.

## A panel megnyitása

1. A modulszerkesztő felső sávjában kattints a **Beállítások** gombra.
2. A [Beállítások oldalsávon](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-beallitasok-oldalsav/) kattints az **Egyéni szkriptek** sorra.

![Az Egyéni szkriptek panel Egyedi CSS füle](./kepek/szerkeszto-panelek-3-egyeni-szkriptek.webp)

*Az Egyéni szkriptek panel Egyedi CSS füle* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen a két fül (**Egyedi CSS** és **Egyedi JavaScript**) és a sorszámozott, még üres kódszerkesztő látszik.

A kód a modullal együtt mentődik, és mindenhol megjelenik az oldalon, ahol a modul látszik. A JavaScript akkor fut le, amikor a modul felépül az oldalon.

Az egyéni CSS-t és JavaScriptet csak WordPress-adminisztrátor mentheti. Ha más szerepkörű felhasználó menti a modult, a korábbi kód változatlanul megmarad.

## Egyedi CSS

A fülön a CSS-szerkesztő áll, jobb szélén pedig a **Tags** fiók a modult alkotó elemek nevével. A szerkesztő sorszámozott, és CSS-ként színezi a kódot. A CSS a modullal együtt kerül az oldalra.

A modul elemeit a szerepük alapján nevezték el, például `sr7-module` az egész modul, `sr7-slide` egy dia, így azonosító nélkül is meg lehet célozni őket szabállyal.

A **Tags** a panel jobb szélén nyitja ki a fiókot, még egy kattintás bezárja. Minden sorának plusz gombja üres CSS-szabályt szúr be az adott elemhez a kurzor helyére.

| Bejegyzés | Beszúrt szabály |
| --- | --- |
| Main Module Wrapper | `sr7-module`, az egész modult körbevevő elem. |
| Module Content | `sr7-content`, a diákat tartalmazó elem. |
| Carousel Container | `sr7-carousel`, a körhinta diáit tartalmazó elem. |
| Slide Container | `sr7-slide`, minden dia. |
| Row Container | `sr7-row`, minden sorréteg. |
| Column Container | `sr7-col`, minden oszlopréteg. |
| Shape Layer | `sr7-shp`, minden alakzatréteg. |
| Text Layer | `sr7-txt`, minden szövegréteg. |
| Image Layer | `sr7-img`, minden képréteg. |

## Egyedi JavaScript

A fülön a JavaScript-szerkesztő áll, jobb szélén fiókkal, amelyben három fülön találsz beszúrható részleteket: **Methods**, **Events** és **Examples**. A részletek a modul API-objektumát hívják, amelynek neve a `revapi` és a modul azonosítója, például `revapi113`. Az azonosítót a rendszer a beszúráskor kitölti.

A szerkesztő sorszámozott, JavaScriptként színezi a kódot, és a kód a modul felépülésekor fut le az oldalon.

### Methods

A modul API-jának parancsait sorolja fel. A bejegyzés fölé víve a leírása, a plusz gombra víve a parancs látszik. A plusz gomb a parancsot magyarázó megjegyzéssel együtt a szerkesztőbe szúrja a kurzor helyére.

| Bejegyzés | Beszúrt parancs és hatása |
| --- | --- |
| Start Slider | `revapi.start()`: elindítja az API-ra váró modult. |
| Pause Slider | `revapi.pause()`: szünetelteti a modul haladását. |
| Forced Pause | `revapi.forcedPause()`: szünetelteti a modult, és szüneteltetve is tartja, még ha újra látótérbe ér is, amíg a `resume()` meg nem hívódik. |
| Resume Slider | `revapi.resume()`: folytatja a modul haladását. |
| Previous Slide | `revapi.prevSlide()`: az előző diát mutatja. |
| Next Slide | `revapi.nextSlide()`: a következő diát mutatja. |
| External Scroll | `revapi.scroll(offset)`: az oldalt a megadott pozícióra görgeti. |
| Max Slides | `revapi.maxSlide()`: a diák számát adja vissza. |
| Last Slide | `revapi.lastSlide()`: a navigációval elérhető utolsó diát adja vissza. |
| Go To Slide | `revapi.showSlide(2)`: egy diát mutat. Az érték lehet `"first"`, `"last"`, `"random"`, egy dia azonosítója, `"+2"` vagy `"-1"` (ennyi diával léptet), vagy 0-tól számolt sorszám. |
| Current Slide | `revapi.currentSlide()`: az aktuális dia sorszámát, kulcsát és sorrendjét adja vissza. |
| Redraw Slider | `revapi.redraw()`: újrarajzolja a modult. |
| Kill Slider | `revapi.kill()`: leállítja a modult, és eltávolítja az oldalról. |
| Go To Frame | `revapi.playScene(layerid, scene)`: lejátssza egy réteg animációs jelenetét, például `"in"`, `"out"` vagy `"scene_1"`. |
| Remove Slide | `revapi.removeSlide(slidekey)`: eltávolít egy diát a modul ciklusából. |

### Events

A modul futás közben küldött eseményeit sorolja fel. A fiókot az **Events** fülre váltva éred el. A plusz gomb az eseményre figyelő részletet szúr be a kurzor helyére. A részlet az esemény adatait a böngészőkonzolra írja ki, saját kód kiindulópontjaként.

| Bejegyzés | Esemény és mikor érkezik |
| --- | --- |
| Modal Loaded | `sr.modal.loaded`: betöltött egy modálként használt modul. |
| Modal Open | `sr.modal.open`: kinyílik egy modál. |
| Modal Close | `sr.modal.close`: bezárul egy modál. |
| Module Ready | `sr.module.ready`: a modul elkészült. |
| Slide After Change | `sr.slide.afterChange`: a diaváltás után, az aktuális és az előző diával. |
| Slide Ended | `sr.slide.ended`: egy dia a végére ért, az aktuális és a következő diával. |
| Slide Before Change | `sr.slide.beforeChange`: a diaváltás előtt, az aktuális és a következő diával. |
| Slide Pause | `sr.slide.pause`: a modul szünetel. |
| Slide Resume | `sr.slide.resume`: a modul folytatja. |
| Media Update | `sr.media.update`: egy videó- vagy hangréteg lejátszója állapotot váltott. |
| Layer Action | `sr.layer.action`: lefutott egy réteg animációja vagy művelete, a réteggel és a jelenettel. |
| Module Finished | `sr.module.finished`: a modul minden diát lejátszott, és megállt. |

### Examples

Gyakori feladatokra adott teljes szkriptek. A fiókot az **Examples** fülre váltva éred el. A plusz gomb a szkriptet a módosítandó részeket jelző megjegyzésekkel együtt illeszti a szerkesztőbe a kurzor helyére.

| Bejegyzés | Mit csinál |
| --- | --- |
| External Nav Buttons | A `prev-btn` és `next-btn` azonosítójú két oldalelemre kattintva az előző, illetve a következő dia látszik. |
| Custom Keyboard Navigation | Az `A` billentyű az előző, a `D` a következő diát mutatja. |
| Slide Counter (X of Y) | Minden diaváltáskor az aktuális dia számát és a diák számát (például `2 / 5`) beírja a `slide-counter` azonosítójú elembe. |
| Go To Slide (External) | Minden `data-goto-slide` attribútumú elemre kattintva az attribútumban megadott sorszámú dia látszik, a 0 az első dia. |
| GA4 / GTM Analytics | Minden diaváltáskor `rs_slide_view` eseményt küld a Google Tag Managernek a modullal, a dia sorszámával és azonosítójával. A Google Tag Managernek vagy a gtag.js-nek már az oldalon kell lennie. |
| Style Page per Slide | Az oldal `body` elemére az aktuális diához tartozó osztályt teszi (például `sr-slide-0`), így az oldal többi eleme diánként formázható. |
| Reduce Motion (Accessibility) | Azoknál a látogatóknál, akiknek a rendszere csökkentett mozgásra van állítva, az első diaváltás után szünetelteti a modult. |
| Scroll to Next Section | Miután a modul minden diát lejátszott, az oldalt a `next-section` azonosítójú elemhez görgeti. |

![Az Egyedi JavaScript fül](./kepek/szerkeszto-panelek-3-egyeni-javascript.webp)

*Az Egyedi JavaScript fül* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen az **Egyedi JavaScript** fül látszik a sorszámozott szerkesztővel.