diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js index 44494409ab5..40e7600e735 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkbox.js @@ -1,5 +1,5 @@ import Component from "@ember/component"; +import { tagName } from "@ember-decorators/component"; -export default Component.extend({ - tagName: "", -}); +@tagName("") +export default class Checkbox extends Component {} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js index ba3aa8970eb..39146f7a3cc 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/checkboxes.js @@ -1,9 +1,9 @@ import Component from "@ember/component"; import { action, set } from "@ember/object"; -export default Component.extend({ +export default class Checkboxes extends Component { init(...args) { - this._super(...args); + super.init(...args); this.set("field.value", this.field.value || []); for (let choice of this.field.choices) { @@ -11,7 +11,7 @@ export default Component.extend({ set(choice, "checked", true); } } - }, + } @action changed(checkbox) { @@ -29,5 +29,5 @@ export default Component.extend({ } } this.set("field.value", newFieldValue); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.js index 6cf232ab8af..9f720578228 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/dropdown.js @@ -4,9 +4,9 @@ import discourseComputed from "discourse-common/utils/decorators"; import ColorPalettes from "select-kit/components/color-palettes"; import ComboBox from "select-kit/components/combo-box"; -export default Component.extend({ +export default class Dropdown extends Component { init() { - this._super(...arguments); + super.init(...arguments); if (this.field.id === "color_scheme") { for (let choice of this.field.choices) { @@ -15,19 +15,19 @@ export default Component.extend({ } } } - }, + } @discourseComputed("field.id") component(id) { return id === "color_scheme" ? ColorPalettes : ComboBox; - }, + } keyPress(e) { e.stopPropagation(); - }, + } @action onChangeValue(value) { this.set("field.value", value); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js index ea401d341a6..374a2716615 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/generic.js @@ -1,4 +1,5 @@ import Component from "@ember/component"; -export default Component.extend({ - classNameBindings: [":wizard-image-preview", "fieldClass"], -}); +import { classNameBindings } from "@ember-decorators/component"; + +@classNameBindings(":wizard-image-preview", "fieldClass") +export default class Generic extends Component {} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js index f33e49318c0..a91680360f2 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo-small.js @@ -2,29 +2,29 @@ import { action } from "@ember/object"; import { drawHeader, LOREM } from "../../../lib/preview"; import PreviewBaseComponent from "../styling-preview/-preview-base"; -export default PreviewBaseComponent.extend({ - width: 375, - height: 100, - image: null, +export default class LogoSmall extends PreviewBaseComponent { + width = 375; + height = 100; + image = null; didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.field.addListener(this.imageChanged); - }, + } willDestroyElement() { - this._super(...arguments); + super.willDestroyElement(...arguments); this.field.removeListener(this.imageChanged); - }, + } @action imageChanged() { this.reload(); - }, + } images() { return { image: this.field.value }; - }, + } paint(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); ctx.fillText(lines[i], afterLogo, line); } - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo.js index 74170cd1612..9a882ed6211 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image-previews/logo.js @@ -2,29 +2,29 @@ import { action } from "@ember/object"; import { drawHeader } from "../../../lib/preview"; import PreviewBaseComponent from "../styling-preview/-preview-base"; -export default PreviewBaseComponent.extend({ - width: 400, - height: 100, - image: null, +export default class Logo extends PreviewBaseComponent { + width = 400; + height = 100; + image = null; didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.field.addListener(this.imageChanged); - }, + } willDestroyElement() { - this._super(...arguments); + super.willDestroyElement(...arguments); this.field.removeListener(this.imageChanged); - }, + } @action imageChanged() { this.reload(); - }, + } images() { return { image: this.field.value }; - }, + } paint({ ctx, colors, font, width, height }) { const headerHeight = height / 2; @@ -46,5 +46,5 @@ export default PreviewBaseComponent.extend({ ); this.drawPills(colors, font, height / 2); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image.js index 54a6c898a8a..d366d5dbafc 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/image.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/image.js @@ -2,6 +2,7 @@ import Component from "@ember/component"; import { warn } from "@ember/debug"; import { service } from "@ember/service"; import { dasherize } from "@ember/string"; +import { classNames } from "@ember-decorators/component"; import Uppy from "@uppy/core"; import DropTarget from "@uppy/drop-target"; import XHRUpload from "@uppy/xhr-upload"; @@ -10,20 +11,21 @@ import discourseComputed from "discourse-common/utils/decorators"; import I18n from "discourse-i18n"; import imagePreviews from "./image-previews"; -export default Component.extend({ - classNames: ["wizard-container__image-upload"], - dialog: service(), - uploading: false, +@classNames("wizard-container__image-upload") +export default class Image extends Component { + @service dialog; + + uploading = false; @discourseComputed("field.id") previewComponent(id) { return imagePreviews[dasherize(id)] ?? imagePreviews.generic; - }, + } didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.setupUploads(); - }, + } setupUploads() { const id = this.field.id; @@ -80,5 +82,5 @@ export default Component.extend({ } }); }); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js index d4a49e8dcd4..cfe1dcba96b 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-homepage-preview.js @@ -1,24 +1,24 @@ import { darkLightDiff, LOREM } from "../../../lib/preview"; import PreviewBaseComponent from "./-preview-base"; -export default PreviewBaseComponent.extend({ - width: 628, - height: 322, - logo: null, - avatar: null, +export default class HomepagePreview extends PreviewBaseComponent { + width = 628; + height = 322; + logo = null; + avatar = null; didUpdateAttrs() { - this._super(...arguments); + super.didUpdateAttrs(...arguments); this.triggerRepaint(); - }, + } images() { return { logo: this.wizard.logoUrl, avatar: "/images/wizard/trout.png", }; - }, + } paint({ ctx, colors, font, width, height }) { this.drawFullHeader(colors, font, this.logo); @@ -47,7 +47,7 @@ export default PreviewBaseComponent.extend({ this.drawPills(colors, font, height * 0.15, { categories: true }); this.renderCategoriesWithTopics(ctx, colors, font, width, height); } - }, + } renderCategoriesBoxes(ctx, colors, font, width, height, opts) { opts = opts || {}; @@ -122,7 +122,7 @@ export default PreviewBaseComponent.extend({ ctx.textAlign = "left"; } }); - }, + } renderCategories(ctx, colors, font, width, height) { const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50); @@ -221,7 +221,7 @@ export default PreviewBaseComponent.extend({ y += topicHeight; }); } - }, + } renderCategoriesWithTopics(ctx, colors, font, width, height) { const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50); @@ -340,21 +340,21 @@ export default PreviewBaseComponent.extend({ drawLine(width / 2, y); }); - }, + } getHomepageStyle() { return this.step.valueFor("homepage_style"); - }, + } getTitles() { return LOREM.split(".") .slice(0, 8) .map((t) => t.substring(0, 40)); - }, + } getDescriptions() { return LOREM.split("."); - }, + } renderLatest(ctx, colors, font, width, height) { const rowHeight = height / 6.6; @@ -437,7 +437,7 @@ export default PreviewBaseComponent.extend({ drawLine(y + rowHeight * 1); y += rowHeight; }); - }, + } fillTextMultiLine(ctx, text, x, y, lineHeight, maxWidth) { const words = text.split(" ").filter((f) => f); @@ -458,7 +458,7 @@ export default PreviewBaseComponent.extend({ totalHeight += lineHeight; return totalHeight; - }, + } // Edges expected in this order: NW to NE -> NE to SE -> SE to SW -> SW to NW drawSquare(ctx, from, to, edges = []) { @@ -485,5 +485,5 @@ export default PreviewBaseComponent.extend({ ctx.lineTo(path.to.x, path.to.y); ctx.stroke(); }); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js index 8a6c83ec8bf..c474e3da276 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/-preview-base.js @@ -37,25 +37,25 @@ function canvasFor(image, w, h) { } const scale = window.devicePixelRatio; -export default Component.extend({ +export default class PreviewBase extends Component { + ctx = null; + loaded = false; + loadingFontVariants = false; + get elementWidth() { return this.width * scale; - }, + } get elementHeight() { return this.height * scale; - }, + } get canvasStyle() { return htmlSafe(`width:${this.width}px;height:${this.height}px`); - }, - - ctx: null, - loaded: false, - loadingFontVariants: false, + } didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.fontMap = PreloadStore.get("fontMap"); this.loadedFonts = new Set(); const c = this.element.querySelector("canvas"); @@ -72,10 +72,10 @@ export default Component.extend({ } this.reload(); - }, + } willDestroyElement() { - this._super(...arguments); + super.willDestroyElement(...arguments); if (this.step) { this.step.findField("color_scheme")?.removeListener(this.themeChanged); @@ -87,26 +87,26 @@ export default Component.extend({ .findField("heading_font") ?.removeListener(this.themeHeadingFontChanged); } - }, + } @action themeChanged() { this.triggerRepaint(); - }, + } @action themeBodyFontChanged() { if (!this.loadingFontVariants) { this.loadFontVariants(this.wizard.font); } - }, + } @action themeHeadingFontChanged() { if (!this.loadingFontVariants) { this.loadFontVariants(this.wizard.headingFont); } - }, + } loadFontVariants(font) { const fontVariantData = this.fontMap[font.id]; @@ -146,16 +146,16 @@ export default Component.extend({ } else if (this.loadedFonts.has(font.id)) { this.triggerRepaint(); } - }, + } - images() {}, + images() {} // 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 // make sure they are loaded before rendering the canvas via loadFontVariants. loadFonts() { return document.fonts.ready; - }, + } loadImages() { const images = this.images(); @@ -167,18 +167,18 @@ export default Component.extend({ ); } return Promise.resolve(); - }, + } reload() { Promise.all([this.loadFonts(), this.loadImages()]).then(() => { this.loaded = true; this.triggerRepaint(); }); - }, + } triggerRepaint() { scheduleOnce("afterRender", this, "repaint"); - }, + } repaint() { if (!this.loaded) { @@ -215,7 +215,7 @@ export default Component.extend({ height: this.height, }; this.paint(options); - }, + } categories() { return [ @@ -223,7 +223,7 @@ export default Component.extend({ { name: "ultrices", color: "#3AB54A" }, { name: "placerat", color: "#25AAE2" }, ]; - }, + } scaleImage(image, x, y, w, h) { w = Math.floor(w); @@ -246,7 +246,7 @@ export default Component.extend({ } ctx.drawImage(scaled[key], x, y, w, h); - }, + } drawFullHeader(colors, font, logo) { const { ctx } = this; @@ -311,7 +311,7 @@ export default Component.extend({ ctx.scale(pathScale, pathScale); ctx.fill(hamburgerIcon); ctx.restore(); - }, + } drawPills(colors, font, headerHeight, opts) { opts = opts || {}; @@ -389,8 +389,8 @@ export default Component.extend({ x += categoriesSize * 0.6; ctx.fillText("Top", x, headerHeight + headerMargin * 1.5 + fontSize); - }, -}); + } +} function loadImage(src) { if (!src) { diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js index d941e956826..0de1ba77a31 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/styling-preview/index.js @@ -1,5 +1,6 @@ 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 { chooseDarker, darkLightDiff } from "../../../lib/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 metus. Fusce in consequat augue, vel facilisis felis.`; -export default PreviewBaseComponent.extend({ - width: 628, - height: 322, - logo: null, - avatar: null, - previewTopic: true, - draggingActive: false, - startX: 0, - scrollLeft: 0, - HomepagePreview, +export default class Index extends PreviewBaseComponent { + width = 628; + height = 322; + logo = null; + avatar = null; + previewTopic = true; + draggingActive = false; + startX = 0; + scrollLeft = 0; + HomepagePreview = HomepagePreview; init() { - this._super(...arguments); + super.init(...arguments); this.step .findField("homepage_style") ?.addListener(this.onHomepageStyleChange); - }, + } willDestroy() { - this._super(...arguments); + super.willDestroy(...arguments); this.step .findField("homepage_style") ?.removeListener(this.onHomepageStyleChange); - }, + } didInsertElement() { - this._super(...arguments); + super.didInsertElement(...arguments); this.element.addEventListener("mouseleave", this.handleMouseLeave); this.element.addEventListener("mousemove", this.handleMouseMove); - }, + } willDestroyElement() { - this._super(...arguments); + super.willDestroyElement(...arguments); this.element.removeEventListener("mouseleave", this.handleMouseLeave); this.element.removeEventListener("mousemove", this.handleMouseMove); - }, + } mouseDown(e) { const slider = this.element.querySelector(".previews"); @@ -55,16 +56,16 @@ export default PreviewBaseComponent.extend({ startX: e.pageX - slider.offsetLeft, scrollLeft: slider.scrollLeft, }); - }, + } @bind handleMouseLeave() { this.set("draggingActive", false); - }, + } mouseUp() { this.set("draggingActive", false); - }, + } @bind handleMouseMove(e) { @@ -85,18 +86,18 @@ export default PreviewBaseComponent.extend({ if (slider.scrollLeft > slider.offsetWidth - 50) { this.set("previewTopic", false); } - }, + } didUpdateAttrs() { - this._super(...arguments); + super.didUpdateAttrs(...arguments); this.triggerRepaint(); - }, + } @bind onHomepageStyleChange() { this.set("previewTopic", false); - }, + } @observes("previewTopic") scrollPreviewArea() { @@ -106,14 +107,14 @@ export default PreviewBaseComponent.extend({ left: this.previewTopic ? 0 : el.scrollWidth - el.offsetWidth, behavior: "smooth", }); - }, + } images() { return { logo: this.wizard.logoUrl, avatar: "/images/wizard/trout.png", }; - }, + } paint({ ctx, colors, font, headingFont, width, height }) { const headerHeight = height * 0.3; @@ -207,17 +208,17 @@ export default PreviewBaseComponent.extend({ ctx.font = `Bold ${bodyFontSize}em ${font}`; ctx.fillStyle = colors.primary; ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5); - }, + } @action setPreviewHomepage(event) { event?.preventDefault(); this.set("previewTopic", false); - }, + } @action setPreviewTopic(event) { event?.preventDefault(); this.set("previewTopic", true); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js index 87d5ddb040f..8943b68cfc1 100644 --- a/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js +++ b/app/assets/javascripts/discourse/app/static/wizard/components/fields/text.js @@ -1,3 +1,3 @@ import Component from "@ember/component"; -export default Component.extend({}); +export default class Text extends Component {}