1
2
3
4
5
6const DEFAULT_PALETTE = [
7 '#000000', '#1D2B53', '#7E2553', '#008751', '#AB5236', '#5F574F', '#C2C3C7', '#FFF1E8',
8 '#FF004D', '#FFA300', '#FFEC27', '#00E436', '#29ADFF', '#83769C', '#FF77A8', '#FFCCAA',
9 '#FF007F', '#00F0FF', '#7000FF', '#A3FF00', '#FFB800', '#FF5555', '#50FA7B', '#8BE9FD',
10 '#282A36', '#44475A', '#BD93F9', '#FF79C6', '#F1FA8C', '#50E3C2', '#D0021B', '#FFFFFF'
11];
12
13class PaletteManager {
14 constructor(initialPalette = DEFAULT_PALETTE) {
15 this.presetColors = [...initialPalette];
16 this.customColors = [];
17 this.primaryColor = '#000000';
18 this.secondaryColor = '#FFFFFF';
19 this.onColorChangeCallbacks = [];
20 }
21
22 getPrimaryColor() {
23 return this.primaryColor;
24 }
25
26 setPrimaryColor(color) {
27 if (!color) return;
28 this.primaryColor = color.toUpperCase();
29 this.notifyColorChange();
30 }
31
32 getSecondaryColor() {
33 return this.secondaryColor;
34 }
35
36 setSecondaryColor(color) {
37 if (!color) return;
38 this.secondaryColor = color.toUpperCase();
39 this.notifyColorChange();
40 }
41
42 swapColors() {
43 const temp = this.primaryColor;
44 this.primaryColor = this.secondaryColor;
45 this.secondaryColor = temp;
46 this.notifyColorChange();
47 }
48
49 addCustomColor(color) {
50 if (!color) return;
51 const hex = color.toUpperCase();
52 if (!this.presetColors.includes(hex) && !this.customColors.includes(hex)) {
53 this.customColors.push(hex);
54 }
55 this.setPrimaryColor(hex);
56 }
57
58 getAllColors() {
59 return [...this.presetColors, ...this.customColors];
60 }
61
62 onColorChange(callback) {
63 if (typeof callback === 'function') {
64 this.onColorChangeCallbacks.push(callback);
65 }
66 }
67
68 notifyColorChange() {
69 this.onColorChangeCallbacks.forEach(cb => cb(this.primaryColor, this.secondaryColor));
70 }
71}
72
73
74if (typeof module !== 'undefined' && module.exports) {
75 module.exports = { PaletteManager, DEFAULT_PALETTE };
76} else if (typeof window !== 'undefined') {
77 window.PaletteManager = PaletteManager;
78 window.DEFAULT_PALETTE = DEFAULT_PALETTE;
79}
80
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.