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

1/**
2 * Color mode panel for woim string follower (solid / RGB / pride).
3 */
4(function (global) {
5    'use strict';
6
7    var MODE_OPTIONS = [
8        { value: 'solid', label: 'solid color' },
9        { value: 'rgb', label: 'RGB cycle' },
10        { value: 'pride', label: 'pride pattern' }
11    ];
12
13    var PRIDE_STRIPES = {
14        rainbow: ['#e40303', '#ff8c00', '#ffed00', '#008026', '#24408e', '#732982'],
15        trans: ['#5BCEFA', '#F5A9B8', '#FFFFFF', '#F5A9B8', '#5BCEFA'],
16        bi: ['#D60270', '#9B4F96', '#0038A8'],
17        pan: ['#FF218C', '#FFD800', '#21B1FF'],
18        lesbian: ['#D52D00', '#FF9A56', '#FFFFFF', '#D362A4', '#A40062'],
19        nb: ['#FCF434', '#FFFFFF', '#9C59D1', '#2C2C2C'],
20        ace: ['#000000', '#A3A3A3', '#FFFFFF', '#810081'],
21        progress: ['#FFFFFF', '#FFAEC9', '#74D7EE', '#613915', '#000000']
22    };
23
24    var PRIDE_OPTIONS = [
25        { value: 'rainbow', label: 'rainbow', stripes: PRIDE_STRIPES.rainbow },
26        { value: 'trans', label: 'trans', stripes: PRIDE_STRIPES.trans },
27        { value: 'bi', label: 'bi', stripes: PRIDE_STRIPES.bi },
28        { value: 'pan', label: 'pan', stripes: PRIDE_STRIPES.pan },
29        { value: 'lesbian', label: 'lesbian', stripes: PRIDE_STRIPES.lesbian },
30        { value: 'nb', label: 'non-binary', stripes: PRIDE_STRIPES.nb },
31        { value: 'ace', label: 'ace', stripes: PRIDE_STRIPES.ace },
32        { value: 'progress', label: 'progress', stripes: PRIDE_STRIPES.progress }
33    ];
34
35    function mount(root, options) {
36        options = options || {};
37        var id = options.idPrefix || 'woim-color';
38        var state = { value: options.value || { colorMode: 'solid', solidColor: '#ff4da6', rgbSpeed: 1, pridePreset: 'rainbow' } };
39        var onChange = typeof options.onChange === 'function' ? options.onChange : null;
40        var modeSelect = null;
41        var prideSelect = null;
42        var colorPicker = null;
43
44        root.innerHTML =
45            '<div class="settings-woim-color">' +
46            '<div class="settings-field settings-woim-color__field">' +
47            '<span class="settings-field__label">Color mode</span>' +
48            '<div id="' + id + '-mode-mount"></div>' +
49            '</div>' +
50            '<div class="settings-field settings-woim-color__field" id="' + id + '-solid-row">' +
51            '<span class="settings-field__label">Solid</span>' +
52            '<div id="' + id + '-solid-mount"></div>' +
53            '</div>' +
54            '<div class="settings-field settings-woim-color__field" id="' + id + '-rgb-row" hidden>' +
55            '<span class="settings-field__label">RGB speed</span>' +
56            '<div class="settings-trail-amount">' +
57            '<input type="range" class="settings-trail-amount__slider" id="' + id + '-rgb-speed" min="0.2" max="3" step="0.1" value="1">' +
58            '<output class="settings-trail-amount__value" id="' + id + '-rgb-speed-label">1</output>' +
59            '</div>' +
60            '</div>' +
61            '<div class="settings-field settings-woim-color__field" id="' + id + '-pride-row" hidden>' +
62            '<span class="settings-field__label">Pride flag</span>' +
63            '<div id="' + id + '-pride-mount"></div>' +
64            '</div>' +
65            '</div>';
66
67        var solidRow = root.querySelector('#' + id + '-solid-row');
68        var rgbRow = root.querySelector('#' + id + '-rgb-row');
69        var prideRow = root.querySelector('#' + id + '-pride-row');
70        var rgbSlider = root.querySelector('#' + id + '-rgb-speed');
71        var rgbLabel = root.querySelector('#' + id + '-rgb-speed-label');
72
73        if (global.PupwifeSettingsBubbleSelect) {
74            modeSelect = global.PupwifeSettingsBubbleSelect.create(
75                root.querySelector('#' + id + '-mode-mount'),
76                {
77                    idPrefix: id + '-mode',
78                    ariaLabel: 'Color mode',
79                    options: MODE_OPTIONS,
80                    value: state.value.colorMode,
81                    onChange: function (val) {
82                        state.value.colorMode = val;
83                        emit();
84                    }
85                }
86            );
87            prideSelect = global.PupwifeSettingsBubbleSelect.create(
88                root.querySelector('#' + id + '-pride-mount'),
89                {
90                    idPrefix: id + '-pride',
91                    ariaLabel: 'Pride flag',
92                    options: PRIDE_OPTIONS,
93                    value: state.value.pridePreset,
94                    onChange: function (val) {
95                        state.value.pridePreset = val;
96                        emit();
97                    }
98                }
99            );
100        }
101
102        if (global.PupwifeSettingsColorPicker) {
103            colorPicker = global.PupwifeSettingsColorPicker.mount(
104                root.querySelector('#' + id + '-solid-mount'),
105                {
106                    idPrefix: id + '-solid',
107                    value: state.value.solidColor,
108                    onChange: function (hex) {
109                        state.value.solidColor = hex;
110                        emit();
111                    }
112                }
113            );
114        }
115
116        function syncRows() {
117            var mode = state.value.colorMode;
118            solidRow.hidden = mode !== 'solid';
119            rgbRow.hidden = mode !== 'rgb';
120            prideRow.hidden = mode !== 'pride';
121        }
122
123        function emit() {
124            syncRows();
125            if (onChange) onChange(Object.assign({}, state.value));
126        }
127
128        function setValue(v) {
129            state.value = Object.assign({
130                colorMode: 'solid',
131                solidColor: '#ff4da6',
132                rgbSpeed: 1,
133                pridePreset: 'rainbow'
134            }, v || {});
135            if (modeSelect) modeSelect.setValue(state.value.colorMode);
136            if (colorPicker) colorPicker.setValue(state.value.solidColor);

137            rgbSlider.value = String(state.value.rgbSpeed);
138            rgbLabel.textContent = String(state.value.rgbSpeed);
139            if (prideSelect) prideSelect.setValue(state.value.pridePreset);
140            syncRows();
141        }
142
143        rgbSlider.addEventListener('input', function () {
144            state.value.rgbSpeed = parseFloat(rgbSlider.value);
145            rgbLabel.textContent = rgbSlider.value;
146            emit();
147        });
148
149        setValue(state.value);
150
151        return {
152            setValue: setValue,
153            getValue: function () { return Object.assign({}, state.value); }
154        };
155    }
156
157    global.PupwifeWoimColorPanel = {
158        mount: mount,
159        MODE_OPTIONS: MODE_OPTIONS,
160        PRIDE_OPTIONS: PRIDE_OPTIONS
161    };
162})(window);