site-progress-bar/static/js/display.js

var knownSettings = { currency: "brl" };
var lastCurrentValue = null;

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

var section = document.createElement("section");
main.appendChild(section);

var article = document.createElement("article");
section.appendChild(article);

var aside = document.createElement("aside");
main.appendChild(aside);

var current = document.createElement("span");
aside.appendChild(current);
var increment = document.createElement("span");
aside.appendChild(increment);
var target = document.createElement("span");
aside.appendChild(target);

increment.classList.add("transparent");

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

var currentCountUp = undefined;
var CountUp = undefined;

import("./countup.mjs")
  .then((mod) => {
    CountUp = mod.CountUp;
    currentCountUp = new CountUp(current, 0, {
      formattingFn: prettyPrintValue,
      decimalPlaces: 2,
    });
  })
  .catch((err) => console.error(err));

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") {
    Object.entries(message.settings).forEach(
      ([k, v]) => (knownSettings[k] = v)
    );
    configureForSettings();
  } else if (message.type == "SettingsRequest") {
    if (knownSettings)
      sendThroughWebSocket(
        JSON.stringify({
          type: "Settings",
          settings: knownSettings,
        })
      );
  }
  console.log(message);
}

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

function prettyPrintValue(value) {
  if (knownSettings.currency === "brl")
    return Number(value).toLocaleString("pt-BR", {
      style: "currency",
      currency: "BRL",
    });
  return sprintf(knownSettings.contentFormat, value);
}

function triggerCountup(priorValue, currentValue) {
  console.log("??", { priorValue, currentValue });
  if (
    CountUp !== undefined &&
    (currentCountUp?.error ?? "") === "" &&
    currentValue > priorValue
  ) {
    console.log("!!", { priorValue, currentValue });
    currentCountUp.update(currentValue);
  }
}

function configureForSettings() {
  if (!!knownSettings) {
    var diff = 0;
    var priorValue = lastCurrentValue;
    try {
      diff = knownSettings.currentValue - lastCurrentValue;
    } catch (e) {}
    lastCurrentValue = knownSettings.currentValue;
    var currentValue = prettyPrintValue(knownSettings.currentValue);
    var targetValue = prettyPrintValue(knownSettings.targetValue);
    var diffValue = diff > 0 ? prettyPrintValue(diff) : "";
    current.innerText = currentValue;
    target.innerText = targetValue;
    displayIncrement(diffValue);
    triggerCountup(+priorValue || 0, +lastCurrentValue || 0);
    nextStyle.innerHTML = `
            * {
                transition-duration: ${
                  knownSettings.transitionsDuration ?? 0
                }ms;
            }
            html > body > main, html > body > main > aside {
                width: ${knownSettings.totalSizeWidth ?? 0}px;
                height: ${knownSettings.totalSizeHeight ?? 0}px;
            }
            html > body > main {
                background-color: ${
                  knownSettings.containerBackgroundColor ?? "transparent"
                };
                font-family: ${knownSettings.fontFamily ?? "sans-serif"};
                font-size: ${knownSettings.fontSize}em;
            }
            html > body > main > section, html > body > main > section > article {
                border-radius: ${knownSettings.barBorderRadius ?? 0}em;
                border-width: ${knownSettings.barBorderWidth ?? 0}em;
                border-color: ${knownSettings.barBorderColor ?? "transparent"};
                border-style: solid;
            }
            html > body > main > section {
                width: calc( ${
                  knownSettings.totalSizeWidth ?? 0
                }px - calc( 2 * ${knownSettings.barBorderWidth ?? 0}em ) );
                height: calc( ${
                  knownSettings.totalSizeHeight ?? 0
                }px - calc( 2 * ${knownSettings.barBorderWidth ?? 0}em ) );
                background-color: ${
                  knownSettings.barInactiveColor ?? "transparent"
                };
            }
            html > body > main > section > article {
                width: calc( ${Math.max(
                  0,
                  Math.min(
                    1,
                    (knownSettings.currentValue ?? 0) /
                      (knownSettings.targetValue ?? 0.00000001)
                  )
                )} * calc( ${knownSettings.totalSizeWidth ?? 0}px - calc( 4 * ${
      knownSettings.barBorderWidth ?? 0
    }em ) ) );
                height: calc( ${
                  knownSettings.totalSizeHeight ?? 0
                }px - calc( 4 * ${knownSettings.barBorderWidth ?? 0}em ) );
                background-color: ${
                  knownSettings.barActiveColor ?? "transparent"
                };
            }
            html > body > main > aside {
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                align-content: space-between;
                justify-content: space-between;
                flex-wrap: nowrap;
                align-items: center;
            }
            html > body > main > aside > span {
                margin: calc( 2 * ${knownSettings.barBorderWidth ?? 0}em );
                font-weight: ${knownSettings.fontWeight ?? 0};
                color: ${knownSettings.fontColor ?? "transparent"};
                -webkit-text-fill-color: ${
                  knownSettings.fontColor ?? "transparent"
                };
                -webkit-text-stroke-width: ${
                  knownSettings.fontStrokeWidth ?? 0
                }em;
                -webkit-text-stroke-color: ${
                  knownSettings.fontStrokeColor ?? "transparent"
                };
            }
            html > body > main > aside > span:nth-child(2) {
                opacity: ${knownSettings.diffOpacity ?? 0};
            }
        `.trim();
  }
}

var incrementDisplayBuffer = [];
function displayIncrement(formatted) {
  if (!!formatted) {
    var emptyBuffer = incrementDisplayBuffer.length == 0;
    incrementDisplayBuffer.push(formatted);
    if (emptyBuffer) processIncrementDisplayBuffer();
  }
}

function processIncrementDisplayBuffer() {
  if (incrementDisplayBuffer.length > 0) {
    var toDisplay = incrementDisplayBuffer[0];
    increment.innerText = toDisplay;
    increment.classList.remove("transparent");
    setTimeout(() => {
      setTimeout(() => {
        increment.classList.add("transparent");
        setTimeout(() => {
          increment.innerText = "";
          incrementDisplayBuffer.shift();
          processIncrementDisplayBuffer();
        }, knownSettings.transitionsDuration);
      }, knownSettings.diffDuration * 1000);
    }, knownSettings.transitionsDuration);
  }
}