winkblue

winkblue

A simple DOM observer which API compatible to sentinel-js

Installation

CDN

<script src="https://unpkg.com/winkblue/dist/winkblue.umd.js"></script>
<script>
  const { winkblue } = Winkblue;

  // or

  const winkblue = new Winkblue.Winkblue();

  // or

  const winkblue = Winkblue.Winkblue.new();
</script>

CDN + ESM

<script type="importmap">
  {
    "imports": {
      "winkblue": "https://esm.sh/winkblue"
    }
  }
</script>

<script type="module">
  import { winkblue } from 'winkblue';

  // or

  import { Winkblue } from 'winkblue';
  const winkblue = new Winkblue();

  // or

  import { Winkblue } from 'winkblue';
  const winkblue = Winkblue.new();
</script>

Usage

// Start observing elements by class
winkblue.on('.dynamic-load-components', (el) => {
  // do something on `el`
});

// Stop observing elements by class
winkblue.off('.dynamic-load-components');

// Stop observing all elements
winkblue.reset();

options

// triggers callback if the element had been removed then attached back on document
// default: false
winkblue.options.forgetHiddenElement = true;

Why?

• sentinel-js can not find the display: none; elements.
• sentinel-js can not trigger multiple times if multiple selectors match the same element.
• sentinel-js can not work with multiple instances.

Limitation

• if you reuse the same element instance, the callback will not be triggered unless you set options.forgetHiddenElement to true

Playground

• simple usage
• hidden elements
• fizzbuzz
• multiple instance
• blink
• scattergun

LICENSE

ISC