Reset swatches array with a pre-existing array

[michaelsboost]

I have my swatches contained in a variable array.

Typically I would add a swatch to the array like so and re-apply the variable to be used again at a later time.

swatches.push(pickr.getColor().toRGBA().toString());
swatches = swatches;

I would delete a swatch from the array like so and again re-apply the variable to be used again at a later time.

swatches.filter(e => e !== fillPickr.getColor().toRGBA().toString());
swatches = swatches;

However all the documentation says is....

pickr.removeSwatch(index:Number):Boolean- Removes a color from the swatch palette by its index, returns true if successful.

So I tried removing the swatch by finding the string and removing it that way.

pickr.removeSwatch(swatches.indexOf(pickr.getColor().toRGBA().toString()));

It all works fine up until I allow the user to load in a project file to reset all the swatches to a new array.

When I run this code in console it runs perfectly fine but doesn't if I use the fileReader API.

Here's the code....

pickr.destroyAndRemove();
$('[data-dialog=colorpicker]').empty().append('<div class="pickr"></div>');

pickr= Pickr.create({
  // Which theme you want to use. Can be 'classic', 'monolith' or 'nano'
  theme: 'classic',
  el: '.pickr',
  inline: 'true',
  default: 'hsl(0, 0%, 100%)',
  comparison: true,
  swatches,
  components: {

    // Main components
    preview: true,
    opacity: true,
    hue: true,

    // Input / output Options
    interaction: {
      hex: true,
      rgba: true,
      hsla: true,
      hsva: true,
      cmyk: true,
      input: true,
      clear: false,
      cancel: true,
      save: true
    }
  }
});
pickr.on('init', () => {
  pickr.show();
});
pickr.show();
pickr.on('save', () => {
  swatches.push(pickr.getColor().toRGBA().toString());
  swatches = swatches;
  pickr.addSwatch(pickr.getColor().toRGBA().toString());
});

Here's the alert I got with the fileReader API via console.

It would be nice if there was a way built in to reset the array with a pre-existing one.

Version: v1.8.2 Used bundle (es5 or normal one): normal Used theme (default is classic): classic Browser-version: Version 96.0.4664.45 Chrome Operating-system: Windows 10

[sanazariii]

This plugin won't get any feature anymore and it won't get any update after the end of 2021. btw, I do not know if I understood exactly what you meant, Have you seen this? https://github.com/Simonwep/pickr/issues/241

With the codes he provided + loop you can easily delete every swatch then add predefined swatches. something like this:

// Get Swatches
Pickr.prototype.getSwatches = function () {
	return this._swatchColors.reduce((arr, swatch) => {
		arr.push(swatch.color.toRGBA().toString(0));
		return arr;
	}, []);
};

// Set Swatches
Pickr.prototype.setSwatches = function (swatches) {
	if (!swatches.length) return;
	for (let i = this._swatchColors.length - 1; i > -1; i--) {
		this.removeSwatch(i);
	}
	swatches.forEach(swatch => this.addSwatch(swatch));
};

// Predefined Swatches
let defaultSwatch = [
	"rgba(244, 67, 54, 1)",
	"rgba(233, 30, 99, 0.95)",
	"rgba(156, 39, 176, 0.9)",
	"rgba(103, 58, 183, 0.85)",
];
pickr.on("cancel", instance => {
		// Remove all existing swatches
		for (let j = pickr.getSwatches().length; j >= 0; j--) {
			pickr.removeSwatch(j);
		}
		// Then add predefined swatches
		pickr.setSwatches(defaultSwatch);
	});