HLF DOM Extensions

Custom UI

HLF DOM Extensions

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

# to install
$ npm install

# to read some docs
$ grunt docs

# to start developing
$ grunt

License

The MIT License (MIT)