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

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

@ -27,40 +27,56 @@ declare global {
@customElement('dees-stepper')
export class DeesStepper extends DeesElement {
public static demo = () => html` <dees-stepper></dees-stepper> `;
public static demo = () =>
html`
<dees-stepper
.steps=${[
{
title: 'Whats your name?',
content: html`
<dees-form>
<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>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm.addEventListener('formData', eventArg => {
stepperArg.goNext();
})
}
},
{
title: 'Whats your mobile number?',
content: html``,
},
{
title: 'Whats the verification code?',
content: html``,
},
{
title: 'Whats your new password?',
content: html``,
},
{
title: 'Verification:',
content: html``,
},
] as IStep[]}
></dees-stepper>
`;
@property({
type: Array,
})
public steps: IStep[] = [
{
title: 'Whats your name?',
content: html`
<dees-form>
<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>
</dees-form>
`,
},
{
title: 'Whats your mobile number?',
content: html``,
},
{
title: 'Whats the verification code?',
content: html``,
},
{
title: 'Whats your new password?',
content: html``,
},
{
title: 'Verification:',
content: html``,
},
];
public steps: IStep[] = [];
@property({
type: Object,
@ -115,6 +131,10 @@ export class DeesStepper extends DeesElement {
filter: opacity(0);
}
.stp:last-child {
margin-bottom: 100vh;
}
.step .stepCounter {
position: absolute;
top: 0px;
@ -159,9 +179,20 @@ export class DeesStepper extends DeesElement {
<div class="stepperContainer">
${this.steps.map(
(stepArg) =>
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>` : ``}
<div class="stepCounter">Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length} </div>
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>`
: ``}
<div class="stepCounter">
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
${this.steps.length}
</div>
<div class="title">${stepArg.title}</div>
<div class="content">${stepArg.content}</div>
</div> `
@ -171,8 +202,8 @@ export class DeesStepper extends DeesElement {
}
public getIndexOfStep = (stepArg: IStep): number => {
return this.steps.findIndex(stepArg2 => stepArg === stepArg2 )
}
return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
};
public firstUpdated() {
this.selectedStep = this.steps[0];
@ -191,19 +222,27 @@ export class DeesStepper extends DeesElement {
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
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(selectedStepElement);
const scrollPosition = selectedStepElement.offsetTop - (stepperContainer.offsetHeight / 2) + (selectedStepElement.offsetHeight / 2) ;
const scrollPosition =
selectedStepElement.offsetTop -
stepperContainer.offsetHeight / 2 +
selectedStepElement.offsetHeight / 2;
console.log(scrollPosition);
const domtoolsInstance = await domtools.DomTools.setupDomTools()
const domtoolsInstance = await domtools.DomTools.setupDomTools();
if (!this.scroller) {
this.scroller = new domtools.plugins.SweetScroll({
vertical: true,
horizontal: false,
easing: 'easeInOutQuint'
}, stepperContainer);
this.scroller = new domtools.plugins.SweetScroll(
{
vertical: true,
horizontal: false,
easing: 'easeInOutQuint',
},
stepperContainer
);
}
if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
this.selectedStep.validationFuncCalled = true;
@ -213,7 +252,7 @@ export class DeesStepper extends DeesElement {
}
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];
await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(100);
@ -221,7 +260,7 @@ export class DeesStepper extends DeesElement {
}
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];
}
}