jQuery Plugin for Spin.js (Coffescript)

jquery.spin.coffee

# A jQuery Wrapper around spin.js
# Has sane defaults and uses the color attribute of the target selector
#
# http://fgnass.github.com/spin.js/
#
# preset_name - size of spinner: 'small' or 'large'
# customizations - any option from spin.js
#
# Examples:
#
#   // start a normal spinner
#   $('.loader').spin()
#
#   // start a normal black spinner
#   $('.loader').spin('', {color: '#000'})
#
#   // start a large black spinner
#   $('.loader').spin('large', {color: '#000'})
#
#   // stop a spinner
#   $('.loader').spin(false)
#
# Returns the jQuery element so it is chainable.
$.fn.spin = (preset_name = '', customizations = {}) ->
  options =
    lines:   9
    length:  4
    width:   3
    radius:  6
    rotate:  0
    speed:   1
    trail:   76
    opacity: 1/4
    zIndex:  2e9
    shadow:  false
    fps:     20
    hwaccel: true
    className: "spinner"
    top:       "auto"
    left:      "auto"

  presets =
    small:  { lines: 8,  length: 2, width: 2, radius: 3 },
    large:  { lines: 10, length: 8, width: 4, radius: 8 }

  preset = presets[preset_name]

  @each ->
    $this = $(this)

    color =
      color: $this.css("color")

    $.extend(options, color, preset, customizations)

    data = $this.data()
    if data.spinner
      data.spinner.stop()
      delete data.spinner

    if preset_name isnt false
      data.spinner = new Spinner(options).spin(this)
  this

jquery.spin.js

// A jQuery Wrapper around spin.js
// Has sane defaults and uses the color attribute of the target selector
//
// http://fgnass.github.com/spin.js/
//
// preset_name - size of spinner: 'small' or 'large'
// customizations - any option from spin.js
//
// Examples:
//
//   // start a normal spinner
//   $('.loader').spin()
//
//   // start a normal black spinner
//   $('.loader').spin('', {color: '#000'})
//
//   // start a large black spinner
//   $('.loader').spin('large', {color: '#000'})
//
//   // stop a spinner
//   $('.loader').spin(false)
//
// Returns the jQuery element so it is chainable.
$.fn.spin = function(preset_name, customizations) {
  var options, preset, presets;
  if (preset_name == null) preset_name = '';
  if (customizations == null) customizations = {};
  options = {
    lines: 9,
    length: 4,
    width: 3,
    radius: 6,
    rotate: 0,
    speed: 1,
    trail: 76,
    opacity: 1 / 4,
    zIndex: 2e9,
    shadow: false,
    fps: 20,
    hwaccel: true,
    className: "spinner",
    top: "auto",
    left: "auto"
  };
  presets = {
    small: {
      lines: 8,
      length: 2,
      width: 2,
      radius: 3
    },
    large: {
      lines: 10,
      length: 8,
      width: 4,
      radius: 8
    }
  };
  preset = presets[preset_name];
  this.each(function() {
    var $this, color, data;
    $this = $(this);
    color = {
      color: $this.css("color")
    };
    $.extend(options, color, preset, customizations);
    data = $this.data();
    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (preset_name !== false) {
      return data.spinner = new Spinner(options).spin(this);
    }
  });
  return this;
};