0x5a.live

for different kinds of informations and explorations.

GitHub - Alexandrshy/keukenhof: Lightweight and easy to use the library for modals

Lightweight and easy to use the library for modals - Alexandrshy/keukenhof

Visit Site

GitHub - Alexandrshy/keukenhof: Lightweight and easy to use the library for modals

Lightweight and easy to use the library for modals - Alexandrshy/keukenhof

Demo
Installation
Usage
Docs
API
Contribute
Licensing

Demo

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

Options	Type	Description
`openAttribute`	String	The attribute containing the selector of the modal window that should be opened by clicking on the element
`closeAttribute`	String	The attribute marking elements inside the modal window, clicking on which will close this modal window
`openClass`	String	The class name added for the open modal window
`openingClass`	String	The class name added for the modal window that is in the process of opening (required for modals using CSS animations)
`closingClass`	String	The class name added for the modal window that is in the process of closing (required for modals using CSS animations)
`hasAnimation`	Boolean	Indicates the need to wait for the completion of the CSS animation of opening/closing the modal window
`isAssignFocus`	Boolean	Indicates the need to focus on an interactive element inside the modal after opening
`isFocusInside`	Boolean	Indicates the need to restrict focusable interactive elements using the keyboard inside the active modal
`scrollBehavior`	Object	Specify 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`
`onOpen`	Function	Defines a function that will be called when the modal is open (if `hasAnimation: true;` is called after the animation has finished)
`onClose`	Function	Defines a function that will be called when the modal is close (if `hasAnimation: true;` is called after the animation has finished)
`beforeOpen`	Function	Defines a function to be called before the modal opens. If the function returns `false` the modal won't open
`beforeClose`	Function	Defines 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

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

Licensing

MIT license

JavaScript Resources

are all listed below.

GitHub - dalekjs/dalek: [unmaintained] DalekJS Base framework

0x5a.live

GitHub - Alexandrshy/keukenhof: Lightweight and easy to use the library for modals

GitHub - Alexandrshy/keukenhof: Lightweight and easy to use the library for modals

Table of Contents

Demo

Installation

Package Manager

CDN

Usage

Module bundlers

Docs

API

init()

open()

close()

Contribute

Licensing

JavaScript Resources

Resources

Made with ❤️