Wish: allow grouping of palette colors

[jensb]

Hello,

I would like to be able to group palette colors. For example grays, then primary colors, then shades, then default colors. It would be sufficient if we could simply have empty rows (or a separator line), which would be displayed as empty rows (maybe with less height) in the palette, but empty elements in the array that defines the colors are currently ignored.

Here's a mockup of what I mean:

Is this possible with Spectrum?

[swampthang]

I too would love to see this as an option. It could be something like:

options{
  dividerArr: [1,7],
  dividerType: 'spacer' // or line
}

Where dividerArr would be an array of rows where you want a divider to occur above that row. For example, [1,7] would correspond to your image on the left.

But, for now, one simple solution is to use javascript to add a class of your own. Assuming you're creating your own color array, you'll know which row(s) need to be separated.

After the picker is created, each row will have something like:

<div class="sp-cf sp-palette-row sp-palette-row-0"><!-- colors --></div>
<div class="sp-cf sp-palette-row sp-palette-row-1"><!-- colors --></div>
<div class="sp-cf sp-palette-row sp-palette-row-2"><!-- colors --></div>
<div class="sp-cf sp-palette-row sp-palette-row-3"><!-- colors --></div>
<div class="sp-cf sp-palette-row sp-palette-row-4"><!-- colors --></div>

If you need a split at the row with the class - sp-palette-row-1 and sp-palette-row-7 you can use jQuery (or javascript if you prefer) to add a class to those rows like 'spacer' or whatever.

$('.sp-palette-row-0, .sp-palette-row-7').addClass('spacer');

Then just add that class to your css.

.spacer {
  margin-top: 20px;
}

The only thing that might be missing is an onComplete callback of some kind. Not sure about that. I guess you could use beforeShow. I think that would run it every time you click the picker to show it but running addClass won't throw an error even if the class is already added.

[swampthang]

Update to the above. If you use beforeShow your added class will be overwritten. Using show seems to work but you also have to add the change event handler and you'll have to do that every time because the picker seems to get reset every time. Here's an example using show and change...

var spacerRow = 3,
    rowElement = document.querySelector(`.sp-palette-row-${spacerRow}`),
    palette = [
      ["#ffffff", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"],
      ["#f9e04a", "#dd9629", "#b03516", "#670000", "#f22e06", "#f84e13", "#fc984c", "#f7dc75"],
      ["#13b5aa", "#09d1b8", "#58dbee", "#0da7d0", "#7e073d", "#d42c45", "#ec7a07", "#8d4937"],
      ["#75b200", "#ddd75a", "#f8bc4c", "#e56565", "#6a0a60", "#fea11b", "#f56042", "#73d4e0"],
      ["#f41a38", "#b2012c", "#980227", "#67012c", "#a8e7d0", "#dceec1", "#fffec6", "#ffd2b5"],
      ["#88a380", "#95ba8b", "#d49973", "#b8805e", "#e6e7e6", "#c5c1c5", "#b4b9b4", "#8b838b"]
   ];

$(input[id="my-picker").spectrum({
  show: function() {
    $(`.sp-palette-row-${spacerRow}`).addClass('spacer'); // jQuery
  },
  change: function() {
    rowElement.classList.add('spacer') // pure javascript
  },
  palette: palette
});