24. diel - Bootstrap - Popovers

V minulej lekcii, Bootstrap - Modálne dialógy , sme sa naučili používať modálne dialógy. Dnes sa budeme v Bootstrap venovať tzv. Popovers.

Popovers

Informačný bubliny Popovers sú podobné tooltipům, ktoré sa však nezobrazujú a nemizne po prejdení myšou, ale reagujú na kliknutie. Bootstrap je adoptoval z platformy iOS. Komponent je založená aj na knižnici Popper.js, ako tomu bolo u Dropdowns. Ak by ste náhodou zostavovali Bootstrap JavaScript sami, budete pre Popovers potrebovať aj plugin pre tooltip, inak stačí načítať javascriptový Bootstrap balík (bundle) alebo načítať ešte zvlášť pred Bootstrap "popper.min.js".

Inicializácia

Z dôvodu optimalizácie nie sú popovers inicializované na základe dátumu atribútov ako doterajšie komponenty, ale musíme ich inicializovať ručne a to napr. Cez dáta atribúty JavaScriptom:

$(function () {
    $('[data-toggle="popover"]').popover();
});

Ďalším spôsobom inicializácia je využiť wrapper, teda obaliť element, z ktorého chceme popover vytvoriť, ďalším elementom a popover vytvoriť až z neho. Niekedy sa môže stať, že štýly popoveru kolidujú s našimi štýly a práve riešenie s Wrapper tento problém vyrieši, pretože popover sa vytvorí až z Wrapper, ktorý je bez štýlov.

$(function () {
    $('.muj-popover').popover({
        container: 'body'
    });
});

Ďalšie vlastnosti

Bootstrap by bol rád, aby sme o Popovers ešte vedeli:

• Pokiaľ bude titulok alebo obsah prázdny string, popover sa nezobrazí. K zobrazeniu nedôjde ani v prípade, keď sa pokúsime zobraziť popover na skrytom elementu.
• Pri použití spolu s komplexnejšími komponentmi ako sú napr. Input groups, button group a podobne uvádzajte container: body pre vyhnutie sa problémom s renderovaním.
• Pre zobrazenie popoveru z elementu s atribútom disabled alebo triedou .disabled treba tento element obaliť a popover zobraziť pomocou tohto wrapper.
• V prípade použitia popovers na odkazy, ktoré siahajú cez viac riadkov, bude popover vycentrovaný vzhľadom k celkovej šírke týchto odkazov. Na zmenu tohto správania pridáme elementu <a> štýl white-space: nowrap;.
• Ak by sme chceli elementy, z ktorých sme vytvorili popovery, odstrániť, musíme tieto popovery najprv skryť.

Ukážka

Ukážme si 4 tlačidlá, ktoré po kliknutí zobrazí popovery v rôznych smeroch okolo nich.

<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Text popoveru umístěném nahoře.">
    Nahoře
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Text popoveru umístěném vpravo.">
    Vpravo
</button>

<button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text popoveru umístěném dole.">
    Dole
</button>

<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="left" data-content="Text popoveru umístěném vlevo.">
    Vlevo
</button>

<script>
    $(function () {
        $('[data-toggle="popover"]').popover();
    });
</script>

Všimnite si nutnosti explicitné inicializácia JavaScriptom. výsledok:

V ukážke vyššie sa kvôli výške prehliadača zobrazí dolnej popover takisto hore a ľavý vpravo.

Skrytie pri kliknutí mimo popover

Určite ste si v ukážke vyššie vyskúšali, že sa popover zavrie len opätovným kliknutím na tlačidlo. Toto správanie môžeme upraviť tak, aby sa popover zavrel pri kliknutí na čokoľvek mimo toto tlačidlo. Takýto popover vytvoríme pomocou dáta atribútu data-trigger="focus".

<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-toggle="popover" data-trigger="focus" title="Skrytí popoveru" data-content="Tento obsah zmizí po kliknutí kamkoli mimo něj.">Test popoveru</a>

Výsledok v prehliadači:

Rovnakého správanie sme mohli docieliť aj nastavením vlastnosti trigger: focus v JavaScripte. K tlačidlám tohto typu by sme mali využívať len elementov <a> s rolou "button" a tabindex="0". Správanie na elementu <button> nemusí byť v niektorých prehliadačoch podporované.

Javascript

To by bolo k popoverům všetko, jedná sa iba o jednoduchú komponentu Ako vždy si ešte ukážme, ako sa komponent ovláda priamo z JavaScriptu.

Vlastnosti

Všetky ďalej uvedené vlastnosti môžeme nastaviť pomocou dáta atribútov. K získaniu názvu atribútu stačí k vlastnosti pridať prefix data-. Ak by sme chceli vlastnosti inicializovať v JavaScripte, môžeme to urobiť odovzdaním objektu s týmito vlastnosťami metóde popover():

$(function () {
    $('[data-toggle="popover"]').popover({ animation: false, title: "Informace" });
});

