add linear mode = single page + zoom to fit width

[milahu]

another snippet, based on node_modules/bindery/dist/bindery.umd.js

css

/* css */
/* note: i replaced 📖 with bindery */
    .bindery-view-linear .bindery-zoom-content {
      min-width: calc(20px + var(--bindery-page-width));
    }
    .bindery-view-linear .bindery-page {
      zoom: 2.0; /* quickfix */ /* FIXME this breaks on mobile screens. pages overflow, overflow is hidden */
    }

  @media screen and (max-width: 960px) {
    .bindery-view-linear .bindery-controls {
      background: var(--bindery-ui-bg);
      flex-direction: column;
    }
  }

js

      const classes = {
          viewLinear: 'view-linear', // add

// ...

      const allModeClasses = [
          classes.viewLinear, // add

// ...

      const classForMode = (mode) => {
          switch (mode) {
              case ViewerMode.LINEAR: // add
                  return classes.viewLinear; // add

// ...

      const modeLabels = [
          [ViewerMode.LINEAR, 'Linear'], // add

// ...

          renderViewMode() {
              if (!this.book)
                  throw Error('Book missing');
              const pages = this.book.pages.slice();
              switch (this.mode) {
                  case ViewerMode.LINEAR: // add
                      return renderLinearViewer(pages); // add

// ...

      (function (ViewerMode) {
          ViewerMode["LINEAR"] = "linear"; // add

// ...

      const onePageSpread = (...children) => {
          return div('.spread-wrapper.spread-centered.page-size', ...children);
      };
      // add ...
      function renderLinearViewer(bookPages) {
        const pages = bookPages;
          const linearLayout = document.createDocumentFragment();
          pages.forEach(pg => {
              const wrap = onePageSpread(pg.element);
              linearLayout.appendChild(wrap);
          });
          return {
              element: linearLayout,
          };
      }

FIXME contend width is wrong on page load, snaps to full width after book render

[evnbr]

i like this idea. I definitely need to look at making bindery more extensible.

[milahu]

getting rid off typescript could help ; ) no need to overengineer this