pop

poplight

A lightbox module for template rendering

Showing:

Popularity

Downloads/wk

0

Maintenance

No Maintenance Data Available

Package

Dependencies

2

Size (min+gzip)

3.8KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Build Status JavaScript Style Guide

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

propertytypedefault
elementstringdiv
selectorClosestring[data-lb-close]
lightboxSelectorstringlightbox
lightboxActiveClassstringlightbox--active
lightboxSelectorVariantstring''
templatefunction/string (depending on template style)
hello
handlebarsbooleanfalse
dataobject{}
asyncbooleanfalse
apistring''
methodstring'GET'
bodystring''
onLoadCallbackfunction() => {}

API

Open: poplight.open()

Close: poplight.close()

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100