hlf-dom-extensions
v0.4.0
Published
DOM extensions for quality UI, without hard dependencies.
Downloads
3
Maintainers
Readme
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.
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)
Copyright (c) 2014-present Peng Wang