npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@springernature/global-popup

v6.0.0

Published

Builds and styles a popup that can be opened and closed

Downloads

13,284

Readme

Global Popup

Click a trigger element to build and display a popup. Popups are built from existing html in the DOM and require it to be there prior to initialisation.

Popups are absolutely positioned either above or below the trigger, based on a calculation of space in the viewport. Defaults to above. By default the popups calculate their width based on their contents.

The Popup is based on the Expander but differs in the following ways:

  1. It moves keyboard focus to the target element on opening (necessitating the aria-haspopup="true" attribution as a warning to screen reader users)
  2. It supplies a close button which sends focus back to trigger element on close

Usage

There are two approaches for using Global Popup:

  1. Data attribute API
  2. Directly in your application

Data attribute API

import {popup} from 'global-popup/js';

popup();
<button type="button" data-popup data-popup-target="popupContent1">Popup trigger</button>
<div id="popupContent1">
    <p>Some popup text</p>
</div>

(The trigger must be a <button> element with type="button" for keyboard and screen reader accessibility.)

Two data attributes are required:

| Data attribute | Type | Description | |--------------------|---------|-------------| | data-popup | Boolean | This is the popup trigger i.e. clicking this will open a popup | | data-popup-target | String | This is the id of the element in the DOM that Global Popup will use to build the popup contents |

There are also options (add these to trigger element):

| Data attribute | Type | Description | |-----------------------|---------|-------------| | data-popup-min-width | String | Sets a min-width in css on the popup, e.g. "100px" | | data-popup-max-width | String | Sets a max-width in css on the popup, e.g. "600px" |

Directly

import {Popup} from 'global-popup/js/popup';

const trigger = document.querySelector('button');
new Popup(trigger, 'popupContent1', { MIN_WIDTH: "100px", MAX_WIDTH: "600px" });
<div>
    <button type="button">Popup trigger</button>
    <div id="popupContent1">
        <p>Some popup text</p>
    </div>
</div>		

Lazily

If you wish to lazily create a popup the first time the trigger is clicked - for example if building the html for your popup is an expensive operation that you'd like to defer until needed - you can use this pattern:

import {Popup} from 'global-popup/js/popup';

const trigger = document.querySelector('button');
trigger.addEventListener('click', function() {
    const popup = new Popup(trigger, 'popupContent1');
    popup.open();
}, {capture: false, once: true});
<div>
    <button type="button">Popup trigger</button>
    <div id="popupContent1">
        <p>Some popup text</p>
    </div>
</div>