zensen-popover

A Redux-based popover manager in LitElement.

Features

• Provides a single manager element to handle all of your popovers
• It will automatically replace the current popover if opening a popover while one is open
• Provides a way to set coordinates
• The Popover base component class provides a way to render popovers in window space
• Disables scrolling while popovers are available
• Has an intuitive interface for pushing and retrieving data to and from popovers

Install

Using npm:

$ npm install @zensen/popover

Using yarn:

$ yarn add @zensen/popover

Configuring, Creating, and Registering Popover Components

Configuring the popover manager component by providing a redux store object

import { configure } from '@zensen/popover'

configure(store)

Create your own popover components by extending this package's Popover base class

import { Popover } from '@zensen/popover'
import { css, html } from 'lit-element'

class CalendarPopover extends Popover {
  // TODO: provide your implementation here
}

window.customElements.define('x-popover-calendar', CalendarPopover)

The next step is to create a map of popover renderer functions that will be used to register each type of popover component with the popover stack:

export const POPOVER_CALENDAR = 'confirm'

export const RENDERER_POPOVERS = {
  [POPOVER_CALENDAR]: (layout, model, target, closeHandler) => html`
    <x-popover-calendar
      .layout="${layout}"
      .model="${model}"
      .target="${target}"
      .onClose="${closeHandler}"
    ></x-popover-calendar>
  `,
}

Then, we instantiate the popover stack component in our app, assigning our renderers to it.

NOTE: It's usually a good idea to put this towards the top of your app's DOM towards as the last child of its containing element.

class App extends LitElement {
  static get styles () {
    return css`
      :host {
        display: block;
      }

      .container {
        display: flex;
        width: 100%;
        height: 100%;
      }
    `
  }

  render () {
    return html`
      <div class="container">
        <!-- PUT APP CONTENT HERE -->
      </div>

      <zen-popover-manager .renderers="${RENDERER_POPOVERS}"></zen-popover-manager>
    `
  }
}

window.customElements.define('x-app', App)

API

We can open popovers like so:

import { openPopover } from '@zensen/popover'
import { POPOVER_CALENDAR } from './popover-renderers'

const el = document.getElementById('input-calendar')
const model = { date: new Date() }

const result = await openPopover(POPOVER_CALENDAR, el, model)

openPopover() returns a promise, so it can be awaited. It will resolve once the popover calls its this.onClose() callback. openPopover() will return whatever is passed into this.onClose(). In the case of our Calendar Popover, it will return true when the Confirm button is clicked, or false when the Cancel button is clicked.

We can also manually remove the last popover from the stack like so:

import { dismissPopover } from '@zensen/popover'

dismissPopover()