ntf

const $ = (k) => document.getElementById(k);
const mrnd = () => Math.random();
const save = (k, v) => localStorage.setItem(k, JSON.stringify(v));
const raf = (cb) => requestAnimationFrame(cb);

const notification = {};
class Notification {
  constructor(id, header, body) {
    this._id = id;
    this._header = header;
    this._body = body;
    this._opacity = 1;
    this._interval = undefined;
  }

  get id() { return this._id; }
  get header() { return this._header; }
  get body() { return this._body; }
  get opacity() { return this._opacity; }
  get interval() { return this._interval; }

  set opacity(v) {
    this._opacity = v;
    $(`notification${this.id}`).style.opacity = p.opacity;
  }
  set interval(v) {
    this._interval = v;
  }

  static fadeOut(k) {
    const p = notification[k];

    p.opacity = p.opacity - 0.01;

    if(p.opacity <= 0) {
      $(`notification${p.id}`).parentNode.removeChild($(`notification${p.id}`));
      delete notification[k];
      save("notifications", notification);
    }
    else { p.interval = raf(() => this.fadeOut(k)); }
  }
  static close(k) {
    const p = notification[k];

    $(`notification${p.id}Close`).onclick = () => false;
    p.interval = raf(() => this.fadeOut(k));
  }
  static render(k) {
    const p = notification[k];

    $("notificationContainer").insertAdjacentHTML("beforeend", `
      <div class="notification" id="notification${p.id}">
        <div class="notification-header fwhite">
          ${p.header}
          <div class="notification-btn f16" id="notification${p.id}Close">X</div>
        </div>
        <div class="notification-content">
          ${p.body}
        </div>
      </div>
    `);

    $(`notification${p.id}Close`).onclick = () => this.close(k);
    save("notifications", notification);
  }
  static generate(header, body) {
    const k = mrnd();
    notification[k] = new Notification(k, header, body);
    this.render(k);
  }
}