github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-27 17:04:29 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Convert wizard components to native class syntax (#28606)

Browse Source 
Changes made using the ember-native-class-codemod, plus some manual tweaks
This commit is contained in:
David Taylor 2024-08-28 16:48:21 +01:00 committed by GitHub
parent 8cc6b214dd
commit cb883ceb74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 134 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js
View File

@ -1,5 +1,5 @@
import Component from "@ember/component"; import Component from "@ember/component";
import { tagName } from "@ember-decorators/component";
export default Component.extend({ @tagName("")
tagName: "", export default class Checkbox extends Component {}
});

10
app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js
View File

@ -1,9 +1,9 @@
import Component from "@ember/component"; import Component from "@ember/component";
import { action, set } from "@ember/object"; import { action, set } from "@ember/object";
export default Component.extend({ export default class Checkboxes extends Component {
init(...args) { init(...args) {
this._super(...args); super.init(...args);
this.set("field.value", this.field.value || []); this.set("field.value", this.field.value || []);
for (let choice of this.field.choices) { for (let choice of this.field.choices) {
@ -11,7 +11,7 @@ export default Component.extend({
set(choice, "checked", true); set(choice, "checked", true);
} }
} }
}, }
@action @action
changed(checkbox) { changed(checkbox) {
@ -29,5 +29,5 @@ export default Component.extend({
} }
} }
this.set("field.value", newFieldValue); this.set("field.value", newFieldValue);
}, }
}); }

14
app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.js
View File

@ -4,9 +4,9 @@ import discourseComputed from "discourse-common/utils/decorators";
import ColorPalettes from "select-kit/components/color-palettes"; import ColorPalettes from "select-kit/components/color-palettes";
import ComboBox from "select-kit/components/combo-box"; import ComboBox from "select-kit/components/combo-box";
export default Component.extend({ export default class Dropdown extends Component {
init() { init() {
this._super(...arguments); super.init(...arguments);
if (this.field.id === "color_scheme") { if (this.field.id === "color_scheme") {
for (let choice of this.field.choices) { for (let choice of this.field.choices) {
@ -15,19 +15,19 @@ export default Component.extend({
} }
} }
} }
}, }
@discourseComputed("field.id") @discourseComputed("field.id")
component(id) { component(id) {
return id === "color_scheme" ? ColorPalettes : ComboBox; return id === "color_scheme" ? ColorPalettes : ComboBox;
}, }
keyPress(e) { keyPress(e) {
e.stopPropagation(); e.stopPropagation();
}, }
@action @action
onChangeValue(value) { onChangeValue(value) {
this.set("field.value", value); this.set("field.value", value);
}, }
}); }

7
app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js
View File

@ -1,4 +1,5 @@
import Component from "@ember/component"; import Component from "@ember/component";
export default Component.extend({ import { classNameBindings } from "@ember-decorators/component";
classNameBindings: [":wizard-image-preview", "fieldClass"],
}); @classNameBindings(":wizard-image-preview", "fieldClass")
export default class Generic extends Component {}

24
app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js
View File

@ -2,29 +2,29 @@ import { action } from "@ember/object";
import { drawHeader, LOREM } from "../../../lib/preview"; import { drawHeader, LOREM } from "../../../lib/preview";
import PreviewBaseComponent from "../styling-preview/-preview-base"; import PreviewBaseComponent from "../styling-preview/-preview-base";
export default PreviewBaseComponent.extend({ export default class LogoSmall extends PreviewBaseComponent {
width: 375, width = 375;
height: 100, height = 100;
image: null, image = null;
didInsertElement() { didInsertElement() {
this._super(...arguments); super.didInsertElement(...arguments);
this.field.addListener(this.imageChanged); this.field.addListener(this.imageChanged);
}, }
willDestroyElement() { willDestroyElement() {
this._super(...arguments); super.willDestroyElement(...arguments);
this.field.removeListener(this.imageChanged); this.field.removeListener(this.imageChanged);
}, }
@action @action
imageChanged() { imageChanged() {
this.reload(); this.reload();
}, }
images() { images() {
return { image: this.field.value }; return { image: this.field.value };
}, }
paint(options) { paint(options) {
const { ctx, colors, font, headingFont, width, height } = options; const { ctx, colors, font, headingFont, width, height } = options;
@ -85,5 +85,5 @@ export default PreviewBaseComponent.extend({
const line = height * 0.55 + i * (LINE_HEIGHT * 1.5); const line = height * 0.55 + i * (LINE_HEIGHT * 1.5);
ctx.fillText(lines[i], afterLogo, line); ctx.fillText(lines[i], afterLogo, line);
} }
}, }
}); }

