github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/flash.ts (about)

     1  // Content managed by Project Forge, see [projectforge.md] for details.
     2  function fade(el: HTMLElement) {
     3    setTimeout(() => {
     4      el.style.opacity = "0";
     5      setTimeout(() => el.remove(), 500);
     6    }, 5000);
     7  }
     8  
     9  export function flashCreate(key: string, level: "success" | "error", msg: string) {
    10    let container = document.getElementById("flash-container");
    11    if (container === null) {
    12      container = document.createElement("div");
    13      container.id = "flash-container";
    14      document.body.insertAdjacentElement("afterbegin", container);
    15    }
    16    const fl = document.createElement("div");
    17    fl.className = "flash";
    18  
    19    const radio = document.createElement("input");
    20    radio.type = "radio";
    21    radio.style.display = "none";
    22    radio.id = "hide-flash-" + key;
    23    fl.appendChild(radio);
    24  
    25    const label = document.createElement("label");
    26    label.htmlFor = "hide-flash-" + key;
    27    const close = document.createElement("span");
    28    close.innerHTML = "×";
    29    label.appendChild(close);
    30    fl.appendChild(label);
    31  
    32    const content = document.createElement("div");
    33    content.className = "content flash-" + level;
    34    content.innerText = msg;
    35    fl.appendChild(content);
    36  
    37    container.appendChild(fl);
    38    fade(fl);
    39  }
    40  
    41  export function flashInit() {
    42    const container = document.getElementById("flash-container");
    43    if (container === null) {
    44      return flashCreate;
    45    }
    46    const x = container.querySelectorAll<HTMLElement>(".flash");
    47    if (x.length > 0) {
    48      for (const f of x) {
    49        fade(f);
    50      }
    51    }
    52    return flashCreate;
    53  }