https://github.com/nju33/context-modal
Display related elements with axis of trigger element
https://github.com/nju33/context-modal
context dropdown library menu modal pure-javascript
Last synced: over 1 year ago
JSON representation
Display related elements with axis of trigger element
- Host: GitHub
- URL: https://github.com/nju33/context-modal
- Owner: nju33
- License: mit
- Created: 2017-03-26T04:39:39.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-26T14:05:54.000Z (about 9 years ago)
- Last Synced: 2024-11-22T12:13:16.335Z (over 1 year ago)
- Topics: context, dropdown, library, menu, modal, pure-javascript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/context-modal
- Size: 1.16 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ContextModal
Display related elements with axis of trigger element. I made it to make it easy to make things like context-menu and dropdown, etc.
## Install or Download
```sh
yarn add context-modal
npm i -S context-modal
```
Or access to [releases page](https://github.com/nju33/context-modal/releases).
Then, download the latest version.
## Usage
First, if you read as a separate file
```html
```
Markup is like this. (`test/fixtures/index.html`)
```html
Button
```
`data-context-modal-for` works like ``, `data-context-modal-id` works as ``.
That is, `[data-context-modal-id=foo]` will be shown using something of `[data-context-modal-for=foo]` as a trigger.
The trigger is `click` by default, but you can change only that element by adding `data-context-modal-event-type`.
Also, by default, the top left of the modal comes to the position you clicked. If you want to fix this somewhere else (eg bottom-left), add `data-context-menu-offset` to `[data-context-menu-for]` element. The following values can be specified for this.
- `left-top`
- `left-bottom`
- `right-top`
- `right-bottom`
```js
// For es
import ContextModal from 'context-modal';
const ctxModal = new ContextModal(document.querySelectorAll('[data-context-modal-for]'), {
// This is global opts
// Elements to prevent scrolling while displaying
//
// Use `data-context-modal-scrollable`
// if you want to change only certain elements
scrollable: document.body, // default
// Transition values at `onshow` and `onhide`
//
// Use `data-context-modal-transition-for-onshow` or `data-context-modal-transition-for-onhide`
// if you want to change only certain elements
transition: ['opacity .2s linear', 'none'] // defaults
});
ctxModal.init();
```
After `ctxModal.init`, `[data-context-modal-id]` will be able to use the following events.
- `contextmodalwillshow`
Just before being shown
- `contextmodaldidshow`
After being shown (after transition)
- `contextmodalwillhide`
Just before hiding
- `contextmodaldidhide`
After hiding (after transition)
### Example
- `test/fixtures/index.js`
- `example/webpack/index.js`
## LICENSE
The MIT License (MIT)
Copyright (c) 2017 nju33