verdict.coffe - tangle.js for jQuery (but smaller)

tangle.css

.CursorDragHorizontal {
	cursor: col-resize;
}


/* TKToggle */

.TKToggle {
	color: #46f;
	border-bottom: 1px dashed #46f;
	cursor: pointer;
}


/* TKAdjustableNumber */

.TKAdjustableNumber {
	position:relative;
	color: #46f;
	border-bottom: 1px dashed #46f;
	cursor: col-resize;
}

.unselectable {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

verdict.coffee

###
                  Verdict.coffee 0.0.0.0.0.1
 (c) 2011 Radagaisus MIT open-source license
 Inspired by tangle.js - http://worrydream.com/Tangle/
 
 requirements: jQuery        - http://www.jquery.com/
###
###               NO GUARANTEES, LOOK MA NO HANDS!                    ###
### 
 usage:
  add adjustable_number class if you want some spiffy css
  $("#cookies").numbers
    max: 200
    min: 0
    step: 1
###

(($) ->
  $.fn.numbers = (o) ->
    defaults =
      max: 200
      min: 0
      step: 1
    
    o = $.extend defaults, o
    
    # Add the event handlers
    number_drag = (elem) ->
      elem.mousedown (e) ->
        x = e.pageX
        elem.addClass('TKAdjustableNumberDown').parent().addClass('unselectable')
        $("body").addClass('CursorDragHorizontal')
        $(window).bind 'mousemove.numbers', (change) ->
          # pageX is cross-browser normalized by jQuery
          dir = 2 * (x < change.pageX) - 1 # if x < change.pageX then 1 else -1 :-)
          val = Number(elem.text())
          elem.text(o.max) if val + dir * o.step > o.max
          elem.text(o.min) if val + dir * o.step < o.min
          elem.text(val + dir * o.step)
          
          elem.trigger 'verdict_change', Number(elem.text())
      
      $(window).mouseup ->
        elem.removeClass('TKAdjustableNumberDown').parent().removeClass('unselectable')
        $(window).unbind 'mousemove.numbers'
        $("body").removeClass('CursorDragHorizontal')
    
    @each ->
      number_drag $(@)
)(jQuery)


### 
 usage:
  add adjustable_bool class if you want some spiffy css
  $("#cookies").bool_select
    first: 'something'
    second: 'another thing'
###
(($) ->
  $.fn.bool_select = (o) ->
    
    # Add the event handlers
    bool = (elem, first) ->
      elem.click (e) ->
        log elem.text() == o.second
        if elem.text() == o.first then elem.text(o.second) else elem.text(o.first)
        elem.trigger('verdict_change', elem.text())
    
    @each ->
      bool $(@), 
)(jQuery)

verdict.js

  /*
                    Verdict.coffee 0.0.0.0.0.1
   (c) 2011 Radagaisus MIT open-source license
   Inspired by tangle.js - http://worrydream.com/Tangle/
   
   requirements: jQuery        - http://www.jquery.com/
  */

  /* 
   usage:
    add adjustable_number class if you want some spiffy css
    $("#cookies").numbers
      max: 200
      min: 0
      step: 1
  */

  (function($) {
    return $.fn.numbers = function(o) {
      var defaults, number_drag;
      defaults = {
        max: 200,
        min: 0,
        step: 1
      };
      o = $.extend(defaults, o);
      number_drag = function(elem) {
        elem.mousedown(function(e) {
          var x;
          x = e.pageX;
          elem.addClass('TKAdjustableNumberDown').parent().addClass('unselectable');
          $("body").addClass('CursorDragHorizontal');
          return $(window).bind('mousemove.numbers', function(change) {
            var dir, val;
            dir = 2 * (x < change.pageX) - 1;
            val = Number(elem.text());
            if (val + dir * o.step > o.max) elem.text(o.max);
            if (val + dir * o.step < o.min) elem.text(o.min);
            elem.text(val + dir * o.step);
            return elem.trigger('verdict_change', Number(elem.text()));
          });
        });
        return $(window).mouseup(function() {
          elem.removeClass('TKAdjustableNumberDown').parent().removeClass('unselectable');
          $(window).unbind('mousemove.numbers');
          return $("body").removeClass('CursorDragHorizontal');
        });
      };
      return this.each(function() {
        return number_drag($(this));
      });
    };
  })(jQuery);

  /* 
   usage:
    add adjustable_bool class if you want some spiffy css
    $("#cookies").bool_select
      first: 'something'
      second: 'another thing'
  */

  (function($) {
    return $.fn.bool_select = function(o) {
      var bool;
      bool = function(elem, first) {
        return elem.click(function(e) {
          log(elem.text() === o.second);
          if (elem.text() === o.first) {
            elem.text(o.second);
          } else {
            elem.text(o.first);
          }
          return elem.trigger('verdict_change', elem.text());
        });
      };
      return this.each(function() {
        return bool($(this));
      });
    };
  })(jQuery);

Great. When up, I'll use it right away.

A more decent version is now up, page is at http://radagaisus.github.com/verdict/