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

@djx/observable

v0.3.1

Published

Observes visibility of DOM elements

Downloads

8

Readme

@djx/observable

Observing the visibility of DOM elements

Installation

npm install --save @djx/observable

Usage

Make sure you import the component somewehere in your application first:

import '@djx/observable';

You can then use it like normal web components in your markup:

<!-- You need at least one root observable -->
<djx-observable-root>
  <!-- Observe all the time -->
  <djx-observable>
    <div>Watch me all the time, stalker</div>
  </djx-observable>

  <!-- Observe once -->
  <djx-observable once>
    <div>Observe me once then ignore me</div>
  </djx-observable>
</djx-observable-root>

Configuring the observable root node

In order for the observables to know where to attach to, you need at least one djx-observable-root component wrapped around your observables. Since the djx-observable-root uses the ResizeObserver and IntersectionObserver to determine the state of each observable, you can tweak the configuration for each root node a little bit.

<djx-observable-root
  use-root
  margin="0px 20px 20px"
  threshold="0.2"
>
  ...
</djx-observable-root>

The use-root option

This defines the djx-observable-root element as root for the IntersectionObserver. Default is false.

The margin option

The margin option of the IntersectionObserver. Read more about it here.

The threshold option

The threshold option of the IntersectionObserver. Read more about it here.

Using multiple observable root nodes

Sometimes you need observables to behave differently. You can define as many djx-observable-root nodes as you want. Just nest them accordingly. Here's an example:

<body>
  <!-- Observable with a 20% threshold -->
  <djx-observable-root name="ob-t20" threshold="0.2">
    <!-- Observable with a 10% threshold -->
    <djx-observable-root name="ob-t10" threshold="0.1">
      <!-- This obersvable will attach to the `ob-t10` root -->
      <djx-observable once root="ob-t10">
        <div>Trigger after 10% visible</div>
      </djx-observable>

      <!-- This obersvable will attach to the `ob-t10` root -->
      <djx-observable once>
        <div>Trigger after 10% visible</div>
      </djx-observable>

       <!-- This obersvable will attach to the `ob-t20` root -->
      <djx-observable once root="ob-t20">
        <div>Trigger after 20% visible</div>
      </djx-observable>
    </djx-observable-root>
  </djx-observable-root>
</body>

If you don't define a root-id it'll take the first parent root node

The observable state

To get notified about any dimension and position changes you can add a listener to the observable. This will be called whenever the ResizeObserver detects a change or the user resizes the browser:

<!-- Using the lit-element syntax -->
<djx-observable
  id="custom-observable"
  @update="({ detail }) => console.log(detail.offset, detail.bounds)"
></djx-observable>

<!-- Listening to the element directly -->
<script>
  const element = document.getElementById('custom-observable');

  element.addEventListener('update', ({ detail }) => {
    console.log(detail.offset, detail.bounds);
  });
</script>

Note: The lit-element syntax can only be used inside lit-elements

The visibility state

How does the state of visibility manifests itself? You have two ways of dealing with this. Go with the event or use the className.

The event based approach

You can either add a listener directly to the element or use the lit-element syntax:

<!-- Using the lit-element syntax -->
<djx-observable
  id="custom-observable"
  @visiblity-changed="({ detail }) => console.log(detail.visible)"
></djx-observable>

<!-- Listening to the element directly -->
<script>
  const element = document.getElementById('custom-observable');

  element.addEventListener('visiblity-changed', ({ detail }) => {
    console.log(detail.visible);
  });
</script>

Note: The lit-element syntax can only be used inside lit-elements

The CSS class based approach

Sometimes you just want to add a simple fade-in effect to the observable. Of course the event based approach would be too complex for this particular use-case. The observable also adds a class when the visibility changes. You can use it to make simple changes to the element via CSS:

<style>
  #custom-observable {
    transition: opacity .8s;
  }

  #custom-observable:not(.djx--is-visible) {
    opacity: 0;
  }
</style>

<djx-observable id="custom-observable">
  <div>Simple fade-in</div>
</djx-observable>

The default name for the visibility class is djx--is-visible