path: root/extension/popup/main.js

import {getRuleScoreOnPage, getURLParts} from '../lib.js';

function last(arr) {
    return arr[arr.length - 1];
}

function clearChildren(el) {
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
}

function changeScreen(id) {
    for (const screen of document.getElementsByClassName('screen')) {
        if (screen.id === id) {
            screen.classList.add('visible');
        } else {
            screen.classList.remove('visible');
        }
    }
}

function changeContentScreen(id) {
    for (const screen of document.getElementsByClassName('content-screen')) {
        if (screen.id === id) {
            screen.classList.add('visible');
        } else {
            screen.classList.remove('visible');
        }
    }
}

function loadTrackList(opts) {
    const {tab, rule, saveRule, deleteRule} = opts;
    const {music} = rule;
    saveRule();
    return browser.storage.sync.get('tracks').then(({tracks = []}) => {
        const ul = document.getElementById('track-list');
        while (ul.firstChild) {
            ul.removeChild(ul.firstChild);
        }

        tracks.sort();

        for (const track of tracks) {
            const li = document.createElement('li');
            ul.appendChild(li);

            li.classList.add('track');

            const topRow = document.createElement('div');
            li.appendChild(topRow);

            const label = document.createElement('label');
            topRow.appendChild(label);

            topRow.classList.add('top-row');

            const checkbox = document.createElement('input');
            label.appendChild(checkbox);

            checkbox.type = 'checkbox';
            checkbox.checked = track in music;
            checkbox.title = `Toggle whether the track "${track}" will play when this site is opened.`

            checkbox.addEventListener('click', () => {
                updateVolumeSlider();
                if (checkbox.checked) {
                    if (!(track in music)) {
                        music[track] = volumeSlider.value;
                    }
                } else {
                    if (track in music) {
                        delete music[track];
                    }
                }
                saveRule();
            });

            label.appendChild(document.createTextNode(' ' + track));

            const deleteButton = document.createElement('button');
            topRow.appendChild(deleteButton);

            deleteButton.appendChild(document.createTextNode('Delete...'));
            deleteButton.title = `Delete the track from all site configuration. You will be confirmed first.`;

            deleteButton.addEventListener('click', () => {
                if (confirm(`This will delete "${track}" from ALL sites - this cannot be undone. Are you sure?`)) {
                    changeScreen('loading-screen');
                    tracks = tracks.filter(t => t !== track);
                    for (const site of Object.values(siteSettings)) {
                        while (site.includes(track)) {
                            site.splice(site.indexOf(track, 1));
                        }
                    }
                    Promise.all([
                        browser.runtime.sendMessage({type: 'deleteTrack', trackName: track}),
                        browser.storage.sync.set({tracks, siteSettings})
                            .then(() => loadTrackList(opts))
                    ]).then(() => changeScreen('main-screen'));
                }
            });

            const bottomRow = document.createElement('div');
            li.appendChild(bottomRow);

            const volumeLabel = document.createElement('label');
            bottomRow.appendChild(volumeLabel);

            volumeLabel.appendChild(document.createTextNode('Volume: '));

            const updateVolumeSlider = () => {
                volumeLabel.style.display = checkbox.checked ? 'block' : 'none';
            };

            const volumeSlider = document.createElement('input');
            volumeLabel.appendChild(volumeSlider);

            updateVolumeSlider();

            volumeSlider.type = 'range';
            volumeSlider.min = 0;
            volumeSlider.max = 100;
            volumeSlider.step = 1;
            volumeSlider.value = track in music ? music[track] : 100;

            volumeSlider.addEventListener('change', () => {
                if (track in music) {
                    music[track] = volumeSlider.value;
                    saveRule();
                }
            });
        }

        const actionLi = document.createElement('li');
        ul.appendChild(actionLi);

        actionLi.classList.add('action');

        const addButton = document.createElement('button');
        actionLi.appendChild(addButton);

        addButton.appendChild(document.createTextNode('Create Track'));
        addButton.title = `Create a new track, which will be an option present in all sites.`;

        addButton.addEventListener('click', () => {
            browser.tabs.sendMessage(tab.id, {createTrack: true});
            window.close();
        });

        const deleteRuleButton = document.createElement('button');
        actionLi.appendChild(deleteRuleButton);

        deleteRuleButton.appendChild(document.createTextNode('Delete Rule'));
        deleteRuleButton.title = `Remove this rule altogether. It will be discarded and won't affect the BGM anymore.`;

        deleteRuleButton.addEventListener('click', () => {
            if (confirm(`Are you sure you want to delete this entry? (${getWildcardRepresentation(rule)})`)) {
                deleteRule();
            }
        });
    });
}

