diff --git a/package-lock.json b/package-lock.json index d14c560..cedb708 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.50", "license": "MIT", "dependencies": { - "@designestate/dees-domtools": "^1.0.89", + "@designestate/dees-domtools": "^1.0.90", "@designestate/dees-element": "^1.0.19", "@designestate/dees-wcctools": "^1.0.57", "@fortawesome/fontawesome-svg-core": "^1.2.36", @@ -1893,9 +1893,9 @@ } }, "node_modules/@designestate/dees-domtools": { - "version": "1.0.89", - "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz", - "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==", + "version": "1.0.90", + "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz", + "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==", "license": "MIT", "dependencies": { "@apiglobal/typedrequest": "^1.0.56", @@ -17435,9 +17435,9 @@ } }, "@designestate/dees-domtools": { - "version": "1.0.89", - "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.89.tgz", - "integrity": "sha512-/klmHTpv7vHVe1iwWT5oDLwkcalmrDd4qNxB0duRXzr3u9hrbu6ocraeWr8rmwqJGG0W8GfkL/8z2ow0NezqhQ==", + "version": "1.0.90", + "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.90.tgz", + "integrity": "sha512-tQ8tlBunWMSza+kvZaCVExJnl45jgNGuqbK9bdPBczwllUAVNLVRNaAucEeMj1SiDAKOg8zwshkQJ4AWcjSidw==", "requires": { "@apiglobal/typedrequest": "^1.0.56", "@designestate/dees-comms": "^1.0.9", diff --git a/package.json b/package.json index 9d9d435..8751e12 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "author": "Lossless GmbH", "license": "MIT", "dependencies": { - "@designestate/dees-domtools": "^1.0.89", + "@designestate/dees-domtools": "^1.0.90", "@designestate/dees-element": "^1.0.19", "@designestate/dees-wcctools": "^1.0.57", "@fortawesome/fontawesome-svg-core": "^1.2.36", diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts index 9e0bd47..1ca88cf 100644 --- a/ts_web/elements/dees-input-text.ts +++ b/ts_web/elements/dees-input-text.ts @@ -27,7 +27,7 @@ export class DeesInputText extends DeesElement { @property({ type: String }) - public value: string; + public value: string = ''; @property({ type: Boolean @@ -94,7 +94,7 @@ export class DeesInputText extends DeesElement {
${this.label}
- +
`; } diff --git a/ts_web/elements/dees-stepper.ts b/ts_web/elements/dees-stepper.ts index e2be309..6a8f17c 100644 --- a/ts_web/elements/dees-stepper.ts +++ b/ts_web/elements/dees-stepper.ts @@ -1,26 +1,60 @@ -import { DeesElement, customElement, html, css, unsafeCSS, cssManager, property } from '@designestate/dees-element'; +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` - - `; + public static demo = () => html` `; + + @property({ + type: Array, + }) + public steps: IStep[] = [ + { + title: 'Who are you?', + content: html` + + + + `, + }, + { + title: 'Verification:', + content: html``, + }, + { + title: 'Verification:', + content: html``, + }, + { + title: 'Verification:', + content: html``, + }, + ]; + + @property({ + type: Object, + }) + public selectedStep: IStep; constructor() { super(); } - @property({ - type: Array - }) - public steps = [{ - title: 'Who are you?' - }, { - title: 'Verification:' - }] - public static styles = [ cssManager.defaultStyles, css` @@ -33,29 +67,106 @@ export class DeesStepper extends DeesElement { position: absolute; width: 100%; height: 100%; - background: #111; + 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: #222; + 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; } - ` - ] - public render () { + .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`
- ${this.steps.map(stepArg => html` -
- `)} + ${this.steps.map( + (stepArg) => + html`
+
${stepArg.title}
+
Step ${this.steps.findIndex(elementArg => elementArg === stepArg) + 1} of ${this.steps.length}
+
${stepArg.content}
+
` + )}
`; } -} \ No newline at end of file + + 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]; + } +} diff --git a/ts_web/elements/dees-updater.ts b/ts_web/elements/dees-updater.ts index a526c35..3e5a48e 100644 --- a/ts_web/elements/dees-updater.ts +++ b/ts_web/elements/dees-updater.ts @@ -60,7 +60,7 @@ export class DeesUpdater extends LitElement { grid-template-columns: 50% 50%; } - +
@@ -74,4 +74,9 @@ export class DeesUpdater extends LitElement { > `; } + + private windowLayerClicked() { + const windowLayer = this.shadowRoot.querySelector('dees-windowlayer'); + windowLayer.toggleVisibility(); + } } diff --git a/ts_web/elements/dees-windowlayer.ts b/ts_web/elements/dees-windowlayer.ts index e4f7732..e6fb646 100644 --- a/ts_web/elements/dees-windowlayer.ts +++ b/ts_web/elements/dees-windowlayer.ts @@ -10,8 +10,15 @@ declare global { @customElement('dees-windowlayer') export class DeesWindowLayer extends LitElement { + // STATIC public static demo = () => html``; + // INSTANCE + @property({ + type: Boolean + }) + public visible = false; + constructor() { super(); domtools.elementBasic.setup(); @@ -22,8 +29,8 @@ export class DeesWindowLayer extends LitElement { ${domtools.elementBasic.styles} -
+
`; @@ -49,7 +58,15 @@ export class DeesWindowLayer extends LitElement { firstUpdated() { setTimeout(() => { - this.shadowRoot.querySelector('.windowOverlay').classList.add('visible'); + this.visible = true; }, 100); } + + dispatchClicked() { + this.dispatchEvent(new CustomEvent('clicked')) + } + + public toggleVisibility () { + this.visible = !this.visible; + } }