Preview the favicon in the wizard

2016-09-16 17:02:45 -04:00
parent 0a41217604
commit e7c1962aa0
3 changed files with 51 additions and 0 deletions
@@ -0,0 +1,45 @@
+import { observes } from 'ember-addons/ember-computed-decorators';
+
+import {
+  createPreviewComponent,
+  loadImage,
+} from 'wizard/lib/preview';
+
+export default createPreviewComponent(371, 124, {
+  tab: null,
+  image: null,
+
+  @observes('field.value')
+  imageChanged() {
+    this.reload();
+  },
+
+  load() {
+    return Ember.RSVP.Promise.all([
+        loadImage('/images/wizard/tab.png'),
+        loadImage(this.get('field.value'))
+    ]).then(result => {
+      this.tab = result[0];
+      this.image = result[1];
+    });
+
+    return loadImage(this.get('field.value')).then(image => {
+      this.image = image;
+    });
+  },
+
+  paint(ctx, colors, width, height) {
+    ctx.drawImage(this.tab, 0, 0, width, height);
+    ctx.drawImage(this.image, 40, 25, 30, 30);
+
+    ctx.font = `20px 'Arial'`;
+    ctx.fillStyle = '#000';
+
+    let title = this.get('wizard').getTitle();
+    if (title.length > 20) {
+      title = title.substring(0, 20) + "...";
+    }
+
+    ctx.fillText(title, 80, 48);
+  }
+});