Version 0.40.0

UI Organisms

Popups


CSS component

Default popup

Are you sure?
This will action can't be undone!
<div class="sui-o-popup as--open">
    <div class="sui-o-popup__title">
        Are you sure?
    </div>
    <div class="sui-o-popup__content">
        This will action can't be undone!
    </div>
    <div class="sui-o-popup__buttons">
        <button class="sui-a-button">Cancel</button>
        <button class="sui-a-button as--primary">Confirm</button>
    </div>
</div>

JS component

Example

Are you sure?
This will action can't be undone!

How to use

Add the data-sui-o-popup="myPopup" attribute on your button (where myPopup is the ID of the popup),

<button class="sui-a-button" data-sui-o-popup="myPopup">
    ...
</button>

Then add the Popup HTML,

<div class="sui-o-popup" id="myPopup">
    ...
</div>

And enable the JS plugin.

import { Popup } from 'saagie-ui';

const myElement = document.getElementbyId('myPopup');

new Popup(myElement, { /* options */ }).init();

Options

Default options:

{
    target: targetElement, // Default: [data-sui-o-popup="/* Current Popup Id */"]
    openClass: 'as--open',
    dataAttrBase: 'data-sui-o-popup',
    dataAttrSuffixToggle: '',
    dataAttrSuffixOpen: '-open',
    dataAttrSuffixClose: '-close',
    dataAttrSuffixConfirm: '-confirm',
    dataAttrClicksEnabled: true,
    htmlToBodyEnabled: true,
    focusRecoverEnabled: true,
    keysEnabled: true,
    confirmOnEnterKey: false,
    closeOnEscapeKey: true,
    clickOutsideEnabled: true,
    placement: 'top',
    onInit: function () {},
    onOpen: function () {},
    onConfirm: function () {},
    onClose: function () {},
    onEnterKey: function () {},
    onEscapeKey: function () {},
    onDestroy: function () {},
}

Methods

init()

Init the popup.

const popup = new Popup(myElement, { /* options */ }).init();

toggle()

Open/Close the popup.

popup.toggle();

open()

Open the popup.

popup.open();

close()

Close the popup.

popup.close();

bindClickOutside() / unbindClickOutside()

Add / Remove event listener click outside the component.

popup.bindClickOutside();
popup.unbindClickOutside();

bindDataClicks() / unbindDataClicks()

Add / Remove event listeners for data attributes clicks.

popup.bindDataClicks();
popup.unbindDataClicks();

bindEvents() / unbindEvents()

Add / Remove event listeners for 'toggle', 'open', 'close', 'confirm', 'destroy' events.

popup.bindEvents();
popup.unbindEvents();

bindKeys() / unbindKeys()

Add / Remove event listeners for keys inputs.

popup.bindKeys();
popup.unbindKeys();

destroy()

Destroy all eventListeners.

popup.destroy();