2021-09-01 19:48:22 +00:00
|
|
|
import {
|
|
|
|
DeesElement,
|
|
|
|
customElement,
|
|
|
|
html,
|
|
|
|
css,
|
|
|
|
unsafeCSS,
|
|
|
|
cssManager,
|
|
|
|
property,
|
|
|
|
TemplateResult,
|
|
|
|
} from '@designestate/dees-element';
|
2021-08-29 15:10:25 +00:00
|
|
|
|
|
|
|
import * as domtools from '@designestate/dees-domtools';
|
|
|
|
|
2021-09-01 19:48:22 +00:00
|
|
|
export interface IStep {
|
|
|
|
title: string;
|
|
|
|
content: TemplateResult;
|
|
|
|
}
|
|
|
|
|
2021-09-08 22:02:35 +00:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'dees-stepper': DeesStepper;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-29 15:10:25 +00:00
|
|
|
@customElement('dees-stepper')
|
|
|
|
export class DeesStepper extends DeesElement {
|
2021-09-01 19:48:22 +00:00
|
|
|
public static demo = () => html` <dees-stepper></dees-stepper> `;
|
2021-08-29 15:10:25 +00:00
|
|
|
|
2021-09-01 19:48:22 +00:00
|
|
|
@property({
|
|
|
|
type: Array,
|
|
|
|
})
|
|
|
|
public steps: IStep[] = [
|
|
|
|
{
|
2021-09-01 20:43:31 +00:00
|
|
|
title: 'Whats your name?',
|
2021-09-01 19:48:22 +00:00
|
|
|
content: html`
|
|
|
|
<dees-form>
|
2021-09-01 20:43:31 +00:00
|
|
|
<dees-input-text key="email" label="Your Email" value="hello@something.com" disabled></dees-input-text>
|
|
|
|
<dees-input-text key="firstName" required label="Vorname"></dees-input-text>
|
|
|
|
<dees-input-text key="lastName" required label="Nachname"></dees-input-text>
|
|
|
|
<dees-form-submit>Next</dees-form-submit>
|
2021-09-01 19:48:22 +00:00
|
|
|
</dees-form>
|
|
|
|
`,
|
|
|
|
},
|
|
|
|
{
|
2021-09-01 20:43:31 +00:00
|
|
|
title: 'Whats your mobile number?',
|
2021-09-01 19:48:22 +00:00
|
|
|
content: html``,
|
|
|
|
},
|
|
|
|
{
|
2021-09-01 20:43:31 +00:00
|
|
|
title: 'Whats the verification code?',
|
|
|
|
content: html``,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Whats your new password?',
|
2021-09-01 19:48:22 +00:00
|
|
|
content: html``,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Verification:',
|
|
|
|
content: html``,
|
|
|
|
},
|
|
|
|
];
|
2021-08-29 15:10:25 +00:00
|
|
|
|
|
|
|
@property({
|
2021-09-01 19:48:22 +00:00
|
|
|
type: Object,
|
2021-08-29 15:10:25 +00:00
|
|
|
})
|
2021-09-01 19:48:22 +00:00
|
|
|
public selectedStep: IStep;
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
}
|
2021-08-29 15:10:25 +00:00
|
|
|
|
|
|
|
public static styles = [
|
|
|
|
cssManager.defaultStyles,
|
|
|
|
css`
|
|
|
|
:host {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.stepperContainer {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2021-09-01 19:48:22 +00:00
|
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
2021-08-29 15:10:25 +00:00
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.step {
|
2021-09-01 19:48:22 +00:00
|
|
|
position: relative;
|
2021-09-01 20:43:31 +00:00
|
|
|
pointer-events: none;
|
2021-09-01 19:48:22 +00:00
|
|
|
overflow: hidden;
|
2021-09-01 20:43:31 +00:00
|
|
|
transition: all 0.7s ease-in-out;
|
|
|
|
max-width: 500px;
|
2021-08-29 15:10:25 +00:00
|
|
|
min-height: 300px;
|
2021-09-01 20:43:31 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
background: ${cssManager.bdTheme('#ffffff', '#181818')};
|
2021-09-01 19:48:22 +00:00
|
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
2021-08-29 15:10:25 +00:00
|
|
|
margin: auto;
|
|
|
|
margin-bottom: 20px;
|
2021-09-01 19:48:22 +00:00
|
|
|
filter: opacity(0.5);
|
|
|
|
box-shadow: 0px 0px 3px #00000010;
|
|
|
|
}
|
|
|
|
|
|
|
|
.step.selected {
|
2021-09-01 20:43:31 +00:00
|
|
|
pointer-events: all;
|
2021-09-01 19:48:22 +00:00
|
|
|
filter: opacity(1);
|
|
|
|
box-shadow: 0px 0px 5px #00000010;
|
|
|
|
}
|
2021-08-29 15:10:25 +00:00
|
|
|
|
2021-09-01 20:43:31 +00:00
|
|
|
.step.hiddenStep {
|
|
|
|
filter: opacity(0);
|
|
|
|
}
|
|
|
|
|
2021-09-01 19:48:22 +00:00
|
|
|
.step .stepCounter {
|
|
|
|
position: absolute;
|
|
|
|
top: 0px;
|
|
|
|
right: 0px;
|
|
|
|
padding: 10px 15px;
|
|
|
|
font-size: 12px;
|
2021-09-01 20:43:31 +00:00
|
|
|
border-bottom-left-radius: 3px;
|
|
|
|
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
|
|
|
}
|
|
|
|
|
|
|
|
.step .goBack {
|
|
|
|
position: absolute;
|
|
|
|
top: 0px;
|
|
|
|
left: 0px;
|
|
|
|
padding: 10px 15px;
|
|
|
|
font-size: 12px;
|
|
|
|
border-bottom-right-radius: 3px;
|
2021-09-01 19:48:22 +00:00
|
|
|
background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
|
2021-09-01 20:43:31 +00:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.step .goBack:hover {
|
|
|
|
background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
|
2021-09-01 19:48:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.step .title {
|
|
|
|
text-align: center;
|
2021-09-01 20:43:31 +00:00
|
|
|
padding-top: 50px;
|
2021-09-01 19:48:22 +00:00
|
|
|
font-family: Roboto;
|
|
|
|
font-size: 25px;
|
|
|
|
font-weight: 300;
|
2021-08-29 15:10:25 +00:00
|
|
|
}
|
2021-09-01 20:43:31 +00:00
|
|
|
|
|
|
|
.step .content {
|
|
|
|
padding: 20px;
|
|
|
|
}
|
2021-09-01 19:48:22 +00:00
|
|
|
`,
|
|
|
|
];
|
2021-08-29 15:10:25 +00:00
|
|
|
|
2021-09-01 19:48:22 +00:00
|
|
|
public render() {
|
2021-08-29 15:10:25 +00:00
|
|
|
return html`
|
|
|
|
<div class="stepperContainer">
|
2021-09-01 19:48:22 +00:00
|
|
|
${this.steps.map(
|
|
|
|
(stepArg) =>
|
2021-09-01 20:43:31 +00:00
|
|
|
html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}">
|
|
|
|
${this.getIndexOfStep(stepArg) > 0 ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``}
|
2021-09-01 19:48:22 +00:00
|
|
|
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
|
2021-09-01 20:43:31 +00:00
|
|
|
<div class="title">${stepArg.title}</div>
|
2021-09-01 19:48:22 +00:00
|
|
|
<div class="content">${stepArg.content}</div>
|
|
|
|
</div> `
|
|
|
|
)}
|
2021-08-29 15:10:25 +00:00
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
2021-09-01 19:48:22 +00:00
|
|
|
|
2021-09-01 20:43:31 +00:00
|
|
|
public getIndexOfStep = (stepArg: IStep): number => {
|
|
|
|
return this.steps.findIndex(stepArg2 => stepArg === stepArg2 )
|
|
|
|
}
|
|
|
|
|
2021-09-01 19:48:22 +00:00
|
|
|
public firstUpdated() {
|
|
|
|
this.selectedStep = this.steps[0];
|
|
|
|
this.setScrollStatus();
|
|
|
|
}
|
|
|
|
|
|
|
|
public updated() {
|
|
|
|
this.setScrollStatus();
|
|
|
|
}
|
|
|
|
|
2021-09-01 20:44:43 +00:00
|
|
|
public scroller: typeof domtools.plugins.SweetScroll.prototype;
|
2021-09-01 19:48:22 +00:00
|
|
|
|
|
|
|
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');
|
2021-09-01 20:43:31 +00:00
|
|
|
if (!stepperContainer.style.paddingTop) {
|
|
|
|
stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`;
|
|
|
|
}
|
2021-09-01 19:48:22 +00:00
|
|
|
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) {
|
2021-09-01 20:44:43 +00:00
|
|
|
this.scroller = new domtools.plugins.SweetScroll({
|
2021-09-01 20:43:31 +00:00
|
|
|
vertical: true,
|
|
|
|
horizontal: false,
|
|
|
|
easing: 'easeInOutQuint'
|
|
|
|
}, stepperContainer);
|
2021-09-01 19:48:22 +00:00
|
|
|
}
|
|
|
|
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);
|
2021-09-01 20:43:31 +00:00
|
|
|
this.selectedStep = this.steps[currentIndex + 1];
|
2021-09-01 19:48:22 +00:00
|
|
|
}
|
|
|
|
}
|