Kívánalom: Rewired 2.0 - RWMedia Frontend

Rewired 2.0 – RwMedia Frontend.

Ez az RwMedia beagyazas Frontent-je. Nagyreszt VUEjs alapu (es kis reszben jQuery, az ajax resze pl).

rwurl=https://imgur.com/vs8LQyI

A mukodesi elve (nem tul reszletesen belefolyva) ket fo lepesbol all:
1) Beinjektalja magat egy (elozoleg a programozo altal) tetszolegesen kivalasztott DOM elem-re es megnezi hogy van e legalabb 1 “rwid={id}” bejegyzes valahol benne. Ha van, akkor aktivizalja a frontend magat. Ha nincs, inaktiv marad. Az {id} formatum a backend altal generalt 44karakteres base64 ID, ami egy adott beagyazott tartalmat reprezentalja. De ez az ID lokalisan is szimulalhato, kezzel barmi beirhato a tesztben.
2) A masodik lepes hogy egyezteti ezeket a kiragadt ID-ket a lokalis kis adatbazisaban (entryObjects), es ha egyezik valamelyikkel, akkor elkezdi kirajzolni azokat az elemeket a rendeltetesuk szerint. Azaz ha youtube videorol van szo akkor kirajzolja az indito play gombot es a statikus hatterkepet, ha sima keprol van szo akkor meg az HTML IMG tagokat a forras URL kore, stb stb.

Ez az adatbazis a reaktiv resze a programnak, barmi valtozik bennuk vagy friss adat kerul oda, azzal automatikusan frissul es atrendezodik a kapcsolatos webelemek kirajzolasa is.

Egyik hasznos funkcioja, hogy a beagyazott elemek dimenziojat elore kimutatja es elfoglalja maganak, fuggetlenul hogy azok beolvasodtak vagy sem. Pl ez kepes beszurasoknal hatalmas elony, mivel a egyszeru HTML-el kepeknel ahogy olvasodnak be ugy nyomjak szet maguk korul az elemeket, igy allandoan idegesitoen elmozdul az olvasott anyag. Viszont az RwMedia beagyazasnal stabilan mindig ott marad a scroll ahova eredetileg is tettuk es szerettunk volna szoveget olvasgatni.

Letoltes:
https://www.rewired.hu/sites/default/files/development/rwmedia_frontend.zip

Telepiteshez lepesek, "ha Drupal nelkul csak kulon akarod tesztelni/fejleszteni" verzio:
1) A legfontosabb hogy szerverrol kell hogy fusson, mivel a legtobb modern bongeszo stresszel ha egy javascript file tovabbi lokalis fajlokhoz akar hozzaferni, mint kepek es hasonloak. En XAMPP-ot hasznalok, de barmi megteszi vegulis mivel a szerverrol futason kivul semi mas nem kell neki.
2) Be kell masolni a kicsomagolt “rwmedia_frontend” direktorium tartalmat egy tetszoleges helyre a lokalis szerveren.
3) Keszen vagy.

Teszt:
Bongeszoben elinditod a local_test.html fajlt (lokalis szerveredrol valahonnan). Peldaul: “localhost/rwmedia_frontend/test/local_test.html”

Telepiteshez lepesek, "ha Drupallal es az RW2.0 tobbi moduljaval integralni akarod" verzio:
1) Valamilyen PHP kodot es MySQL-t mukodteto rendszer, pl en XAMPP-ot hasznalok.

2) Sima Drupal 7.x telepites

3) Be kell masolni a kicsomagolt “rwmedia_frontend” direktorium tartalmat a “{DrupalTelepites}/sites/all/modules” direktorium ala.

4) Drupalban bekapcsolni a “RwMedia Frontend“ modult. (menusor: modules->rwmedia_frontend bekapcs)

5) Drupalban resetalni a cache-t, hogy aktivizalja magat a friss kod (menusor: configuration->performance->clear all cache gomb)

6) Keszen vagy.

RwMedia frontend fajlok funkcioja, nagyvonalakban?

Local_test.html
Ezt inditsd el ha lokalisan adagolt informaciokkal szeredned tesztelni az rwMedia frontendet. Azaz peldaul ha rwMedia backend (es pl Drupal telepites, es mindenfele PHP) nelkul akarod szimulalni az adatokat tetszolegesen, es tesztelni hogyan viselkedik kulonbozo esetekben a frontend.

Local_test.js
Itt a testInputHTML valtozo tartalma pl egy comment vagy topik tartalmat szimulalja. Atirhatod ahogy akarod, a lenyege hogy legyen benne legalabb 1 “rwid={id}” bejegyzes, hogy beaktivizalja magat a frontent motor. Ha nincs egy rwid={id} bejegyzes, akkor ugyan elindul a test, de nem aktivizalja magat az rwmedia frontend, mert nincs munkaja. Pelda az rwid bejegyzesre:
rwid=Xso58Z06OcWbcVzcLv6@Txkci5L4sTeQhdqKmTfPwmk-

