2.0.1 • Published 6 years ago
shadow-modal v2.0.1
ShadowModal - A bootstrap 4 modal within a customElements' shadow dom
Description
When you want to display some data from a userscript it's often easier to just use a modal instead of directly insert it on the website. To do so you either have to use the website's css or make your own because inserting another css library might break that of the website. What this library does is creating a new HTMLElement with a shadow dom to include bootstrap 4 and a modal with some methods to manage it.
Installing
$ npm install shadow-modal
import * as ShadowModal from 'shadow-modal;'
or
const { Bulma } = require('shadow-modal');
Examples
See the examples folder
const modal = ShadowModal.Bootstrap4.create({
title: 'a title',
content: '<h3>Some content</h3>',
appendTo: 'body',
isLarge: true,
isSmall: false,
isVerticallyCentered: true,
hasHeader: false,
hasFooter: true,
style: '.custom-color { background-color: #34495e; }',
footerBtns: [
{
text: 'Toggle size',
classNames: 'btn custom-color text-light rounded-0',
click: function () {
if (this.isSmall) {
this.isSmall = false;
} else if (this.isLarge) {
this.isSmall = true;
} else {
this.isLarge = true;
}
}
},
{
text: 'Toogle header',
classNames: 'btn btn-primary rounded-0',
click: function () {
this.hasHeader = !this.hasHeader;
}
},
{
text: 'Remove me',
classNames: 'btn btn-danger rounded-0',
click: function(e) {
this.removeFooterBtn(e.currentTarget);
}
}
]
});
modal.open();
or
const modal = Bulma.create();
let style = modal.addStyle('.custom-color { background-color: #34495e; }');
modal.setTitle('A title');
modal.setContent('<h3>Some content</h3>');
modal.hasHeader = false;
modal.addFooterBtn('Toogle header', 'button custom-color has-text-light', function () {
this.hasHeader = !this.hasHeader;
});
modal.addFooterBtn('Remove style', 'button is-link', function () {
this.removeStyle(style);
});
let button = modal.addFooterBtn('Remove me', 'button is-danger', function () {
this.removeFooterBtn(button);
});
document.body.appendChild(modal);
modal.open();