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()