discourse/app/assets/javascripts/wizard/components/image-preview-logo.js.es6

38 lines
826 B
Plaintext
Raw Normal View History

2018-06-15 11:03:24 -04:00
import { observes } from "ember-addons/ember-computed-decorators";
2016-09-16 16:12:56 -04:00
2018-06-15 11:03:24 -04:00
import { createPreviewComponent, drawHeader } from "wizard/lib/preview";
2016-09-16 16:12:56 -04:00
export default createPreviewComponent(400, 100, {
image: null,
2018-06-15 11:03:24 -04:00
@observes("field.value")
2016-09-16 16:12:56 -04:00
imageChanged() {
this.reload();
},
images() {
2018-06-15 11:03:24 -04:00
return { image: this.get("field.value") };
2016-09-16 16:12:56 -04:00
},
paint(ctx, colors, width, height) {
const headerHeight = height / 2;
drawHeader(ctx, colors, width, headerHeight);
const image = this.image;
const headerMargin = headerHeight * 0.2;
2018-06-15 11:03:24 -04:00
const imageHeight = headerHeight - headerMargin * 2;
2016-09-16 16:12:56 -04:00
const ratio = imageHeight / image.height;
2018-06-15 11:03:24 -04:00
this.scaleImage(
image,
headerMargin,
headerMargin,
image.width * ratio,
imageHeight
);
2016-09-16 16:12:56 -04:00
this.drawPills(colors, height / 2);
2016-09-16 16:12:56 -04:00
}
});