design.estate/dees-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2021-09-14 17:31:16 +02:00
parent 9ce4ca14b8
commit 6554bfd721
1 changed files with 84 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
ts_web/elements/dees-stepper.ts
View File

@ -27,22 +27,31 @@ declare global {
@customElement('dees-stepper') @customElement('dees-stepper')
export class DeesStepper extends DeesElement { export class DeesStepper extends DeesElement {
public static demo = () => html` <dees-stepper></dees-stepper> `; public static demo = () =>
html`
@property({ <dees-stepper
type: Array, .steps=${[
})
public steps: IStep[] = [
{ {
title: 'Whats your name?', title: 'Whats your name?',
content: html` content: html`
<dees-form> <dees-form>
<dees-input-text key="email" label="Your Email" value="hello@something.com" disabled></dees-input-text> <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="firstName" required label="Vorname"></dees-input-text>
<dees-input-text key="lastName" required label="Nachname"></dees-input-text> <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
<dees-form-submit>Next</dees-form-submit> <dees-form-submit>Next</dees-form-submit>
</dees-form> </dees-form>
`, `,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm.addEventListener('formData', eventArg => {
stepperArg.goNext();
})
}
}, },
{ {
title: 'Whats your mobile number?', title: 'Whats your mobile number?',
@ -60,7 +69,14 @@ export class DeesStepper extends DeesElement {
title: 'Verification:', title: 'Verification:',
content: html``, content: html``,
}, },
]; ] as IStep[]}
></dees-stepper>
`;
@property({
type: Array,
})
public steps: IStep[] = [];
@property({ @property({
type: Object, type: Object,
@ -115,6 +131,10 @@ export class DeesStepper extends DeesElement {
filter: opacity(0); filter: opacity(0);
} }
.stp:last-child {
margin-bottom: 100vh;
}
.step .stepCounter { .step .stepCounter {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -159,9 +179,20 @@ export class DeesStepper extends DeesElement {
<div class="stepperContainer"> <div class="stepperContainer">
${this.steps.map( ${this.steps.map(
(stepArg) => (stepArg) =>
html`<div class="step ${stepArg === this.selectedStep ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' : ''}"> html`<div
${this.getIndexOfStep(stepArg) > 0 ? html`<div class="goBack" @click=${this.goBack}><- go to previous step</div>` : ``} class="step ${stepArg === this.selectedStep
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div> ? '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>`
: ``}
<div class="stepCounter">
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
${this.steps.length}
</div>
<div class="title">${stepArg.title}</div> <div class="title">${stepArg.title}</div>
<div class="content">${stepArg.content}</div> <div class="content">${stepArg.content}</div>
</div> ` </div> `
@ -171,8 +202,8 @@ export class DeesStepper extends DeesElement {
} }
public getIndexOfStep = (stepArg: IStep): number => { public getIndexOfStep = (stepArg: IStep): number => {
return this.steps.findIndex(stepArg2 => stepArg === stepArg2 ) return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
} };
public firstUpdated() { public firstUpdated() {
this.selectedStep = this.steps[0]; this.selectedStep = this.steps[0];
@ -191,19 +222,27 @@ export class DeesStepper extends DeesElement {
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step'); const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected'); const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
if (!stepperContainer.style.paddingTop) { if (!stepperContainer.style.paddingTop) {
stepperContainer.style.paddingTop = `${(stepperContainer.offsetHeight / 2) - (selectedStepElement.offsetHeight / 2)}px`; stepperContainer.style.paddingTop = `${
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
}px`;
} }
console.log('Setting scroll status'); console.log('Setting scroll status');
console.log(selectedStepElement); console.log(selectedStepElement);
const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ; const scrollPosition =
selectedStepElement.offsetTop -
stepperContainer.offsetHeight / 2 +
selectedStepElement.offsetHeight / 2;
console.log(scrollPosition); console.log(scrollPosition);
const domtoolsInstance = await domtools.DomTools.setupDomTools() const domtoolsInstance = await domtools.DomTools.setupDomTools();
if (!this.scroller) { if (!this.scroller) {
this.scroller = new domtools.plugins.SweetScroll({ this.scroller = new domtools.plugins.SweetScroll(
{
vertical: true, vertical: true,
horizontal: false, horizontal: false,
easing: 'easeInOutQuint' easing: 'easeInOutQuint',
}, stepperContainer); },
stepperContainer
);
} }
if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) { if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
this.selectedStep.validationFuncCalled = true; this.selectedStep.validationFuncCalled = true;
@ -213,7 +252,7 @@ export class DeesStepper extends DeesElement {
} }
public async goBack() { public async goBack() {
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep); const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
this.selectedStep = this.steps[currentIndex - 1]; this.selectedStep = this.steps[currentIndex - 1];
await this.domtoolsPromise; await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(100); await this.domtools.convenience.smartdelay.delayFor(100);
@ -221,7 +260,7 @@ export class DeesStepper extends DeesElement {
} }
public goNext() { public goNext() {
const currentIndex = this.steps.findIndex(stepArg => stepArg === this.selectedStep); const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
this.selectedStep = this.steps[currentIndex + 1]; this.selectedStep = this.steps[currentIndex + 1];
} }
} }