mirror of
https://github.com/discourse/discourse.git
synced 2024-12-14 10:23:40 +08:00
2228f75645
+ native classes + tracked properties - Ember.Object - Ember.Evented - observers - mixins - computed/discourseComputed Also removes unused wizard infrastructure for warnings. It appears that once upon on time, either the server can generate warnings, or some client code can generate them, which requires an extra confirmation from the user before they can continue to the next step. This code is not tested and appears unused and defunct. Nothing generates such warning and the server does not serialize them. Extracted from https://github.com/discourse/discourse/pull/23678
90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
import { action } from "@ember/object";
|
|
import { drawHeader, LOREM } from "wizard/lib/preview";
|
|
import WizardPreviewBaseComponent from "./wizard-preview-base";
|
|
|
|
export default WizardPreviewBaseComponent.extend({
|
|
width: 375,
|
|
height: 100,
|
|
image: null,
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
this.field.addListener(this.imageChanged);
|
|
},
|
|
|
|
willDestroyElement() {
|
|
this._super(...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;
|
|
const headerHeight = height / 2;
|
|
|
|
drawHeader(ctx, colors, width, headerHeight);
|
|
|
|
const image = this.image;
|
|
const headerMargin = headerHeight * 0.2;
|
|
|
|
const maxWidth = headerHeight - headerMargin * 2.0;
|
|
let imageWidth = image.width;
|
|
let ratio = 1.0;
|
|
if (imageWidth > maxWidth) {
|
|
ratio = maxWidth / imageWidth;
|
|
imageWidth = maxWidth;
|
|
}
|
|
|
|
this.scaleImage(
|
|
image,
|
|
headerMargin,
|
|
headerMargin,
|
|
imageWidth,
|
|
image.height * ratio
|
|
);
|
|
|
|
const afterLogo = headerMargin * 1.7 + imageWidth;
|
|
const fontSize = Math.round(headerHeight * 0.4);
|
|
|
|
ctx.font = `Bold ${fontSize}px '${headingFont}'`;
|
|
ctx.fillStyle = colors.primary;
|
|
const title = LOREM.substring(0, 27);
|
|
ctx.fillText(
|
|
title,
|
|
headerMargin + imageWidth,
|
|
headerHeight - fontSize * 1.1
|
|
);
|
|
|
|
const category = this.categories()[0];
|
|
const badgeSize = height / 13.0;
|
|
ctx.beginPath();
|
|
ctx.fillStyle = category.color;
|
|
ctx.rect(afterLogo, headerHeight * 0.7, badgeSize, badgeSize);
|
|
ctx.fill();
|
|
|
|
ctx.font = `Bold ${badgeSize * 1.2}px '${font}'`;
|
|
ctx.fillStyle = colors.primary;
|
|
ctx.fillText(
|
|
category.name,
|
|
afterLogo + badgeSize * 1.5,
|
|
headerHeight * 0.7 + badgeSize * 0.9
|
|
);
|
|
|
|
const LINE_HEIGHT = 12;
|
|
ctx.font = `${LINE_HEIGHT}px '${font}'`;
|
|
const lines = LOREM.split("\n");
|
|
for (let i = 0; i < 10; i++) {
|
|
const line = height * 0.55 + i * (LINE_HEIGHT * 1.5);
|
|
ctx.fillText(lines[i], afterLogo, line);
|
|
}
|
|
},
|
|
});
|