mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 02:43:42 +08:00
db80a8ce79
]When changing fonts in the `/wizard/steps/styling` step of the wizard, users would not see the font loaded straight away, having to switch to another one then back to the original to see the result. This is because we are using canvas to render the style preview and this fails with a Chrome-based intervention when font loading is taking too long: > [Intervention] Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://sea2.discourse-cdn.com/business7/fonts/Roboto-Bold.ttf?v=0.0.9 We can get around this by manually loading the fonts selected using the FontFace JS API when the user selects them and before rerendering the canvas. This just requires preloading more information about the fonts if the user is admin so the wizard can query this data.
65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import EmberObject from "@ember/object";
|
|
import Evented from "@ember/object/evented";
|
|
import Step from "wizard/models/step";
|
|
import WizardField from "wizard/models/wizard-field";
|
|
import { ajax } from "discourse/lib/ajax";
|
|
import { readOnly } from "@ember/object/computed";
|
|
|
|
const Wizard = EmberObject.extend(Evented, {
|
|
totalSteps: readOnly("steps.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");
|
|
},
|
|
|
|
get currentColors() {
|
|
const colorStep = this.steps.findBy("id", "styling");
|
|
if (!colorStep) {
|
|
return this.current_color_scheme;
|
|
}
|
|
|
|
const themeChoice = colorStep.fieldsById.color_scheme;
|
|
if (!themeChoice) {
|
|
return;
|
|
}
|
|
|
|
return themeChoice.choices?.findBy("id", themeChoice.value)?.data.colors;
|
|
},
|
|
|
|
get font() {
|
|
const fontChoice = this.steps.findBy("id", "styling")?.fieldsById
|
|
?.body_font;
|
|
return fontChoice.choices?.findBy("id", fontChoice.value);
|
|
},
|
|
|
|
get headingFont() {
|
|
const fontChoice = this.steps.findBy("id", "styling")?.fieldsById
|
|
?.heading_font;
|
|
return fontChoice.choices?.findBy("id", fontChoice.value);
|
|
},
|
|
});
|
|
|
|
export function findWizard() {
|
|
return ajax({ url: "/wizard.json" }).then(({ 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);
|
|
});
|
|
}
|