Keukenhof.js modal
Lightweight and easy to use the library for modals
```
### 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)