function getWildcardRepresentation(rule, verbose = false) {
    const {hostnameMatch, pathnameMatch} = rule;
    const {hostnameParts, pathnameParts} = getURLParts(rule.sourceURL);

    let string = verbose ? 'http(s)://' : '';

    if (hostnameMatch.length !== hostnameParts.length) {
        if (hostnameMatch.length > 0) {
            string += '*.';
        } else {
            string += '*';
        }
    }

    string += hostnameMatch.slice().reverse().join('.');

    if (pathnameMatch.length) {
        string += '/';
    }

    string += pathnameMatch.join('/');

    if (!pathnameMatch.length || !last(pathnameMatch).includes('.')) {
        string += '/*';
    }

    return string;
}

function loadRuleScreen({tab, rule, saveRule, deleteRule}) {
    if (getRuleScoreOnPage(rule, tab.url) > 0) {
        rule.sourceURL = tab.url;
    }

    const heading = document.getElementById('hostname');
    while (heading.firstChild) {
        heading.removeChild(heading.firstChild);
    }

    const hostnameSpans = [];
    const pathnameSpans = [];

    const isSelected = s => s.dataset.selected === 'yes';

    const setSelected = (s, val) => {
        s.dataset.selected = val ? 'yes' : 'no';
    };

    const toggleSelected = s => {
        setSelected(s, !isSelected(s));
    };

    const updateWildcardRepresentation = () => {
        const string = getWildcardRepresentation(rule, true);

        const el = document.getElementById('wildcard-representation');
        while (el.firstChild) {
            el.removeChild(el.firstChild);
        }
        el.appendChild(document.createTextNode(string));
    };

    const addPart = (span, allSpans, save) => {
        heading.appendChild(span);

        span.style.cursor = 'pointer';

        span.classList.add('scope');

        const getSubordinateSpans = () => {
            const index = allSpans.indexOf(span);
            return allSpans.slice(0, index + 1);
        };

        const getSuperiorSpans = () => {
            const index = allSpans.indexOf(span);
            return allSpans.slice(index + 1);
        };

        span.addEventListener('mouseenter', () => {
            for (const s of getSubordinateSpans()) {
                s.classList.add('highlighted');
            }
        });

        span.addEventListener('mouseleave', () => {
            for (const s of getSubordinateSpans()) {
                s.classList.remove('highlighted');
            }
        });

        span.addEventListener('click', () => {
            if (last(allSpans.filter(isSelected)) === span) {
                toggleSelected(span);
            } else {
                setSelected(span, true);
            }

            for (const s of getSubordinateSpans()) {
                s.classList.remove('highlighted');
                setSelected(s, isSelected(span));
            }

            for (const s of getSuperiorSpans()) {
                setSelected(s, false);
            }

            save(getSubordinateSpans().filter(isSelected).map(s => s.dataset.partValue));
        });
    };

    const {hostnameMatch, pathnameMatch} = rule;
    const {hostnameParts, pathnameParts} = getURLParts(rule.sourceURL);

    for (let i = 0; i < hostnameParts.length; i++) {
        const part = hostnameParts[i];
        const span = document.createElement('span');
        span.appendChild(document.createTextNode(part));
        if (i < hostnameParts.length - 1) {
            span.appendChild(document.createTextNode('.'));
        }
        span.dataset.partValue = part;
        setSelected(span, hostnameMatch[hostnameParts.length - i - 1] === part);
        hostnameSpans.unshift(span);
        addPart(span, hostnameSpans, val => {
            rule.hostnameMatch = val;
            updateWildcardRepresentation();
            saveRule();
        });
    }

    for (let i = 0; i < pathnameParts.length; i++) {
        const part = pathnameParts[i];
        const span = document.createElement('span');
        span.appendChild(document.createTextNode('/'));
        span.appendChild(document.createTextNode(part));
        span.dataset.partValue = part;
        setSelected(span, pathnameMatch[i] === part);
        pathnameSpans.push(span);
        addPart(span, pathnameSpans, val => {
            rule.pathnameMatch = val;
            updateWildcardRepresentation();
            saveRule();
        });
    }

    updateWildcardRepresentation();

    if (hostname) {
        return loadTrackList({tab, rule, saveRule, deleteRule})
            .then(() => changeScreen('main-screen'));
    } else {
        changeScreen('invalid-host-screen');
    }
}

