j-Input - Total.js part 2
j-Input je súčasťou client-side knižnice jComponent od Total.js. Viac informácií o tomto komponente môžete nájsť na webe componentator.com alebo v GitHub repozitári.
V predchádzajúcom blogu o j-Input komponente sme sa venovali základným typom tohto komponentu, ako sú string, email, number, telefónne číslo, heslo a checkbox. V tomto blogu sa budeme venovať komplexnejším typom, ktoré potrebujú ďalší komponent na svoju funkciu, napríklad j-Directory pre poskytnutie výberu možností, j-DatePicker pre dátumy a j-ColorPicker pre farby.
j-Input v kombinácií s j-Directory
Ak chceme poskytnúť užívateľovi možnosti, z ktorých si môže vybrať, tak použijeme práve komponent j-Directory spolu s j-Inputom.
Aby sme mohli použiť j-Directory, musíme si ho najprv deklarovať. Ako sme si už povedali v predchádzajúcich blogoch, je vhodné držať si deklaráciu singleton komponentov na jednom mieste (j-Directory je singleton komponent). Preto si ho deklarujeme hneď za HTML body tagom.
<body>
<ui-component name="directory" config="placeholder:Search..."></ui-component>
<ui-plugin path="common">
<ui-component name="input" path="?.test" config="dirsource:1|Apple,2|Banana,3|Peach,4|Strawberry" default="">Test</ui-component>
</ui-plugin>
</body>
V tomto príklade bude komponent j-Directory vyvolaný po kliknutí na náš input. j-Directory môže mať taktiež svoje nastavenia v atribúte config a v tomto príklade sme použili nastavenie placeholder s textom Search..., ktorý sa zobrazí vo vyhľadávacom poli. V nastaveniach pre input môžete vidieť dirsource, kde sme vložili možnosti, z ktorých chceme dať užívateľovi na výber. Jednotlivé možnosti sa skladajú z dvoch častí, z identifikátora (id) a hodnoty. Ako oddeľovač medzi id a hodnotou sa používa rovné lomítko (pipe) a oddeľovač medzi jednotlivými možnosťami je čiarka (id|hodnota,id|hodnota,...).
Ako možete vidieť, na obrázku, input vyverá veľmi podobne ako pri predchádzajúcich typoch až na ikonu v pravej časti.
V zobrazenom príklade môžeme vidieť, že po kliknutí na input sa nám objaví j-Directory, ktorý obsahuje všetky možnosti, ktoré sme zapísali do nastavení inputu v dirsource. Po zvolení jednej z možností sa nám jej id zapíše do cesty nastavenej v j-Inpute - v tomto prípade common.test.
j-Input umožňuje tiež vybrať si viacero možností. Na to potrebujeme rozšíriť nastavenie komponentu z predchádzajúceho príkladu o nastavenie multiple s hodnotou true.
<body>
<ui-component name="directory" config="placeholder:Search..."></ui-component>
<ui-plugin path="common">
<ui-component name="input" path="?.test" config="dirsource:1|Apple,2|Banana,3|Peach,4|Strawberry;multiple:true" default="">Test</ui-component>
</ui-plugin>
</body>
S touto malou zmenou sme doshiahli to, že sa nám pri možnostiach objavia zaškrtávacie polia a uživateľ si môže vybrať viac než jednu možnosť. Identifikátory všetkých zvolených možností sa nám uložia znovu na cestu common.test, ale v tomto prípade už nie ako jeden string ale pole stringov.
Možnosti, ktoré chceme poskytnúť užívateľovi vieme pridať aj iným spôsobom. V prípade, že by sme chceli napríklad možnosti dynamicky načítať, vieme tak urobiť s malou zmenou v atribúte config.
Namiesto priameho vloženia možností pre j-Directory možeme do nastavenia dirsource načítať dáta z premennej.
<body>
<ui-component name="directory" config="placeholder:Search..."></ui-component>
<ui-plugin path="common">
<ui-component name="input" path="?.test" config="dirsource:?|items;multiple:true" default="">Test</ui-component>
</ui-plugin>
</body>
Ako môžeme vidieť v príklade, ako hodnotu pre dirsource sme použili ?|items (tieto dáta sú uložené v plugine), PLUGIN by v tomto prípade mohol vyzerať takto:
PLUGIN('common', function(exports) {
exports.items = [];
exports.items.push({ id: '1', name: 'Apple' });
exports.items.push({ id: '2', name: 'Banana' });
exports.items.push({ id: '3', name: 'Peach' });
exports.items.push({ id: '4', name: 'Strawberry' });
});
Dáta, ktoré chceme načítať ako možnosti musia byť uložené ako pole objektov a každý objekt musí obsahovať premenné id a name (v prípade, že v konfigurácií komponentu j-Input nezmeníme nastavenia dirkey a dirvalue).
j-Input v kombinácií s j-Directory poskytuje aj ďalšie možnosti, ako sú napríklad úprava zobrazenia možností, zakázanie niektorých možností alebo pridanie prázdneho miesta.
j-Input v kombinácií s j-DatePicker
Ak chceme dať užívateľovi možnosť vybrať si dátum, môžeme tak urobiť tým, že v atribúte config nastavíme premennej typ hodnotu date a deklarujeme j-DatePicker v našom kóde.
<body>
<ui-component name="datepicker"></ui-component>
<ui-plugin path="common">
<ui-component name="input" path="?.test" config="type:date" default="">Test</ui-component>
</ui-plugin>
</body>
S takýmto nastavením sa po kliknutí na input zobrazí kalendár, v ktorom si užívateľ môže zvoliť dátum a jeho hodnota sa zapíše na cestu zadanú v komponente j-Input.
Ako môžeme vidieť v príklade, tak po zvolení dátumu v kalendári sa dátum uloží do nastavenej cesty v tvare ako date string.
j-Input v kombinácií s j-ColorPicker
Komponent j-Input môžeme použiť taktiež na volenie farieb. To môžeme dosiahnuť kombináciou s komponentom j-ColorPicker a nastavením premennej typ v konfigurácií na color.
<body>
<ui-component name="colorpicker"></ui-component>
<ui-plugin path="common">
<ui-component name="input" path="?.test" config="type:color" default="">Test</ui-component>
</ui-plugin>
</body>
S takýmto nastavením sa nám po kliknutí na input zobrazí colorpicker a užívateľ si môže vybrať farbu zo zobrazených možností.
Ako môžete vidieť v príklade, zvolená farba sa zobrazí v danom inpute a do cesty sa nám uloží HEX kód zvolenej farby.
Pridanie ikony s funkcionalitou do j-Input komponentu
Komponent j-Input poskytuje možnosť pridania vlastnej ikony spolu s nejakou funkcionalitou. My si to teraz ukážeme a pridáme si na pravú stranu inputu ikonu a po kliknutí na ňu si vypíšeme text do konzoly.
V konfigurácií inputu použijeme nastavenie ricon a riconclick, kde nastavíme akú ikonu chceme zobraziť a funkciu, ktorá sa má vyvolať po kliknutí na ikonu. (V prípade, že chceme ikonu na ľavej strane inputu, tak použijeme nastavenia licon a liconclick).
HTML kód
<body>
<ui-plugin path="common">
<ui-component name="input" path="?.test" config="ricon:ti ti-totaljs;riconclick:?/click" default="">Test</ui-component>
</ui-plugin>
</body>
JavaScript kód
PLUGIN('common', function(exports) {
exports.click = function(element, event) {
console.log('Click');
};
});
Ako môžete vidieť, ikonu sme nastavili ako ti-totaljs (čo je logo Total.js z Total ikon) a po kliknutí na ikonu vyvoláme funkciu z JavaScript PLUGINu.
Po kliknutí na ikonu sa vyvolá fuknkcia click a text Click sa nám zobrazí v konzole.
K dispozícií je aj video tutorial ku komponentu j-Input v anglickom jazyku: