DailyJS

DailyJS

The JavaScript blog.


Tagselectorengines
Featured

jquery plugins selectorengines

jQuery Roundup: New Sizzle, HubInfo, Select2

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

The New Sizzle

In The New Sizzle, Timmy Wilson explains how jQuery's revised CSS selector engine works. Timmy has compared it to other selector engines, and shows how the new implementation differs to the previous version.

The part about extensibility is promising:

... there are a couple changes that make Sizzle even more extensible. Now with the parser compiling a function of functions, you can receive more information when creating your custom selector. Sizzle.compileis exposed so you can cache your selectors before they get used. While compiling is still very fast without caching, you can make sure that step is skipped before the selection is ever run.

HubInfo

HubInfo (GitHub: jgallen23 / hubinfo, License: MIT) by Greg Allen displays a GitHub repository widget. It comes bundled with CSS, so it's easy to get something looking good straight away with a small amount of JavaScript:

$('#hubInfo').hubInfo({ 
  user: 'alexyoung'
, repo: 'dailyjs'
});

The hubInfo method returns an object that will fire a render event. The project's documentation shows this being used to add a Twitter share button.

Select2

Select2 (GitHub: ivaynberg / select2, License: Apache 2.0) by Igor Vaynberg is a select box replacement that features a similar style to the popular Chosen library. Unlike Chosen, the author has made Select2 work better with large data sets -- results can be paginated, and infinite scrolling is supported.

There's an active community of Select2 users at the Select2 Google Group, and there's lots of demos and documentation on the project's homepage.

Featured

frameworks libraries events templating dom modules ender dnd selectorengines css4

Ender Roundup: Swig, Traversty, NWMatcher, Ender-Overlay, Dagron

Posted on .

You can send in your Ender-related projects for review through our contact form or @dailyjs. Be sure to also update the Ender package list page on the Ender wiki.

Swig for Ender

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.

<script type="text/html" id="tpl">  
Hello, {{ "{{ name " }}}}.  
</script>

<script type="text/javascript">  
$.render('tpl', {"name": "dude"}) // →  "Hello, dude."
</script>  

Swig also includes support for template inheritance:

{% 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 %}

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

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:

$('#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');

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:

traversty('li:nth-child(20)').previous('.interesting');  

NWMatcher

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:

// 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 $('div', root) but will trigger a callback
// function on each match found
$.select('div', root, callback);

// 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');

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

Ender-Overlay (npm / Ender: ender-overlay), by Andras Nemeseri is a highly configurable module for building dialogs, galleries, lightboxes etc.

<a id="trigger-vimeo" class="thumbs"><img src="http://www.samholdren.com/vimeo-Logo2.png" alt="Vimeo HTML5 Embed" width="100" height="100"></a>

<div id="overlay-vimeo" class="ender-overlay overlay-vimeo">  
  <a class="close close-button" title="Close">&#9747;</a>
  <iframe src="http://player.vimeo.com/video/12132621?title=0&byline=0&portrait=0" width="601" height="338" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>

<script type="text/javascript">  
$(document).ready(function() {
  $("#overlay-vimeo").overlay({ trigger: "#trigger-vimeo" });
});
</script>  

Ender-Overlay

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

Dagron (npm / Ender: dagron), by Dustin Diaz, is a very simple interface to HTML5 drag and droppables.

$('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
})

Dagron depends on Qwery and Bean (both part of the Jeesh).

Tidbits

There were a couple of notable updates to Ender modules recently:

Bean

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 gets jQuery compatibility

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 gets CSS4

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:

/* 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)

The subject identifier (!) in CSS4 is going to be particularly useful for JavaScripters.