| layout | title | author | categories | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
post |
Ender Roundup: Swig, Traversty, NWMatcher, Ender-Overlay, Dagron |
Rod Vagg |
|
Swig for Ender (NPM / Ender: ender-swig), by Nicolas Chambrier, is a wrapper and build script for Swig, by Paul Armstrong. Swig is a fast template engine inspired by Django.
When included in an Ender build you get a $.swig object and a $.render method that lets you render templates from <script> tags by ID.
{% highlight html %}
<script type="text/html" id="tpl"> Hello, {{ "{{ name " }}}}. </script> <script type="text/javascript"> $.render('tpl', {"name": "dude"}) // → "Hello, dude." </script>{% endhighlight %}
Swig also includes support for template inheritance:
{% highlight html %} {% raw %}
<script type="text/html" id="parent"> Hello, {% block name %}John Doe{% endblock %}. </script> <script type="text/html" id="child"> {% extends 'parent' %} {% block name %}dude{% endblock %} </script> <script type="text/javascript"> $.render('child') // → "Hello, dude." </script>{% endraw %} {% endhighlight %}
Swig depends on Underscore.js, which will be automatically included in your Ender build.
Another popular templating library for Ender is Wings (NPM / Ender: wings) by Andrew McCollum, based on Mustache.
Traversty (NPM / Ender: traversty), by Rod Vagg, is a simple DOM traversal utility heavily inspired by Prototype's "DOM traversal toolkit". You get up(), down(), next() and previous() with optional selector and index arguments, all in a multi-element environment (jQuery-like rather than Prototype's single-element implementation).
In their simplest form, up(), down(), next() and previous() let you move around the DOM by single-element steps but can be used like an optionally indexed find() in all four directions:
{% highlight javascript %} $('#root > ul') // can match and operate on multiple elements .down(0).css('color', 'red') .next('li', 1).css('color', 'green') .next().down('li', 2).css('color', 'blue') .next().down().css('color', 'yellow') .up(2).next().css('color', 'purple'); {% endhighlight %}
Traversty has no dependencies but will detect the presence of a selector engine if included in the Ender build (officially supports Qwery, Sel Sizzle and NWMatcher). Without a selector engine, Traversty will rely on native querySelectorAll() and the various vendor-prefixed native matchesSelector() implementations (available everywhere post-IE8).
Traversty can also be used as a stand-alone library:
{% highlight javascript %} traversty('li:nth-child(20)').previous('.interesting'); {% endhighlight %}
NWMatcher (NPM / Ender: nwmatcher), by Diego Perini is a battle-hardened selector engine with a strong focus on standards compatibility. It's consistently fast across browsers and has continuing support for some very old browsers. NWMatcher became a popular alternative selector engine for Prototype users when the selector engine code was modularised in version 1.7. It continues to have a strong following, particularly amongst purists who appreciate NWMatcher's close adherence to W3C standards.
NWMatcher now has Ender support and is in NPM so can be easily included in your Ender builds: ender build nwmatcher undersore bonzo bean
Some of NWMatcher's advanced features are supported directly via Ender:
{% highlight javascript %} // adjust NWMatcher's internals $.configure({ USE_QSAPI: false, VERBOSITY: false });
// a collection containing the first match only, works like // querySelector() and halts processing upon first match $.first('div');
// just like calling
// does at least one element in the current collection match // the given selector? $('div').match('.someclass');
// alias for .match() $('div').is('.someclass');
// a new collection of child elements matching the given selector $('div').find('.someclass');
// a new collection that includes the original collection and // additional elements matching the given selector $('div').and('.someclass'); {% endhighlight %}
As with all Ender modules, the original library can be accessed via require('nwmatcher'), this gives you the same object as NW.Dom when running outside of Ender.
NWMatcher has no dependencies and can be used as a stand-alone library.
Ender-Overlay (NPM / Ender: ender-overlay), by Andras Nemeseri is a highly configurable module for building dialogs, galleries, lightboxes etc.
{% highlight html %}
{% endhighlight %}
Andras has put together a tutorial, demos and documentation covering all options, events and methods on the Ender-Overlay page.
Ender-Overlay depends on the Jeesh (Ender's official starter pack) and Morpheus for animation.
Dagron (NPM / Ender: dagron), by Dustin Diaz, is a very simple interface to HTML5 drag and droppables.
{% highlight javascript %} $('div.draggables').dagron({ // all options are 'optional' handle: 'div.handle' , target: 'div.droptarget' , start: function (el) {} // el is the item you started dragging , drag: function (el) {} // el is dragged element , drop: function (el) {} // el is the target the dragged item was dropped on , enter: function (el) {} // el is the element target you entered into , leave: function (el) {} // el is the item left from , end: function (el) {} // el is the element you stopped dragging }) {% endhighlight %}
Dagron depends on Qwery and Bean (both part of the Jeesh).
There were a couple of notable updates to Ender modules recently:
Bean, by Jacob Thornton, is Ender's default event handling library. It received a major internal overhaul and a version bump to 0.4.x. Bean has a new internal registry for storing event handler data and it no longer relies on storing an ID on your DOM elements or your JavaScript objects. There have been some small fixes and optimisations and the inclusion of a new event.stop() method that invokes both event.preventDefault() and event.stopPropagation(), but otherwise the external API remains largely untouched.
Reqwest, by Dustin Diaz, is Ender's native AJAX library, giving you a jQuery-like $.ajax() method. There are some differences in options between Reqwest and jQuery / Zepto which has caused some pain for jQuery users migrating to Ender and for libraries designed for jQuery integration, such as Backbone.js. In particular, jQuery uses type where Reqwest uses method, jQuery uses dataType where Reqwest uses type. Thankfully, Reqwest now has a compat mode. Calling $.ajax.compat() gives you access to the same option names as jQuery.
You can also install jQuery / Zepto mode as default in your projects with: $.ajax.compat && $.ender({ ajax: $.ajax.compat });
Full details can be found in the Reqwest README.
Sel, by Andrew McCollum, a selector engine for Ender, is one of the first selector engines to receive some CSS4 love. Working from the latest working draft, Andrew has enabled some excellent additions to Sel's query syntax:
{% highlight css %} /* subject overriding, was '$div .box' in a previous CSS4 draft, returns 'div' rather than '.box' */ div! .box
/* id references, 'input' who's ID matches 'label's 'for' attribute */ label /for/ input
/* case insensitive attribute matching */ [attr = "val" i]
/* :nth-match and :nth-last-match to match against sub-selectors */ div:nth-match(3 of .box)
/* links who's target absolute URI matches the current document's URI, arguments specify the degree of locality */ a:local-link(0)
/* :column */ td:column(col.profit)
/* :nth-column and :nth-last-column */ td:nth-column(even) {% endhighlight %}
The subject identifier (!) in CSS4 is going to be particularly useful for JavaScripters.
Comments, suggestions, edits welcome before @alexyoung (hopefully) takes it for publishing on dailyjs.com.
GitHub isn't doing the source justice so perhaps read it as raw.