src/js/options.js

function $(selector) {
    return document.querySelector(selector);
}

function $all(selector) {
    return document.querySelectorAll(selector);
}

function isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

function i18n() {
    $all('[data-i18n]').forEach(el => {
        el.innerHTML =
            chrome.i18n.getMessage('options_' + el.getAttribute('data-i18n'));
    });
}

function printListModal() {
    $('#select_language').textContent = '';
    var heysortable = sortable.toArray();
    for (var language in isoLangs) {
        if (!inArray(language, heysortable)) {
            var el = document.createElement('option');
            el.setAttribute('value', language);
            el.innerText = isoLangs[language]['name'] + ' (' +
                isoLangs[language]['nativeName'] + ')';
            $('#select_language').appendChild(el);
        }
    }
}

function init() {
    i18n();
    chrome.storage.sync.get(null, items => {
        // If no settings are set
        if (isEmpty(items)) {
            items = {
                translateinto: {},
                uniquetab: '',
            };
            chrome.storage.sync.set(items);
        }

        // Check the checkbox of the window opening
        if (items.uniquetab === 'yep') $('#uniquetab').checked = true;
        if (items.uniquetab === '') $('#varioustabs').checked = true;
        if (items.uniquetab === 'panel') $('#panel').checked = true;

        // Add event listeners for certain buttons and links
        $('#panelsflag').addEventListener('click', _ => {
            event.preventDefault();
            chrome.tabs.create({url: 'chrome://flags/#enable-panels'});
        });

        $('#save').addEventListener('click', _ => {
            saveOptions();
        });

        // Print selected language list
        var languages = items.translateinto;

        if (languages) {
            for (var language_id of Object.keys(languages)) {
                var language = languages[language_id];
                var el = document.createElement('li');
                el.setAttribute('data-language', language);
                el.setAttribute('data-id', language);
                el.innerHTML = isoLangs[language]['name'] + ' (' +
                    isoLangs[language]['nativeName'] + ')' +
                    '<span data-language=\'' + language +
                    '\' class=\'delete\'>x</span>';
                $('#languages').appendChild(el);
                $('#languages li[data-language=' + language + '] .delete')
                    .addEventListener('click', function() {
                        $('#languages')
                            .removeChild(
                                $('li[data-language=' +
                                  this.getAttribute('data-language') + ']'));
                        printListModal();
                    });
            }
        }

        // Initiate Sortable
        sortable = new Sortable($('#languages'), {animation: 150});

        // Handling The Dialog
        $('#languages_add').addEventListener('click', _ => {
            $('dialog#languages_add_dialog').showModal();
            $('#select_language').focus();
        });

        $('#languages_add_cancel').addEventListener('click', _ => {
            $('dialog#languages_add_dialog').close();
        });

        $('#languages_add_ok').addEventListener('click', _ => {
            var el = document.createElement('li');
            var language = $('#select_language').value;
            if (inArray(language, sortable.toArray())) {
                return;
            }
            el.setAttribute('data-language', language);
            el.setAttribute('data-id', language);
            el.innerHTML = isoLangs[language]['name'] + ' (' +
                isoLangs[language]['nativeName'] + ')' +
                '<span data-language=\'' + language +
                '\' class=\'delete\'>x</span>';
            $('#languages').appendChild(el);
            var selection =
                $('#select_language option[value=' + language + ']');
            selection.parentNode.removeChild(selection);
            $('#languages li[data-id=' + language + '] .delete')
                .addEventListener('click', function() {
                    $('#languages')
                        .removeChild(
                            $('li[data-language=' +
                              this.getAttribute('data-language') + ']'));
                    printListModal();
                });
            $('dialog').close();
        });

        // About credits...
        fetch('json/credits.json')
            .then(res => res.json())
            .then(json => {
                var content = $('dialog#credits_dialog .content_area');
                json.forEach(item => {
                    var div = document.createElement('div');
                    if (item.url) {
                        var a = document.createElement('a');
                        a.classList.add('homepage');
                        a.href = item.url;
                        a.target = '_blank';
                        a.textContent =
                            chrome.i18n.getMessage('options_credits_homepage');
                        div.append(a);
                    }

                    var h4 = document.createElement('h4');
                    h4.textContent = item.name;
                    div.append(h4);

                    if (item.author) {
                        var p = document.createElement('p');
                        p.classList.add('author');
                        p.textContent =
                            chrome.i18n.getMessage('options_credits_by') + ' ' +
                            item.author +
                            (item.license ? ' - ' + item.license : '');
                        div.append(p);
                    }
                    content.append(div);
                });

                window.onhashchange = function() {
                    if (location.hash == '#credits') {
                        $('dialog#credits_dialog').showModal();
                        $('#credits_ok').focus();
                    }
                };

                if (location.hash == '#credits') {
                    $('dialog#credits_dialog').showModal();
                    $('#credits_ok').focus();
                }

                $('#credits_ok').addEventListener('click', _ => {
                    $('dialog#credits_dialog').close();
                });
                $('dialog#credits_dialog').addEventListener('close', _ => {
                    history.pushState(
                        '', document.title,
                        window.location.pathname + window.location.search);
                });

                // Print language list in the modal dialog
                printListModal();
            })
            .catch(err => console.log(err));
    });
}

function saveOptions() {
    var languages = document.getElementById('languages');
    var options = {
        uniquetab: '',
        translateinto: {},
    };

    options.uniquetab = radioSelected('uniquetab');

    var selected_languages = sortable.toArray();

    var i = 0;
    for (var language_id in selected_languages) {
        var language = selected_languages[language_id];
        options.translateinto[i] = language;
        i++;
    }

    chrome.storage.sync.set(options, function() {
        var background = chrome.extension.getBackgroundPage();

        background.translator_tab = false;
        background.translator_window = false;
        window.close();
    });
}

function radioSelected(a) {
    var elements = document.getElementsByName(a);

    for (var i = 0; i < elements.length; i++)
        if (elements[i].checked) return elements[i].value;
}

function inArray(needle, haystack) {
    var length = haystack.length;
    for (var i = 0; i < length; i++) {
        if (haystack[i] == needle) return true;
    }
    return false;
}

window.addEventListener('load', init);