https://pupwife.com/scripts/effects/palettePicker.js

1/**
2 * Bubbly palette dropdown for sitewide settings (Appearance section).
3 */
4(function (global) {
5    'use strict';
6
7    var state = {
8        root: null,
9        picker: null,
10        onChange: null
11    };
12
13    function getOptions() {
14        if (global.SiteThemePalettes && global.SiteThemePalettes.PALETTE_OPTIONS) {
15            return global.SiteThemePalettes.PALETTE_OPTIONS.slice();
16        }
17        return [
18            { value: 'default', label: 'Default', stripes: ['#6184ce', '#9b7cc9'] }
19        ];
20    }
21
22    function mount(root, options) {
23        options = options || {};
24        if (!root || !global.PupwifeSettingsBubbleSelect) return null;
25
26        state.root = root;
27        state.onChange = typeof options.onChange === 'function' ? options.onChange : null;
28
29        root.innerHTML = '';
30        root.className = 'settings-palette-picker';
31
32        var picker = global.PupwifeSettingsBubbleSelect.create(root, {
33            idPrefix: 'setting-palette',
34            ariaLabel: 'Color palette',
35            value: options.value || 'default',
36            options: getOptions(),
37            onChange: function (value) {
38                if (state.onChange) state.onChange(value);
39            }
40        });
41
42        state.picker = picker;
43        return picker;
44    }
45
46    function setValue(value) {
47        if (state.picker && typeof state.picker.setValue === 'function') {
48            state.picker.setValue(value);
49        }
50    }
51
52    function close() {
53        if (state.picker && typeof state.picker.close === 'function') {
54            state.picker.close();
55        }
56    }
57
58    global.PupwifePalettePicker = {
59        mount: mount,
60        setValue: setValue,
61        close: close
62    };
63})(window);