24. diel - Bootstrap - Popovers

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

V nasledujúcom tutoriále CSS frameworku Bootstrapu sa budeme venovať takzvaným Popovers. Informačné bubliny Popovers sú podobné tooltipom, ktoré sa však nezobrazujú a nemiznú po prejdení myšou, ale reagujú na kliknutie.

Popovers v Bootstrape

Bootstrap adoptoval Popovers z platformy iOS. Komponenta je založená aj na JavaScripte, ako tomu bolo pri Dropdowns, ktoré sme si predstavili v lekcii Bootstrap - Dropdowns. Všetky potrebné závislosti sú už súčasťou javascriptového balíčka Bootstrapu (bundle). Na inicializáciu Popovers stačí použiť priamo funkcie Bootstrapu 5 v natívnom JavaScripte.

Inicializácia popoverov

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Tento prístup umožňuje definovať správanie HTML elementov priamo v HTML kóde a potom ich dynamicky inicializovať pomocou JavaScriptu. Kód, ktorý sme si ukázali, vyhľadá všetky elementy, ktoré majú dáta atribút data-bs-toggle="popover", a pre každý z nich vytvorí nový popover objekt Bootstrapu.

Ďalším spôsobom inicializácie je využiť wrapper. Teda obaliť element, z ktorého chceme popover vytvoriť, ďalším elementom a vytvoriť popover práve z tohto obaľujúceho elementu. Niekedy sa môže stať, že štýly popoveru kolidujú s našimi štýlmi a práve riešenie s wrapperom tento problém vyrieši, pretože popover sa vytvorí až z wrappera, ktorý je bez štýlov:

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Ďalšie vlastnosti popoverov

Popovers majú okrem iného nasledujúce dôležité vlastnosti:

• Ak 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 elemente.
• Pri použití spolu s komplexnejšími komponentmi, ako sú napríklad input groups z lekcie Bootstrap - Ďalšie možnosti formulárov, button group z lekcie Bootstrap - Tlačidlá a podobne, je vhodné uviesť container: body na vyhnutie sa problémom s renderovaním.
• Pre zobrazenie popoveru z elementu s atribútom disabled alebo triedou .disabled je potrebné tento element obaliť a popover zobraziť pomocou tohto wrappera.
• 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 odstrániť chceli elementy, z ktorých sme vytvorili popovery, musíme tieto popovery najprv skryť.

Použitie popoverov v praxi

Ukážme si štyri tlačidlá, ktoré po kliknutí zobrazia popovery v rôznych smeroch okolo nich:

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top text">
  Top popover
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right text">
  Right popover
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom text">
  Bottom popover
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left text">
  Left popover
</button>

<script>
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl)
    })
</script>

Všimnime si potrebu explicitnej inicializácie JavaScriptom. Výsledok:

V ukážke vyššie sa kvôli výške prehliadača zobrazí dolný popover tiež hore.

Skrytie pri kliknutí mimo popover

Určite sme si v ukážke vyššie vyskúšali, že sa popover zavrie iba 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 tohto tlačidla. Takýto popover vytvoríme pomocou dáta atribútu data-bs-trigger="focus":

<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Hide popover" data-bs-content="This content disappears when you click anywhere outside of it.">Popover test</a>

Inicializácia, ktorú v elemente <script> vložíme na koniec <body> potom vyzerá takto:

var popover = new bootstrap.Popover(document.querySelector('.popover-btn'), {
  trigger: 'focus'
})

JavaScript inicializuje popover na odkaze s triedou. btn, ktorý je v HTML kóde. Pokiaľ máme v stránke viac odkazov s touto triedou a chceme inicializovať popover iba na konkrétnom odkaze, môžeme pridať unikátne ID alebo špecifickú triedu k tomuto odkazu a použiť ju ako selektor v JavaScripte.

Výsledok v prehliadači:

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

JavaScript

Ako vždy si ešte ukážme, ako sa komponent ovláda priamo z JavaScriptu:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Vlastnosti popoverov

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

document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverTriggerEl => {
  new bootstrap.Popover(popoverTriggerEl, {
    animation: false,
    title: "Information"
  });
});

Pozrime sa na jednotlivé vlastnosti bližšie:

• animation - Či sa má aplikovať animácia (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-bs-content príslušného elementu. Pokiaľ 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 preto sa všetok obsah vloží ako obyčajný text (pomocou jQuery metódy text()).
• placement - Určuje pozíciu popoveru, môžeme zadať hodnoty "auto", "top", "bottom", "left" a "right", východisková je "right". Odovzdať môžeme aj funkciu, ktorej sa odovzdá ako prvý parameter DOM element s popoverom a ako druhý parameter element tlačidla. Kontext this je nastavený na inštanciu popoveru.
• selector - Pokiaľ uvedieme príslušný selektor do tejto vlastnosti, budú popovery fungovať aj na dynamicky vloženom obsahu. V opačnom prípade sa popovery zapínajú iba na elementoch prítomných pri prvom načítaní stránky. Predvolená hodnota je false.
• template - HTML šablóna, pomocou ktorej sa popover vytvorí. Titulok sa vloží do elementu s triedou .popover-header. Obsah sa vloží do .popover-body. Ako šípka sa použije element s triedou .popover-arrow. Element obaľujúci celý popover by mal mať priradenú triedu .popover. Predvolená hodnota je:

'<div class="popover" role="tooltip"><div class="popover-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-bs-title na príslušnom elemente. 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íklad "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 "top", "right", "bottom" a "left".

Metódy

Všetky metódy sú volané asynchrónne a odovzdávajú konania 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é.

Na jednotlivé metódy sa pozrieme bližšie:

• show() - Zobrazí popover elementu. Vracia riadenie pred tým, než sa dokončí animácia a element sa naozaj zobrazí/skryje.
• hide() - Skryje popover elementu. Vracia riadenie pred tým, než sa dokončí animácia a element sa naozaj zobrazí/skryje.
• toggle() - Zobrazí/skryje popover elementu. Vracia riadenie pred tým, než sa dokončí animácia a element sa naozaj zobrazí/skryje.
• dispose() - Skryje a zničí popover elementu. Popovery, ktoré majú špecifikovaný selector, nemusia byť možné vždy zničiť.
• enable() - Umožní popoveru daného elementu, aby mohol byť zobrazený. V predvolenom stave je zobrazenie popoverom 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.

Udalosti

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

• show.bs.popover - Zavolá sa ihneď po zavolaní show. Element typicky nie je ešte zobrazený, pretože sa prehráva animácia.
• shown.bs.popover - Zavolá sa vo chvíli zobrazenia 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ácia.
• hidden.bs.popover - Zavolá sa vo chvíli skrytia popoveru (po dokončení animácie).
• inserted.bs.popover - Zavolá sa po udalosti show.bs.popover, vo chvíli pridania šablóny do DOM stránky.

Reakcia na udalosti vyzerá napríklad takto:

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
    // some reaction...
});

V budúcej lekcii, Bootstrap - Scrollspy, si predstavíme komponent Scrollspy.