file.js

export default class extends Element {
  constructor(index, source, focused) {
    super();
    this.index = index;
    this.source = source;
    this.self = {};
    this.source.cards.push(this.self);
    this.source.cardRefs.push(this);
    this.flipped = false;
    this.nextCard = false;
    this.wrapper = document.createElement("div");
    this.wrapper.style["z-index"] = this.index;
    this.addClass("wrapper");
    this.addClass("unready");
    this.card = document.createElement("div");
    this.card.className = "card";
    this.front = document.createElement("div");
    this.front.className = "front";
    this.front.contentEditable = true;
    this.front.innerHTML = "Prompt";
    this.front.addEventListener(
      "input",
      () => {
        this.save();
      },
      false
    );
    this.back = document.createElement("div");
    this.back.className = "back";
    this.back.contentEditable = true;
    this.back.innerHTML = "Answer";
    this.back.addEventListener(
      "input",
      () => {
        this.save();
      },
      false
    );
    if (!focused) {
      this.addClass("decked");
      this.wrapper.style["bottom"] =
        "calc((100vh / 2) - 150px - " + (this.index - 10000) * -1 + "px)";
    } else {
      this.wrapper.style["z-index"] = 10000;
      this.focus();
    }
    this.card.appendChild(this.front);
    this.card.appendChild(this.back);
    this.wrapper.appendChild(this.card);
    document.body.appendChild(this.wrapper);
  }
  focus() {
    console.log("Focusing card: ", this.index);
    this.wrapper.style["bottom"] = "";
    this.removeClass("decked");
    if (!this.front) {
      console.log(this);
      throw "wtf";
    }
    if (this.front.innerHTML === "Prompt" && this.back.innerHTML === "Answer") {
      this.addClass("unready");
    } else {
      this.removeClass("unready");
    }
    this.wrapper.style["z-index"] = 10000;
    if (!this.listener) {
      this.listener = event => {
        if (event.key === "Enter") {
          if (!this.flipped) {
            this.flipped = true;
            this.addClass("flipped");
          } else {
            if (
              this.front.innerHTML !== "Prompt" ||
              this.back.innerHTML !== "Answer"
            ) {
              console.log(
                "Card [" +
                  this.index +
                  "] flipped and non-default, triggering next"
              );
              console.log("proof:", this.front.innerHTML, this.back.innerHTML);
              this.unfocus();
              this.source.next();
            }
          }
        }
      };
    }
    console.log("listener", this.listener);
    document.addEventListener("keyup", this.listener, false);
  }
  unfocus() {
    console.log("listener", this.listener);
    document.removeEventListener("keyup", this.listener, false);
    console.log("Unfocusing card: ", this.index);
    this.wrapper.style["z-index"] = this.index;
    this.wrapper.style["bottom"] =
      "calc((100vh / 2) - 150px - " + (this.index - 10000) * -1 + "px)";
    this.addClass("decked");
    this.addClass("unready");
    this.removeClass("flipped");
    this.getClasses(true);
  }
  save() {
    console.log("Saving cards.");
    this.self.front = this.front.textContent;
    this.self.back = this.back.textContent;
    this.source.export();
  }
}