dees-catalog/ts_web/elements/dees-stepper.ts
2021-09-01 21:48:22 +02:00

173 lines
4.5 KiB
TypeScript

import {
DeesElement,
customElement,
html,
css,
unsafeCSS,
cssManager,
property,
TemplateResult,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
export interface IStep {
title: string;
content: TemplateResult;
}
@customElement('dees-stepper')
export class DeesStepper extends DeesElement {
public static demo = () => html` <dees-stepper></dees-stepper> `;
@property({
type: Array,
})
public steps: IStep[] = [
{
title: 'Who are you?',
content: html`
<dees-form>
<dees-input-text label="Your Email" value="hello@something.com" disabled></dees-input-text>
</dees-form>
`,
},
{
title: 'Verification:',
content: html``,
},
{
title: 'Verification:',
content: html``,
},
{
title: 'Verification:',
content: html``,
},
];
@property({
type: Object,
})
public selectedStep: IStep;
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
position: absolute;
width: 100%;
height: 100%;
}
.stepperContainer {
position: absolute;
width: 100%;
height: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
overflow: hidden;
}
.step {
position: relative;
overflow: hidden;
transition: all 0.7s ease-out;
max-width: 600px;
min-height: 300px;
border-radius: 10px;
background: ${cssManager.bdTheme('#ffffff', '#222')};
color: ${cssManager.bdTheme('#333', '#fff')};
margin: auto;
margin-bottom: 20px;
filter: opacity(0.5);
box-shadow: 0px 0px 3px #00000010;
}
.step.selected {
filter: opacity(1);
box-shadow: 0px 0px 5px #00000010;
}
.step .stepCounter {
position: absolute;
top: 0px;
right: 0px;
padding: 10px 15px;
font-size: 12px;
border-bottom-left-radius: 10px;
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
}
.step .title {
text-align: center;
padding: 30px;
font-family: Roboto;
font-size: 25px;
font-weight: 300;
}
`,
];
public render() {
return html`
<div class="stepperContainer">
${this.steps.map(
(stepArg) =>
html` <div class="step ${stepArg === this.selectedStep ? 'selected' : null}">
<div class="title">${stepArg.title}</div>
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
<div class="content">${stepArg.content}</div>
</div> `
)}
</div>
`;
}
public firstUpdated() {
this.selectedStep = this.steps[0];
this.setScrollStatus();
domtools.plugins.smartdelay.delayFor(2000).then(() => {
this.selectedStep = this.steps[1];
domtools.plugins.smartdelay.delayFor(2000).then(() => {
this.goBack();
})
})
}
public updated() {
this.setScrollStatus();
}
public scroller: typeof domtools.plugins.sweetScroll.prototype;
public async setScrollStatus() {
await domtools.plugins.smartdelay.delayFor(50);
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`;
console.log('Setting scroll status');
console.log(selectedStepElement);
const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ;
console.log(scrollPosition);
const domtoolsInstance = await domtools.DomTools.setupDomTools()
if (!this.scroller) {
this.scroller = new domtools.plugins.sweetScroll({}, stepperContainer);
}
this.scroller.to(scrollPosition);
}
public goBack() {
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
this.selectedStep = this.steps[currentIndex - 1];
}
public goNext() {
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep);
this.selectedStep = this.steps[currentIndex - 1];
}
}