Nested-Radius-Calculator/script.js at main · OstinUA/Nested-Radius-Calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import { defaultLocale, localeLabels, setLanguage } from './i18n/index.mjs';

document.addEventListener('DOMContentLoaded', () => {
    const inputs = {
        outer: document.getElementById('outerInput'),
        outerRg: document.getElementById('outerRange'),
        pad: document.getElementById('paddingInput'),
        padRg: document.getElementById('paddingRange'),
        inner: document.getElementById('innerInput'),
        innerRg: document.getElementById('innerRange')
    };

    const preview = {
        outer: document.getElementById('previewOuter'),
        inner: document.getElementById('previewInner')
    };

    const langSelect = document.getElementById('langSelect');

    function populateLanguageOptions() {
        const optionsMarkup = Object.entries(localeLabels)
            .map(([locale, label]) => `<option value="${locale}">${label}</option>`)
            .join('');

        langSelect.innerHTML = optionsMarkup;
    }

    function render() {
        const outerVal = parseInt(inputs.outer.value, 10) || 0;
        const padVal = parseInt(inputs.pad.value, 10) || 0;
        const innerVal = parseInt(inputs.inner.value, 10) || 0;

        preview.outer.style.borderRadius = `${outerVal}px`;
        preview.inner.style.borderRadius = `${innerVal}px`;
        preview.outer.style.padding = `${padVal}px`;
    }

    function updateFromOuter(val) {
        const outer = parseInt(val, 10) || 0;
        const pad = parseInt(inputs.pad.value, 10) || 0;
        const inner = Math.max(0, outer - pad);

        inputs.outer.value = outer;
        inputs.outerRg.value = outer;
        inputs.inner.value = inner;
        inputs.innerRg.value = inner;

        render();
    }

    function updateFromPadding(val) {
        const pad = parseInt(val, 10) || 0;
        const outer = parseInt(inputs.outer.value, 10) || 0;
        const inner = Math.max(0, outer - pad);

        inputs.pad.value = pad;
        inputs.padRg.value = pad;
        inputs.inner.value = inner;
        inputs.innerRg.value = inner;

        render();
    }

    function updateFromInner(val) {
        const inner = parseInt(val, 10) || 0;
        const pad = parseInt(inputs.pad.value, 10) || 0;
        const outer = inner + pad;

        inputs.inner.value = inner;
        inputs.innerRg.value = inner;
        inputs.outer.value = outer;
        inputs.outerRg.value = outer;

        render();
    }

    populateLanguageOptions();
    langSelect.value = setLanguage(defaultLocale);

    inputs.outer.addEventListener('input', (e) => updateFromOuter(e.target.value));
    inputs.outerRg.addEventListener('input', (e) => updateFromOuter(e.target.value));

    inputs.pad.addEventListener('input', (e) => updateFromPadding(e.target.value));
    inputs.padRg.addEventListener('input', (e) => updateFromPadding(e.target.value));

    inputs.inner.addEventListener('input', (e) => updateFromInner(e.target.value));
    inputs.innerRg.addEventListener('input', (e) => updateFromInner(e.target.value));

    langSelect.addEventListener('change', (e) => {
        langSelect.value = setLanguage(e.target.value);
    });

    updateFromOuter(40);
});