Makeup-dialog-button NPM

makeup-dialog-button

A JavaScript class representing a popup button for any kind of dialog. No CSS provided.

HTML

The following markup structure and classnames are required. Any SVG icons can be used.

<button data-makeup-for="dialog-lightbox" class="dialog-button" type="button" aria-haspopup="dialog">Lightbox</button>

<div class="lightbox-dialog" hidden id="dialog-lightbox" role="dialog" aria-labelledby="dialog-1-title" aria-modal="true">
    <!-- dialog internals -->
</div>

CSS

No CSS is provided. However, the class is fully compatible with eBay Skin.

JavaScript

import DialogButton from 'makeup-dialog-button';
import LightboxDialog from 'makeup-lightbox-dialog';

document.querySelectorAll('.dialog-button').forEach(function(el, i) {
    const dialogEl = document.getElementById(el.dataset.makeupFor);
    const dialogWidget = new LightboxDialog(dialogEl);
    const widget = new DialogButton(el, dialogWidget, config);

    dialogWidget._el.addEventListener('dialog-open', log);
    dialogWidget._el.addEventListener('dialog-close', log);
});