POPLIGHT

A small and simple lightbox module built for both handlebars and static templating. No ugly pre styles included which means it's totally up to you to customize!

Demo

You can find a working demo here

Build status

Install

$ npm install poplight

with yarn

$ yarn add poplight

Initiate lightbox

Create a new lightbox by calling the module constructor. The constructor takes two parameters. The initiation will generate a new element to the DOM which can be styled just the way you want.

1. Target element. A DOM element which will serve as the click handler for the "open lightbox" event.
2. Options. See documentation below.

const lightbox = new PopLight(document.querySelector('button'), {})

Usage

 import PopLight from 'poplight'

 const targetElement = document.querySelector('button');

 const options = {
  template: `<div class="lightbox"> <h1> POP! </h1> </div>`,
  lightboxSelectorClose: '.button--close',
  onLoadCallback: () => { console.log('popped') },
 }

 new PopLight(targetElement, options);

Note: The target element can also be null. If null, use the poplight.open() function to trigger the lightbox.

Usage with handlebars

Handlebars template

<script id="handlebars-demo" type="text/x-handlebars-template">
   <div>
      Hello {name}, this is a demo lightbox!
   </div>
</script>

 import PopLight from 'poplight'

 const targetElement = document.querySelector('button');
 const template = document.getElementById('handlebars-demo');
 const compiledTemplate = Handlebars.compile(template.innerHTML);

 const options = {
  template: compiledTemplate,
  data: { name: 'Elina' },
  handlebars: true,
 }

 new PopLight(targetElement, options);

Asynchronous example

Handlebars template. Note: Handlebars must be included in project. Download here

<script id="handlebars-demo" type="text/x-handlebars-template">
   <div>
      <h1>{{Title}}</h1>
      <h3> {{Subtitle}} </h3>
      <p> {{ content }} </p>
   </div>
</script>

<button data-post="2"> Get post! </button>

 import PopLight from 'poplight';

 const button = document.querySelector('button');
 const template = document.getElementById('handlebars-demo');
 const compiledTemplate = Handlebars.compile(template.innerHTML);

 button.addEventListener('click', (e) => {
   const endpoint = e.target.dataset.post;

   const options = {
    template: compiledTemplate,
    async: true,
    api: 'http://api.mypage.com/posts/' + endpoint,
    handlebars: true,
   }

   const lightbox = new PopLight(null, options);
   lightbox.open();
 })

Options

| property | type | default | | ------------- |:-------------:| -----:| | element | string | div | | selectorClose | string | [data-lb-close] | | lightboxSelector | string | lightbox | | lightboxActiveClass | string | lightbox--active | | lightboxSelectorVariant | string | '' | | template | function/string (depending on template style)| hello | | handlebars | boolean | false | | data | object | {} | | async | boolean | false | | api | string | '' | | method | string | 'GET' | | body | string | '' | | onLoadCallback | function | () => {} |

API

Open: poplight.open()

Close: poplight.close()