148 lines
3.4 KiB
TypeScript
148 lines
3.4 KiB
TypeScript
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;
|
|
}
|
|
}
|
|
}
|