71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import { observes } from 'ember-addons/ember-computed-decorators';
|
|
|
|
import {
|
|
createPreviewComponent,
|
|
loadImage,
|
|
drawHeader,
|
|
LOREM
|
|
} from 'wizard/lib/preview';
|
|
|
|
export default createPreviewComponent(375, 100, {
|
|
image: null,
|
|
|
|
@observes('field.value')
|
|
imageChanged() {
|
|
this.reload();
|
|
},
|
|
|
|
load() {
|
|
return loadImage(this.get('field.value')).then(image => {
|
|
this.image = image;
|
|
});
|
|
},
|
|
|
|
paint(ctx, colors, width, height) {
|
|
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;
|
|
}
|
|
|
|
ctx.drawImage(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 'Arial'`;
|
|
ctx.fillStyle = colors.primary;
|
|
const title = LOREM.substring(0, 27);
|
|
ctx.fillText(title, headerMargin + imageWidth, headerHeight - (fontSize * 1.1));
|
|
|
|
const badgeSize = height / 13.0;
|
|
ctx.beginPath();
|
|
ctx.fillStyle = colors.primary;
|
|
ctx.rect(afterLogo, (headerHeight * 0.70), badgeSize, badgeSize);
|
|
ctx.fill();
|
|
|
|
ctx.font = `Bold ${badgeSize * 1.2}px 'Arial'`;
|
|
ctx.fillStyle = colors.primary;
|
|
const category = "consectetur";
|
|
ctx.fillText(category, afterLogo + (badgeSize * 1.5), headerHeight * 0.7 + (badgeSize * 0.9));
|
|
|
|
const LINE_HEIGHT = 12;
|
|
ctx.font = `${LINE_HEIGHT}px 'Arial'`;
|
|
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);
|
|
}
|
|
}
|
|
|
|
});
|
|
|