Fork Me on GitHub

HLF DOM Extensions

Custom UI

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.


Main features summary:

Short examples:

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

contextElement = document.querySelector('');
// 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>
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.


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.


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



$ npm install hlf-dom-extensions

Development devDependency Status

# to install
$ npm install

# to read some docs
$ grunt docs

# to start developing
$ grunt


The MIT License (MIT)

Copyright (c) 2014-present Peng Wang