CODEWITHSUNDEEP
javascriptspectrumjs
7 Reeds
7 Reeds

Reputation: 2539

Spectrum.js reset the color picker to "blank"

I am using spectrum.js as a color picker and I like it a lot. There are two things I can't figure out how to do though. My config looks like:

$("#myColorThing").spectrum({
    preferredFormat: "rgb",
    showPaletteOnly: true,
    showPalette: true,
    hideAfterPaletteSelect: true,
    color: "",
    showInput: true,
    allowEmpty: true,
    palette: [
        [
            "rgb(000,000,128)",
            "rgb(000,000,255)",
            "rgb(000,128,000)",
            "rgb(000,128,128)",
            "rgb(000,128,255)"
        ],
        [...],...
    ]
});

My questions are:

  1. I am only using the palette option and mine has 5 rows of 5 cols of colors. The rendered widget looks a bit like a drop-down with a "transparent"/checkered image implying no selection. Fine. If I activate the widget and select a color is there a way to get a do-over? Set the widget back to a no-selection state?
  2. Is related to #1. Is it possible to have that "transparent"/checkered image as a "color" option in the palette so that selecting it clears the value of the backing input filed?

Upvotes: 0

Views: 2291

Answers (1)

7 Reeds
7 Reeds

Reputation: 2539

I have found a workaround for question 1. I reformulated my code a bit. I created the base html input element to which the spectrum widget attaches. I then added a button whose onClick action does a ...spectrum("destroy") and then re-creates the spectrum instance. a la:

base html:

<div id='colorDiv' class='form-group'>
     <label for='myColorThing'>Event Color</label>
     <input type='text' name='myColorThing' id='myColorThing'>
     <button id='defaultColor' class='btn btn-sm btn-default'>Default Color</button>
</div>

js routine to do the resetting magic:

$("#defaultColor").on("click", function () {
    resetColorPicker();
});

function resetColorPicker() { 
    $("#myColorThing").spectrum("destroy");
    $("#myColorThing").val("");

    $("#myColorThing").spectrum({
        preferredFormat: "rgb",
        showPaletteOnly: true,
        showPalette: true,
        hideAfterPaletteSelect: true,
        color: "",
        showInput: true,
        allowEmpty: true,
        palette: [
            [
                "rgb(000,000,128)",
                "rgb(000,000,255)",
                "rgb(000,128,000)",
                "rgb(000,128,128)",
                "rgb(000,128,255)"
            ],
            [...],...
        ]
    });
}

Upvotes: 0

Related Questions