Spectrum From Master

A working demo of the latest version of spectrum colorpicker

by Torwan

HTML

<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<a href='http://bgrins.github.com/spectrum'>&lt;--Spectrum Homepage</a>

<h2>Basic Usage</h2>
<input type='text' class="basic"/>
<em id='basic-log'></em>

<h2>Full Example</h2>
<input type='text' id="full"/>
<input type='text' id="custom"/>
<div class="backg_color" style="background:#dadada;width:600px;height:200px;">
<p>
SOME TEXT
</p>
</div>

CSS

.full-spectrum .sp-palette {
/*max-width: 200px;*/
}

JavaScript

$(".basic").spectrum({
    color: "#f00",
    change: function(color) {
        $("#basic-log").text("change called: " + color.toHexString() + ", HEX: "+ color.toHsv().v + ", RGB:" + color.toRgbString());
        $('.backg_color').css({
          backgroundColor: color.toHexString(),
          color: color.toHsv().v > 0.39 ? '#333' : '#fff'
        });
        
    }
});

$("#custom").spectrum({
    color: "#ddd",
    showInput: true,
    className: "full-custom",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    chooseText: "Zatwierdź",
    cancelText: "Anuluj",
    move: function(color) {
        $('.backg_color').css({
          backgroundColor: color.toHexString(),
          color: color.toHsv().v > 0.39 ? '#333' : '#fff'
        });
        
    }
});

$("#full").spectrum({
    color: "#ECC",
    showInput: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxSelectionSize: 10,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    move: function (color) {
        
    },
    show: function () {
    
    },
    beforeShow: function () {
    
    },
    hide: function () {
    
    },
    change: function() {
        
    },
    palette: [
        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
        "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249,...