TIP: Try navigating through list using left & right arrow keys
k

keukenhof

Lightweight and easy to use the library for modals

9
Github issues
28
Github stars
11 days ago
Github last update date
72
NPM current week downloads

Keukenhof.js

The lightweight library for modal windows

Table of Contents

Demo

Keukenhof.js visualized

Installation

Package Manager

Keukenhof.js page on npm

# With npm
npm i keukenhof

# With Yarn
yarn add keukenhof

CDN

<script src="https://unpkg.com/keukenhof"></script>

Usage

Part of the preparation of the library work is hidden, you just need to create a layout. There are no restrictions on the layout of your modal window, you just need to add data-keukenhof-open to the value of which you need to specify the selector of the window that should open on click and data-keukenhof-close for the element that should close the currently active modal

<!DOCTYPE html>
<title>Keukenhof.js modal example</title>

<style>
    #modal {
        display: none;
    }

    #modal.isOpen {
        display: block;
    }
</style>

<button data-keukenhof-open="#modal">Open modal</button>

<!-- Main modal wrapper with required id -->
<div id="modal" role="dialog" aria-hidden="true" aria-labelledby="title" aria-describedby="desc">
    <!-- Element for handling a click outside the modal window -->
    <div class="overlay" tabindex="-1" data-keukenhof-close></div>

    <header>
        <!-- Button to close the modal window -->
        <button class="close" aria-label="Close modal" data-keukenhof-close>Close</button>
    </header>

    <!-- Body used to improve a11y by describing the purpose of the modal -->
    <main>
        <h2 id="title">Keukenhof.js modal</h2>
        <p id="desc">Lightweight and easy to use the library for modals</p>
    </main>
</div>

<script src="https://unpkg.com/keukenhof"></script>

<script>
    Keukenhof.init();
</script>

Module bundlers

An alternative connection option is to use import Keukenhof.js

import {Keukenhof} from 'keukenhof';

// Initializing modal windows based on markup
Keukenhof.init({
    // options
});

// Configure and open modal by selector
Keukenhof.open('#modal', {
    // options
});

// Close active modal window
Keukenhof.close();

Docs

The documentation can also be found on the Keukenhof.js website

OptionsTypeDescription
openAttributeStringThe attribute containing the selector of the modal window that should be opened by clicking on the element
closeAttributeStringThe attribute marking elements inside the modal window, clicking on which will close this modal window
openClassStringThe class name added for the open modal window
openingClassStringThe class name added for the modal window that is in the process of opening (required for modals using CSS animations)
closingClassStringThe class name added for the modal window that is in the process of closing (required for modals using CSS animations)
hasAnimationBooleanIndicates the need to wait for the completion of the CSS animation of opening/closing the modal window
isAssignFocusBooleanIndicates the need to focus on an interactive element inside the modal after opening
isFocusInsideBooleanIndicates the need to restrict focusable interactive elements using the keyboard inside the active modal
scrollBehaviorObjectSpecify the need to block the scroll after opening a modal window. The scroll is blocked with overflow: hidden; if after closing the modal the overflow value should be defined just specify this as defaultValue
onOpenFunctionDefines a function that will be called when the modal is open (if hasAnimation: true; is called after the animation has finished)
onCloseFunctionDefines a function that will be called when the modal is close (if hasAnimation: true; is called after the animation has finished)
beforeOpenFunctionDefines a function to be called before the modal opens. If the function returns false the modal won't open
beforeCloseFunctionDefines a function to be called before the modal closes. If the function returns false the modal won't close

API

init()

Initializes all modals based on markup. Accepts one optional parameter for configuration

Keukenhof.init({
    selector: '#modal-1',
    openAttribute: 'data-modal-open',
    closeAttribute: 'data-modal-close',
    openClass: 'is-open',
    openingClass: 'is-opening',
    closingClass: 'is-closing',
    hasAnimation: true,
    isAssignFocus: false,
    isFocusInside: false,
    scrollBehavior: {
        isDisabled: true,
    },
    onOpen: () => console.log('The modal window is open'),
    onClose: () => console.log('The modal window is close'),
});

open()

Opens a modal window with the given selector. The open() method has a second optional parameter for configuration

// With config
Keukenhof.open('#modal', {
    openAttribute: 'data-modal-open',
    closeAttribute: 'data-modal-close',
    openClass: 'is-open',
    openingClass: 'is-opening',
    closingClass: 'is-closing',
    hasAnimation: true,
});

// Without config
Keukenhof.open('#modal');

close()

Closes the modal with the given selector. If no parameters are passed to the close() method, the currently open window will be closed

// With selector
Keukenhof.close('#modal');

// Without selector
Keukenhof.close();

Contribute

  1. Clone the repository [email protected]:Alexandrshy/keukenhof.git
  2. Go to the project directory cd keukenhof
  3. Install dependencies yarn
  4. Run dev build with auto rebuild after any changes yarn build:dev
  5. Complete your improvements, commit changes and submit your pull request for review code

Licensing

MIT license

Buy us a coffeeBuy us a coffee