@teipublisher/pb-components/src/pb-browse.js

Collection of webcomponents underlying TEI Publisher

import { PbLoad } from './pb-load.js';
import { registry } from './urls.js';
import { waitOnce } from './pb-mixin.js';

/**
 * Extends PbLoad to support browsing collections.
 *
 * This is a reduced version of `pb-browse-docs`, which differs
 * from a plain `pb-load` only in that it scans the returned
 * collection listing for links to subcollections and keeps
 * track of the current collection.
 *
 * All UI elements present in `pb-browse-docs` have been removed.
 */
export class PbBrowse extends PbLoad {
  static get properties() {
    return {
      ...super.properties,
      /** The collection currently being browsed (if any) */
      collection: {
        type: String,
      },
      /**
       * If set, rewrite URLs to load pages as static HTML files,
       * so no TEI Publisher instance is required
       */
      static: {
        type: Boolean,
      },
    };
  }

  constructor() {
    super();
    this.collection = null;
    this.static = false;
  }

  connectedCallback() {
    super.connectedCallback();
    waitOnce('pb-page-ready', () => {
      this.collection = registry.state.collection;
      registry.subscribe(this, state => {
        this.collection = state.collection;
      });
    });
  }

  getURL(params) {
    if (this.static) {
      // use a static URL
      return `collections/${this.collection ? `${this.collection}/` : ''}${
        params.start || '1'
      }.html`;
    }
    const url = super.getURL(params);
    return this.collection ? `${url}/${this.collection}` : url;
  }

  _onLoad(content) {
    window.scrollTo(0, 0);
    const div = content.querySelector('[data-root]');
    const collection = div && div.getAttribute('data-root');
    const writable = div && div.classList.contains('writable');
    this.emitTo('pb-collection', {
      writable,
      collection,
    });
    document.querySelectorAll('[can-write]').forEach(elem => {
      elem.disabled = !writable;
    });
    content.querySelectorAll('[data-collection]').forEach(link => {
      link.addEventListener('click', ev => {
        ev.preventDefault();
        this.collection = link.getAttribute('data-collection');
        this.start = 1;
        if (this.history) {
          registry.commit(this, { collection: this.collection });
        }
        console.log('<pb-browse> loading collection %s', this.collection);
        this.emitTo('pb-search-resubmit');
      });
    });
  }
}
customElements.define('pb-browse', PbBrowse);