# Egyedi kód átvezetése: JavaScript és PHP

> Hogyan működik a modulok automatikus frissítése a Velocity motorra, és mit kell lecserélni az SR6-os egyedi JavaScript és PHP kódban.

Az SR7 Velocity renderelőmotor a korábbi Genesis motorhoz képest könnyű, adatvezérelt működést hoz. A Genesis motorral készült, régi (6.7 előtti) modulok frissítését a bővítmény a háttérben magától elvégzi, így a megjelenítés gyorsabb és simább lesz. Az egyedi PHP, CSS és JavaScript kódban viszont van néhány elavult elem, amelyet kézzel kell átírni. Ez a fejezet a JavaScript és a PHP változásait gyűjti össze; a HTML és CSS változásai a [kimeneti HTML és CSS szelektorok változásai](https://hub.hellowp.io/hu/plugins/revslider/fejlesztoknek-kod-atvezetes-html-css/) fejezetben vannak.

## Mi számít elavultnak

- **JavaScript:** a jQuery helyett a bővítmény saját JavaScript API-ját használja. Az átállás előtt tartalék megoldások működnek, de érdemes minél előbb az új API-ra váltani. Ahol lehet, a bővítmény a régi jQuery-kódot is megpróbálja a mostani motorhoz illő JavaScriptre alakítani. Ha egy kód túl összetett a teljes átalakításhoz, változatlan marad, de az osztályneveket és szelektorokat ilyenkor is lecseréli, amennyire lehet. Az eseményfigyelők a jQuery `bind()` helyett natív JavaScript figyelők.
- **PHP:** módosultak a globális változók, néhány filter megszűnt, több függvényt átneveztek vagy lecseréltek.
- **CSS és HTML:** új osztálynevek, HTML-elemek és adatszerkezetek jelentek meg. Az **Egyedi CSS** ablakba írt kódot a frissítéskor a bővítmény megpróbálja átírni, és a régi osztály- vagy elemneveket az újakra cseréli.
- **Elavulási értesítések:** ha egy elavult elemet használsz, erről a böngésző konzoljában és a Slider Revolution vezérlőpultján kapsz értesítést.

## Hogyan megy végbe a modulok frissítése

1. A modul mentésekor az adatok mindkét motor (Genesis és Velocity) formájában tárolódnak.
2. A frontenden a bővítmény először a Velocity formátumú adatot próbálja betölteni.
3. Ha az nincs meg, a régi formátumú adatot kéri le, és menet közben frissíti.

Ha szükséges, bekapcsolható a régi renderelő kényszerített használata, de érdemes minél előbb a mostani motorra állni.

## JavaScript metódusok

| SR6 (Genesis) | SR7 (Velocity) |
|---|---|
| `revapi.revstart();` | `revapi.start();` (ha az **Api Wait** be van kapcsolva) |
| `revapi.revpause();` | `revapi.pause();` |
| `revapi.revresume();` | `revapi.resume();` |
| `revapi.revprev();` | `revapi.prevSlide();` |
| `revapi.revnext();` | `revapi.nextSlide();` |
| `revapi.revscroll(offset);` | `revapi.scroll(offset);` |
| `revapi.revremoveslide(slideindex);` | `revapi.removeSlide(slidekey);` |
| `revapi.revshowslide(2);` | `revapi.showSlide(2);` |
| `revapi.revcallslidewithid('rs-1007');` | helyette a `revapi.showSlide()` |
| `revapi.revmaxslide();` | `revapi.maxSlide();` (a diák száma, nem csak a navigációval elérhetőké) |
| `revapi.revcurrentslide();` | `revapi.currentSlide();` (ilyen adatot ad: `{index: 2, key: '281', order: 3}`) |
| `revapi.revlastslide();` | `revapi.lastSlide();` (a navigációval elérhető utolsó dia) |
| `revapi.revredraw();` | `revapi.redraw();` |
| `revapi.revkill();` | `revapi.kill();` |
| `revapi.revGoToFrame({layerid:'',frame:'',children:true})` | `revapi.playScene('layer','scene');` |

A `showSlide()` lehetséges argumentumai:

| Érték | Jelentés |
|---|---|
| `"last"` | az utolsó dia |
| `"first"` | az első dia |
| `"random"` | véletlenszerű dia |
| `"id"` | a megadott azonosítójú dia |
| `"+2"` | két diával előre |
| `"-1"` | egy diával vissza |
| `0` és `100` között szám | a megadott indexű dia (0-tól) |

A `playScene()` példája: `revapi.playScene('SR7_1051_1-281-0','scene_1');`

## JavaScript események

A régi események jQuery `bind()` hívással működtek:

```js
revapi.bind("<eventname>",function (e,data) {
  //egyedi kód
});
```

Az újak natív figyelőkkel:

```js
document.addEventListener("<eventname>", function (e,data) {
  //egyedi kód
});
```

| SR6 esemény | SR7 esemény | Az eseményben kapott adat |
|---|---|---|
| `revolution.slide.onloaded` | `sr.module.ready` | `id`: a modul azonosítója |
| `revolution.slide.onchange` | `sr.slide.afterChange` | `id`, `current: { index, key, order }`, `previous: { index, key, order }` |
| `revolution.slide.onpause` | `sr.slide.pause` | `id` |
| `revolution.slide.onresume` | `sr.slide.resume` | `id` |
| `revolution.slide.onvideoplay` és `revolution.slide.onvideostop` | `sr.media.update` | `id`, `player` (a lejátszó API-ja), `type` (html5, youtube, vimeo), `options` (médiabeállítások), `layer` (a médiát tartalmazó réteg), `state` (playing, paused, finished), `skey` (a dia kulcsa) |
| `revolution.slide.onstop` | `sr.module.finished` | `id` |
| `revolution.slide.onbeforeswap` | `sr.slide.beforeChange` | `id`, `current: { index, key, order }`, `next: { index, key, order }` |
| `revolution.slide.onafterswap` | `sr.slide.afterChange` | `id`, `current`, `previous` (mint fent) |
| `revolution.slide.slideatend` | `sr.slide.ended` | `id`, `current: { index, key, order }` |
| `revolution.slide.layeraction` | `sr.layer.action` | lásd lent |
| `RS_MODALOPENED` (régi: `jQuery.fn.revolution.document.on('RS_MODALOPENED', …)`) | `sr.modal.loaded`, `sr.modal.open`, `sr.modal.close` | `id`, `alias`: a modul álneve |

Az `sr.layer.action` esemény adatai:

| Mező | Jelentés |
|---|---|
| `id` | a modul azonosítója |
| `eventtype` | a rétegakció típusa: `enterstage`, `enteredstage`, `leavestage`, `leftstage`, `framestarted`, `frameended` |
| `scene` | a réteg éppen hívott jelenete (`in`, `out`, `scene_1` és így tovább) |
| `frame` | az éppen feldolgozott keret |
| `layerid` | a réteg azonosítója vagy kulcsa |
| `caller` | az indító folyamat (például „action”) |
| `layertype` | a réteg típusa: container, text, image, shape és így tovább |
| `layersettings` | az összes előre megadott beállítás |

Példa figyelőre:

```js
document.addEventListener("sr.slide.afterChange", function(e) {
  // e.id, e.current, e.previous
});
```

## PHP globális változók

A korábban `global $<változó>` formában definiált változók az `$SR_GLOBALS` tömbbe kerültek.

| SR6 | SR7 |
|---|---|
| `$rs_material_icons_css` | `$SR_GLOBALS['icon_sets']['Materialicons']['css']` |
| `$rs_material_icons_css_parsed` | `$SR_GLOBALS['icon_sets']['Materialicons']['parsed']` |
| `$fa_icon_var` | `$SR_GLOBALS['icon_sets']['FontAwesome']` |
| `$fa_var` | `$SR_GLOBALS['icon_sets']['FontAwesome']` |
| `$pe_7s_var` | `$SR_GLOBALS['icon_sets']['PeIcon']` |
| `$rs_css_collection` | `$SR_GLOBALS['collections']['css']` |
| `$rs_ids_collection` | `$SR_GLOBALS['collections']['ids']` |
| `$rs_js_collection` | `$SR_GLOBALS['collections']['js']` |
| `$revslider_fonts` | `$SR_GLOBALS['fonts']` |
| `$revslider_is_preview_mode` | `$SR_GLOBALS['preview_mode']` |
| `$revslider_save_post` | `$SR_GLOBALS['save_post']` |
| `$revslider_addon_notice_merged` | `$SR_GLOBALS['addon_notice_merged']` |
| `$revslider_animations` | `$SR_GLOBALS['animations']` |
| `$rs_loaded_by_editor` | `$SR_GLOBALS['loaded_by_editor']` |
| `$rs_preview_mode` | `$SR_GLOBALS['preview_mode']` |
| `$rs_do_init_action` | `$SR_GLOBALS['data_init']` |
| `$rs_slider_serial` | `$SR_GLOBALS['serial']` |
| `$rs_revicons` | `$SR_GLOBALS['icon_sets']['RevIcon']` |
| `$rs_double_jquery_script` | `$SR_GLOBALS['js_init']` |

## Megszűnt PHP filterek

Ezek a filterek már nem léteznek:

- `revslider_set_template_slides`
- `revslider_set_template_sliders`
- `revslider_slide_initByTwitter_pre`
- `revslider_slide_initByTwitter_post`

## PHP függvények

Az SR6 (Genesis) PHP-függvényei a 6.7-es verziótól elavultak voltak, a 7.0-ban pedig megszűntek. A `RevSliderSlider->getAllSliderAliases()` függvény elavult jelölést kapott.

| SR6 | SR7 |
|---|---|
| `RevSliderAdmin->activate_plugin()` | `RevSliderLicense->active_plugin()` |
| `RevSliderAdmin->deactivate_plugin()` | `RevSliderLicense->deactivate_plugin()` |
| `RevSliderFunctions->getVal()` | `RevSliderFunctions->get_val()` |
| `RevSliderFunctions->cleanStdClassToArray()` | `RevSliderFunctions->class_to_array_single()` |
| `RevSliderOutput->isPutIn()` | `RevSlider7Output->check_add_to()` |
| `RevSliderSlide->getID()` | `RevSliderSlide->get_id()` |
| `RevSliderSlide->getSliderID()` | `RevSliderSlide->get_slider_id()` |
| `RevSliderSlide->getImageUrl()` | `$this->image_url` |
| `RevSliderSlide->setLayersRaw()` | `RevSliderSlide->set_layers_raw()` |
| `RevSliderSlide->saveLayers()` | `RevSliderSlide->save_layers()` |
| `RevSliderSlide->getParam()` | `RevSliderSlide->get_val($this->params)` |
| `RevSliderSlider->getParam()` | `RevSliderSlider->get_param()` |
| `RevSliderSlider->getParams()` | `RevSliderSlider->get_params()` |
| `RevSliderSlider->getID()` | `RevSliderSlider->get_id()` |
| `RevSliderSlider->getArrSliders()` | `RevSliderSlider->get_sliders()` |
| `RevSliderSlider->initByMixed()` | `RevSliderSlider->init_by_mixed()` |
| `RevSliderSlider->initByID()` | `RevSliderSlider->init_by_id()` |
| `RevSliderSlider->initByAlias()` | `RevSliderSlider->init_by_alias()` |
| `RevSliderSlider->getAlias()` | `RevSliderSlider->get_alias()` |
| `RevSliderSlider->isAliasExistsInDB()` | `RevSliderSlider->check_alias()` |
| `RevSliderSlider->getShortcode()` | `RevSliderSlider->get_shortcode()` |
| `RevSliderSlider->getFirstSlideIdFromGallery()` | `RevSliderSlider->get_first_slide_id_from_gallery()` |
| `RevSliderSlider->isSlidesFromPosts()` | `RevSliderSlider->is_posts()` |
| `RevSliderSlider->isSlidesFromStream()` | `RevSliderSlider->is_stream()` |
| `RevSliderSlider->getNumSlidesRaw()` | `RevSliderSlider->get_slides()` |
| `RevSliderSlider->getNumSlides()` | `RevSliderSlider->get_slides()` |
| `RevSliderSlider->getNumRealSlides()` | `RevSliderSlider->get_wanted_slides()` |
| `RevSliderSlider->getTitle()` | `RevSliderSlider->get_title()` |
| `RevSliderSlider->getArrSlidersShort()` | `RevSliderSlider->get_sliders_short()` |
| `RevSliderSlider->initByDBData()` | `RevSliderSlider->init_by_data()` |
| `RevSliderSlider->isAliasExists()` | `RevSliderSlider->alias_exists()` |
| `RevSliderSlider->getArrSlideNames()` | `RevSliderSlider->get_slide_names()` |
| `RevSliderSlider->getSlidesFromGallery()` | `RevSliderSlider->get_slides()` |
| `RevSliderSlider->importSliderFromPost()` | `RevSliderSlider->import_slider()` |
| `RevSliderSlider->deleteSlider()` | `RevSliderSlider->delete_slider()` |
| `RevSliderSlider->getAllSliderForAdminMenu()` | `RevSliderSlider->get_slider_for_admin_menu()` |
| `RevSliderFront->putAdminBarMenus()` | `RevSliderFront->add_admin_bar()` |