Keukenhof

Install package

NPMnpm i keukenhof
CDNhttps://unpkg.com/keukenhof

Example

Example of using Keukenhof.js for an animated modal window

                                
import {Keukenhof} from 'keukenhof';
                            
Keukenhof.init({
    hasAnimation: true,
});

Installation

Package Manager

                                    
# 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

aria-* attributes are important for the accessibility of your content and are added by you when creating the layout (only you can correctly describe the purpose of your modal), Keukenhof.js is responsible for switching aria-hidden

                            
<!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

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

Options

openAttributestring

The attribute containing the selector of the modal window that should be opened by clicking on the element

By default: data-keukenhof-open

                                    
Keukenhof.init({
    openAttribute: 'data-modal-open',
});

closeAttributestring

The attribute marking elements inside the modal window, clicking on which will close this modal window

By default: data-keukenhof-close

                                    
Keukenhof.init({
    closeAttribute: 'data-modal-close',
});

openClassstring

The class name added for the open modal window

By default: isOpen

                                    
Keukenhof.init({
    openClass: 'is-open',
});

openingClassstring

The class name added for the modal window that is in the process of opening (required for modals using CSS animations)

By default: isOpening

                                    
Keukenhof.init({
    openingClass: 'is-opening',
});

closingClassstring

The class name added for the modal window that is in the process of closing (required for modals using CSS animations)

By default: isClosing

                                    
Keukenhof.init({
    closingClass: 'is-closing',
});

hasAnimationboolean

Indicates the need to wait for the completion of the CSS animation of opening/closing the modal window

By default: false

                                    
Keukenhof.init({
    hasAnimation: true,
});

isAssignFocusboolean

Indicates the need to focus on an interactive element inside the modal after opening

By default: true

                                    
Keukenhof.init({
    isAssignFocus: false,
});

isFocusInsideboolean

Indicates the need to restrict focusable interactive elements using the keyboard inside the active modal

By default: true

                                    
Keukenhof.init({
    isFocusInside: false,
});

scrollBehaviorobject

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

By default: { isDisabled: true, container: 'body', defaultValue: '' }
```
                                    
Keukenhof.init({
    scrollBehavior: {
        isDisabled: true,
        container: '.wrapper',
        defaultValue: '',
    },
});
                                
```

onOpenfunction

Defines a function that will be called when the modal is open (if hasAnimation: true is called after the animation has finished)

By default: () => {}

                                    
Keukenhof.init({
    onOpen: (event) => console.log('The modal window was opened', event),
});

onClosefunction

Defines a function that will be called when the modal is close (if hasAnimation: true is called after the animation has finished)

By default: () => {}

                                    
Keukenhof.init({
    onClose: (event) => console.log('The modal window was closed', event),
});

beforeOpenfunction

Defines a function to be called before the modal opens. If the function returns false the modal won't open

By default: () => true

                                    
Keukenhof.init({
    beforeOpen: (event) => {
        if (counter > 10) return true;
    },
});

beforeClosefunction

Defines a function to be called before the modal closes. If the function returns false the modal won't close