Web ComponentThe latest version of this package is: 0.6.9, Opens in new window
Webcomponent for Modal
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-wc/modal@0.6.9
Table of Contents
Usage
Markup
<ids-modal data-title="Title">
<p class="if">
Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates
don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God
creates Man. Man destroys God. Man creates Dinosaurs. What do they got in
there? King Kong? Forget the fat lady! You're obsessed with the fat lady!
Drive us out of here!
</p>
</ids-modal>
<script src="…modal-webcomponent.iife.js"></script>
Or:
<ids-modal
data-title="Title"
data-text="Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. What do they got in there? King Kong? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!"
data-id="modal-test"
data-is-open="true"
data-description="A modal with quotes from characters played by Jeff Goldblum"
>
</ids-modal>
<script src="…modal-webcomponent.iife.js"></script>
Open on init
If you want the modal to open on init without an external indicator, you can pass the data-is-open="true"
attribute. This will open up the modal on init.
Properties
Property | Type | Description | Required |
---|---|---|---|
data-text |
String |
Use this attribute if you only want to use text | No |
data-title |
String |
Modal title | Yes |
data-id |
String |
The id of the modal | Yes |
data-is-open |
String /Boolean |
Should this modal open on render? | No |
data-description |
String |
If you want to use aria-describedby , add description here |
No |
Events
The webcomponent fires a CustomEvent
for opening and closing of the component.
The webcomponent also listenes to a CustomEvent
for toggling of the modal.
Toggle
This event is ment to be fired of the initiator element for the modal. It is implemented by the developer to be able to display the modal.
See implementation example below.
<button type="button" class="if primary button" id="open">Open modal</button>
<ids-modal data-title="Title" data-id="modal-test">
<p class="if text body">
Your card validation code (CVC) is an extra security feature — it is the
last 3 or 4 numbers on the back of your card.
</p>
<a href="#" class="if">This is a link</a>
</ids-modal>
<script>
const _dispatchEvent = (id) => {
const _event = new CustomEvent(`ids:send:modal:toggle:${id}`, {
bubbles: !0,
detail: {
source: 'IDS_MODAL',
type: 'MODAL_TOGGLE',
payload: {
id: id,
},
},
});
document.dispatchEvent(_event);
};
document.getElementById('open').addEventListener('click', (e) => {
_dispatchEvent('modal-test');
});
</script>
And the component will listen to this event:
document.addEventListener(`ids:send:modal:toggle:${_id}`, (e) => {
this.externalInitiatorEl = e.target;
this.toggle();
});
Open/Close
document.addEventListener(`ids:send:dialog:${_id}`, (e) => {
console.log(e);
});
Event | Type | Description |
---|---|---|
ids:send:modal:<id> |
CustomEvent |
Event fired on open and close |
ids:send:modal:toggle:<id> |
CustomEvent |
Event fired on toggling of modal |
The payload of the event looks something like this:
// For opened event
detail: { source: "IDS_MODAL", type: "MODAL_OPENED", payload: { id: "<id>" } }
// For closed event
detail: { source: "IDS_MODAL", type: "MODAL_CLOSED", payload: { id: "<id>" } }
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.3.7 (2022-03-09)
Miscellaneous chores
- reinstall (fa531f7)
0.3.6 (2022-03-09)
Miscellaneous chores
- reinstall (8482f7f)
0.3.5 (2022-03-08)
Miscellaneous chores
0.3.4 (2021-11-10)
Miscellaneous chores
- Manually testing inclusion of CHANGELOG.md (f91eb76)
0.3.0 (2021-11-10)
Miscellaneous chores
-
reinstall (aac54a4)
-
rename (c20e410)
-
update references after name changing of util to utils (7dda072)
0.2.3 (2021-10-28)
Miscellaneous chores
0.2.1 (2021-10-14)
Miscellaneous chores
- 🤖 Update dependencies (079ff16)
0.2.0 (2021-10-14)
Documentation Updates
0.1.0 (2021-10-01)
⚠ BREAKING CHANGES
- 🧨 We are now serving IIFE files instead of UMD, for a better dev
experience when including scripts with script-tag
- 🧨 All webcomponent versions has been reset, due to new scope; @ids-wc
✅ Closes: 467386
Bug Fixes
-
🐛 Rename required file to use IIFE, escape correctly (dff7a27)
-
🐛 Use correct classnames for input-label and wrapper (04172fd)
Documentation Updates
Miscellaneous chores
-
🤖 Remove babel, no longer required (9f6497c)
-
🤖 Remove unneeded rc files (fdcac58)
-
🤖 Remove unwanted files, demo not needed for these pkgs (8ad75ba)
-
🤖 Remove usage of .npmignore, use files-prop instead (8b7c55e)
-
🤖 Reset CHANGELOG.md files (bf1ef63)
-
🤖 Reset versions for webcomponents, due to new scope (f540b01)
-
🤖 Set correct output name (98da4f6)
-
🤖 Update prettier rc files (7d0e3c9)
-
🤖 Use correct dependencies after renaming of scope (38aba43), closes #467386
-
🤖 Use iife instead of umd (ae0ebcc)
-
bootstrap (420cc99)
-
initial commit (8d74b20)
-
use correct import path (1fff2cb)