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

@yazanaabed/dommutationobserver

v1.0.2

Published

This component needs to handle DOM changes and listen to DOM changes without killing browser performance if this not supported we fall back to simple setInterval action

Downloads

3

Readme

DomMutationObserver

This component needs to handle DOM changes and listen to DOM changes without killing browser performance if this not supported we fall back to simple setInterval action

Supported MutationObserver attributes and every event for these attributes:

  • childList: Set this to true if the element list changed and triggered with appended element.
  • subtree: Set this to true to listen to every children inside this element.
  • attributes: Set this to true if you need to listen to attributes changes.
  • attributeOldValue: Get and store value for changed attributes
  • characterDataOldValue: Get and store value for changed char data

How to use

You can include it on your project and every time you need to define a new instance from it. You can pass your own options and events on init function

var domEventChangesListener = new YDomMutationObserver();

var domEventOptions = {
      attributes: false,
      characterData: true,
      childList: true,
      subtree: true,
      attributeOldValue: false,
      characterDataOldValue: false
};

domEventChangesListener.init(element[0] || jQuery, domEventOptions);
domEventChangesListener.on(YDomMutationObserver.EVENTS.ON_CHARACTER_DATA_CHANGED, domChanged);
domEventChangesListener.on(YDomMutationObserver.EVENTS.ON_CHILD_LIST_CHANGED, domChanged);
domEventChangesListener.on(YDomMutationObserver.EVENTS.ON_CHANGE, harriCallbacks.domChanged)

After that you start listen or observe the changes on your dom.

domEventChangesListener.startListening(500);

To trigger any function manually use the trigger as async call or syncTrigger as sync call function No need to send the record every time if you don't have it you can leave it.

self.trigger('on-attributes-changed', record);

Or

self.syncTrigger('on-attributes-changed', record);

Events

You can use the 'on' function that pass the event name with callback to trigger when DOM changed or you triggered by you self.

  • on-attributes-changed Trigger after the attributes changed with the whole changed object.
  • on-character-data-changed Trigger when char data for this dom changed.
  • on-child-list-changed Trigger when any child list for this dom changed.
  • on-subtree-changed Trigger when children on this dom modified or changed.
  • on-change Trigger for non-support browsers you need to pass it every time to handle default behavior.

For not supported browsers

Trigger the on-change event that triggered by default when the browser not support this

Compatibility

I have tested this on work for HARRI project for auto complete fields that shows a pop list with names to tag them.