jComponent - Ako na vlastný komponent #2

Séria Ako na vlastný komponent bude venovaná jComponentu. Ak neviete, čo je to jComponent, tak vám odporúčam článok od Petra Širku. V tejto časti si vytvoríme ďalší komponent - odpočet času. Naučíme sa využiť path a vytvoríme si callback.

Vytvoríme si komponent

Znovu pôjdeme cestou od jednoduchšieho k zložitejšiemu. Začneme tím, že si urobíme velice jednoduchý komponent, ktorý bude obsahovať iba setInterval s premennou. Toto by ste mali zvládnuť už z prvého dielu.

COMPONENT('countdown', function(self, config) {

    var count = 100;

    self.make = function() {
        setInterval(self.timer, 1000);
    };

    self.timer = function() {
        count--;
        self.element.text('countdown: ' + count);
    };
});

Teraz máme komponent. Môžme si niekde v HTML zadať

<div data---="countdown"></div>

Dynamické menenie odpočtu - path

Išlo by to aj cez config alebo cez funkcie ktoré vyvolá SETTER. Ale my dnes použijeme path. Čo je to path? Path je vlastne cesta ku globálnej premennej. Úžasná vec je, že ak premenná neexistuje, tak ju vytvorí. Komponent potom sleduje zmeny na path. Path deklarujeme ako druhý parameter oddelený __ od názvu komponenty.

<div data---="countdown__mynumber"></div>

(Pre hlbšie pochopenie zápisu sa pozrieme do dokumentácie)

Sledujeme zmeny - path

Náš komponent už počúva zmeny na našej path. Teraz len musíme upraviť komponent tak, aby reagoval na zmeny na path. Na to nám slúži delegácia self.setter(value, path, type).

• value - hodnota, ktorú naša premenná obsahuje
• path - náš starý známy path
• type - typ zmeny (0: init, 1: manually, 2: by input, 3: default )

Takže si upravíme náš komponent.

self.setter = function(value, path, type) {
    if (value)
        count = value;
};

Takto nám to bude fungovať. Ale rovno si upravíme celý komponent.

COMPONENT('countdown', function(self, config) {

    var count; // do tejto premennej uložíme hodnotu, ktorá nám príde
    var timer; // sem uložíme timer, aby sme ho mohli zrušiť

    self.timer = function() {
        count--;
        self.element.text('countdown: ' + count);
    };

    self.setter = function(value, path, type) {
        if (value) {
            count = value;
            timer && clearInterval(timer); // ak timer už je nastavený, zrušíme ho
            timer = setInterval(self.timer, 1000); // nastavíme nový timer
            self.timer(); // hneď spustíme funkciu, aby sme nečakali 1000ms na zobrazenie prvého `countdow: XYZ`
        }
    };

});

Spustíme a... nič. Ešte musíme zapnúť odpočet a to tak, že nastavíme cez SET našej premenne hodnotu čiže SET('mynumber', 100).

Aktualizujeme hodnotu - path

Komponent to vlastne hotový. Len dôvod, pre ktorí sme sa rozhodli ísť cestou path, nám nefunguje. Toto isté sme mohli dosiahnúť aj cez config a reconfigure. Dôvod prečo sme chceli použiť path je ten, že hocikedy môžeme urobiť console.log(mynumber) a to nám vráti aktuálne číslo odpočtu. A presne toto nefunguje. Aby nám toto mohlo fungovať, musíme použiť self.set(value, [type]) (path sa nepíše). A rovno využijeme aj parameter type. Bude to vyzerať následovne

COMPONENT('countdown', function(self, config) {

    var count;
    var timer;

    self.timer = function() {

        count--;
        self.set(count, 3); // nastavíme hodnotu z našej lokálnej count a type dáme číslo 3, aby sme ho vedeli rozoznať

        if (count)
            self.element.text('countdown: ' + count);
        else {
            clearInterval(timer);
            self.element.text('countdown: END');
        }
    };

    self.setter = function(value, path, type) {

        if (type === 3) // ak sa zmenila hodnota, a typ je 3 (naše použitie), tak zastavíme funkciu
            return;

        if (value) {
            count = value;
            timer && clearInterval(timer);
            timer = setInterval(self.timer, 1000);
            self.timer();
        }
    };

});

Komponent nám už náš path aktualizuje. Môžme si mimo komponentu logovať (alebo inak pracovať) s odpočtom. Napríklad skryť/zobraziť niečo cez data-bind. A to si môžme rovno ukázať. Pridáme si data-bind ktorý nám povie, či je číslo párne/sudé alebo nepárné/liché

<div data---="countdown__mynumber"></div>
<div data-bind="mynumber__!text span:value%2 ? 'Nepárne' : 'Párne'">Mynumber je <span></span></div>

Jednoduché, však?

Vyvoláme callback

Páčilo by sa mi, keby po skončení odpočtu sme dostali o tom informáciu. Áno. Teraz by to išlo krásne cez WATCH. No my to chceme zakomponovať priamo do komponenty. Na to nám slúži velice jednoduchá globálna funkcia EXEC. Úpravá nám zaberie iba okamih.

COMPONENT('countdown', function(self, config) {

    var count;
    var timer;

    self.timer = function() {

        count--;
        self.set(count, 3);

        if (count)
            self.element.text('countdown: ' + count);
        else {
            clearInterval(timer);
            self.element.text('countdown: END');
            config.end && EXEC(config.end); // vyvoláme funkciu ak je pri deklarovaní komponenty použitý config `end`
        }
    };

    self.setter = function(value, path, type) {

        if (!value || type === 3)
            return;

        count = value;
        timer && clearInterval(timer);
        timer = setInterval(self.timer, 1000);
        self.timer();
    };

});

Hotovo. Zostáva nám už iba zmeniť HTML

<div data---="countdown__mynumber__end:test"></div>

<script>
function test() {
    console.log('timer skončil');
}
</script>

To je všetko. Náš prvý druhý komponent je úspešne dokončený. Ani to nebolo tak zložité.

Na záver

V tomto dieli sme si vyskúšali urobiť trošku zložitejší komponent. Využili sme path, self.set a self.setter. Tento komponent by mohol obsahovať ešte kopu ďalší featur. Hneď mi napadá konfigurovateľný text, formátovanie na hodiny:minúty:sekundy, možnosť pozastaviť timer a spustiť ho atď atď... Sky is the limit. V ďalšiom dieli si urobíme komponent na accordion. Vyskúšame si zase iné vecičky z jComponentu a budeme sa hrať s HTML