context-modal v0.0.1
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
yarn add context-modal
npm i -S context-modal
Or access to releases page. Then, download the latest version.
Usage
First, if you read as a separate file
<script src="/path/tp/context-modal.js"></script>
Markup is like this. (test/fixtures/index.html
)
<!-- [data-context-modal-event-type=click] is default -->
<div data-context-modal-for="menu" data-context-modal-event-type="click">Button</div>
<div data-context-modal-id="menu" style="display:none">
<!-- Your designed element -->
</div>
data-context-modal-for
works like <label for>
, data-context-modal-id
works as <input id>
.
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
.
// 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 showncontextmodaldidshow
After being shown (after transition)contextmodalwillhide
Just before hidingcontextmodaldidhide
After hiding (after transition)
Example
test/fixtures/index.js
example/webpack/index.js
LICENSE
The MIT License (MIT)
Copyright (c) 2017 nju33 nju33.ki@gmail.com
7 years ago