• animation - Či sa má aplikovať animácie (predvolené true).
• container - Pripojí popover k danému elementu. Pomocou container: body spôsobíme prichytenie popoveru na element <body> a tak zostane na správnom mieste aj pri zmene veľkosti okna. Predvolená hodnota je false.
• content - Obsah popoveru, ktorý sa použije ako predvolený, keď nie je uvedený v dáta atribútu data-content príslušného elementu. Ak odovzdáme funkciu, bude zavolaná v kontexte elementu, ku ktorému je popover pripojený. Predvolená hodnota je "" (prázdny string).
• delay - Oneskorenie v milisekundách pred zobrazením / skrytím popoveru. Môžeme odovzdať buď jedno číslo alebo špecifikovať obe hodnoty odovzdaním objektu s nasledujúcou štruktúrou: delay: { "show": 250, "hide": 50 }. Predvolená hodnota je 0.
• html - Či je v obsahu (content) podporovaný HTML obsah. Predvolená hodnota je false a teda sa všetok obsah vloží ako púhy text (pomocou jQuery metódy text()).
• placement - Určuje pozíciu popoveru, môžeme zadať hodnoty "auto", "top", "bottom", "left" a "right", predvolený je "right". Odovzdať môžeme i funkciu, ktoré sa odovzdá ako prvý parameter DOM element s popoverem a ako druhý parameter element tlačidla. Kontext this je nastavený na inštanciu popoveru.
• selector - Ak uvedieme príslušný selektor do tejto vlastnosti, budú popovery fungovať aj na dynamicky vloženom obsahu. V opačnom prípade sa popovery zaktivní iba na elementoch prítomných pri prvom načítaní stránky. Predvolená hodnota je false.
• template - HTML šablóna, pomocou ktorej sa popover vytvoria. Titulok sa vloží do elementu s triedou .popover-header. Obsah sa vloží do .popover-body. Ako šípka sa použije element sa triedou .arrow. Element obaľuje celý popover by mal mať priradenú triedu .popover. Predvolená hodnota:

'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

• title - Predvolené titulok, pokiaľ nie je zadaný dáta atribútom data-title na príslušnom elementu. Môžeme odovzdať aj funkciu, ktorá je následne spustená v kontexte, kde this odkazuje na element, na ktorý je popover pripojený. Predvolená hodnota je "" (prázdny string).
• trigger - Určuje spôsob, akým sa popover zobrazí / skryje. Môžeme zadať hodnoty "click", "hover", "focus", "manual". Môžeme zadať aj viac hodnôt oddelených medzerou okrem hodnoty "manual", ktorú nemožno kombinovať. Predvolená hodnota je "click".
• offset - Umožní popover posunúť relatívne k tlačidlu. Posúvame buď o rovnakú vzdialenosť v oboch smeroch zadaním jednej hodnoty alebo zadaním dvoch hodnôt oddelených čiarkou. Viac hodnôt zadávame ako textový reťazec (napr. "10%, 10px"). Môžeme zadať aj matematické výpočty. Predvolená hodnota je 0.
• fallbackPlacement - Určuje ktorú pozíciu popover zaujme v prípade, že sa nezmestí na tú určenú. Môžeme uviesť hodnoty "flip", "clockwise" a "counterclockwise" alebo pole hodnôt. Predvolená hodnota je "flip".

Všetky metódy sú volané asynchrónne a odovzdávajú riadenie ešte predtým, než dôjde k dokončeniu animácie (transition). Ak zavoláme metódu na popoveru, ktorý práve prehráva transition, bude toto volanie metódy ignorované.

Metóde popover() môžeme odovzdať jeden z nasledujúcich parametrov:

• nastaveni - Môžeme odovzdať objekt s vlastnosťami a tak vykonať nastavenia, ako sme si už ukázali vyššie.
• "show" - Zobrazí popover elementu. Vracia konanie pred tým, než sa dokončí animácie a element sa naozaj zobrazí / skryje.
• "hide" - Skryje popover elementu. Vracia konanie pred tým, než sa dokončí animácie a element sa naozaj zobrazí / skryje.
• "toggle" - Zobrazí / skryje popover elementu. Vracia konanie pred tým, než sa dokončí animácie a element sa naozaj zobrazí / skryje.
• "dispose" - Skryje a zničí popover elementu. Popovery, ktoré majú špecifikovaný selector, nemusí byť možné vždy zničiť.
• "enable" - Umožní popoveru daného elementu, aby mohol byť zobrazený. V predvolenom stave je zobrazenie popoverům umožnené.
• "disable" - Znemožní popoveru daného elementu, aby mohol byť zobrazený.
• "toggleEnabled" - Umožní / znemožní popoveru daného elementu, aby mohol byť zobrazený.
• "update" - Aktualizuje pozíciu popoveru.

Za určitých okolností môžeme potrebovať reagovať na jednotlivé udalosti popoverů. Tých je celkom 5:

• show.bs.popover - Zavolá sa ihneď po zavolaní show. Element typicky nie je ešte zobrazený, pretože sa prehráva animácie.
• shown.bs.popover - Zavolá sa vo chvíli zobrazenie popoveru (po dokončení animácie).
• hide.bs.popover - Zavolá sa ihneď po zavolaní hide. Element typicky nie je ešte skrytý, pretože sa prehráva animácie.
• hidden.bs.popover - Zavolá sa vo chvíli skrytie popoveru (po dokončení animácie).
• inserted.bs.popover - Zavolá sa po udalosti show.bs.popover, vo chvíli pridanie šablóny do DOM stránky.

Reakcia na udalosti by mohla vyzerať napr. Nasledovne:

$('#informace-popover').on('hidden.bs.popover', function () {
    // nějaká reakce...
});

V budúcej lekcii, Bootstrap - Scrollspy , si povieme o komponente Scrollspy.