NormJS root Class je apstraktna klasa sa određenim metodama koje će morati naslijediti svaka komponenta koja ispunjava normJS standard.
Ova klasa se zapravo ne zove root Class, nego upravo normJS, kao što se zove cijeli standard.
Komponenta koja extenda normJS klasu, mora imati sljedeće metode, propertije:
component.normJS = true
component.setDevice(int|string deviceType)
Pojašnjenje:
.normJS = true
je properti koji odaje da se radi o normJS komponenti
.setDevice()
je metoda koja definira komponenti na kojem uređaju se prikazuje.
Ulazni parametri:
0 | “destkop” | “D” → prikaz na destkop računalu
1 | “tablet” | “T” - prikaz na tabletu
2 | “mobile” | “M”- mobilni prikaz
Nakon što pozovemo:
komponenta.setDevice(2)
ili komponenta.setDevice("mobile")
, zadali smo komponenti da se prikazuje njena mobilna verzija.
Što znači da mi ne moramo ništa znati o komponentama koje koristimo unutar normJS standarda da bi ih mogli jednostavno po ovom standardu koristiti u mobilnom ili destkop načinu rada. Sada možemo tvorcu komponente prepustiti da on na najbolji način svoju komponentu prilagodi za mobilni ili destkop prikaz, a na našoj kontroli je da uvijek isporučujemo mobilnu ili destkop verziju stranice, ili pojedine komponente.
Ukoliko nije trigirano komponenta.setDevice() , ista mora po defaultu koristiti ono stanje koje je definirano komponentom: normJS - device → device.getType()
(Kasnije ću polinkati kada opišem tu device komponentu)
Ukoliko ne postoji komponenta normJS - device i nije trigirano komponenta.setDevice(), komponenta se mora sama prilagoditi prema veličini ekrana:
Za sljedeće širine ekrana vrijedi:
širina < 500px → mobile
širina >= 500px && širina <800px → tablet
širina >= 800px → destkop
HINT:
Da bi komponenta mogla ispunti logiku .setDevice(), css pravila koja opisuju njen izgled nije poželjno definirati na sljedeći način:
@media only screen and (max-width: 600px) ...
Pravilan način bi bio definirati css klase koji opisuju mobile, tablet ili destkop view, te ih pravilno aktivirati prilikom poziva .setDevice() metode.
Oke, u ovom momentu nisam siguran kako ću to najljepše dokumentirati, ali tu će mi valjda netko dati dobre sugestije.
Možda neki alat za kreiranje dokumentacije, i neki standard po kojem bi se ovakve stvari opisivale? Ono, da bude pregledno. Budem ja već našao šprance…no ne sumnjam da će @tpojka mati neki dobar izvor.
Ovo sam sada malo nabacao…čisto da vidite u kojem smjeru ide. A ne mora iz prve ispasti lijepo dokumentirano, bit neće uteći nikuda.
Također, ako postoji već neki normativ za širine koje definiraju mobile, tablet, destkop…može te i to sugestirati.
Isto tako, ako primjetite da sam neku metodu nespretno nazvao … budite slobodni dati svoje prijedloge i za ime metoda i parametara i za ime komponenti Neka to ne ovisi od mene, nego od svih nas koji ćemo sudjelovati u kreiranju ovog standarda.
Također, putem će se sigurno ukazati još potrebnih metoda za normJS (root) klasu…ali putem će se to sve fino iskristalizirati. Cilj će sam pronaći svoj put.
Vjerujem da će vam to sada izgledati malo komplicirano za developera komponenti koji bi morao ispoštovati sva pravila. Ali normJS prilikom kontrole standarda će moći precizno sugestirati developeru koje je pravilo zaboravio poštivati na svojoj komponenti. Tako da će kontrola standarda biti veliki helper onima koji će praviti komponente…da naprave sve tip top po standardu.