bgrins/spectrum

Change event fires from everywhere!???

maen007 opened this issue · 1 comments

maen007 commented

Here's the html syntax:

<body>
    <h1>Hello!</h1>
    <div id="preview">
        <canvas id="canvas-prev" resize="false"></canvas>
        <input id='flatClearable' value="hsla(240, 100%, 50%, 0.71)" style="display: none;" type="text" />        
    </div>
    

    <div id="ctrl"> ...

and here the doc.js:

$(function() {

$("#flatClearable").spectrum({
    flat: true,
    change: function(c) {
        var ColorRGBPercentage = c.toRgbString();
        window.globals.getSVGColor(ColorRGBPercentage);
    },
    preferredFormat: "rgb",
    showInput: true,
    showPalette: true,
    palette:[["hsla(0,0,0,0)"],[],
    ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
    ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
    ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
    ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
    ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
    ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
    ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
    ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
    ],
    localStorageKey: "spectrum.homepage",
    maxSelectionSize: 7,
    showAlpha: true,
    allowEmpty:false,
    chooseText: "Alright",
    cancelText: "",
    showInput: true
});

var ext_insertColor = function (Color) {        
    $("#flatClearable").value = Color;
    $("#flatClearable").spectrum("set",Color);
}
window.globals.SetColor = ext_insertColor;

});

And with everywhere I mean the complete document!

karteekkommana commented

Hi this snippet fixed the problem with triggering change event when click on any where on the document..

// this will prevent color change on clicking on the body of the page
$('body').bind("click.spectrum", function (e) {
revert();
hide();
});