🚀

LEAF Writer: Miradorを追加する

2024/07/23に公開

XML

TEI

leafwriter

tech

概要

LEAF Writerのカスタマイズ方法に関する調査記録です。

今回は以下のように、Miradorを追加します。

方法

以下を参考にしてください。

修正が必要なファイルは以下です。

packages/cwrc-leafwriter/src/js/layout/panels/iiifViewer/index.ts

import $ from 'jquery';
import 'jquery-ui';
import Writer from '../../../Writer';
// @ts-ignore
import Mirador from 'mirador';

interface IiifViewerProps {
  attribute?: string;
  parentId: string;
  tag?: string;
  writer: Writer;
}

class IiifViewer {
  readonly writer: Writer;
  readonly id: string;
  readonly tagName: string;
  readonly attrName: string;

  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
  miradorInstance: any | null;

  $pageBreaks: unknown;
  currentIndex = -1;
  ignoreScroll = false;

  constructor({ attribute, parentId, tag, writer }: IiifViewerProps) {
    this.writer = writer;
    this.id = `${parentId}_iiifViewer`;
    this.tagName = tag ?? 'pb'; // page break element name
    this.attrName = attribute ?? 'facs'; // attribute that stores the image URL

    $(`#${parentId}`).append(`
      <div id="${this.id}" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0"></div>
    `);

    this.writer.event('loadingDocument').subscribe(() => this.reset());

    this.writer.event('documentLoaded').subscribe((success: boolean, body: HTMLElement) => {
      console.log('documentLoaded', success, body);
      if (!success) return;

      this.processDocument(body);
    });

    this.writer.event('writerInitialized').subscribe(() => {
      if (!this.writer.editor) return;
    });
  }

  private processDocument(doc: HTMLElement) {
    // (doc).find

    const $facsimile = $(doc).find(`*[_tag="facsimile"]`);

    const manifestUri = $facsimile.attr('sameas');

    const config = {
      id: this.id,
      windows: [
        {
          loadedManifest: manifestUri,
        },
      ],
      window: {
        sideBarOpen: false,
      },
    };

    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
    this.miradorInstance = Mirador.viewer(config);
  }

  reset() {
    this.$pageBreaks = null;
    this.currentIndex = -1;
  }
}

export default IiifViewer;

以下の箇所で、<facsimile sameAs="https://dl.ndl.go.jp/api/iiif/3437686/manifest.json">の情報を取得しています。

const $facsimile = $(doc).find(`*[_tag="facsimile"]`);
const manifestUri = $facsimile.attr('sameas');

ページ送りの連動機能などは未実装です。また初期表示の際に、画像が小さく表示されてしまうなど、引き続き改善を行う予定です。

まとめ

LEAF Writerの理解にあたり、参考になりましたら幸いです。

概要

方法

まとめ

Discussion