Preview the favicon in the wizard

app/assets/javascripts/wizard/components/image-preview-favicon-url.js.es6

@@ -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);
+  }
+});

app/assets/javascripts/wizard/models/wizard.js.es6

@@ -7,6 +7,12 @@ const Wizard = Ember.Object.extend({
   @computed('steps.length')
   totalSteps: length => length,
 
+  getTitle() {
+    const titleStep = this.get('steps').findProperty('id', 'forum-title');
+    if (!titleStep) { return; }
+    return titleStep.get('fieldsById.title.value');
+  },
+
   // A bit clunky, but get the current colors from the appropriate step
   getCurrentColors() {
     const colorStep = this.get('steps').findProperty('id', 'colors');