@doars/doars-view

@doars/doars-view

Plugin that adds a view directive for reacting to intersection changes.

Install

From NPM

Install the package from NPM, then import and enable the library in your build.

npm i @doars/doars @doars/doars-view

// Import libraries.
import Doars from "@doars/doars";
import DoarsView from "@doars/doars-view";

// Setup a library instance.
const doars = new Doars();

// Setup the plugin.
const doarsView = new DoarsView(doars /*, options */);

// Enable library.
doars.enable();

UMD build from jsDelivr

Add the UMD build to the page from for example the jsDelivr CDN and enable the library.

<!-- Import library. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/doars@1/dst/doars.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@doars/doars-view@1/dst/doars-view.umd.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Setup a library instance.
    const doars = new window.Doars()

    // Setup the plugin.
    const doarsView = new  window.DoarsView(doars /*, options */)

    // Enable library.
    doars.enable()
  })
</script>

ESM and IIFE builds are also available via the jsDelivr CDN.

Directives

The following directives are added by the plugin.

d-view

Executes the attribute when an intersection change is observed on the element. The directive's value should be a function expression. The directive's name can either be nothing, enter, or leave. If the name is enter the directive is only ran when the element enters into view, if the name is leave the directive is only ran when the element exist out of view. If neither is given the directive is run in either case.

Modifiers

The directive supports the following modifiers.

• {Number} buffer = 5 Amount of times it has to be triggered before the directive is called.
• {Number} debounce = 500 Time in milliseconds the element needs to have been in view before the expression is executed.
• {Number} throttle = 500 Time in milliseconds before the directive can be executed again.

Examples

<div d-view="console.log('Element entered or left the viewport.')">

<div d-view:enter="console.log('Element entered the viewport.')">

<div d-view:leave.debounce-750="console.log('Element left the viewport, and has not re-entered for 750 milliseconds.')">

API

DoarsView

• constructor Create plugin instance.
  • @param {Doars} library A doars library instance.
  • @param {Object} options = null See options.
  • @returns {DoarsView}

DoarsView options

• {HTMLElement} root = null The element to be used as the viewport for checking the visibility of the elements. It must be an ancestor of the targeted elements. By default it is the browsers viewport.
• {CSS margin property} rootMargin = '0px' Margin around the root.
• {Number|Array<Number>} threshold = 0 Thresholds of visibility the directive should be executed. 0 results in as soon as a pixel is in view. 1 results in that the entire element needs to be in view. [0, 0.5, 1] results in three possible calls when it is a pixel in view, 50% in view and entirely in view.

The options are the same as those of the intersection observer itself.