206 lines
8.1 KiB
JavaScript
206 lines
8.1 KiB
JavaScript
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: 'SetCurrentlyOnScreen',
|
|
index: currentDisplayIndex
|
|
}));
|
|
} else if (message.type == 'SetCurrentlyOnScreen') {
|
|
currentDisplayIndex = 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, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'"));
|
|
|
|
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();
|
|
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 (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: 'SetCurrentlyOnScreen',
|
|
index: currentDisplayIndex
|
|
}));
|
|
}
|
|
}
|
|
keepCardsUpdated();
|