| layout | title | author | categories | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
post |
Ender Roundup: tablesort.js, Moment.js, jwerty, SelectNav.js, ender-events, ender-assert, Categorizr.js, Arbiter |
Rod Vagg |
|
tablesort.js (GitHub: tristen/tablesort, npm / Ender: tablesort) by Tristen Brown is a dependency-free sorting library for HTML tables. tablesort.js can be invoked stand-alone via new Tablesort(document.getElementById('table-id')) or $('#table-id').tablesort() method from within Ender.
Olivier Vaillancourt has written a small review of tablesort.js for use in Ender on Twitter Bootstrap tables.
Moment.js (GitHub: timrwood/moment, npm / Ender: moment) by Tim Wood is small, yet very comprehensive date and time handling library.
Moment.js was mentioned last year on DailyJS but it now has a simple Ender bridge allowing you to pack it neatly into Ender builds for use via $.ender(). Plus, it's an absolutely fantastic library for anything date/time related so it's worth mentioning again. Be sure to scan the docs to see just how much this library can do.
{% highlight javascript %} $.moment().add('hours', 1).fromNow(); // "1 hour ago"
// manipulate $.moment().add('days', 7).subtract('months', 1).year(2009).hours(0).minutes(0).seconds(0);
// parse dates in different formats var day = $.moment("12-25-1995", "MM-DD-YYYY");
var a = $.moment([2010, 1, 14, 15, 25, 50, 125]); a.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm" a.format("ddd, hA"); // "Sun, 3PM"
// operate on different 'moment' objects
var a =
The project maintainers also follow a rigorous release methodology, making great use of git branches, something that is not often found on smaller open source libraries.
jwerty (GitHub: keithamus/jwerty, Licence: MIT, npm / Ender: jwerty) by Keith Cirkel is a small keyboard event handling library which can bind, fire and assert key combination strings against elements and events.
{% highlight javascript %}
// specify optional keys $.key('⌃+⇧+P/⌘+⇧+P', function () { [...] });
// key sequences $.key('↑,↑,↓,↓,←,→,←,→,B,A,↩', function () { [...] });
// pass in a selector to bind a shortcut local to that element $.key('⌃+⇧+P/⌘+⇧+P', function () { [...] }, 'input.email', '#myForm');
// use $.event as a decorator, to bind events your own way
// use $.isKey to check a key combo against a keyboard event
function (event) {
if ( $.isKey('⌃+⇧+P', event) ) { [...] }
}
// use $.fireKey to send keyboard events to other places
$.fireKey('enter', 'input:first-child', '#myForm');
{% endhighlight %}
SelectNav.js (GitHub: lukaszfiszer/selectnav.js, npm / Ender: selectnav.js) by Lukasz Fiszer is a small library that will convert your website's navigation into a <select> menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. SelectNav.js is inspired by TinyNav.js for jQuery.
ender-events (GitHub: amccollum/ender-events, Licence: MIT, npm / Ender: ender-events) and ender-assert (GitHub: amccollum/ender-assert, Licence: MIT, npm / Ender: ender-assert) are two packages by Andrew McCollum, previously bundled in his node-compat library. ender-events gives you an implementation of the NodeJS EventEmitter class in your browser, while ender-assert gives you a browser version of the NodeJS assert module.
Andrew also has a tiny extension to Bonzo, the DOM utility included in Ender's starter pack (The Jeesh), named ender-remove that simply triggers a 'remove' event when nodes are removed from the DOM. Which can be helpful for performing clean-up actions.
Categorizr.js (GitHub: Skookum/categorizr.js, Licence: MIT, npm / Ender: categorizr) by Dustan Kasten is a JavaScript port of the Categorizr PHP script by Brett Jankord.
Categorizr gives you $.isDesktop() $.isTablet() $.isTV() $.isMobile() methods to determine the current device.
Arbiter (GitHub: iamdustan/arbiter, Licence: MIT, npm / Ender: arbiter) by Dustan Kasten is a tiny library for managing the HTML5 history interface via pushState(), using AJAX requests to load new content upon request.
top section is parsed by the site builder, ignore stuff up till the "You can send your..." line.
{% highlight javascript %}blocks are parsed as code blocks even though they look ugly here.