HLF DOM Extensions

 __         __       ___
/\ \       /\ \     / __\
\ \ \___   \ \ \   /\ \_/_
 \ \  __`\  \ \ \  \ \  __\
  \ \ \ \ \  \ \ \  \ \ \_/
   \ \_\ \_\  \ \_\  \ \_\
    \/_/ /_/   \/_/   \/_/

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.

Slide Show

The SlideShow extension provides a simple but flexible slide-show behavior. Simply scroll to change slides. The slide animation takes advantage of native scrollIntoView support in modern browsers. Slide scroll-snap is also supported if native support is missing. Arrow keys, any existing previous and next buttons, and even the left and right regions of slides can also change slides. Double-tap a slide to enter full-screen mode. See accompanying, suggested styles.

Short examples:

<div class="slideshow">
  <ol class="slides">
    <li class="slide">
      <figure><img src="resources/slide.png"></figure>
    </li>
    ...
  </ol>
  <nav>
    <button type="button" class="previous">Previous</button>
    <button type="button" class="next">Next</button>
  </nav>
</div>

let slideShow = HLF.SlideShow.extend(document.querySelector('.slideshow'));

See Slide Show's visual tests for more examples.

Accordion

The Accordion extension provides a simple but flexible accordion behavior. Folding a section only folds its items. autoCollapse is an option. And cursorItemClass and featureCount options allow certain items to remain visible upon folding. A triggerSelector option allows any trigger within the section to be used.

Short examples:

<div class="sections">
  <ul class="list">
    <li class="accordion-trigger">...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  ...
</div>

let accordion = HLF.Accordion.extend(document.querySelector('.sections'));

See Accordion'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

# clone

# to install
$ npm install
$ grunt install

# to read some docs
$ grunt docs

# to start developing
$ grunt

License

MIT NON-AI License

Copyright (c) 2014-present Peng Wang