24
app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo.js
View File

@ -2,29 +2,29 @@ import { action } from "@ember/object";
import { drawHeader } from "../../../lib/preview"; import { drawHeader } from "../../../lib/preview";
import PreviewBaseComponent from "../styling-preview/-preview-base"; import PreviewBaseComponent from "../styling-preview/-preview-base";
export default PreviewBaseComponent.extend({ export default class Logo extends PreviewBaseComponent {
width: 400, width = 400;
height: 100, height = 100;
image: null, image = null;
didInsertElement() { didInsertElement() {
this._super(...arguments); super.didInsertElement(...arguments);
this.field.addListener(this.imageChanged); this.field.addListener(this.imageChanged);
}, }
willDestroyElement() { willDestroyElement() {
this._super(...arguments); super.willDestroyElement(...arguments);
this.field.removeListener(this.imageChanged); this.field.removeListener(this.imageChanged);
}, }
@action @action
imageChanged() { imageChanged() {
this.reload(); this.reload();
}, }
images() { images() {
return { image: this.field.value }; return { image: this.field.value };
}, }
paint({ ctx, colors, font, width, height }) { paint({ ctx, colors, font, width, height }) {
const headerHeight = height / 2; const headerHeight = height / 2;
@ -46,5 +46,5 @@ export default PreviewBaseComponent.extend({
); );
this.drawPills(colors, font, height / 2); this.drawPills(colors, font, height / 2);
}, }
}); }

20
app/assets/javascripts/discourse/app/static/wizard/components/fields/image.js
View File

@ -2,6 +2,7 @@ import Component from "@ember/component";
import { warn } from "@ember/debug"; import { warn } from "@ember/debug";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { dasherize } from "@ember/string"; import { dasherize } from "@ember/string";
import { classNames } from "@ember-decorators/component";
import Uppy from "@uppy/core"; import Uppy from "@uppy/core";
import DropTarget from "@uppy/drop-target"; import DropTarget from "@uppy/drop-target";
import XHRUpload from "@uppy/xhr-upload"; import XHRUpload from "@uppy/xhr-upload";
@ -10,20 +11,21 @@ import discourseComputed from "discourse-common/utils/decorators";
import I18n from "discourse-i18n"; import I18n from "discourse-i18n";
import imagePreviews from "./image-previews"; import imagePreviews from "./image-previews";
export default Component.extend({ @classNames("wizard-container__image-upload")
classNames: ["wizard-container__image-upload"], export default class Image extends Component {
dialog: service(), @service dialog;
uploading: false,
uploading = false;
@discourseComputed("field.id") @discourseComputed("field.id")
previewComponent(id) { previewComponent(id) {
return imagePreviews[dasherize(id)] ?? imagePreviews.generic; return imagePreviews[dasherize(id)] ?? imagePreviews.generic;
}, }
didInsertElement() { didInsertElement() {
this._super(...arguments); super.didInsertElement(...arguments);
this.setupUploads(); this.setupUploads();
}, }
setupUploads() { setupUploads() {
const id = this.field.id; const id = this.field.id;
@ -80,5 +82,5 @@ export default Component.extend({
} }
}); });
}); });
}, }
}); }

38
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js
View File

