sorta

Preserve the ordering of html elements in the browser as updates stream in.

examples

voting all in browser

See this example live.

var sorta = require('sorta');
var $ = require('jquery-browserify');

var s = sorta(function (row) {
    var name = $('').attr('class', 'name').text(row.key);
    var rank = $('').attr('class', 'rank');
    var score = $('').attr('class', 'score');

var up = $('<input>')
    .attr('type', 'button')
    .val('+')
    .click(function () { row.update(row.value + 1) })
;

var down = $('<input>')
    .attr('type', 'button')
    .val('-')
    .click(function () { row.update(Math.max(0, row.value - 1)) })
;

row.on('update', function () {
    rank.text(row.index + 1);
    score.text(row.value);
});

return $('<div>').append(
    '#', rank, ' ', name, ', ', score, ' points', up, down
)[0];
}); s.appendTo(document.body); s.write({ key : 'robots', value : 0 }); s.write({ key : 'dinosaurs', value : 0 }); s.write({ key : 'insects', value : 0 }); s.write({ key : 'electromagnets', value : 0 });

streaming events from the server

http server to spam updates at the browser:

var http = require('http');
var ecstatic = require('ecstatic')(__dirname + '/static');
var server = http.createServer(ecstatic);
server.listen(8002);

var JSONStream = require('JSONStream');
var shoe = require('shoe');

var sock = shoe(function (stream) {
    var str = JSONStream.stringify();
    str.pipe(stream);

var rows = { x : 0, y : 0, z : 0, a : 0, b : 0, c : 0 };

Object.keys(rows).forEach(function (key) {
    str.write({ key : key, value : rows[key] });
});

var iv = setInterval(function () {
    var keys = Object.keys(rows);
    var key = keys[Math.floor(Math.random() * keys.length)];
    rows[key] += 5;
    str.write({ key : key, value : rows[key] });
}, 100);

var onend = function () { clearInterval(iv) };
stream.on('end', onend);
stream.on('error', onend);
}); sock.install(server, '/updates');

browser code:

var sorta = require('sorta');
var $ = require('jquery-browserify');

var JSONStream = require('JSONStream');
var parser = JSONStream.parse([ true ]);

var shoe = require('shoe');
var stream = shoe('/updates');
stream.pipe(parser);

var s = sorta(function (row) {
    var name = $('').attr('class', 'name').text(row.key);
    var rank = $('').attr('class', 'rank');
    var score = $('').attr('class', 'score');

row.on('update', function () {
    rank.text(row.index + 1);
    score.text(row.value);
});

return $('<div>').append('#', rank, ' ', name, ', ', score, ' points')[0];
}); parser.pipe(s); s.appendTo(document.body);

methods

var sorta = require('sorta')

var s = sorta(opts={}, createElement)

Return a new writable stream. Incoming writes must be row objects with 'key'
and 'value' properties.

The createElement(row) function is called every time a new key shows up.
createElement(row) should return a new html dom element for the row object.

By default html elements are listed in descending order with this sorting
function:

function (a, b) {
    if (a < b) return 1;
    if (a > b) return -1;
    return 0;
}

You use a custom comparison function by setting opts.compare.

s.write(row)

Create or update the row at row.key with the new value from row.value.

If row.value === undefined, the element named by row.key will be removed.

s.appendTo(target)

Append the s.element html element to the target element.

row.update(value)

Set a new value for the row object explicitly. This is the same as
s.write({ key : row.key, value : row.value }).

events

s.on('update', function (row) { ... })

Triggered when a row gets updated or created.

s.on('remove', function (row) { ... })

Fires when a row gets removed.

row.on('update', function () { ... })

Fired when a row gets updated.

row.on('remove', function () { ... })

Fired when a row gets removed.

attributes

sorta.element

html dom element that contains all the rows

install

With npm do:

npm install sorta

This module is intended to be used with a node-style module system.
Use browserify or similar.

license

MIT