JSFiddle - React, Tailwind, and code Playground

by Adambasszer

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="colorShape.js"></script>
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.2.js"></script>

<html>
<div id="wrapper">


    <div class="form-container">
    <form action="#" method="post">
        <fieldset>
            <div class="controlset"><label for="color1">Color </label> <input id="color1" type="text" name="color1" value="#99cc00" /></div>
            <div class="controlset"><label for="color2">Shape</label><a onclick=changeShape("rec")>rectangle</a> <a onclick=changeShape('tri')>circle</a></div>

        </fieldset>
        
  <canvas id="shape-picker"></canvas>


        
    </form>
    </div>
</div>
</html>

CSS

div.colorPicker-picker {
  height: 16px;
  width: 16px;
  padding: 0 !important;
  border: 1px solid #ccc;
  background: url(http://laktek.github.com/really-simple-color-picker/arrow.gif) no-repeat top right;
  cursor: pointer;
  line-height: 16px;
}

div.colorPicker-palette {
  width: 110px;
  position: absolute;
  border: 1px solid #598FEF;
  background-color: #EFEFEF;
  padding: 2px;
  z-index: 9999;
}
  div.colorPicker_hexWrap {width: 100%; float:left }
  div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
  div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }

div.colorPicker-swatch {
  height: 24px;
  width: 24px;
  border: 1px solid #000;
  margin: 2px;
  float: left;
  cursor: pointer;
  line-height: 12px;
}

/*
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
*/

/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }

p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }

div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}

div.form-container div.controlset label, 
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }

div.form-container div.controlset label { width: 100px;}

JavaScript

(function(a) {
    var firstPicker = true;
    var b, c, d, e = {
        control: a('<div class="colorPicker-picker">&nbsp;</div>'),
        palette: a('<div id="colorPicker_palette" class="colorPicker-palette" />'),
        swatch: a('<div class="colorPicker-swatch">&nbsp;</div>'),
        hexLabel: a('<label for="colorPicker_hex">Hex</label>'),
        hexField: a('<input type="text" id="colorPicker_hex" />')
    },
        f = "transparent",
        g;
    a.fn.colorPicker = function(b) {
        return this.each(function() {
            var c = a(this),
                g = a.extend({}, a.fn.colorPicker.defaults, b),
                h = a.fn.colorPicker.toHex(c.val().length > 0 ? c.val() : g.pickerDefault),
                i = e.control.clone(),
                j = e.palette.clone().attr("id", "colorPicker_palette-" + d),
                k = e.hexLabel.clone(),
                l = e.hexField.clone(),
                m = j[0].id,
                n;
            a.each(g.colors, function(b) {
                n = e.swatch.clone(), g.colors[b] === f ? (n.addClass(f).text("X"), a.fn.colorPicker.bindPalette(l, n, f)) : (n.css("background-color", "#" + this), a.fn.colorPicker.bindPalette(l, n)), n.appendTo(j)
            }), k.attr("for", "colorPicker_hex-" + d), l.attr({
                id: "colorPicker_hex-" + d,
                value: h
            }), l.bind("keydown", function(b) {
                if (b.keyCode === 13) {
                    var d = a.fn.colorPicker.toHex(a(this).val());
                    a.fn.colorPicker.changeColor(d ? d : c.val())
                }
                b.keyCode === 27 && a.fn.colorPicker.hidePalette()
            }), l.bind("keyup", function(b) {
                var d = a.fn.colorPicker.toHex(a(b.target).val());
                a.fn.colorPicker.previewColor(d ? d : c.val())
            }), a('<div class="colorPicker_hexWrap" />').append(k).appendTo(j), j.find(".colorPicker_hexWrap").append(l), a("body").append(j), j.hide(),...