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

var knownSettings = null;
var currentDisplayIndex = 0;

var main = document.createElement('main');
document.body.appendChild(main);

var nextStyle = document.getElementById('nextStyle');

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);
        }
    if (message.type == 'YouAre')
        setTimeout(() =>
            sendThroughWebSocket(JSON.stringify({
                type: 'SettingsRequest'
            })),
            10
        );
    if (message.type == 'ClientConnected') {
        if (!knownSettings)
            setTimeout(() =>
                sendThroughWebSocket(JSON.stringify({
                    type: 'SettingsRequest'
                })),
                10
            );
    }
}

function handleBroadcastedMessage(message) {
    if (message.type == 'Settings' || message.type == 'NewSettings') {
        knownSettings = message.settings;
        configureForSettings();
    } else if (message.type == 'SettingsRequest') {
        if (knownSettings)
            sendThroughWebSocket(JSON.stringify({
                type: 'Settings',
                settings: knownSettings
            }));
        sendThroughWebSocket(JSON.stringify({
            type: 'CurrentlyOnScreen',
            index: currentDisplayIndex
        }));
    } else if (message.type == 'SetCurrentlyOnScreen') {
        currentDisplayIndex = (message.index === null) ? NaN : message.index;
    }
    console.log(message);
}

function getDisplayContent() {
    var dcInput = knownSettings.displayContent;
    var dcText = dcInput.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;
}

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

function configureForSettings() {
    if (!!knownSettings) {
        nextStyle.innerHTML = `
            section.current {
                margin: ${knownSettings.cardMargin}em;
                transform: scale(1, 1);
                width: ${(knownSettings.containerWidth) - (knownSettings.cardMargin * 2)}em;
                height: ${((knownSettings.containerHeight) - (knownSettings.cardMargin * 2)) / 3}em;
            }
            section.next {
                margin-left: 0em;
                transform: scale(${knownSettings.cardNextSize / 100}, ${knownSettings.cardNextSize / 100});
                width: ${(knownSettings.containerWidth) - (knownSettings.cardMargin * 2)}em;
                height: ${((knownSettings.containerHeight) - (knownSettings.cardMargin * 2)) / 3}em;
                opacity: ${knownSettings.cardNextOpacity};
            }
            section:not(.current):not(.next) {
                margin: 0px !important;
                padding: 0px !important;
                transform: scale(0, 0);
                width: 0px !important;
                height: 0px !important;
                opacity: 0;
            }
        `.trim();
        let displayContents = getDisplayContent();
        main.style.fontFamily = knownSettings.fontFamily;
        main.style.fontSize = `${knownSettings.fontSize}em`;
        main.style.width = `${knownSettings.containerWidth}em`;
        main.style.height = `${knownSettings.containerHeight}em`;
        main.style.backgroundColor = knownSettings.containerBackgroundColor;
        main.style.flexDirection = knownSettings.cardDirection;
        main.style.transitionProperty = 'all';
        main.style.transitionTimingFunction = 'ease-in-out';
        main.style.transitionDuration = `${knownSettings.transitionDuration}ms`;
        for (let dc_index = 0; dc_index < displayContents.length; dc_index++) {
            let displayContent = displayContents[dc_index];
            let dc_id = `dc_${dc_index}`;
            let dc_element = document.getElementById(dc_id);
            if (!dc_element) {
                dc_element = document.createElement('section');
                dc_element.setAttribute('id', dc_id);
                main.appendChild(dc_element);
            }
            for (let dl_index = 0; dl_index < displayContent.length; dl_index++) {
                let displayLine = displayContent[dl_index];
                let dl_id = `dc_${dc_index}_dl_${dl_index}`;
                let dl_element = document.getElementById(dl_id);
                if (!dl_element) {
                    dl_element = document.createElement('article');
                    dl_element.setAttribute('id', dl_id);
                    dc_element.appendChild(dl_element);
                }
                dl_element.innerText = displayLine;
                dl_element.style.color = knownSettings.textColor;
                dl_element.style.fontSize = `${Math.pow(parseFloat(knownSettings.subtextSize) / 100, dl_index) * 100}%`;
                dl_element.style.opacity = `${Math.pow(parseFloat(knownSettings.subtextOpacity) / 100, dl_index) * 100}`;
                dl_element.style.transitionProperty = 'all';
                dl_element.style.transitionTimingFunction = 'ease-in-out';
                dl_element.style.transitionDuration = `${knownSettings.transitionDuration}ms`;
            }
            dc_element.style.padding = `${knownSettings.cardPadding}em`;
            dc_element.style.borderRadius = `${knownSettings.cardBorderRadius}em`;
            dc_element.style.backgroundColor = knownSettings.cardBackgroundColor;
            dc_element.style.transitionProperty = 'all';
            dc_element.style.transitionTimingFunction = 'ease-in-out';
            dc_element.style.transitionDuration = `${knownSettings.transitionDuration}ms`;
            for (let dl_element of Array.from(dc_element.getElementsByTagName('article'))) {
                let i = parseInt(dl_element.getAttribute('id').split('_')[3]);
                if (i < 0 && i >= displayContent.length)
                    dc_element.removeChild(dl_element);
            }
        }
        for (let dc_element of Array.from(main.getElementsByTagName('section'))) {
            let i = parseInt(dc_element.getAttribute('id').split('_')[3]);
            if (i < 0 && i >= displayContents.length)
                main.removeChild(dc_element);
        }
    }
}

function keepCardsUpdatedByTime() {
    if (!knownSettings)
        setTimeout(keepCardsUpdatedByTime, 100);
    else {
        setTimeout(keepCardsUpdatedByTime, parseFloat(knownSettings.cardTimeout) * 1000);
        let displayContents = getDisplayContent();
        if (!isNaN(currentDisplayIndex))
            currentDisplayIndex = (++currentDisplayIndex) % displayContents.length;
    }
}
keepCardsUpdatedByTime();

function keepCardsUpdated() {
    if (!knownSettings)
        setTimeout(keepCardsUpdated, 100);
    else {
        setTimeout(keepCardsUpdated, 100);
        let displayContents = getDisplayContent();
        let nextDisplayIndex = (currentDisplayIndex + 1) % displayContents.length;
        if (isNaN(currentDisplayIndex))
            nextDisplayIndex = NaN;
        if (parseFloat(knownSettings.cardNextOpacity) == 0.0 || parseFloat(knownSettings.cardNextSize) == 0.0) {
            nextDisplayIndex = NaN;
        }
        for (let dc_index = 0; dc_index < displayContents.length; dc_index++) {
            let dc_id = `dc_${dc_index}`;
            let dc_element = document.getElementById(dc_id);
            if (dc_index === currentDisplayIndex) {
                dc_element.setAttribute("class", "current");
            } else if (dc_index === nextDisplayIndex) {
                dc_element.setAttribute("class", "next");
            } else {
                dc_element.setAttribute("class", "");
            }
        }
        sendThroughWebSocket(JSON.stringify({
            type: 'CurrentlyOnScreen',
            index: currentDisplayIndex
        }));
    }
}
keepCardsUpdated();