function loadRuleList({tab, siteSettings, selectRule}) {
    const createRuleItem = rule => {
        const li = document.createElement('li');

        li.classList.add('rule');
        li.dataset.wildcardRepresentation = getWildcardRepresentation(rule);
        li.appendChild(document.createTextNode(li.dataset.wildcardRepresentation));
        li.title = li.dataset.wildcardRepresentation;

        li.addEventListener('click', () => {
            selectRule(rule);
        });

        return li;
    };

    const allRulesList = document.getElementById('all-rules');
    clearChildren(allRulesList);

    const allRules = siteSettings;

    const allRuleItems = allRules.map(createRuleItem);

    allRuleItems.sort((a, b) => a.dataset.wildcardRepresentation < b.dataset.wildcardRepresentation ? -1 : 1);

    for (const item of allRuleItems) {
        allRulesList.appendChild(item);
    }

    const rulesOnThisPageList = document.getElementById('rules-on-this-page');
    clearChildren(rulesOnThisPageList);

    const createRuleLI = document.createElement('li');
    rulesOnThisPageList.appendChild(createRuleLI);

    const createRuleButton = document.createElement('button');
    createRuleLI.appendChild(createRuleButton);

    createRuleButton.appendChild(document.createTextNode('Create Rule'));

    if (!new URL(tab.url).hostname) {
        createRuleButton.disabled = true;
        createRuleButton.title = `Sorry, this page doesn't appear to have a hostname. We can't create a rule here.`;
    }

    createRuleButton.addEventListener('click', () => {
        const {hostnameParts} = getURLParts(tab.url);
        const rule = {
            sourceURL: tab.url,
            hostnameMatch: hostnameParts.slice().reverse(),
            pathnameMatch: [],
            music: {}
        };
        selectRule(rule);
    });

    const rulesOnThisPage = allRules.map(rule => ({
        rule,
        score: getRuleScoreOnPage(rule, tab.url)
    })).filter(obj => obj.score > 0);

    for (const obj of rulesOnThisPage) {
        obj.item = createRuleItem(obj.rule);
    }

    rulesOnThisPage.sort((a, b) => {
        if (a.score === b.score) {
            return a.item.dataset.wildcardRepresentation < b.item.dataset.wildcardRepresentation ? -1 : 1;
        } else {
            return b.score - a.score;
        }
    });

    for (const {item} of rulesOnThisPage) {
        rulesOnThisPageList.appendChild(item);
    }
}

Promise.all([
    browser.tabs.query({active: true, currentWindow: true}),
    browser.storage.sync.get(['disableEverywhere', 'siteSettings'])
]).then(([[tab], {disableEverywhere: disableEverywhereStatus, siteSettings}]) => {
    if (!Array.isArray(siteSettings)) {
        siteSettings = [];
    }

    console.log(siteSettings);

    const reloadRuleList = () => {
        return browser.storage.sync.get('siteSettings').then(({siteSettings}) => loadRuleList({
            tab, siteSettings,
            selectRule: rule => {
                changeContentScreen('loading-content');
                return loadRuleScreen({
                    rule, tab,
                    saveRule: () => {
                        if (!siteSettings.includes(rule)) {
                            siteSettings.push(rule);
                        }
                        return browser.storage.sync.set({siteSettings})
                            .then(() => browser.runtime.sendMessage({music: rule.music}))
                            .then(() => reloadRuleList());
                    },
                    deleteRule: () => {
                        changeScreen('loading-screen');
                        siteSettings = siteSettings.filter(r => r !== rule);
                        reloadRuleList();
                        return browser.storage.sync.set({siteSettings})
                            .then(() => reloadRuleList())
                            .then(() => {
                                changeScreen('main-screen')
                                changeContentScreen('no-rule-content');
                            });
                    }
                }).then(() => changeContentScreen('rule-content'));
            }
        }));
    };

    const disableEverywhere = document.getElementById('disable-everywhere');

    disableEverywhere.checked = disableEverywhereStatus;

    disableEverywhere.addEventListener('click', () => {
        browser.storage.sync.set({disableEverywhere: disableEverywhere.checked})
            .then(() => browser.runtime.sendMessage({urlString: tab.url}));
    });

    reloadRuleList().then(() => changeScreen('main-screen'));
});