@ -1,24 +1,24 @@
import { darkLightDiff, LOREM } from "../../../lib/preview"; import { darkLightDiff, LOREM } from "../../../lib/preview";
import PreviewBaseComponent from "./-preview-base"; import PreviewBaseComponent from "./-preview-base";
export default PreviewBaseComponent.extend({ export default class HomepagePreview extends PreviewBaseComponent {
width: 628, width = 628;
height: 322, height = 322;
logo: null, logo = null;
avatar: null, avatar = null;
didUpdateAttrs() { didUpdateAttrs() {
this._super(...arguments); super.didUpdateAttrs(...arguments);
this.triggerRepaint(); this.triggerRepaint();
}, }
images() { images() {
return { return {
logo: this.wizard.logoUrl, logo: this.wizard.logoUrl,
avatar: "/images/wizard/trout.png", avatar: "/images/wizard/trout.png",
}; };
}, }
paint({ ctx, colors, font, width, height }) { paint({ ctx, colors, font, width, height }) {
this.drawFullHeader(colors, font, this.logo); this.drawFullHeader(colors, font, this.logo);
@ -47,7 +47,7 @@ export default PreviewBaseComponent.extend({
this.drawPills(colors, font, height * 0.15, { categories: true }); this.drawPills(colors, font, height * 0.15, { categories: true });
this.renderCategoriesWithTopics(ctx, colors, font, width, height); this.renderCategoriesWithTopics(ctx, colors, font, width, height);
} }
}, }
renderCategoriesBoxes(ctx, colors, font, width, height, opts) { renderCategoriesBoxes(ctx, colors, font, width, height, opts) {
opts = opts || {}; opts = opts || {};
@ -122,7 +122,7 @@ export default PreviewBaseComponent.extend({
ctx.textAlign = "left"; ctx.textAlign = "left";
} }
}); });
}, }
renderCategories(ctx, colors, font, width, height) { renderCategories(ctx, colors, font, width, height) {
const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50); const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
@ -221,7 +221,7 @@ export default PreviewBaseComponent.extend({
y += topicHeight; y += topicHeight;
}); });
} }
}, }
renderCategoriesWithTopics(ctx, colors, font, width, height) { renderCategoriesWithTopics(ctx, colors, font, width, height) {
const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50); const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50);
@ -340,21 +340,21 @@ export default PreviewBaseComponent.extend({
drawLine(width / 2, y); drawLine(width / 2, y);
}); });
}, }
getHomepageStyle() { getHomepageStyle() {
return this.step.valueFor("homepage_style"); return this.step.valueFor("homepage_style");
}, }
getTitles() { getTitles() {
return LOREM.split(".") return LOREM.split(".")
.slice(0, 8) .slice(0, 8)
.map((t) => t.substring(0, 40)); .map((t) => t.substring(0, 40));
}, }
getDescriptions() { getDescriptions() {
return LOREM.split("."); return LOREM.split(".");
}, }
renderLatest(ctx, colors, font, width, height) { renderLatest(ctx, colors, font, width, height) {
const rowHeight = height / 6.6; const rowHeight = height / 6.6;
@ -437,7 +437,7 @@ export default PreviewBaseComponent.extend({
drawLine(y + rowHeight * 1); drawLine(y + rowHeight * 1);
y += rowHeight; y += rowHeight;
}); });
}, }
fillTextMultiLine(ctx, text, x, y, lineHeight, maxWidth) { fillTextMultiLine(ctx, text, x, y, lineHeight, maxWidth) {
const words = text.split(" ").filter((f) => f); const words = text.split(" ").filter((f) => f);
@ -458,7 +458,7 @@ export default PreviewBaseComponent.extend({
totalHeight += lineHeight; totalHeight += lineHeight;
return totalHeight; return totalHeight;
}, }
// Edges expected in this order: NW to NE -> NE to SE -> SE to SW -> SW to NW // Edges expected in this order: NW to NE -> NE to SE -> SE to SW -> SW to NW
drawSquare(ctx, from, to, edges = []) { drawSquare(ctx, from, to, edges = []) {
@ -485,5 +485,5 @@ export default PreviewBaseComponent.extend({
ctx.lineTo(path.to.x, path.to.y); ctx.lineTo(path.to.x, path.to.y);
ctx.stroke(); ctx.stroke();
}); });
}, }
}); }

