gistfile1.js

DV.HSL = function(opts) {
  var _defaults = {
    hue: 0.0,
    sat: 0.0,
    lum: 0.0,
    hex: null
  };

  this.config = $.extend(this._defaults, opts);

  this.hue_to_rgb = function(p, q, t) {
    if (t < 0)    t += 1;
    if (t > 1)    t -= 1;
    if (t < 1/6)  return p + (q - p) * 6 * t;
    if (t < 1/2)  return q;
    if (t < 2/3)  return p + (q - p) * (2/3 - t) * 6;

    return p;
  };

  this.h = function() {
    return this.config.hue;
  };

  this.s = function() {
    return this.config.sat;
  };

  this.l = function() {
    return this.config.lum;
  };

  this.to_hsl = function() {
    return {
      hue: this.h(),
      sat: this.s(),
      lum: this.l()
    };
  };

  this.to_rgb = function() {
    var r, g, b;

    if (this.s() == 0){
        r = g = b = this.l();
    } else {
        var q = this.l() < 0.5 ? this.l() * (1 + this.s()) : this.l() + this.s() - this.l() * this.s();
        var p = 2 * this.l() - q;

        r = this.hue_to_rgb(p, q, this.h() + 1/3);
        g = this.hue_to_rgb(p, q, this.h());
        b = this.hue_to_rgb(p, q, this.h() - 1/3);
    }

    return {
      r: Math.round(r * 255), 
      g: Math.round(g * 255),
      b: Math.round(b * 255)
    };
  };

  this.to_rgb_hex = function() {
    var rgb = this.to_rgb();
    var hex = rgb.r | (rgb.g << 8) | (rgb.b << 16); // TODO: Gimme blow job for getting bit-shifty

    hex = hex.toString(16);
    while (hex.length < 6) { hex = '0' + hex; }
    return hex;
  };


  this.update = function(hsl) {
    this.config = $.extend(this.config, hsl);
    var rgb     = this.to_rgb_hex();
    this.config.hex.val('#' + rgb).css('background-color', '#' + rgb);
  };
};


DV.HSL.Slider = function(opts) {
  var _defaults = {
    elmnt:      null,
    val:        0.0,
    on_change:  function() {}
  };

  this.init = function() {
    var that = this;

    that.config = $.extend(that._defaults, opts);
    that.change(that.val());

    that.config.elmnt.mousedown(function(e) {
      that.is_dragging = true;
      that.drag($(this), e.pageX);
      e.stopPropagation();
      return false;
    }).mousemove(function(e) {
      that.drag($(this), e.pageX);
    }).mouseup(function(e) {
      that.is_dragging = false;
      e.stopPropagation();
      return false;
    }).mouseleave(function(e) {
      
    });
  };

  this.drag = function(el, pos) {
    if (this.is_dragging) {
      var elmnt = $(el);
      var x     = pos - elmnt.offset().left;
      var val   = (x / elmnt.width()) * 100;

      if (val >= 100 || val <= 0) {
        this.is_dragging = false;
        return;
      }

      this.change(val);
    }
  };

  this.change = function(val) {
    var offset = (this.button().width() / this.elmnt().width()) * 100;
    if (val < 100 || val > 0) {
      this.button().css('left', val - (offset / 2) + '%');
      this.config.val = val;
      this.config.on_change(val);
    }
  };

  this.button = function() {
    return this.config.elmnt.children();
  };

  this.elmnt = function() {
    return this.config.elmnt;
  };

  this.val = function() {
    return this.config.val;
  };

  this.is_dragging = false;

  this.init();
};

$(document).ready(function() {
  var hsl = new DV.HSL({
    hue: 0,
    lum: 0,
    sat: 0,
    hex: $('.colorpicker input.hex')
  });

  var hue = $('.colorpicker .slider.hue');
  var sat = $('.colorpicker .slider.sat');
  var lum = $('.colorpicker .slider.lum');

  var hue_slider = new DV.HSL.Slider({
    elmnt:      hue,
    val:        hsl.h() * 100,
    on_change:  function(val) {
      if (val > 99) val = 100;
      if (val < 1)  val = 0;
      hsl.update({hue: val / 100});
    }
  });

  var sat_slider = new DV.HSL.Slider({
    elmnt:      sat,
    val:        hsl.s() * 100,
    on_change:  function(val) {
      if (val > 99) val = 100;
      if (val < 1)  val = 0;
      hsl.update({sat: val / 100});
    }
  });

  var lum_slider = new DV.HSL.Slider({
    elmnt:      lum,
    val:        hsl.l() * 100,
    on_change:  function(val) {
      if (val > 99) val = 100;
      if (val < 1)  val = 0;
      hsl.update({lum: val / 100});
    }
  });
});