Itt a masik valtozo a testEntryObjects. Ez szimualja a tesztben az rwmedia_backend adatbazisbol kinyert tartalmak adott helyzetet, a bejegyzesek reprezentaciojarol es aspektusairol, ID-re lebontottan kulon kulon. Ezek az EntryObjects-ek a reaktiv resze a programnak, barmi valtozik bennuk vagy friss adat kerul oda, azzal frissul a webelemek kirajzolasa is.

Mivel szimulalt informaciok ezek, nyugodtan lehet vadulni valotlan adatokkal es tesztelgetni kulonbozo helyzetekben a kulonbozo ertekeket.

Online_test.html (ertelemszeruen kapcsolatos az online_test.js ugye)
Ezt inditsd el ha pl rwMedia backend-el egyutt akarod tesztelni a frontendet. Elotte meg kell mutatnod neki hol keresse a backendet. Hogy ezt megtedd, menj az “rwmedia_frontend” konyvtaron belul a “/js/rwmedia_settings.js” fajlba es add meg a backend elerhetesi utvonalat.

Amugy az online es local test-nek majdhogy nem teljesen megegyezik a mukodesi elvuk, a kulonbseg hogy az online_test ajax-on keresztul csekkeli a backendet a folyamatban levo feltoltesek vagy munkaknal, es frissiti a kimutatasra szant reaktiv adatbazist.

Test.css
Csak a szimulalt weblap kirajzolast segito par css informacio.

Rwmedia_frontend.info
Alap informaciok a modulrol a Drupal szamara. Plusz itt rendeli hozza a Drupal-hoz a kapcsolatos CSS es JS fajlokat.

Rwmedia_frontend.module
Mivel egyelore az elore elkeszitett lapokat kapunk a Drupaltol oldalnezegeteseknel, a RWMedia Frontend modul minden lapnyitasnal:
- atfesuli azok tartalmat
- majd kinyeri beloluk az adatbazisbol az osszegyujtott beagyazott objektumok tartalmat
- majd egy specialis javascript valtozoban (Drupal.settings.entryObjects) elerhetove teszi a frontend szamara azokat, mielott a lap megjelenne, hogy sikeresen felepithesse a kello kapcsolatos media web-elemeket

Javascript fajlok:

Rwmedia_drupal_init.js
Ezzel injektalja az RWMedia Frontend modult bele a Drupal a forumlapokra dolgozni, minden lapnyitasnal.

Rwmedia_module.js
Ez a frontend modul objektum, es a lelke az rwmedia frontendnek. Itt talalhatoak alaplogikai a programnak, es itt indithatoak el a kulonbozo funcioi.

Maga a modul ugy mukodik mint egy class. Vannak attributjai, azutan privat es publikus funcioi is. Automatikusan legeneralja a mukodeshez szukseges attributomok alaperteket, viszont tetszolegesen meg is adhatjuk kulsoleg oket neki az initalizalo hivasnal, akkor viszont azokat fogja hasznalni. Pl:

let rwmm = RWMediaModule({
appElementName: '#page',
retryTtl: 0,
});

Ha initalizalas utan inditani akarjuk, akkor hivhatjuk a process() funciot es megadhatjuk benne az atnezendo HTML reszleget, es az elozoleg kinyert (vagy kezileg szimulalt) EntryObjects adatbazist:

rwmm.process(testInputHTML, testEntryObjects);

Ezutan a modul elkezd dolgozni es elkezdi hasznalni a “components” direktoriumba levo komponens elemeket, hogy megszerkessze az adott bejegyzeseket.

c_rwmedia.js
Alap rwmedia komponens. Ez kirajzolja a Status uzenetet, es az URL-t, majd iranyitana rajzolni a tobbi alkomponenst, ha kell.

A Status szovegre kattanva atiranyit minket egy uj tab-ra, es beolvassa nekunk az adott bejegyzesre a backend altal legeneralt adatokat. Kenyelmes szerszam arra hogy pl egyeztessuk a backend altal mutatott, es frontend altal latott adatokat.

c_rwmedia_image.js
Sima kep-beagyazasokat rajzol ki.

c_rwmedia_image_animated
Tipikusan a GIF cuccokat segiti kirajzolni

c_rwmedia_stream.js
Barmilyen IFRAME alapu es streameheto beagyazas kimutatasat segiti. Pl mint souncloud vagy youtube.

c_rwmedia_video.js
Direkt-linkes videok beagyazasanak kimutatasat segiti.