dees-document/ts_web/elements/pagecontent.ts

148 lines
3.4 KiB
TypeScript
Raw Normal View History

2023-10-16 16:28:12 +00:00
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
cssManager,
unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as shared from './shared/index.js';
import * as tsclass from '@tsclass/tsclass';
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: tsclass.business.ILetter;
@property({
type: Number,
})
public pageNumber: number = 1;
@property({
type: Number,
})
public pageTotalNumber: number = 1;
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public static styles = [
domtools.elementBasic.staticStyles,
css`
:host {
color: #333;
}
.content {
position: absolute;
left: ${unsafeCSS(shared.leftMargin + 'px')};
right: ${unsafeCSS(shared.rightMargin + 'px')};
bottom: 170px;
overflow: visible;
}
.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;
}
.continuesOnNextPage {
display: inline-block;
background: #eeeeee;
color: #999;
border-radius: 50px;
padding: 5px 10px;
margin-top: 8px;
font-size: 10px;
}
.finalPage {
display: inline-block;
background: #29b000;
color: #fff;
border-radius: 50px;
padding: 5px 10px;
margin-top: 8px;
font-size: 10px;
}
`,
];
public render(): TemplateResult {
return html`
<style>
.content {
top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
}
</style>
<div class="content">
${this.pageNumber === 1
? html`<div class="subject">${this.letterData.subject}</div>`
: html`
<div class="subjectRepeated">
${this.letterData.subject} (Page ${this.pageNumber})
</div>
`}
<slot></slot>
${this.pageTotalNumber !== this.pageNumber
? html`<div class="continuesOnNextPage">Continues on page ${this.pageNumber + 1}</div>`
: html`<div class="finalPage">This is the final page of this document.</div>`}
</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) {
console.log('overflows');
return true;
} else {
console.log('does not overflow!');
return false;
}
}
}