src/index.js
function SimpleColorPicker(options) {
  // Options
  options = options || {};

  // Properties
  this.color = null;
  this.width = 0;
  this.widthUnits = 'px';
  this.height = 0;
  this.heightUnits = 'px';
  this.hue = 0;
  this.position = {x: 0, y: 0};
  this.huePosition = 0;
  this.saturationWidth = 0;
  this.hueHeight = 0;
  this.maxHue = 0;
  this.inputIsNumber = false;

  // Bind methods to scope (if needed)
  this._onSaturationMouseDown = this._onSaturationMouseDown.bind(this);
  this._onSaturationMouseMove = this._onSaturationMouseMove.bind(this);
  this._onSaturationMouseUp = this._onSaturationMouseUp.bind(this);
  this._onHueMouseDown = this._onHueMouseDown.bind(this);
  this._onHueMouseMove = this._onHueMouseMove.bind(this);
  this._onHueMouseUp = this._onHueMouseUp.bind(this);

  // Register window and document references in case this is instantiated inside of an iframe
  this.window = options.window || window;
  this.document = this.window.document

  // Create DOM
  this.$el = this.document.createElement('div');
  this.$el.className = 'Scp';
  this.$el.innerHTML = [
    '<div class="Scp-saturation">',
      '<div class="Scp-brightness"></div>',
      '<div class="Scp-sbSelector"></div>',
    '</div>',
    '<div class="Scp-hue">',
      '<div class="Scp-hSelector"></div>',
    '</div>'
  ].join('');

  // DOM accessors
  this.$saturation = this.$el.querySelector('.Scp-saturation');
  this.$hue = this.$el.querySelector('.Scp-hue');
  this.$sbSelector = this.$el.querySelector('.Scp-sbSelector');
  this.$hSelector = this.$el.querySelector('.Scp-hSelector');

  // Event listeners
  this.$saturation.addEventListener('mousedown', this._onSaturationMouseDown);
  this.$saturation.addEventListener('touchstart', this._onSaturationMouseDown);
  this.$hue.addEventListener('mousedown', this._onHueMouseDown);
  this.$hue.addEventListener('touchstart', this._onHueMouseDown);

  // Some styling and DOMing from options
  if (options.el) {
    this.appendTo(options.el);
  }
  if (options.background) {
    this.setBackgroundColor(options.background);
  }
  if (options.widthUnits) {
    this.widthUnits = options.widthUnits;
  }
  if (options.heightUnits) {
    this.heightUnits = options.heightUnits;
  }
  this.setSize(options.width || 175, options.height || 150);
  this.setColor(options.color);

  return this;
}
function SimpleColorPicker(options) {
  // Options
  options = options || {};

  // Properties
  this.color = null;
  this.width = 0;
  this.widthUnits = 'px';
  this.height = 0;
  this.heightUnits = 'px';
  this.hue = 0;
  this.position = {x: 0, y: 0};
  this.huePosition = 0;
  this.saturationWidth = 0;
  this.hueHeight = 0;
  this.maxHue = 0;
  this.inputIsNumber = false;

  // Bind methods to scope (if needed)
  this._onSaturationMouseDown = this._onSaturationMouseDown.bind(this);
  this._onSaturationMouseMove = this._onSaturationMouseMove.bind(this);
  this._onSaturationMouseUp = this._onSaturationMouseUp.bind(this);
  this._onHueMouseDown = this._onHueMouseDown.bind(this);
  this._onHueMouseMove = this._onHueMouseMove.bind(this);
  this._onHueMouseUp = this._onHueMouseUp.bind(this);

  // Register window and document references in case this is instantiated inside of an iframe
  this.window = options.window || window;
  this.document = this.window.document

  // Create DOM
  this.$el = this.document.createElement('div');
  this.$el.className = 'Scp';
  this.$el.innerHTML = [
    '<div class="Scp-saturation">',
      '<div class="Scp-brightness"></div>',
      '<div class="Scp-sbSelector"></div>',
    '</div>',
    '<div class="Scp-hue">',
      '<div class="Scp-hSelector"></div>',
    '</div>'
  ].join('');

  // DOM accessors
  this.$saturation = this.$el.querySelector('.Scp-saturation');
  this.$hue = this.$el.querySelector('.Scp-hue');
  this.$sbSelector = this.$el.querySelector('.Scp-sbSelector');
  this.$hSelector = this.$el.querySelector('.Scp-hSelector');

  // Event listeners
  this.$saturation.addEventListener('mousedown', this._onSaturationMouseDown);
  this.$saturation.addEventListener('touchstart', this._onSaturationMouseDown);
  this.$hue.addEventListener('mousedown', this._onHueMouseDown);
  this.$hue.addEventListener('touchstart', this._onHueMouseDown);

  // Some styling and DOMing from options
  if (options.el) {
    this.appendTo(options.el);
  }
  if (options.background) {
    this.setBackgroundColor(options.background);
  }
  if (options.widthUnits) {
    this.widthUnits = options.widthUnits;
  }
  if (options.heightUnits) {
    this.heightUnits = options.heightUnits;
  }
  this.setSize(options.width || 175, options.height || 150);
  this.setColor(options.color);

  return this;
}
function SimpleColorPicker ( options ) { // Options options = options || { } ; // Properties this . color = null ; this . width = 0 ; this . widthUnits = 'px' ; this . height = 0 ; this . heightUnits = 'px' ; this . hue = 0 ; this . position = { x : 0 , y : 0 } ; this . huePosition = 0 ; this . saturationWidth = 0 ; this . hueHeight = 0 ; this . maxHue = 0 ; this . inputIsNumber = false ; // Bind methods to scope (if needed) this . _onSaturationMouseDown = this . _onSaturationMouseDown . bind ( this ) ; this . _onSaturationMouseMove = this . _onSaturationMouseMove . bind ( this ) ; this . _onSaturationMouseUp = this . _onSaturationMouseUp . bind ( this ) ; this . _onHueMouseDown = this . _onHueMouseDown . bind ( this ) ; this . _onHueMouseMove = this . _onHueMouseMove . bind ( this ) ; this . _onHueMouseUp = this . _onHueMouseUp . bind ( this ) ; // Register window and document references in case this is instantiated inside of an iframe this . window = options . window || window ; this . document = this . window . document // Create DOM this . $el = this . document . createElement ( 'div' ) ; this . $el . className = 'Scp' ; this . $el . innerHTML = [ '<div class="Scp-saturation">' , '<div class="Scp-brightness"></div>' , '<div class="Scp-sbSelector"></div>' , '</div>' , '<div class="Scp-hue">' , '<div class="Scp-hSelector"></div>' , '</div>' ] . join ( '' ) ; // DOM accessors this . $saturation = this . $el . querySelector ( '.Scp-saturation' ) ; this . $hue = this . $el . querySelector ( '.Scp-hue' ) ; this . $sbSelector = this . $el . querySelector ( '.Scp-sbSelector' ) ; this . $hSelector = this . $el . querySelector ( '.Scp-hSelector' ) ; // Event listeners this . $saturation . addEventListener ( 'mousedown' , this . _onSaturationMouseDown ) ; this . $saturation . addEventListener ( 'touchstart' , this . _onSaturationMouseDown ) ; this . $hue . addEventListener ( 'mousedown' , this . _onHueMouseDown ) ; this . $hue . addEventListener ( 'touchstart' , this . _onHueMouseDown ) ; // Some styling and DOMing from options if ( options . el ) { this . appendTo ( options . el ) ; } if ( options . background ) { this . setBackgroundColor ( options . background ) ; } if ( options . widthUnits ) { this . widthUnits = options . widthUnits ; } if ( options . heightUnits ) { this . heightUnits = options . heightUnits ; } this . setSize ( options . width || 175 , options . height || 150 ) ; this . setColor ( options . color ) ; return this ; }
Creates a new SimpleColorPicker
@param {Object} options
@param {String|Number|Object} options.color The default color that the picker will display. Default is #FFFFFF. It can be a hexadecimal number or an hex String.
@param {String|Number|Object} options.background The background color of the picker. Default is transparent. It can be a hexadecimal number or an hex String.
@param {HTMLElement} options.el A dom node to add the picker to. You can also use `colorPicker.appendTo(domNode)` afterwards if you prefer.
@param {Number} options.width Desired width of the color picker. Default is 175.
@param {Number} options.height Desired height of the color picker. Default is 150.
Creates a new SimpleColorPicker