Vanilla Box

Simple popup-manager for frontend projects written in pure Vanilla JavaScript.

TL;DR

• simple
• HTML5-based
• configurable
• customizable

Installation

With npm:

npm install @marek.lints/vanilla-box

Usage

The following imports are needed in order to use the package:

Main entry point: (like app.js):

// Package-related imports
import '@marek.lints/vanilla-box/popup.css';
import '@marek.lints/vanilla-box/config.css';
import { configmanager } from '@marek.lints/vanilla-box';

// Your own styles related to vanilla-box
import '../css/app.css';

Example 1

Opening popup window with a predefined configuration:

app.js:

document.querySelector('#popupContainer1').innerHTML = /*html*/`
    <popup-window config-name="blank_400_400">
    <template>
        <div>
            <h1>This is a headline</h1>
            <p>
                This is popup content
            </p>
        </div>
    </template>
    </popup-window>
    <button>Open (from center)</button>
`;

document
    .querySelector('#popupContainer1 button')
    .addEventListener(
        'click', 
        () => document
            .querySelector('#popupContainer1 popup-window').open()
    );

index.html:

<div id="popupContainer1"></div>

Example 2

Opening popup window with a custom configuration:

app.js:

// Registering a custom configuration
configmanager.addConfig('blank_90pct_50pct', {
    top: 0,
    appearFrom: 'right',
    isFixed: false,
    width: '300px',
    height: '80%',
    background: 'lightskyblue',
    displayCloseButton: true,
    coverBackground: 'white',
    coverOpacity: '90%',
    coverCloseOnClick: true
});
document.querySelector('#popupContainer2').innerHTML = /*html*/`
    <popup-window config-name="blank_90pct_50pct">
    <template>
        <div>
            <h1>This is a headline</h1>
            <p>
                This is a box content
            </p>
        </div>
    </template>
    </popup-window>
    <button>Open (from right)</button>
`;
document
    .querySelector('#popupContainer2 button')
    .addEventListener(
        'click', 
        () => document.
            querySelector('#popupContainer2 popup-window').open());

index.html:

<div id="popupContainer2"></div>

Example 3

Opening popup window with a custom configuration:

index.html:

<popup-window config-name="default">
    <template>
        <div>
            <h1>This is a headline</h1>
            <p>
                This is a box content
            </p>
        </div>
    </template>
</popup-window>
<button 
    onclick="document.querySelector('popup-window[config-name=default]').open()">
    Open (default)
</button>

Example 4

Opening popup window with a custom configuration and custom style:

app.js:

// Registering a custom configuration
configmanager.addConfig('blank_300px_100pct', {
    top: 0,
    appearFrom: 'left',
    isFixed: true,
    cssClass: 'popup-blank-300px-100pct',
    displayCloseButton: true,
    coverBackground: 'white',
    coverOpacity: '90%',
    coverCloseOnClick: true
});
document.querySelector('#popupContainer4').innerHTML = /*html*/`
    <popup-window config-name="blank_300px_100pct">
    <template>
        <div>
            <h1>This is a headline</h1>
            <p>
                This is a box content
            </p>
        </div>
    </template>
    </popup-window>
    <button>Open (from left)</button>
`;
document
    .querySelector('#popupContainer4 button')
    .addEventListener(
        'click', 
        () => document.querySelector('#popupContainer4 popup-window').open());

index.html:

<div id="popupContainer4"></div>

app.css:

.popup-blank-300px-100pct {
    width: 300px;
    height: 100%;
    background: darkorchid;
}

Configuration options

Predefined configurations:

• default
• blank_300_300
• blank_400_400

Options

The following properties has to be specified when creating a custom configuration.

Required properties:

appearFrom: 'top' | 'bottom' | 'right' | 'left' | 'center'

isFixed: true | false

displayCloseButton: true | false

coverBackground: 'white' [any color or color code]

coverOpacity: '90%' [any percentage]

coverCloseOnClick: true | false

Optional properties (either these):

top: 0 [in pixels]

bottom: 0 [in pixels]

width: '300px' [any value, any unit] [optional]

height: '80%' [any value, any unit] [optional]

background: 'white' [any color or color code] [optional]

... or the one below:

cssClass: 'your-custom-style' [optional]