1 line
2.2 KiB
JavaScript
Executable File
1 line
2.2 KiB
JavaScript
Executable File
class FormWizard{constructor(t){this.wizard=t,this.form=t.closest("form"),this.validate=this.form?.hasAttribute("data-wizard-validation")??!1,this.tabs=t.querySelectorAll("[data-wizard-nav] .nav-link"),this.tabPanes=t.querySelectorAll("[data-wizard-content] .tab-pane"),this.progressBar=t.querySelector("[data-wizard-progress]"),this.currentIndex=0}init(){this.disableFutureTabs(),this.bindTabClicks(),this.bindButtons(),this.updateProgress(this.currentIndex),this.showTab(this.currentIndex)}disableFutureTabs(){this.validate&&this.tabs.forEach((t,s)=>{0<s&&t.classList.add("disabled")})}bindTabClicks(){this.tabs.forEach((t,s)=>{t.addEventListener("click",t=>{this.validate&&s>this.currentIndex&&!this.validateStep(this.currentIndex)&&(t.preventDefault(),t.stopImmediatePropagation())}),t.addEventListener("shown.bs.tab",()=>{this.currentIndex=s,this.updateProgress(s)})})}bindButtons(){this.wizard.querySelectorAll("[data-wizard-next]").forEach(t=>{t.addEventListener("click",()=>this.nextStep())}),this.wizard.querySelectorAll("[data-wizard-prev]").forEach(t=>{t.addEventListener("click",()=>this.prevStep())}),this.form&&this.form.addEventListener("submit",()=>{this.progressBar&&(this.progressBar.style.width="100%")})}nextStep(){this.currentIndex>=this.tabs.length-1||this.validate&&!this.validateStep(this.currentIndex)||(this.validate&&this.tabs[this.currentIndex+1].classList.remove("disabled"),this.tabs[this.currentIndex].classList.add("wizard-item-done"),this.showTab(this.currentIndex+1))}prevStep(){this.currentIndex<=0||(this.tabs[this.currentIndex-1].classList.remove("wizard-item-done"),this.showTab(this.currentIndex-1))}validateStep(t){if(!this.validate)return!0;t=this.tabPanes[t].querySelectorAll("input, select, textarea");let s=!0;return t.forEach(t=>{t.classList.remove("is-invalid","is-valid"),t.checkValidity()?t.classList.add("is-valid"):(t.classList.add("is-invalid"),s=!1)}),s}updateProgress(t){this.progressBar&&(t=t/(this.tabs.length-1)*100,this.progressBar.style.width=Math.min(t,100)+"%")}showTab(t){t<0||t>=this.tabs.length||this.validate&&this.tabs[t].classList.contains("disabled")||new bootstrap.Tab(this.tabs[t]).show()}}document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[data-wizard]").forEach(t=>{new FormWizard(t).init()})}); |