site-text-scroller/static/js/control.js

var loadingNewData = false;
var indexFromWebSocket = false;
var acceptingRemoteSettings = true;
var currentForm = document.getElementById('currentForm');
var currentDisplayIndex = 0;
var nbsp = ' ';

setTimeout(
    () => sendThroughWebSocket(JSON.stringify({
        type: 'SettingsRequest'
    })),
    50
);

function handleMessage(message) {
    if (message.type == 'MessageBroadcast')
        try {
            handleBroadcastedMessage(JSON.parse(message.message));
        } catch (e) {
            console.error(message);
            console.error(e);
        }
}

function handleBroadcastedMessage(message) {
    if (message.type == 'SettingsRequest')
        sendThroughWebSocket(JSON.stringify({
            type: 'Settings',
            settings: getSettings()
        }));
    else if (message.type == 'SetCurrentlyOnScreen' || message.type == 'CurrentlyOnScreen') {
        indexFromWebSocket = true;
        updateCurrentlyOnScreen(message.index);
        indexFromWebSocket = false;
    } else if ((message.type == 'NewSettings') || (message.type == 'Settings' && acceptingRemoteSettings)) {
        acceptingRemoteSettings = true;
        applyLoadedSettings(message.settings);
        acceptingRemoteSettings = false;
    }
    console.log(message);
}

function downloadTextFile(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
}

function getSettings() {
    var settings = {};
    for (var form of Array.from(document.querySelectorAll('form.form')))
        for (var keyPair of Array.from((new FormData(form)).entries()))
            settings[keyPair[0]] = keyPair[1];
    return settings;
}

function saveSettings() {
    var token = window.location.hash.substr(1);
    downloadTextFile(
        `text-scroller_settings_${token}.json`,
        JSON.stringify(getSettings())
    );
}

function loadSettings(input) {
    var file = input.files[0];
    input.value = null;
    if (file) {
        var fr = new FileReader();
        fr.onload = () => {
            var text = fr.result;
            applyLoadedSettings(JSON.parse(text));
        };
        fr.readAsText(file);
    }
}

function applyLoadedSettings(settings) {
    loadingNewData = true;
    for (var setting of Object.entries(settings)) {
        var key = setting[0];
        var value = setting[1];
        var field = document.querySelector(`[name="${key}"]`);
        if (!!field) {
            if (field.type == 'radio' || field.type == 'checkbox') {
                field = document.querySelector(`[name="${key}"][value="${value}"]`);
                field.checked = true;
            } else {
                field.value = value;
            }
        }
    }
    loadingNewData = false;
    if (!acceptingRemoteSettings)
        broadcastChanges(); // only once
}

function textAreaAdjust(elem) {
    elem.style.height = Math.max(1, elem.scrollHeight - 20) + "px";
    elem.style.height = (18 + elem.scrollHeight) + "px";
}

function keepDisplayContentUpdated() {
    setTimeout(keepDisplayContentUpdated, 100);
    try {
        textAreaAdjust(document.querySelector('[name="displayContentVisible"]'));
    } catch (e) {
        console.error(e);
    }
}
setTimeout(keepDisplayContentUpdated, 10);

function broadcastChanges() {
    if (!loadingNewData)
        sendThroughWebSocket(JSON.stringify({
            type: 'NewSettings',
            settings: getSettings()
        }));
}

function getDisplayContent() {
    var dcInput = document.querySelector('[name="displayContent"]');
    var dcText = dcInput.value.trim().replace(/\r/g, '');
    var dcCards = dcText.trim().split('\n\n').map(
        x => x.trim().split('\n').map(
            y => y.trim()
        ).filter(
            y => y.length
        )
    ).filter(x => x.length);
    var maxLength = Math.max(...dcCards.map(x => x.length));
    for (var dcCard of dcCards)
        while (dcCard.length < maxLength)
            dcCard.push(nbsp);
    return dcCards;
}

function compareDisplayContentTextAreas() {
    var dcStore = document.querySelector('[name="displayContent"]');
    var dcInput = document.querySelector('[name="displayContentVisible"]');
    var btn = document.getElementById('btn-update-dc-internal');
    if (dcStore.value != dcInput.value)
        btn.style.display = 'block';
    else
        btn.style.display = 'none';
}

function updateInternalDisplayContent() {
    var dcStore = document.querySelector('[name="displayContent"]');
    var dcInput = document.querySelector('[name="displayContentVisible"]');
    dcStore.value = dcInput.value;
    compareDisplayContentTextAreas();
    broadcastChanges();
}

var escapeHtml = (unsafe) => (unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;"));

function updateCurrentForm() {
    var dc = getDisplayContent();
    var s = '';
    s += '<label class="f6 b db mb1 mt3 sans-serif mid-gray">';
    s += 'Click to change';
    s += '</label>';
    s += '<button class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate ';
    s += `${(null === currentDisplayIndex) ? 'bg-black' : 'bg-gray'}`;
    s += '" ';
    s += `onclick="setCurrentlyOnScreen(null)" style="cursor: pointer;">`;
    s += '<em>Hide everything</em>';
    s += '</button>';
    for (var i = 0; i < dc.length; i++) {
        s += '<button class="w-100 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate ';
        s += `${(i == currentDisplayIndex) ? 'bg-black' : 'bg-gray'}`;
        s += '" ';
        s += `onclick="setCurrentlyOnScreen(${i})" style="cursor: pointer;">`;
        s += dc[i].map(x => escapeHtml(x)).join('<br>');
        s += '</button>';
    }
    s += '';
    currentForm.innerHTML = s;
}

function keepCurrentFormUpdated() {
    setTimeout(keepCurrentFormUpdated, 250);
    updateCurrentForm();
}
setTimeout(keepCurrentFormUpdated, 250);

function setCurrentlyOnScreen(index) {
    if (!indexFromWebSocket)
        sendThroughWebSocket(JSON.stringify({
            type: 'SetCurrentlyOnScreen',
            index: index
        }));
    updateCurrentlyOnScreen(index);
}

function updateCurrentlyOnScreen(index) {
    currentDisplayIndex = index;
}