128 lines
2.7 KiB
TypeScript
128 lines
2.7 KiB
TypeScript
import {
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
css,
|
|
cssManager,
|
|
unsafeCSS,
|
|
domtools,
|
|
} from "@design.estate/dees-element";
|
|
|
|
import * as plugins from "../plugins.js";
|
|
import { dedocumentSharedStyle } from "../style.js";
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"dedocument-pagecontent": DePageContent;
|
|
}
|
|
}
|
|
|
|
@customElement("dedocument-pagecontent")
|
|
export class DePageContent extends DeesElement {
|
|
public static demo = () => html`
|
|
<dedocument-pagecontent .format="${"a4"}"></dedocument-pagecontent>
|
|
`;
|
|
|
|
@property({
|
|
type: Number,
|
|
})
|
|
public letterData: plugins.tsclass.business.TLetter;
|
|
|
|
@property({
|
|
type: Number,
|
|
})
|
|
public pageNumber: number = 1;
|
|
|
|
@property({
|
|
type: Number,
|
|
})
|
|
public pageTotalNumber: number = 1;
|
|
|
|
@property({
|
|
type: Object,
|
|
reflect: true,
|
|
})
|
|
public documentSettings: plugins.shared.interfaces.IDocumentSettings;
|
|
|
|
constructor() {
|
|
super();
|
|
domtools.DomTools.setupDomTools();
|
|
}
|
|
|
|
public static styles = [
|
|
domtools.elementBasic.staticStyles,
|
|
dedocumentSharedStyle,
|
|
css`
|
|
.content {
|
|
position: absolute;
|
|
|
|
left: var(--LEFT-MARGIN);
|
|
right: var(--RIGHT-MARGIN);
|
|
bottom: calc(var(--DPI-FACTOR) * 4);
|
|
overflow: visible;
|
|
}
|
|
|
|
.content.page--first {
|
|
top: calc(var(--DPI-FACTOR) * 9.85);
|
|
}
|
|
|
|
.content.page--notFirst {
|
|
top: calc(var(--DPI-FACTOR) * 4.5);
|
|
}
|
|
|
|
.content .subject {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.content .text {
|
|
text-align: left;
|
|
}
|
|
|
|
.subjectRepeated {
|
|
position: relative;
|
|
text-align: center;
|
|
background: #eeeeee;
|
|
color: #999;
|
|
border-radius: 50px;
|
|
padding: 5px 10px;
|
|
margin: auto;
|
|
margin-bottom: 10px;
|
|
font-size: 10px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const firstPage = this.pageNumber === 1;
|
|
return html`
|
|
<div class="content ${firstPage ? "page--first" : "page--notFirst"}">
|
|
${firstPage
|
|
? html`<div class="subject">${this.letterData.subject}</div>`
|
|
: null}
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public firstUpdated(
|
|
_changedProperties: Map<string | number | symbol, unknown>
|
|
): void {
|
|
super.firstUpdated(_changedProperties);
|
|
this.checkOverflow();
|
|
}
|
|
|
|
public async checkOverflow() {
|
|
await this.elementDomReady;
|
|
const contentContainer = this.shadowRoot.querySelector(".content");
|
|
if (contentContainer.scrollHeight > contentContainer.clientHeight) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
}
|