17 lines
8.6 KiB
JavaScript
17 lines
8.6 KiB
JavaScript
/*
|
|
* This file is part of the TYPO3 CMS project.
|
|
*
|
|
* It is free software; you can redistribute it and/or modify it under
|
|
* the terms of the GNU General Public License, either version 2
|
|
* of the License, or any later version.
|
|
*
|
|
* For the full copyright and license information, please read the
|
|
* LICENSE.txt file that was distributed with this source code.
|
|
*
|
|
* The TYPO3 project - inspiring people to share!
|
|
*/
|
|
import{LitElement as f,html as a,nothing as m}from"lit";import{property as d,state as l,customElement as y}from"lit/decorators.js";import{classMap as S}from"lit/directives/class-map.js";import{createRef as b,ref as v}from"lit/directives/ref.js";import{KeyTypesEnum as g}from"@typo3/backend/enum/key-types.js";import k from"@typo3/backend/modal.js";import"@typo3/backend/element/alert-element.js";import"@typo3/backend/element/icon-element.js";import"@typo3/backend/element/progress-tracker-element.js";import"@typo3/backend/element/spinner-element.js";import w from"@typo3/backend/wizard/steps/confirm-step.js";import x from"@typo3/backend/wizard/steps/finisher-step.js";import c from"~labels/backend.wizards.general";import{BeforeNextStepEvent as T}from"@typo3/backend/wizard/events/before-next-step-event.js";var o=function(p,t,e,r){var s=arguments.length,i=s<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,e):r,u;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,t,e,r);else for(var h=p.length-1;h>=0;h--)(u=p[h])&&(i=(s<3?u(i):s>3?u(t,e,i):u(t,e))||i);return s>3&&i&&Object.defineProperty(t,e,i),i};let n=class extends f{constructor(){super(...arguments),this.steps=[],this.skipSummary=!1,this.currentStepIndex=0,this.dataStore={},this.allSteps=[],this.progressTracker=null,this.primaryButtonRef=b(),this.focusPendingStep=null,this.handleAutoAdvance=()=>{this.tryAutoAdvance()},this.handleContentKeydown=t=>{if(t.key!==g.ENTER)return;const e=t.target;!(e instanceof HTMLInputElement)||e.form||e.type==="search"||e.type==="checkbox"||(t.preventDefault(),this.handleNext())}}connectedCallback(){super.connectedCallback(),this.addEventListener("auto-advance",this.handleAutoAdvance),this.progressTracker=document.createElement("typo3-backend-progress-tracker")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("auto-advance",this.handleAutoAdvance),this.progressTracker=null}getStepSummaries(){const t=[];for(const e of this.allSteps)if(this.hasSummary(e)){const r=e.getSummaryData();t.push(...r)}return t}getStoreData(t){return this.dataStore[t]??null}setStoreData(t,e){this.dataStore={...this.dataStore,[t]:e}}getDataStore(){return this.dataStore}clearStoreData(t){const e={...this.dataStore};delete e[t],this.dataStore=e}tryAutoAdvance(){const t=this.getCurrentStep();t.autoAdvance&&t.isComplete()&&this.goToNextStep()}dismissWizard(){k.dismiss()}renderLoader(t){return a`<div class=wizard-loader><typo3-backend-spinner size=large></typo3-backend-spinner><p>${t??c.get("wizard.loading")}</p></div>`}renderError(t,e,r){let s="";e instanceof Error?s=e.message:Array.isArray(e)?s=e.join(`
|
|
`):e&&typeof e=="string"&&(s=e);const i=s?`${t}
|
|
|
|
${s}`:t;return a`<div class=wizard-error><typo3-backend-alert severity=2 heading=${r??c.get("wizard.step.error.title")} message=${i} show-icon></typo3-backend-alert></div>`}render(){return a`<div class=wizard><div class=wizard-progress>${this.renderProgressTracker()}</div><div class=wizard-content aria-live=polite @keydown=${this.handleContentKeydown}>${this.currentStep?.render()}</div><div class=wizard-actions>${this.renderWizardButtons()}</div></div>`}goToNextStep(){this.currentStepIndex<this.allSteps.length-1&&this.goToStep(this.currentStepIndex+1)}goToPreviousStep(){this.currentStepIndex>0&&this.goToStep(this.currentStepIndex-1)}createRenderRoot(){return this}async updated(t){super.updated(t),(t.has("steps")||t.has("submissionService"))&&this.steps?.length&&this.submissionService&&(this.allSteps=[...this.steps,...this.skipSummary?[]:[new w(this)],new x(this,this.submissionService)],this.progressTracker.requestUpdate(),this.currentStep||(this.currentStep=this.allSteps[this.currentStepIndex])),this.currentStep&&t.has("currentStep")&&(this.hasAfterRender(this.currentStep)&&(await this.currentStep.afterRender(),this.requestUpdate()),this.focusPendingStep=this.currentStep),await this.moveFocusIntoStep()}async moveFocusIntoStep(){const t=this.focusPendingStep;if(!t||t!==this.currentStep){this.focusPendingStep=null;return}await this.updateComplete,t===this.currentStep&&this.focusStepContent()&&(this.focusPendingStep=null)}focusStepContent(){const t=this.renderRoot.querySelector(".wizard-content");if(t){if(t.contains(this.ownerDocument.activeElement))return!0;const r=this.findFocusTarget(t);if(r)return r.setAttribute("autofocus",""),r.focus(),!0}return this.renderRoot.querySelector(".wizard-actions")?.contains(this.ownerDocument.activeElement)||this.primaryButtonRef.value?.focus(),!1}findFocusTarget(t){const e=r=>{for(const s of t.querySelectorAll(r))if(!s.matches(":disabled")&&s.checkVisibility())return s;return null};return e("[autofocus]")??e('input[type="radio"]:checked')??e('input:not([type="hidden"]):not([type="radio"]):not([readonly]), select, button, textarea:not([readonly]), [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])')}hasAfterRender(t){return t&&typeof t.afterRender=="function"}hasSummary(t){return"getSummaryData"in t}hasValue(t){return"getValue"in t&&"setValue"in t&&"reset"in t}renderWizardButtons(){return a`${this.renderPreviousButton()} ${this.renderNextButtons()}`}renderPreviousButton(){const t=this.currentStepIndex===0,e=this.currentStepIndex===this.allSteps.length-1;return a`<button type=button class=${S({btn:!0,"btn-secondary":!0,disabled:t||e})} @click=${this.handlePrevious}><typo3-backend-icon identifier=actions-arrow-start-alt size=small bidi></typo3-backend-icon>${c.get("wizard.buttons.previous")}</button>`}renderNextButtons(){const t=this.currentStep?.isComplete();let e,r=m;if(this.currentStep?.key==="finisher"){e=c.get("wizard.buttons.finish");const s=this.currentStep;s?.resetButtonTitle&&(r=a`<button type=button class=${S({btn:!0,"btn-secondary":!0})} @click=${this.handleRestart}><typo3-backend-icon identifier=actions-plus size=small></typo3-backend-icon>${s?.resetButtonTitle}</button>`)}else this.currentStep?.key==="confirm"?e=this.confirmButtonLabel:e=c.get("wizard.buttons.next");return a`<div>${r} <button type=button ${v(this.primaryButtonRef)} class=${S({btn:!0,"btn-primary":!0,disabled:!t})} @click=${this.handleNext}>${e}<typo3-backend-icon identifier=actions-arrow-end-alt bidi size=small></typo3-backend-icon></button></div>`}getCurrentStep(){return this.currentStep}async goToStep(t){if(!(t<0||t>=this.allSteps.length||t===this.currentStepIndex)){if(t>this.currentStepIndex){for(let r=this.currentStepIndex;r<t;r++){const s=this.allSteps[r];if(!s.isComplete()){r!==this.currentStepIndex&&(this.currentStepIndex=r,this.currentStep=this.allSteps[r],await this.updateComplete);return}s.beforeAdvance&&await s.beforeAdvance()}const e=new T(this.currentStep.key,this.currentStepIndex);if(this.dispatchEvent(e),e.detail?.result){const r=e.detail.result;typeof r=="object"&&typeof r.then=="function"&&await r,await this.updateComplete}}else for(let e=this.currentStepIndex;e>t;e--){const r=this.allSteps[e];this.hasValue(r)&&r.reset()}this.currentStepIndex=t,this.currentStep=this.allSteps[t],await this.updateComplete}}getProgressSteps(){return this.allSteps.map(t=>({key:t.key,title:t.title}))}getCurrentStepIndex(){return this.currentStepIndex}renderProgressTracker(){const t=this.getProgressSteps(),e=this.getCurrentStepIndex(),r=t.map(i=>i.title),s=e+1;return this.progressTracker&&(this.progressTracker.stages=r,this.progressTracker.activeStage=s),a`${this.progressTracker}`}handlePrevious(){const t=this.currentStepIndex===0,e=this.currentStepIndex===this.allSteps.length-1;t||e||this.goToPreviousStep()}async handleNext(){if(!this.currentStep.isComplete())return;if(this.currentStepIndex===this.allSteps.length-1){this.currentStep.beforeAdvance&&await this.currentStep.beforeAdvance();return}this.goToNextStep()}handleRestart(){this.dataStore={},this.goToStep(0).then(()=>this.updateComplete)}};o([d({type:Array,attribute:!1})],n.prototype,"steps",void 0),o([d({type:String,attribute:"confirm-button-label"})],n.prototype,"confirmButtonLabel",void 0),o([d({type:Boolean,attribute:"skip-summary"})],n.prototype,"skipSummary",void 0),o([d({type:Object,attribute:!1})],n.prototype,"submissionService",void 0),o([l()],n.prototype,"currentStepIndex",void 0),o([l()],n.prototype,"currentStep",void 0),o([l()],n.prototype,"dataStore",void 0),o([l()],n.prototype,"allSteps",void 0),n=o([y("typo3-backend-wizard")],n);export{n as Wizard};
|