simonwep / simonwep/pickr

Reset swatches array with a pre-existing array

Open
#308 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request
Dominant language
JavaScript
Stars
4.5k
Forks
292
PR merge metrics
No merged PRs in 30d

Description

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.
error

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing Pickr.create's swatches option and the lifecycle around destroyAndRemove, then compare it with removeSwatch and addSwatch. Confirm how a fileReader-loaded array should replace the existing palette, document the supported behavior, and add coverage for recreating the picker with pre-existing swatches.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.