❤
npm
Sign UpSign In

nanooverlay

0.1.0 • Public • Published

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);

Readme

Keywords

Package Sidebar

Install

npm i nanooverlay

Weekly Downloads

3

Version

0.1.0

License

MIT

Unpacked Size

5.36 kB

Total Files

4

Last publish

Collaborators

  • moszeed
Try on RunKit
Report malware