JSFiddle - React, Tailwind, and code Playground

Tiny Colorpicker

by Jennifer Perrin

HTML

<div id="colorPicker">
  <a class="color">
    <div class="colorInner"></div>
  </a>
  <div class="track"></div>
  <ul class="dropdown">
    <li></li>
  </ul>
  <input type="hidden" class="colorInput" />
</div>

<a href="http://jquer.in/jquery-plugins-for-html5-canvas/tiny-colorpicker/">http://jquer.in/jquery-plugins-for-html5-canvas/tiny-colorpicker/</a>

CSS

#colorPicker {
  width: 30px;
  height: 30px;
  position: relative;
  clear: both;
  margin: 80px auto;
}

#colorPicker .track {
  background: #EFEFEF...

JavaScript

;
(function(factory) {
    if (typeof define === 'function' && define.amd) {
      define(['jquery'], factory);
    } else if (typeof exports === 'object') {
      module.exports = factory(require("jquery"));
    } else {
      factory(jQuery);
    }
  }
  (function($) {
    var pluginName = "tinycolorpicker",
      defaults = {
        colors: ["#ffffff", "#A7194B", "#FE2712", "#FB9902", "#FABC02", "#FEFE33", "#D0EA2B", "#66B032", "#0391CE", "#0247FE", "#3D01A5", "#8601AF"],
        backgroundUrl: null
      };

    function Plugin($container, options) {
      /**
       * The options of the colorpicker extended with the defaults.
       *
       * @property options
       * @type Object
       */
      this.options = $.extend({}, defaults, options);

      /**
       * @property _defaults
       * @type Object
       * @private
       * @default defaults
       */
      this._defaults = defaults;

      /**
       * @property _name
       * @type String
       * @private
       * @final
       * @default 'tinycolorpicker'
       */
      this._name = pluginName;

      var self = this,
        $track = $container.find(".track"),
        $color = $container.find(".color"),
        $canvas = null,
        $colorInput = $container.find(".colorInput"),
        $dropdown = $container.find(".dropdown"),
        $dropdownItem = $dropdown.find("li").remove()

      , context = null, mouseIsDown = false, hasCanvas = !!document.createElement("canvas").getContext, touchEvents = "ontouchstart" in document.documentElement;

      /**
       * The current active color in hex.
       *
       * @property colorHex
       * @type String
       * @default ""
       */
      this.colorHex = "";

      /**
       * The current active color in rgb.
       *
       * @property colorRGB
       * @type String
       * @default ""
       */
      this.colorRGB = "";

      /**
       * @method _initialize
       * @private
       */
      function _initialize() {
        if (hasCanvas)...