poplight

    1.1.6 • Public • Published

    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

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

    Install

    npm i poplight

    DownloadsWeekly Downloads

    1

    Version

    1.1.6

    License

    ISC

    Last publish

    Collaborators

    • elinadenfina