Spectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.
+ The default value for togglePaletteOnly is FALSE. Set it to TRUE to enable the Toggle button.
+ You can also change the text on the Toggle Button with the options togglePaletteMoreText (default is "more") and togglePaletteLessText (default is "less").
",
@@ -194,6 +200,7 @@
boundElement = $(element),
disabled = false,
container = $(markup, doc).addClass(theme),
+ pickerContainer = container.find(".sp-picker-container"),
dragger = container.find(".sp-color"),
dragHelper = container.find(".sp-dragger"),
slider = container.find(".sp-hue"),
@@ -207,6 +214,7 @@
cancelButton = container.find(".sp-cancel"),
clearButton = container.find(".sp-clear"),
chooseButton = container.find(".sp-choose"),
+ toggleButton = container.find(".sp-palette-toggle"),
isInput = boundElement.is("input"),
isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color",
shouldReplace = isInput && !flat,
@@ -227,6 +235,8 @@
opts.showPalette = true;
}
+ toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
+
if (opts.palette) {
palette = opts.palette.slice(0);
paletteArray = $.isArray(palette[0]) ? palette : [palette];
@@ -244,6 +254,7 @@
container.toggleClass("sp-alpha-enabled", opts.showAlpha);
container.toggleClass("sp-clear-enabled", allowEmpty);
container.toggleClass("sp-buttons-disabled", !opts.showButtons);
+ container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly);
container.toggleClass("sp-palette-disabled", !opts.showPalette);
container.toggleClass("sp-palette-only", opts.showPaletteOnly);
container.toggleClass("sp-initial-disabled", !opts.showInitial);
@@ -340,6 +351,24 @@
}
});
+ toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
+ toggleButton.bind("click.spectrum", function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ opts.showPaletteOnly = !opts.showPaletteOnly;
+
+ // To make sure the Picker area is drawn on the right, next to the
+ // Palette area (and not below the palette), first move the Palette
+ // to the left to make space for the picker, plus 5px extra.
+ // The 'applyOptions' function puts the whole container back into place
+ // and takes care of the button-text and the sp-palette-only CSS class.
+ if (!opts.showPaletteOnly && !flat) {
+ container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
+ }
+ applyOptions();
+ });
+
draggable(alphaSlider, function (dragX, dragY, e) {
currentAlpha = (dragX / alphaWidth);
isEmpty = false;
diff --git a/test/index.html b/test/index.html
index b38da88e..a61ea35c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -4,6 +4,7 @@
Spectrum Tests
+
diff --git a/test/tests.js b/test/tests.js
index 617903b2..cffd8dc6 100644
--- a/test/tests.js
+++ b/test/tests.js
@@ -333,6 +333,45 @@ test ("Show Input works as expected", function() {
el.spectrum("destroy");
});
+test ("Toggle Picker Area button works as expected", function() {
+ var div = $("
").appendTo('body').show(),
+ el = $("").appendTo(div);
+ el.spectrum({
+ showInput: true,
+ showPaletteOnly: true,
+ togglePaletteOnly: true,
+ color: "red"
+ });
+
+ var spectrum = el.spectrum("container").show(),
+ toggle = spectrum.find(".sp-palette-toggle"),
+ picker = spectrum.find(".sp-picker-container"),
+ palette = spectrum.find(".sp-palette-container");
+
+ // Open the Colorpicker
+ el.spectrum("show");
+ equal(picker.is(":hidden"), true, "The picker area is hidden by default.");
+ ok(spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is enabled.");
+
+ // Click the Picker area Toggle button to show the Picker
+ toggle.click();
+
+ equal(picker.is(":hidden"), false, "After toggling, the picker area is visible.");
+ ok(!spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is disabled.");
+ equal(Math.round(picker.offset().top), Math.round(palette.offset().top), "The picker area is next to the palette.");
+
+ // Click the toggle again to hide the picker
+ toggle.trigger("click");
+
+ equal(picker.is(":hidden"), true, "After toggling again, the picker area is hidden.");
+ ok(spectrum.hasClass("sp-palette-only"), "And the 'palette-only' class is enabled.");
+
+ // Cleanup
+ el.spectrum("hide");
+ el.spectrum("destroy");
+ el.remove();
+ div.remove();
+});
test ("Tooltip is formatted based on preferred format", function() {
var el = $("").spectrum({