Color Swatch

by Chance Nursey-Bush

HTML

<div id="divSwatches">
  <input id="inputDoSomething" type="text" />
  <button id="btnChangeSwatchColor">Change Swatch Color</button>
  <br>
</div>

CSS

.colorSwatch {
  width: 15px;
  height: 15px;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
  display: inline-block;
  border: 1px solid gray;
  vertical-align: middle;
  border-radius: 4px;
  /*background: #FFFFFF;*/
}

JavaScript

var ColorSwatchManager = ColorSwatchManager || {
  Swatches: {},
  CreateColorSwatch: function(params) {
    this.SetColorSwatch(params.id, new ColorSwatch(params))
  },
  SetColorSwatch: function(id, colorSwatch) {
    this.Swatches[id] = colorSwatch;
  },
  GetColorSwatch: function(id) {
    if (this.Swatches[id]) return this.Swatches[id];
    else return null;
  },
  GetColorSwatchColor: function(id) {
    var colorSwatch = this.GetColorSwatch(id.split("span_")[1]);
    if (colorSwatch) return colorSwatch.GetColor();
  },
  SetColorSwatchColor: function(id, color) {
    var colorSwatch = this.GetColorSwatch(id);
    if (colorSwatch) {
      colorSwatch.color = color;
      colorSwatch.BuildSwatch();
      colorSwatch.DisplayInDiv();
    }
  }
}

var ColorSwatch = ColorSwatch || function(params) {
  this.containerId = params.containerId;
  this.id = params.id;
  this.spanId = "span_" + params.id;
  this.cssClass = params.cssClass;
  this.color = params.color;
  this.options = {};
  var options = typeof params.options !== "undefined" ? params.options : {};

  this.options.css = typeof options.css !== "undefined" ? options.css : null;
  //this.options.includeDiv = typeof options.includeDiv !== "undefined" ? options.includeDiv : true;

  this.onclick = typeof params.onclick !== "undefined" ? params.onclick : null;

  this.BuildSwatch();
  this.BuildSwatchDiv();
  this.DisplaySwatch();
}

ColorSwatch.prototype = {
  constructor: ColorSwatch,
  BuildSwatchDiv: function() {
  var html = [];
    html[html.length] = "<div id='" + this.id + "' style='display:inline-block'>";
    html[html.length] = this.GetSpanHtml();
    html[html.length] = "</div>";
    this.divHtml = html.join("");
  },
  BuildSwatch: function() {
    var html = [];
    html[html.length] = "<span";
    html[html.length] = " class='" + this.cssClass + "'";
    html[html.length] = " id='" + this.spanId + "'";

    html[html.length] = " style='";
    html[html.length] = "background:#" + this.color +...