https://github.com/Alexandrshy/keukenhof
Lightweight and easy to use the library for modals
https://github.com/Alexandrshy/keukenhof
a11y dialog javascript modal popup
Last synced: 6 months ago
JSON representation
Lightweight and easy to use the library for modals
- Host: GitHub
- URL: https://github.com/Alexandrshy/keukenhof
- Owner: Alexandrshy
- License: mit
- Created: 2020-06-05T16:50:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-21T01:24:24.000Z (about 2 years ago)
- Last Synced: 2025-05-05T14:55:41.960Z (6 months ago)
- Topics: a11y, dialog, javascript, modal, popup
- Language: TypeScript
- Homepage: https://keukenhof.vercel.app/
- Size: 5.76 MB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-javascript - keukenhof - Lightweight and easy to use the library for modals ` 📝 5 months ago ` (Modals and Popups [🔝](#readme))
- fucking-awesome-javascript - keukenhof - Lightweight, no dependencies, accessibility enabled TypeScript library for creating modal windows. (Modals and Popups / Other)
README
Keukenhof.js
The lightweight library for modal windows
## Table of Contents
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Docs](#docs)
- [API](#api)
- [Contribute](#contribute)
- [Licensing](#licensing)
## Demo
[](https://keukenhof.vercel.app/#example)
## Installation
### Package Manager
[Keukenhof.js](https://www.npmjs.com/package/keukenhof) page on npm
```bash
# With npm
npm i keukenhof
# With Yarn
yarn add keukenhof
```
### CDN
```html
```
## 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
```html
Keukenhof.js modal example
#modal {
display: none;
}
#modal.isOpen {
display: block;
}
Open modal
Close
Keukenhof.js modal
Lightweight and easy to use the library for modals
Keukenhof.init();
```
### Module bundlers
An alternative connection option is to use import `Keukenhof.js`
```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](https://keukenhof.vercel.app/#options)
| 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
```js
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
```js
// 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
```js
// With selector
Keukenhof.close('#modal');
// Without selector
Keukenhof.close();
```
## Contribute
1. Clone the repository `git@github.com: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](http://opensource.org/licenses/MIT)