54
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js
View File

@ -37,25 +37,25 @@ function canvasFor(image, w, h) {
} }
const scale = window.devicePixelRatio; const scale = window.devicePixelRatio;
export default Component.extend({ export default class PreviewBase extends Component {
ctx = null;
loaded = false;
loadingFontVariants = false;
get elementWidth() { get elementWidth() {
return this.width * scale; return this.width * scale;
}, }
get elementHeight() { get elementHeight() {
return this.height * scale; return this.height * scale;
}, }
get canvasStyle() { get canvasStyle() {
return htmlSafe(`width:${this.width}px;height:${this.height}px`); return htmlSafe(`width:${this.width}px;height:${this.height}px`);
}, }
ctx: null,
loaded: false,
loadingFontVariants: false,
didInsertElement() { didInsertElement() {
this._super(...arguments); super.didInsertElement(...arguments);
this.fontMap = PreloadStore.get("fontMap"); this.fontMap = PreloadStore.get("fontMap");
this.loadedFonts = new Set(); this.loadedFonts = new Set();
const c = this.element.querySelector("canvas"); const c = this.element.querySelector("canvas");
@ -72,10 +72,10 @@ export default Component.extend({
} }
this.reload(); this.reload();
}, }
willDestroyElement() { willDestroyElement() {
this._super(...arguments); super.willDestroyElement(...arguments);
if (this.step) { if (this.step) {
this.step.findField("color_scheme")?.removeListener(this.themeChanged); this.step.findField("color_scheme")?.removeListener(this.themeChanged);
@ -87,26 +87,26 @@ export default Component.extend({
.findField("heading_font") .findField("heading_font")
?.removeListener(this.themeHeadingFontChanged); ?.removeListener(this.themeHeadingFontChanged);
} }
}, }
@action @action
themeChanged() { themeChanged() {
this.triggerRepaint(); this.triggerRepaint();
}, }
@action @action
themeBodyFontChanged() { themeBodyFontChanged() {
if (!this.loadingFontVariants) { if (!this.loadingFontVariants) {
this.loadFontVariants(this.wizard.font); this.loadFontVariants(this.wizard.font);
} }
}, }
@action @action
themeHeadingFontChanged() { themeHeadingFontChanged() {
if (!this.loadingFontVariants) { if (!this.loadingFontVariants) {
this.loadFontVariants(this.wizard.headingFont); this.loadFontVariants(this.wizard.headingFont);
} }
}, }
loadFontVariants(font) { loadFontVariants(font) {
const fontVariantData = this.fontMap[font.id]; const fontVariantData = this.fontMap[font.id];
@ -146,16 +146,16 @@ export default Component.extend({
} else if (this.loadedFonts.has(font.id)) { } else if (this.loadedFonts.has(font.id)) {
this.triggerRepaint(); this.triggerRepaint();
} }
}, }
images() {}, images() {}
// NOTE: This works for fonts included in a style that is actually using the // NOTE: This works for fonts included in a style that is actually using the
// @font-faces on load, but for fonts that we aren't using yet we need to // @font-faces on load, but for fonts that we aren't using yet we need to
// make sure they are loaded before rendering the canvas via loadFontVariants. // make sure they are loaded before rendering the canvas via loadFontVariants.
loadFonts() { loadFonts() {
return document.fonts.ready; return document.fonts.ready;
}, }
loadImages() { loadImages() {
const images = this.images(); const images = this.images();
@ -167,18 +167,18 @@ export default Component.extend({
); );
} }
return Promise.resolve(); return Promise.resolve();
}, }
reload() { reload() {
Promise.all([this.loadFonts(), this.loadImages()]).then(() => { Promise.all([this.loadFonts(), this.loadImages()]).then(() => {
this.loaded = true; this.loaded = true;
this.triggerRepaint(); this.triggerRepaint();
}); });
}, }
triggerRepaint() { triggerRepaint() {
scheduleOnce("afterRender", this, "repaint"); scheduleOnce("afterRender", this, "repaint");
}, }
repaint() { repaint() {
if (!this.loaded) { if (!this.loaded) {
@ -215,7 +215,7 @@ export default Component.extend({
height: this.height, height: this.height,
}; };
this.paint(options); this.paint(options);
}, }
categories() { categories() {
return [ return [
@ -223,7 +223,7 @@ export default Component.extend({
{ name: "ultrices", color: "#3AB54A" }, { name: "ultrices", color: "#3AB54A" },
{ name: "placerat", color: "#25AAE2" }, { name: "placerat", color: "#25AAE2" },
]; ];
}, }
scaleImage(image, x, y, w, h) { scaleImage(image, x, y, w, h) {
w = Math.floor(w); w = Math.floor(w);
@ -246,7 +246,7 @@ export default Component.extend({
} }
ctx.drawImage(scaled[key], x, y, w, h); ctx.drawImage(scaled[key], x, y, w, h);
}, }
drawFullHeader(colors, font, logo) { drawFullHeader(colors, font, logo) {
const { ctx } = this; const { ctx } = this;
@ -311,7 +311,7 @@ export default Component.extend({
ctx.scale(pathScale, pathScale); ctx.scale(pathScale, pathScale);
ctx.fill(hamburgerIcon); ctx.fill(hamburgerIcon);
ctx.restore(); ctx.restore();
}, }
drawPills(colors, font, headerHeight, opts) { drawPills(colors, font, headerHeight, opts) {
opts = opts || {}; opts = opts || {};
@ -389,8 +389,8 @@ export default Component.extend({
x += categoriesSize * 0.6; x += categoriesSize * 0.6;
ctx.fillText("Top", x, headerHeight + headerMargin * 1.5 + fontSize); ctx.fillText("Top", x, headerHeight + headerMargin * 1.5 + fontSize);
}, }
}); }
function loadImage(src) { function loadImage(src) {
if (!src) { if (!src) {

65
app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js
View File

@ -1,5 +1,6 @@
import { action } from "@ember/object"; import { action } from "@ember/object";
import { bind, observes } from "discourse-common/utils/decorators"; import { observes } from "@ember-decorators/object";
import { bind } from "discourse-common/utils/decorators";
import I18n from "discourse-i18n"; import I18n from "discourse-i18n";
import { chooseDarker, darkLightDiff } from "../../../lib/preview"; import { chooseDarker, darkLightDiff } from "../../../lib/preview";
import HomepagePreview from "./-homepage-preview"; import HomepagePreview from "./-homepage-preview";
@ -11,42 +12,42 @@ Nullam eget sem non elit tincidunt rhoncus. Fusce
velit nisl, porttitor sed nisl ac, consectetur interdum velit nisl, porttitor sed nisl ac, consectetur interdum
metus. Fusce in consequat augue, vel facilisis felis.`; metus. Fusce in consequat augue, vel facilisis felis.`;
export default PreviewBaseComponent.extend({ export default class Index extends PreviewBaseComponent {
width: 628, width = 628;
height: 322, height = 322;
logo: null, logo = null;
avatar: null, avatar = null;
previewTopic: true, previewTopic = true;
draggingActive: false, draggingActive = false;
startX: 0, startX = 0;
scrollLeft: 0, scrollLeft = 0;
HomepagePreview, HomepagePreview = HomepagePreview;
init() { init() {
this._super(...arguments); super.init(...arguments);
this.step this.step
.findField("homepage_style") .findField("homepage_style")
?.addListener(this.onHomepageStyleChange); ?.addListener(this.onHomepageStyleChange);
}, }
willDestroy() { willDestroy() {
this._super(...arguments); super.willDestroy(...arguments);
this.step this.step
.findField("homepage_style") .findField("homepage_style")
?.removeListener(this.onHomepageStyleChange); ?.removeListener(this.onHomepageStyleChange);
}, }
didInsertElement() { didInsertElement() {
this._super(...arguments); super.didInsertElement(...arguments);
this.element.addEventListener("mouseleave", this.handleMouseLeave); this.element.addEventListener("mouseleave", this.handleMouseLeave);
this.element.addEventListener("mousemove", this.handleMouseMove); this.element.addEventListener("mousemove", this.handleMouseMove);
}, }
willDestroyElement() { willDestroyElement() {
this._super(...arguments); super.willDestroyElement(...arguments);
this.element.removeEventListener("mouseleave", this.handleMouseLeave); this.element.removeEventListener("mouseleave", this.handleMouseLeave);
this.element.removeEventListener("mousemove", this.handleMouseMove); this.element.removeEventListener("mousemove", this.handleMouseMove);
}, }
mouseDown(e) { mouseDown(e) {
const slider = this.element.querySelector(".previews"); const slider = this.element.querySelector(".previews");
@ -55,16 +56,16 @@ export default PreviewBaseComponent.extend({
startX: e.pageX - slider.offsetLeft, startX: e.pageX - slider.offsetLeft,
scrollLeft: slider.scrollLeft, scrollLeft: slider.scrollLeft,
}); });
}, }
@bind @bind
handleMouseLeave() { handleMouseLeave() {
this.set("draggingActive", false); this.set("draggingActive", false);
}, }
mouseUp() { mouseUp() {
this.set("draggingActive", false); this.set("draggingActive", false);
}, }
@bind @bind
handleMouseMove(e) { handleMouseMove(e) {
@ -85,18 +86,18 @@ export default PreviewBaseComponent.extend({
if (slider.scrollLeft > slider.offsetWidth - 50) { if (slider.scrollLeft > slider.offsetWidth - 50) {
this.set("previewTopic", false); this.set("previewTopic", false);
} }
}, }
didUpdateAttrs() { didUpdateAttrs() {
this._super(...arguments); super.didUpdateAttrs(...arguments);
this.triggerRepaint(); this.triggerRepaint();
}, }
@bind @bind
onHomepageStyleChange() { onHomepageStyleChange() {
this.set("previewTopic", false); this.set("previewTopic", false);
}, }
@observes("previewTopic") @observes("previewTopic")
scrollPreviewArea() { scrollPreviewArea() {
@ -106,14 +107,14 @@ export default PreviewBaseComponent.extend({
left: this.previewTopic ? 0 : el.scrollWidth - el.offsetWidth, left: this.previewTopic ? 0 : el.scrollWidth - el.offsetWidth,
behavior: "smooth", behavior: "smooth",
}); });
}, }
images() { images() {
return { return {
logo: this.wizard.logoUrl, logo: this.wizard.logoUrl,
avatar: "/images/wizard/trout.png", avatar: "/images/wizard/trout.png",
}; };
}, }
paint({ ctx, colors, font, headingFont, width, height }) { paint({ ctx, colors, font, headingFont, width, height }) {
const headerHeight = height * 0.3; const headerHeight = height * 0.3;
@ -207,17 +208,17 @@ export default PreviewBaseComponent.extend({
ctx.font = `Bold ${bodyFontSize}em ${font}`; ctx.font = `Bold ${bodyFontSize}em ${font}`;
ctx.fillStyle = colors.primary; ctx.fillStyle = colors.primary;
ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5); ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
}, }
@action @action
setPreviewHomepage(event) { setPreviewHomepage(event) {
event?.preventDefault(); event?.preventDefault();
this.set("previewTopic", false); this.set("previewTopic", false);
}, }
@action @action
setPreviewTopic(event) { setPreviewTopic(event) {
event?.preventDefault(); event?.preventDefault();
this.set("previewTopic", true); this.set("previewTopic", true);
}, }
}); }

2
app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js
View File

@ -1,3 +1,3 @@
import Component from "@ember/component"; import Component from "@ember/component";
export default Component.extend({}); export default class Text extends Component {}