Nanooverlay NPM

nanooverlay

a small and simple overlay (widget) HTML Custom Element, that works with DOM-diffing libarys like Choo and is build with Nanocomponent.

how to get

npm i nanooverlay

parameters

{
    content      : '<!-- content of the overlay -->',
    close        : () => { <-- function that is handling the closing of the overlay --> },
    contentCSS   : css`<-- modify the content element`,
    backgroundCSS: css`<-- modify the background css -->`
}

how to use

with choo

    var choo = require('choo');
    var html = require('nanohtml');
    var nanooverlay = require('nanooverlay');
    var Overlay = new nanooverlay();

    var app = choo()
    app.use((state, emitter) => {
        state.openOverlay = true;
    });
    app.route('/', mainView)
    app.mount('body')

    function mainView (state, emit) {

        let $overlay = '';
        if (state.openOverlay) {
            $overlay = Overlay.render({
                content: html`<div>overlay content</div>`,
                close  : function () {
                    state.openOverlay = false;
                    emit('render');
                }
            })
        }

        return html`<body>
            ${$overlay}
        </body>`;
    }

standalone

    const Overlay = require('./nanooverlay.js');
    const overlay = new Overlay();

    const overlayContent = document.createElement('div');
    overlayContent.innerHTML = 'overlay content';

    // append to DOM
    const $element = overlay.render({
        content: overlayContent,
        close  : function () {
            document.body.removeChild($element);
        }
    });

    document.body.appendChild($element);

overlay component nanocomponent choo standalone javascript

@infinitebrahmanuniverse/nolb-nan @everything-registry/sub-chunk-2245

0.1.0

6 years ago