Method open

packages/foliate-js/reader.js:108–191

(file)

    menu.groups.layout.select("paginated");
  }
  async open(file) {
    this.view = document.createElement("foliate-view");
    document.body.append(this.view);
    await this.view.open(file);
    this.view.addEventListener("load", this.#onLoad.bind(this));
    this.view.addEventListener("relocate", this.#onRelocate.bind(this));

    const { book } = this.view;
    book.transformTarget?.addEventListener("data", ({ detail }) => {
      detail.data = Promise.resolve(detail.data).catch((e) => {
        console.error(new Error(`Failed to load ${detail.name}`, { cause: e }));
        return "";
      });
    });
    this.view.renderer.setStyles?.(getCSS(this.style));
    this.view.renderer.next();

    $("#header-bar").style.visibility = "visible";
    $("#nav-bar").style.visibility = "visible";
    $("#left-button").addEventListener("click", () => this.view.goLeft());
    $("#right-button").addEventListener("click", () => this.view.goRight());

    const slider = $("#progress-slider");
    slider.dir = book.dir;
    slider.addEventListener("input", (e) =>
      this.view.goToFraction(Number.parseFloat(e.target.value)),
    );
    for (const fraction of this.view.getSectionFractions()) {
      const option = document.createElement("option");
      option.value = fraction;
      $("#tick-marks").append(option);
    }

    document.addEventListener("keydown", this.#handleKeydown.bind(this));

    const title = formatLanguageMap(book.metadata?.title) || "Untitled Book";
    document.title = title;
    $("#side-bar-title").innerText = title;
    $("#side-bar-author").innerText = formatContributor(book.metadata?.author);
    Promise.resolve(book.getCover?.())?.then((blob) =>
      blob ? ($("#side-bar-cover").src = URL.createObjectURL(blob)) : null,
    );

    const toc = book.toc;
    if (toc) {
      this.#tocView = createTOCView(toc, (href) => {
        this.view.goTo(href).catch((e) => console.error(e));
        this.closeSideBar();
      });
      $("#toc-view").append(this.#tocView.element);
    }

    // load and show highlights embedded in the file by Calibre
    const bookmarks = await book.getCalibreBookmarks?.();
    if (bookmarks) {
      const { fromCalibreHighlight } = await import("./epubcfi.js");
      for (const obj of bookmarks) {
        if (obj.type === "highlight") {