diff --git a/app/assets/javascripts/wizard/components/image-preview-favicon-url.js.es6 b/app/assets/javascripts/wizard/components/image-preview-favicon-url.js.es6 new file mode 100644 index 00000000000..7ef78e046d4 --- /dev/null +++ b/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); + } +}); diff --git a/app/assets/javascripts/wizard/models/wizard.js.es6 b/app/assets/javascripts/wizard/models/wizard.js.es6 index 156a55adc5c..64b28374a5d 100644 --- a/app/assets/javascripts/wizard/models/wizard.js.es6 +++ b/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'); diff --git a/public/images/wizard/tab.png b/public/images/wizard/tab.png new file mode 100644 index 00000000000..9e6c50785db Binary files /dev/null and b/public/images/wizard/tab.png differ