discourse/app/assets/javascripts/wizard/models/wizard.js
Penar Musaraj 85b8fea262
UX: Add Styling step to wizard (#14132)
Refactors three wizard steps (colors, fonts, homepage style) into one new step called Styling.
2021-08-25 17:10:12 -04:00

99 lines
2.2 KiB
JavaScript

import EmberObject from "@ember/object";
import Step from "wizard/models/step";
import WizardField from "wizard/models/wizard-field";
import { ajax } from "wizard/lib/ajax";
import discourseComputed from "discourse-common/utils/decorators";
const Wizard = EmberObject.extend({
@discourseComputed("steps.length")
totalSteps: (length) => length,
getTitle() {
const titleStep = this.steps.findBy("id", "forum-title");
if (!titleStep) {
return;
}
return titleStep.get("fieldsById.title.value");
},
getLogoUrl() {
const logoStep = this.steps.findBy("id", "logos");
if (!logoStep) {
return;
}
return logoStep.get("fieldsById.logo.value");
},
// A bit clunky, but get the current colors from the appropriate step
getCurrentColors(schemeId) {
const colorStep = this.steps.findBy("id", "styling");
if (!colorStep) {
return this.current_color_scheme;
}
const themeChoice = colorStep.get("fieldsById.color_scheme");
if (!themeChoice) {
return;
}
const themeId = schemeId ? schemeId : themeChoice.get("value");
if (!themeId) {
return;
}
const choices = themeChoice.get("choices");
if (!choices) {
return;
}
const option = choices.findBy("id", themeId);
if (!option) {
return;
}
return option.data.colors;
},
getCurrentFont(fontId, type = "body_font") {
const fontsStep = this.steps.findBy("id", "styling");
if (!fontsStep) {
return;
}
const fontChoice = fontsStep.get(`fieldsById.${type}`);
if (!fontChoice) {
return;
}
const choiceId = fontId ? fontId : fontChoice.get("value");
if (!choiceId) {
return;
}
const choices = fontChoice.get("choices");
if (!choices) {
return;
}
const option = choices.findBy("id", choiceId);
if (!option) {
return;
}
return option.label;
},
});
export function findWizard() {
return ajax({ url: "/wizard.json" }).then((response) => {
const wizard = response.wizard;
wizard.steps = wizard.steps.map((step) => {
const stepObj = Step.create(step);
stepObj.fields = stepObj.fields.map((f) => WizardField.create(f));
return stepObj;
});
return Wizard.create(wizard);
});
}