Skip to content

Veams/component-overlay

Repository files navigation

npm version Gitter Chat

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.open
  • EVENTS.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


Installation

Installation with Veams

veams install component overlay
veams -i c overlay

JavaScript 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.