@veams/component-overlay v1.0.1
Overlay
Description
It represents an overlay module. This module is responsible to create an overlay without predefining any inner overlay template.
It should be used by other modules to display their content in an overlay.
Usage
The overlay component will be initialized without any markup reference. Next to that, it's only purpose is to open and close itself and display provided content.
How do you work with the overlay?
It is really simple by using the publish/subscribe pattern. The overlay listens to:
EVENTS.overlay.openEVENTS.overlay.close.
That means you only need to trigger the event and provide the content as a parameter.
Example
Let's display an image in our overlay component. As long as all requirements are fulfilled you can execute the following:
Veams.Vent.publish(Veams.EVENTS.overlay.open, { content: '<img src="http://placehold.it/400x200" />' });That's it.
overlay-usage.hbs
Here you will find an onclick event which is just inlined to open the overlay.
It is an easy way to show you a working example.
But we suggest to use @veams/component-cta for triggering global events out of the markup.
Requirements
- @veams/core - Veams Core Framework.
- @veams/query or
jquery- Veams Query or jQuery. - @veams/plugin-vent - Veams Events Plugin to provide a global publish/subscribe object.
Installation
Installation with Veams
veams install component overlayveams -i c overlayJavaScript Options
The module gives you the possibility to override default options:
| Option | Type | Default | Description |
|---|---|---|---|
| openClass | String | 'is-open' | Define the open class to open the overlay. |
| closeBtn | String | '[data-js-item="overlay-close"]' | Define the element for close button. |
| overlay | String | '[data-js-item="overlay"]' | Define the element for overlay. |
| regionContent | String | '[data-js-item="overlay-content"]' | Define the element for region content. |