Lit-popup NPM | npm.io

LitPopup

I needed full control over popup animation and its lifecycle.

Install it from NPM: npm i lit-popup

Include css from node_modules/lit-popup/dist/css/lit-popup.min.css (or write your own)

<div class="lit-popup" data-lit-popup="popup">
    <div class="lit-popup-container">
        <!-- Layout here -->
    </div>
</div>

import LitPopup from 'lit-popup';

const popup = new LitPopup('name');

Hook	Parameters	Description
onOpen	(instance: LitPopup)	Runs before opening animation
onOpenComplete	(instance: LitPopup)	Runs after opening animation
onClose	(instance: LitPopup)	Runs before closing animation
onCloseComplete	(instance: LitPopup)	Runs after closing animation
onDestroy	(instance: LitPopup)	Runs when 'destroy' method is called
openAnimation	(instance: LitPopup)	A function describing an opening animation. It must return a promise and resolve when animation is done.
closeAnimation	(instance: LitPopup)	A function describing a closing animation. It must return a promise and resolve when animation is done.

Event	Parameters	Description
open	none	Triggers before opening animation
open-complete	none	Triggers after opening animation
close	none	Triggers before closing animation
close-complete	none	Triggers after closing animation
destroy	none	Triggers when 'destroy' method is called

Method	Parameters	Return	Description
open	none	Promise`<void>`	Opens the modal
close	none	Promise`<void>`	Closes the modal
destroy	none	void	Destroys the instance, disposes memory
on	(eventName: string, listener: Function)	void	Adds an event listener to the popup element
one	(eventName: string, listener: Function)	void	Adds an event listener to the popup element which will be executed only once
off	(eventName: string, listener: Function)	void	Removes an event listener from the popup element which will be executed only once
trigger	(eventName: string)	void	Triggers an event on the popup element