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

1/**
2 * Bubbly background dropdown for sitewide settings (Theme 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.SiteBackgrounds && typeof global.SiteBackgrounds.listPickerOptions === 'function') {
15            return global.SiteBackgrounds.listPickerOptions();
16        }
17        return [
18            { value: 'caustics', label: 'Caustics', stripes: ['#4a2d7a', '#2d8a7a', '#c8a8ff'] }
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-background-picker';
31
32        var picker = global.PupwifeSettingsBubbleSelect.create(root, {
33            idPrefix: 'setting-background',
34            ariaLabel: 'Background',
35            value: options.value || 'caustics',
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 setDisabled(disabled) {
53        if (state.picker && typeof state.picker.setDisabled === 'function') {
54            state.picker.setDisabled(disabled);
55        }
56    }
57
58    function close() {
59        if (state.picker && typeof state.picker.close === 'function') {
60            state.picker.close();
61        }
62    }
63
64    function refreshOptions() {
65        if (!state.picker || !state.root || !global.PupwifeSettingsBubbleSelect) return;
66        var current = state.picker.getValue ? state.picker.getValue() : 'caustics';
67        mount(state.root, {
68            value: current,
69            onChange: state.onChange
70        });
71    }
72
73    global.PupwifeBackgroundPicker = {
74        mount: mount,
75        setValue: setValue,
76        setDisabled: setDisabled,
77        close: close,
78        refreshOptions: refreshOptions
79    };
80})(window);