\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Docs](#docs)\n- [API](#api)\n- [Contribute](#contribute)\n- [Licensing](#licensing)\n\n## Demo\n\n[](https://keukenhof.vercel.app/#example)\n\n## Installation\n\n### Package Manager\n\n[Keukenhof.js](https://www.npmjs.com/package/keukenhof) page on npm\n\n```bash\n# With npm\nnpm i keukenhof\n\n# With Yarn\nyarn add keukenhof\n```\n\n### CDN\n\n```html\n\n```\n\n## Usage\n\nPart 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\n\n```html\n\nKeukenhof.js modal example\n\n\n\n\n\n\n
\n \n \n\n \n \n \n \n\n \n \n
Keukenhof.js modal
\n
Lightweight and easy to use the library for modals
\n \n
\n\n\n\n\n```\n\n### Module bundlers\n\nAn alternative connection option is to use import `Keukenhof.js`\n\n```js\nimport {Keukenhof} from 'keukenhof';\n\n// Initializing modal windows based on markup\nKeukenhof.init({\n // options\n});\n\n// Configure and open modal by selector\nKeukenhof.open('#modal', {\n // options\n});\n\n// Close active modal window\nKeukenhof.close();\n```\n\n## Docs\n\nThe documentation can also be found on the [Keukenhof.js website](https://keukenhof.vercel.app/#options)\n\n| Options | Type | Description |\n| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `openAttribute` | String | The attribute containing the selector of the modal window that should be opened by clicking on the element |\n| `closeAttribute` | String | The attribute marking elements inside the modal window, clicking on which will close this modal window |\n| `openClass` | String | The class name added for the open modal window |\n| `openingClass` | String | The class name added for the modal window that is in the process of opening (required for modals using CSS animations) |\n| `closingClass` | String | The class name added for the modal window that is in the process of closing (required for modals using CSS animations) |\n| `hasAnimation` | Boolean | Indicates the need to wait for the completion of the CSS animation of opening/closing the modal window |\n| `isAssignFocus` | Boolean | Indicates the need to focus on an interactive element inside the modal after opening |\n| `isFocusInside` | Boolean | Indicates the need to restrict focusable interactive elements using the keyboard inside the active modal |\n| `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` |\n| `onOpen` | Function | Defines a function that will be called when the modal is open (if `hasAnimation: true;` is called after the animation has finished) |\n| `onClose` | Function | Defines a function that will be called when the modal is close (if `hasAnimation: true;` is called after the animation has finished) |\n| `beforeOpen` | Function | Defines a function to be called before the modal opens. If the function returns `false` the modal won't open |\n| `beforeClose` | Function | Defines a function to be called before the modal closes. If the function returns `false` the modal won't close |\n\n## API\n\n### init()\n\nInitializes all modals based on markup. Accepts one optional parameter for configuration\n\n```js\nKeukenhof.init({\n selector: '#modal-1',\n openAttribute: 'data-modal-open',\n closeAttribute: 'data-modal-close',\n openClass: 'is-open',\n openingClass: 'is-opening',\n closingClass: 'is-closing',\n hasAnimation: true,\n isAssignFocus: false,\n isFocusInside: false,\n scrollBehavior: {\n isDisabled: true,\n },\n onOpen: () => console.log('The modal window is open'),\n onClose: () => console.log('The modal window is close'),\n});\n```\n\n### open()\n\nOpens a modal window with the given selector. The `open()` method has a second optional parameter for configuration\n\n```js\n// With config\nKeukenhof.open('#modal', {\n openAttribute: 'data-modal-open',\n closeAttribute: 'data-modal-close',\n openClass: 'is-open',\n openingClass: 'is-opening',\n closingClass: 'is-closing',\n hasAnimation: true,\n});\n\n// Without config\nKeukenhof.open('#modal');\n```\n\n### close()\n\nCloses the modal with the given selector. If no parameters are passed to the `close()` method, the currently open window will be closed\n\n```js\n// With selector\nKeukenhof.close('#modal');\n\n// Without selector\nKeukenhof.close();\n```\n\n## Contribute\n\n1. Clone the repository `git@github.com:Alexandrshy/keukenhof.git`\n2. Go to the project directory `cd keukenhof`\n3. Install dependencies `yarn`\n4. Run dev build with auto rebuild after any changes `yarn build:dev`\n5. Complete your improvements, commit changes and submit your pull request for review code\n\n## Licensing\n\n[MIT license](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md"}
![\"npm](\"https://img.shields.io/npm/v/keukenhof?style=for-the-badge\")
\n ![\"License\"](\"https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=green\"){kind=icon}
\n ![\"gzip](\"https://img.shields.io/bundlephobia/minzip/keukenhof?style=for-the-badge&color=orange&label=gzip\")
\n ![](\"https://user-images.githubusercontent.com/14329906/89714496-2ebf9380-d9b0-11ea-8646-8cae646c1e22.png\")
\n