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

hlf-dom-extensions

v0.4.0

Published

DOM extensions for quality UI, without hard dependencies.

Downloads

3

Readme

HLF DOM Extensions

Package Code Climate Dependency Status GitHub License

DOM extensions for quality UI and implemented without hard dependencies. The annotated source code is also available and include documented examples. All modules are exported using UMD and work with AMD, Browserify, or plain.

All extensions should have test pages with documented source. Please use them as usage examples. Some extensions also have sample and/or required styles configurable via custom properties.

Tip

Main features summary:

  • Based on hover 'intent' and prevents redundant toggling or DOM thrashing.
  • Re-use the same tip for a group of triggers to keep DOM light.
  • Aware of available space surrounding the triggering element.
  • Has a snapTo option to allow only following the mouse on one axis. The tip snaps to the trigger's edge on the other axis.

Short examples:

let contextElement, tip;
contextElement = document.querySelector('.avatars');
// Tip will follow cursor.
tip = Tip.extend(contextElement.querySelectorAll('img[alt]'), { contextElement });

contextElement = document.querySelector('nav.bar');
// Tip will only follow along x axis.
tip = Tip.extend(contextElement.querySelectorAll('a[title]'), { snapTo: 'x', contextElement });

contextElement = document.querySelector('article');
// Tip will not follow.
tip = Tip.extend(contextElement.querySelectorAll('a[title]'), { snapTo: 'trigger', contextElement });

See Tip's visual tests for more examples.

Media Grid

The MediaGrid extension, inspired by the Cargo Voyager design template, can expand an item inline without affecting the position of its siblings. The extension tries to add the minimal amount of DOM elements and styles. So the layout rules are mostly defined in the styles, and initial html for items is required (see the tests for an example). The extension also handles additional effects like focusing on the expanded item and dimming its siblings.

Short examples:

<div class="tiles">
  <div class="js-mg-item">
    <div class="mg-preview">...</div>
    <div class="mg-detail">...</div>
  </div>
  ...
</div>
let mediaGrid = HLF.MediaGrid.extend(document.querySelector('.tiles'));
mediaGrid.createPreviewImagesPromise().then(mediaGrid.load, mediaGrid.load);

See Media Grid's unit tests and Media Grid's visual tests for more examples.

Hover Intent

The HoverIntent extension normalizes DOM events associated with mouse enter and leave interaction. It prevents the 'thrashing' of attached behaviors (ex: non-cancel-able animations) when matching mouse input arrives at frequencies past the threshold.

See Hover Intent's visual tests for more examples.

Core

HLF.buildExtension(MyExtensionClass, {
  autoBind: true,
  autoListen: true,
  compactOptions: true,
  mixinNames: ['css', 'selection'],
});
let myExtension = MyExtensionClass.extend(document.querySelector('.foo'));

See Core's unit tests for examples.

Requirements

Browser versions supporting ES2015 and CSS custom properties. The included guard.js can be included on the page first to enforce this requirement.

v0.3.0 is the last release as hlf-jquery, with jQuery being a dependency and compatibility with older browsers.

Coming Soon

Field

Install

$ npm install hlf-dom-extensions

Development devDependency Status

# to install
$ npm install

# to read some docs
$ grunt docs

# to start developing
$ grunt

License

The MIT License (MIT)

Copyright (c) 2014-present Peng Wang