dees-document/ts_web/elements/page.ts

import * as tsclass from "@tsclass/tsclass";
import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  domtools,
} from "@design.estate/dees-element";

import * as plugins from "../plugins.js";

import { defaultDocumentSettings } from "./document.js";
import { dedocumentSharedStyle } from "../style.js";

declare global {
  interface HTMLElementTagNameMap {
    "dedocument-page": DePage;
  }
}

@customElement("dedocument-page")
export class DePage extends DeesElement {
  public static demo = () =>
    html` <dedocument-page .format="${"a4"}"></dedocument-page> `;

  @property({
    type: Number,
  })
  viewWidth: number = null;

  @property({
    type: Number,
  })
  viewHeight: number = null;

  @property({
    type: String,
  })
  public format: "a4" = "a4";

  @property({
    type: Number,
  })
  public pageNumber: number = 1;

  @property({
    type: Number,
  })
  public pageTotalNumber: number = 1;

  @property({
    type: Object,
  })
  public letterData: tsclass.business.ILetter = null;

  @property({
    type: Boolean,
    reflect: true,
  })
  printMode = false;

  @property({
    type: Object,
    reflect: true,
  })
  public documentSettings: plugins.shared.interfaces.IDocumentSettings =
    defaultDocumentSettings;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    dedocumentSharedStyle,
    css`
      :host {
        display: block;
        overflow: hidden;
      }

      #scaleWrapper {
        transform-origin: top left;
      }

      .versionOverlay {
        pointer-events: none;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        font-family: monospace;
        font-size: 16px;

        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .bigDraftText {
        transform: rotate(-45deg);
        font-size: 200px;
        opacity: 0.05;
      }

      .foldMark__wrapper {
        z-index: 0;
      }

      .foldMark {
        position: absolute;
        border-top: 1px solid #d3d3d3;
        width: 10px;
        left: 15px;
      }

      .foldMark--start {
        top: calc(var(--DPI-FACTOR) * 8.7);
      }

      .foldMark--center {
        top: calc(var(--DPI-FACTOR) * 14.85);
      }

      .foldMark--end {
        top: calc(var(--DPI-FACTOR) * 19.2);
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          --theme-color-primary-fg: ${this.documentSettings.theme
            ?.colorPrimaryForeground};
          --theme-color-primary-bg: ${this.documentSettings.theme
            ?.colorPrimaryBackground};
          --theme-color-accent-fg: ${this.documentSettings.theme
            ?.colorAccentForeground};
          --theme-color-accent-bg: ${this.documentSettings.theme
            ?.colorAccentBackground};
        }

        .page {
          background-size: contain;
          height: 100%;
        }

        .page:not(.page--first) {
          background-image: ${this.documentSettings.theme?.pageBackground ??
          "none"};
        }

        .page.page--first {
          background-image: ${this.documentSettings.theme
            ?.coverPageBackground ??
          this.documentSettings.theme?.pageBackground ??
          "none"};
        }
      </style>
      <div id="scaleWrapper">
        <dedocument-pagecontainer .printMode=${this.printMode}>
          <div
            class="page page__background ${this.pageNumber === 1
              ? "page--first"
              : ""}"
          ></div>
          ${this.letterData
            ? html`
                ${this.documentSettings.enableDefaultHeader
                  ? html`
                      <dedocument-pageheader
                        .letterData=${this.letterData}
                        .documentSettings=${this.documentSettings}
                        .pageNumber="${this.pageNumber}"
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-pageheader>
                    `
                  : null}

                <!-- FOLD MARKS -->
                ${this.documentSettings.enableFoldMarks === true
                  ? html` <div class="foldMark__wrapper">
                      <span class="foldMark foldMark--start"></span>
                      <span class="foldMark foldMark--center"></span>
                      <span class="foldMark foldMark--end"></span>
                    </div>`
                  : null}

                <!-- LETTER HEADER -->
                ${this.pageNumber === 1
                  ? html`
                      <dedocument-letterheader
                        .pageNumber="${this.pageNumber}"
                        .letterData=${this.letterData}
                        .documentSettings=${this.documentSettings}
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-letterheader>
                    `
                  : null}

                <!-- PAGE CONTENT -->
                <dedocument-pagecontent
                  .letterData=${this.letterData}
                  .documentSettings=${this.documentSettings}
                  .pageNumber="${this.pageNumber}"
                  .pageTotalNumber="${this.pageTotalNumber}"
                  ><slot></slot
                ></dedocument-pagecontent>

                <!-- DEFAULT FOOTER -->
                ${this.documentSettings.enableDefaultFooter === true
                  ? html`
                      <dedocument-pagefooter
                        .letterData=${this.letterData}
                        .documentSettings=${this.documentSettings}
                        .pageNumber="${this.pageNumber}"
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-pagefooter>
                    `
                  : null}

                <div class="versionOverlay">
                  ${this.letterData.versionInfo.type === "draft"
                    ? html`
                        <div class="bigDraftText">
                          ${plugins.shared.translation.translate(
                            this.documentSettings.languageCode,
                            "overlay@@draft"
                          )}
                        </div>
                      `
                    : null}
                </div>
              `
            : html` <slot></slot> `}
        </dedocument-pagecontainer>
      </div>
    `;
  }

  public async checkOverflow() {
    await this.elementDomReady;
    const pageContent = this.shadowRoot.querySelector("dedocument-pagecontent");
    return pageContent.checkOverflow();
  }

  updated(changedProperties: Map<string | number | symbol, unknown>): void {
    super.updated(changedProperties);
    if (
      changedProperties.has("viewHeight") ||
      changedProperties.has("viewWidth")
    ) {
      this.adjustScaling();
    }
  }

  private adjustScaling() {
    const scaleWrapper: HTMLDivElement =
      this.shadowRoot.querySelector("#scaleWrapper");

    if (!scaleWrapper) return;

    let scale = 1;
    if (this.viewHeight) {
      scale = this.viewHeight / plugins.shared.A4_HEIGHT;
    } else if (this.viewWidth) {
      scale = this.viewWidth / plugins.shared.A4_WIDTH;
    }
    scaleWrapper.style.transform = `scale(${scale})`;

    // Adjust the outer dimensions so they match the scaled content

    this.style.width = `${plugins.shared.A4_WIDTH * scale}px`;
    this.style.height = `${plugins.shared.A4_HEIGHT * scale}px`;
  }
}