112 lines
4.3 KiB
JavaScript
112 lines
4.3 KiB
JavaScript
import ATab from '/js/libs/js-ATab.js'
|
|
|
|
export default class AWizard extends ATab {
|
|
constructor(content) {
|
|
super(null, content, false);
|
|
this.isRender = false;
|
|
this.isStopNextPage = false;
|
|
this.layBtn = `<div class="form-group mb-4">
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 waves-effect waves-float d-f a-i-center btnNext">
|
|
Next
|
|
</button>
|
|
</div>`;
|
|
this.layBtn1 = `<div class="form-group d-f mb-4">
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 waves-effect waves-float d-f a-i-center btnNext">
|
|
Next
|
|
</button>
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 ml-2 waves-effect waves-float d-f a-i-center btnBack">
|
|
Back
|
|
</button>
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 ml-2 waves-effect waves-float d-f a-i-center btnCancel">
|
|
Cancel
|
|
</button>
|
|
</div>`;
|
|
this.layBtn2 = `<div class="form-group d-f mb-4">
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 waves-effect waves-float d-f a-i-center btnFinish">
|
|
Finish
|
|
</button>
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 ml-2 waves-effect waves-float d-f a-i-center btnBack">
|
|
Back
|
|
</button>
|
|
<button type="button" class="btn btn-effect btn-primary mt-2 ml-2 waves-effect waves-float d-f a-i-center btnCancel">
|
|
Cancel
|
|
</button>
|
|
</div>`;
|
|
|
|
}
|
|
showPage(i) {
|
|
this.ctabs[i].removeAttribute("hide");
|
|
}
|
|
hidePage(i) {
|
|
this.ctabs[i].setAttribute("hide", "");
|
|
}
|
|
renderTab() {
|
|
if (this.isRender) return;
|
|
let l = this.ctabs.length;
|
|
if (l > 1) {
|
|
this.setLayout(0, this.layBtn);
|
|
}
|
|
if (l > 2) {
|
|
for (var i = 1; i < l - 1; i++) {
|
|
this.setLayout(i, this.layBtn1);
|
|
}
|
|
}
|
|
this.setLayout(l - 1, this.layBtn2);
|
|
|
|
this.tabContents.querySelectorAll(".btnNext").forEach((el, idx) => {
|
|
el.addEventListener("click", ((e) => { this.btnNext_Click(e, idx); }).bind(this));
|
|
});
|
|
this.tabContents.querySelectorAll(".btnBack").forEach((el, idx) => {
|
|
el.addEventListener("click", ((e) => { this.btnBack_Click(e, idx); }).bind(this));
|
|
});
|
|
this.tabContents.querySelectorAll(".btnFinish").forEach((el) => {
|
|
|
|
});
|
|
this.tabContents.querySelectorAll(".btnCancel").forEach((el) => {
|
|
el.addEventListener("click", ((e) => { this.btnCancel_Click(e); }).bind(this));
|
|
});
|
|
this.isRender = true;
|
|
}
|
|
checkSelectedNext(idx) {
|
|
while (idx + 1 < this.ctabs.length) {
|
|
if (this.ctabs[idx + 1].hasAttribute("hide")) {
|
|
idx += 1;
|
|
} else {
|
|
return idx + 1;
|
|
}
|
|
};
|
|
return 0;
|
|
}
|
|
checkSelectedBack(idx) {
|
|
while (idx >= 0) {
|
|
if (this.ctabs[idx].hasAttribute("hide")) {
|
|
idx -= 1;
|
|
} else {
|
|
return idx;
|
|
}
|
|
};
|
|
return idx;
|
|
}
|
|
setLayout(idx, layout) {
|
|
this.ctabs[idx].insertAdjacentHTML('beforeend', layout);
|
|
}
|
|
setNameButton(id, name) {
|
|
|
|
}
|
|
btnCancel_Click(e) {
|
|
this.selectedTab(0);
|
|
}
|
|
btnNext_Click(e, idx) {
|
|
this.trigger("onBeforeNext", { "currentPage": this.ctabs[idx], "indexPage": idx, "currentButton": e.currentTarget });
|
|
if (this.isStopNextPage) return;
|
|
this.selectedTab(this.checkSelectedNext(idx));
|
|
|
|
this.trigger("onAfterNext");
|
|
}
|
|
btnBack_Click(e, idx) {
|
|
this.selectedTab(this.checkSelectedBack(idx));
|
|
}
|
|
btnFinish_Click(e) {
|
|
|
|
}
|
|
} |