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-jquery

v0.3.0

Published

jQuery plugins and extensions for quality UI.

Downloads

3

Readme

HLF jQuery Library

Build Status Package Code Climate Dependency Status GitHub License

jQuery extensions and plugins for quality UI and implemented following best practices. The annotated source code is also available and include documented examples.

All modules have scoped debug flags, jQuery namespaces, and no-conflict support with jQuery. They are exported using UMD and work with AMD, Browserify, or plain.

Plugins

All plugins should have test pages with documented source. Please use them as usage examples. Plugins should also have sample styles, and some have required styles. When possible, styles are made customizeable as SCSS mixins.

HLF 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.
  • Configurable animator, so opting out of non-GPU jQuery animations is easy.
  • Has an extended, 'snapping' version that only follows the mouse on one axis. The tip snaps to the trigger's edge on the other axis.

Short examples:

$('.avatars').find('img[alt]').tip(); // Tips will follow cursor.
$('nav.bar').find('a[title]').snapTip({
  snap: { toXAxis: true } // Tips will only follow along x axis.
});
$('article').find('a[title]').snapTip(); // Tip will not follow.

See Tip's visual tests for more examples.

HLF Media Grid

Main features summary:

  • Allows expanding an item inline without affecting the position of its siblings.
  • 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>
var mg = $('.tiles').mediaGrid().mediaGrid();
setTimeout(function() { mg.trigger('ready'); }, 500); // Better to use imagesLoaded.

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

Extensions

All extensions should be covered by QUnit tests.

HLF Core

Main features:

  • Generate jQuery plugin methods from plugin definitions.
  • Helpers to create mixins that can be used for plugin API.
  • Provide no-conflict support.

See Core's unit tests for examples.

HLF Event

Main features:

  • Hover-intent provides rate-limited versions of mouseenter and mouseleave events through a customizable delay.

Requirements

Only other required dependency is UnderscoreJS. Modernizr is a suggested dependency for true feature detection. Other Bower dependencies are for tests and demos.

Styling is released as mainly Sass modules for you to import into your own SCSS. Unfortunately, there are no plans for LESS support. Also for now, vendor- prefixing is left to the build layer, so you're encouraged to select an auto- prefixing solution.

Plugins Coming Soon

HLF Editable

Main features:

  • Uses mixins for encapsulate editing behaviors, so plugin instances can be composed based on data-attribute configuration.
  • Attempts to wrap abstract away vendor APIs (for example, CodeMirror vs ACE).

Install

$ npm install hlf-jquery

Development devDependency Status

# to install
$ gem install -N sass # for grunt-contrib-sass
$ npm install

# to run some tests first
$ grunt test

# to read some docs
$ grunt docs

# to start developing
$ grunt

Note that Grunt task options and multi-tasks are in build/.

License

The MIT License (MIT)

Copyright (c) 2014-present Peng Wang