Hashigo.js

Hashigo is spreadsheet style programming on the DOM.
Perfect for tasks like calculating totals for a shopping cart, or writing validation.

Hashigo has a wonderful shorthand that takes a selector and returns the value in the HTML element it selects. Functions that use this shorthand must be evaluated and are referred to as 'formulas'.

Downloads

http://github.com/ptetau/hashigo/downloads

API

Hashigo has two modes; formula and function.

'Formula' mode:

$(selector).calc(formula[,options]);
//Example :
$('#a').calc('${#b} + ${#c}');

'Function' mode:

$(selector).calc(function[,array of selectors,options]);
//Example :          
$('#a').calc(function(b,c){return {b + c}),['#b','#c']);

Options:

event: string of events
triggerOnLoad: boolean, run the function or formula right away
bindFn: function,  the function used to bind functions to element events

e.g.
  defaultOptions = {
    event: 'change',
    triggerOnLoad: true,
    bindFn: function($elements,fw){
      //Assign event handlers on variable elements
      $elements.live(event, fw);
  }

The examples below show you how hashigo can simplify your code.
Note: these examples use the excellent jQuery and Underscore.js libraries.

Table sum

Let's sum the values in this table and put the
result in the cell with the ID 'result'.

12

15

16 +

16

Without Hashigo :

//Select our table elements with jQuery
var $cells = $('#sum td:not(#result)');

//Map our table cells to their values
var values = $cells.map(function(i,element){return $(element).text();});

//Reduce our values to a single value 'sum'
var sumOfValues = _(values).reduce(0,function(memo,val){return memo + parseFloat(val);});

//Set our result
$('#result').text(sumOfValues);

With some Hashigo :

$('#result').calc('_(${#sum td:not(#result)}).reduce(0,function(memo, value){' +
        'return memo + parseFloat(value);' +
'});');

A hypotenuse calulator

Every right angle triangle has a hypotenuse. A hypotenuse is the longest side on any right angled triangle.

Here is a simple calculator you can use to calculate the hypotenuse of a right angled triangle:

adjacent =
opposite =
hypotenuse = sqrt(a^2 + o^2) = 

Ye olde way:

$('#a,#o').bind('keyup',function(){
        var a = $('#a').val(),
            o = $('#o').val();
                
        $('#h').val(Math.sqrt(Math.pow(a,2) + Math.pow(o,2)));
});

With some Hashigo :

$('#h').calc('Math.sqrt(Math.pow(${#a},2) + Math.pow(${#o},2));');

Username generator

Let's help our unimaginative users come up with a username for our website.
We'll generate a username with their first initial and their last name, lowercased and without spaces.

First name :
Last name :
User name :

Old school method:

$('#firstname,#lastname').bind('keyup change',function(){
        var username = $('#firstname').val().substr(0,1) + $('#lastname').val().replace(/ /g,"").toLowerCase();
        $('#username').val(username);
});

With help from Hashigo :

//Hashigo escapes all user input before it operates on it. 
//Note this for when your formulas manipulate text.
$('#username').calc('(${#firstname}.substr(0,1) + ${#lastname}).replace(/'+escape(' ')+'/g,"")').toLowerCase();

With help from Hashigo Function mode

//Hashigo can take functions too.
//Useful for long calculations(enhances readibility). It's also faster.
$('#username').calc(function(firstname,lastname){
        return (firstname.substr(0,1) + lastname).replace(/ /g,"").toLowerCase();
},['#firstname','#lastname']);

Miscellaneous examples

Other input types and how you might interact with them using Hashigo.

Select lists/Drop downs

Renaissance 8 Wired

$('#selectedOption').calc("${[name=whatBeer]};'Selected : ' + ${[name=whatBeer] option:selected};");

Check boxes

Renaissance Stonecutter Twisted Hop IPA

$('#beerCost').calc("${.beer};'Beer bill : $' + _(${.beer:checked}).reduce(0, function(memo,value){return memo + parseFloat(value);});");

Radio buttons

Half Double

$('#selectedRadioTimes10').calc("10 * ${input[name='multiplier']:checked}[0]");