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

Sure, will upload it soon.

Cool! Or just the Javascript (for the coffeescript-disabled/frustrated). Please.

Added a js file.btw:

While it's not recommended for serious use, CoffeeScripts may be included directly within the browser using <script type="text/coffeescript"> tags. The source includes a compressed and minified version of the compiler as extras/coffee-script.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.

Hmmm... importing javascript: JQuery (1.6.3) and Tangle.js (the TangleKit js throws errors), plus the above Javascript in the head section, with both the setUpTangle function and HTML from the Tangle example, but the number isn't responding to drags - perhaps that working HTML example would be good after all... (BTW got coffeescript running in-page, but installing node.js has raised loads of issues, so trying to avoid coffeescript altogether for now)

You don't need to require Tangle. It's a replacement script. I'll open a repo in a couple of days with a more complete code and examples. I'll ping you when it's up.

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

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