@synapxlab/colorpicker

Démo interactive

Chaque carte reproduit une situation où un sélecteur classique sortait de l'écran ou se faisait couper. Ici la popup est rendue dans body en position: fixed et reste toujours visible.

🎯 Pourquoi une palette fermée ?

Un sélecteur à dégradé propose 16 millions de couleurs, et deux utilisateurs ne choisissent jamais la même. Ce composant propose volontairement une palette limitée et fixe : chaque couleur est exacte et reproductible. Une ligne, une étiquette ou un statut garde donc la même teinte partout où il apparaît et se reconnaît d'un coup d'œil. Le jeu de couleurs devient un vocabulaire, pas du bruit.

📦 Installation

npm install @synapxlab/colorpicker

Ou via CDN (ESM, aucune installation) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@synapxlab/colorpicker/dist/style.css">
<script type="module">
  import { ColorPicker } from 'https://cdn.jsdelivr.net/npm/@synapxlab/colorpicker/dist/colorpicker.es.js';
</script>

⚡ Démarrage rapide

import { ColorPicker, locales } from '@synapxlab/colorpicker';
import '@synapxlab/colorpicker/style';

const cp = new ColorPicker(document.querySelector('#color'), {
  strings: locales.fr,
  transparentColor: true,
  onChange(color) {
    console.log('choisi', color); // '#4f81bd'
  },
});

<!-- Le contrôle visible est la pastille ; la valeur part avec le formulaire -->
<input type="hidden" name="color" role="colorpicker" value="#f44336">

ColorPicker.init('[role="colorpicker"]', {
  showOn: 'button',
  displayIndicator: false,
  customTheme: ['#f44336', '#ff9800', '#ffc107', '#4caf50',
                '#00bcd4', '#3f51b5', '#9c27b0', 'white', 'black'],
});

// Plus tard, au remplissage du formulaire
ColorPicker.get(input)?.setValue(value || 'white');

<link rel="stylesheet" href="node_modules/@synapxlab/colorpicker/dist/style.css">
<script src="node_modules/@synapxlab/colorpicker/dist/colorpicker.umd.cjs"></script>
<script>
  const { ColorPicker } = window.SynapxColorPicker;
  ColorPicker.init('[role="colorpicker"]', { showOn: 'button' });
</script>

📖 Options

new ColorPicker(element, options) — un <input> texte ou hidden ouvre une popup ; tout autre élément reçoit la palette en mode inline.

🔔 Événements & méthodes

Les événements sont des CustomEvent qui remontent depuis l'élément, avec detail.color et detail.instance. Un choix déclenche aussi les événements natifs input puis change sur l'input : formulaires et frameworks réagissent sans code supplémentaire.

input.addEventListener('colorpicker:change', (e) => console.log(e.detail.color));
input.addEventListener('colorpicker:hover',  (e) => preview.style.background = e.detail.color);
input.addEventListener('colorpicker:open',   () => {});
input.addEventListener('colorpicker:close',  () => {});

📐 Positionnement

La popup n'est jamais dans l'arbre de l'input : elle est ajoutée à body en position: fixed, donc aucun parent overflow, transform ou contain ne peut la couper. Sa position se calcule dans le repère de la fenêtre :

• par défaut sous l'ancre, alignée à gauche ;
• pas la place dessous et plus de place dessus → au-dessus ;
• recalée horizontalement pour rester à viewportMargin des bords ;
• fenêtre plus petite que la popup → hauteur contrainte, la popup défile en interne ;
• recalcul au scroll, au redimensionnement et quand la popup change de taille.

Le calcul est une fonction pure exportée, testable sans DOM :

import { computePosition } from '@synapxlab/colorpicker';

computePosition(
  { top: 690, left: 1200, width: 20, height: 20 }, // ancre en bas à droite
  { width: 220, height: 260 },                     // popup
  { width: 1280, height: 720 },                    // fenêtre
);
// → { top: 426, left: 1052, placement: 'top' }

🔁 Migration depuis evol-colorpicker

Mêmes palettes, mêmes pages, mêmes options : la migration se résume à retirer jQuery UI et à remplacer l'appel du widget.

$("[role='colorpicker']").colorpicker({
  showOn: "button",
  displayIndicator: false,
  customTheme: ["#f44336", "#ff9800", "white", "black"],
  strings: "Couleur,base,Plus,Moins,Palette,",
});
$(input).colorpicker("val", value);
$(input).on("change.color", (e, color) => …);

ColorPicker.init('[role="colorpicker"]', {
  showOn: 'button',
  displayIndicator: false,
  customTheme: ['#f44336', '#ff9800', 'white', 'black'],
  strings: 'Couleur,base,Plus,Moins,Palette,', // la chaîne CSV reste acceptée
});
ColorPicker.get(input).setValue(value);
input.addEventListener('colorpicker:change', (e) => …);