2020-05-13 16:23:41 -04:00
|
|
|
import I18n from "I18n";
|
2020-04-16 01:58:04 -04:00
|
|
|
import { schedule } from "@ember/runloop";
|
2019-10-23 12:30:52 -04:00
|
|
|
import Component from "@ember/component";
|
2016-09-22 14:39:36 -04:00
|
|
|
import getUrl from "discourse-common/lib/get-url";
|
2020-01-16 12:56:53 -05:00
|
|
|
import discourseComputed, { observes } from "discourse-common/utils/decorators";
|
2019-11-05 13:43:49 -05:00
|
|
|
import { htmlSafe } from "@ember/template";
|
2016-08-25 13:14:56 -04:00
|
|
|
|
2016-09-15 16:01:44 -04:00
|
|
|
jQuery.fn.wiggle = function(times, duration) {
|
|
|
|
if (times > 0) {
|
|
|
|
this.animate(
|
|
|
|
{
|
|
|
|
marginLeft: times-- % 2 === 0 ? -15 : 15
|
|
|
|
},
|
|
|
|
duration,
|
|
|
|
0,
|
|
|
|
() => this.wiggle(times, duration)
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
this.animate({ marginLeft: 0 }, duration, 0);
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
|
2016-09-20 12:28:22 -04:00
|
|
|
const alreadyWarned = {};
|
|
|
|
|
2019-10-23 12:30:52 -04:00
|
|
|
export default Component.extend({
|
2016-08-25 13:14:56 -04:00
|
|
|
classNames: ["wizard-step"],
|
|
|
|
saving: null,
|
|
|
|
|
|
|
|
didInsertElement() {
|
2019-01-19 04:05:51 -05:00
|
|
|
this._super(...arguments);
|
2016-08-25 13:14:56 -04:00
|
|
|
this.autoFocus();
|
|
|
|
},
|
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("step.index")
|
2018-07-30 11:56:48 -04:00
|
|
|
showQuitButton: index => index === 0,
|
2016-09-14 16:36:08 -04:00
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("step.displayIndex", "wizard.totalSteps")
|
2016-08-25 13:14:56 -04:00
|
|
|
showNextButton: (current, total) => current < total,
|
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("step.displayIndex", "wizard.totalSteps")
|
2016-08-31 13:35:49 -04:00
|
|
|
showDoneButton: (current, total) => current === total,
|
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed(
|
2018-11-15 14:44:19 -05:00
|
|
|
"step.index",
|
|
|
|
"step.displayIndex",
|
|
|
|
"wizard.totalSteps",
|
|
|
|
"wizard.completed"
|
|
|
|
)
|
|
|
|
showFinishButton: (index, displayIndex, total, completed) => {
|
|
|
|
return index !== 0 && displayIndex !== total && completed;
|
|
|
|
},
|
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("step.index")
|
2018-07-30 11:56:48 -04:00
|
|
|
showBackButton: index => index > 0,
|
2016-08-25 13:14:56 -04:00
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("step.banner")
|
2016-09-20 13:25:56 -04:00
|
|
|
bannerImage(src) {
|
|
|
|
if (!src) {
|
|
|
|
return;
|
|
|
|
}
|
2016-09-22 14:39:36 -04:00
|
|
|
return getUrl(`/images/wizard/${src}`);
|
2016-09-20 13:25:56 -04:00
|
|
|
},
|
|
|
|
|
2020-04-01 09:36:50 -04:00
|
|
|
@discourseComputed("step.id")
|
|
|
|
bannerAndDescriptionClass(id) {
|
|
|
|
return `wizard-banner-and-description wizard-banner-and-description-${id}`;
|
|
|
|
},
|
|
|
|
|
2016-08-25 13:14:56 -04:00
|
|
|
@observes("step.id")
|
|
|
|
_stepChanged() {
|
|
|
|
this.set("saving", false);
|
|
|
|
this.autoFocus();
|
|
|
|
},
|
|
|
|
|
|
|
|
keyPress(key) {
|
|
|
|
if (key.keyCode === 13) {
|
2019-05-27 04:15:39 -04:00
|
|
|
if (this.showDoneButton) {
|
2016-09-22 13:38:40 -04:00
|
|
|
this.send("quit");
|
|
|
|
} else {
|
|
|
|
this.send("nextStep");
|
|
|
|
}
|
2016-08-25 13:14:56 -04:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-11-07 16:38:28 -05:00
|
|
|
@discourseComputed("step.index", "wizard.totalSteps")
|
2016-08-25 13:14:56 -04:00
|
|
|
barStyle(displayIndex, totalSteps) {
|
2016-09-20 14:04:18 -04:00
|
|
|
let ratio = parseFloat(displayIndex) / parseFloat(totalSteps - 1);
|
|
|
|
if (ratio < 0) {
|
|
|
|
ratio = 0;
|
|
|
|
}
|
|
|
|
if (ratio > 1) {
|
|
|
|
ratio = 1;
|
|
|
|
}
|
|
|
|
|
2019-11-05 13:43:49 -05:00
|
|
|
return htmlSafe(`width: ${ratio * 200}px`);
|
2016-08-25 13:14:56 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
autoFocus() {
|
2020-04-16 01:58:04 -04:00
|
|
|
schedule("afterRender", () => {
|
2016-09-22 13:38:40 -04:00
|
|
|
const $invalid = $(".wizard-field.invalid:eq(0) .wizard-focusable");
|
2016-08-25 13:14:56 -04:00
|
|
|
|
|
|
|
if ($invalid.length) {
|
|
|
|
return $invalid.focus();
|
|
|
|
}
|
|
|
|
|
2016-09-22 13:38:40 -04:00
|
|
|
$(".wizard-focusable:eq(0)").focus();
|
2016-08-25 13:14:56 -04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-09-15 16:01:44 -04:00
|
|
|
animateInvalidFields() {
|
2020-04-16 01:58:04 -04:00
|
|
|
schedule("afterRender", () =>
|
2016-09-20 17:01:54 -04:00
|
|
|
$(".invalid input[type=text], .invalid textarea").wiggle(2, 100)
|
|
|
|
);
|
2016-09-15 16:01:44 -04:00
|
|
|
},
|
|
|
|
|
2016-09-20 12:28:22 -04:00
|
|
|
advance() {
|
|
|
|
this.set("saving", true);
|
2019-05-27 04:15:39 -04:00
|
|
|
this.step
|
2016-09-20 12:28:22 -04:00
|
|
|
.save()
|
2019-01-10 05:06:01 -05:00
|
|
|
.then(response => this.goNext(response))
|
2016-09-20 12:28:22 -04:00
|
|
|
.catch(() => this.animateInvalidFields())
|
|
|
|
.finally(() => this.set("saving", false));
|
|
|
|
},
|
|
|
|
|
2016-08-25 13:14:56 -04:00
|
|
|
actions: {
|
2016-09-14 16:36:08 -04:00
|
|
|
quit() {
|
2016-09-22 14:39:36 -04:00
|
|
|
document.location = getUrl("/");
|
2016-09-14 16:36:08 -04:00
|
|
|
},
|
|
|
|
|
2018-11-15 14:44:19 -05:00
|
|
|
exitEarly() {
|
2019-05-27 04:15:39 -04:00
|
|
|
const step = this.step;
|
2018-11-15 14:44:19 -05:00
|
|
|
step.validate();
|
|
|
|
|
|
|
|
if (step.get("valid")) {
|
|
|
|
this.set("saving", true);
|
|
|
|
|
|
|
|
step
|
|
|
|
.save()
|
|
|
|
.then(() => this.send("quit"))
|
|
|
|
.catch(() => this.animateInvalidFields())
|
|
|
|
.finally(() => this.set("saving", false));
|
|
|
|
} else {
|
|
|
|
this.animateInvalidFields();
|
|
|
|
this.autoFocus();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-08-25 13:14:56 -04:00
|
|
|
backStep() {
|
2019-05-27 04:15:39 -04:00
|
|
|
if (this.saving) {
|
2016-08-25 13:14:56 -04:00
|
|
|
return;
|
|
|
|
}
|
2019-01-10 05:06:01 -05:00
|
|
|
|
|
|
|
this.goBack();
|
2016-08-25 13:14:56 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
nextStep() {
|
2019-05-27 04:15:39 -04:00
|
|
|
if (this.saving) {
|
2016-08-25 13:14:56 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-05-27 04:15:39 -04:00
|
|
|
const step = this.step;
|
2016-09-20 12:28:22 -04:00
|
|
|
const result = step.validate();
|
|
|
|
|
|
|
|
if (result.warnings.length) {
|
|
|
|
const unwarned = result.warnings.filter(w => !alreadyWarned[w]);
|
|
|
|
if (unwarned.length) {
|
|
|
|
unwarned.forEach(w => (alreadyWarned[w] = true));
|
|
|
|
return window.swal(
|
|
|
|
{
|
|
|
|
customClass: "wizard-warning",
|
|
|
|
title: "",
|
|
|
|
text: unwarned.map(w => I18n.t(`wizard.${w}`)).join("\n"),
|
|
|
|
type: "warning",
|
|
|
|
showCancelButton: true,
|
|
|
|
confirmButtonColor: "#6699ff"
|
|
|
|
},
|
|
|
|
confirmed => {
|
|
|
|
if (confirmed) {
|
|
|
|
this.advance();
|
2018-06-15 11:03:24 -04:00
|
|
|
}
|
2016-09-20 12:28:22 -04:00
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2016-08-25 13:14:56 -04:00
|
|
|
|
|
|
|
if (step.get("valid")) {
|
2016-09-20 12:28:22 -04:00
|
|
|
this.advance();
|
2016-08-25 13:14:56 -04:00
|
|
|
} else {
|
2016-09-15 16:01:44 -04:00
|
|
|
this.animateInvalidFields();
|
2016-08-25 13:14:56 -04:00
|
|
|
this.autoFocus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|