Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-18 01:05:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wizard: Support for custom image previews for uploads

Browse Source
This commit is contained in:
Robin Ward 2016-09-16 13:10:12 -04:00
parent 28cd49f02b
commit 69325fbe02
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/wizard/components/wizard-field-image.js.es6
View File

@ -1,10 +1,17 @@
import computed from 'ember-addons/ember-computed-decorators';
import { getToken } from 'wizard/lib/ajax'; import { getToken } from 'wizard/lib/ajax';
export default Ember.Component.extend({ export default Ember.Component.extend({
classNames: ['wizard-image-row'], classNames: ['wizard-image-row'],
uploading: false, uploading: false,
@computed('field.id')
previewComponent(id) {
const componentName = `image-preview-${Ember.String.dasherize(id)}`;
const exists = this.container.lookup(`component:${componentName}`);
return exists ? componentName : 'wizard-image-preview';
},
didInsertElement() { didInsertElement() {
this._super(); this._super();

3
app/assets/javascripts/wizard/components/wizard-image-preview.js.es6 Normal file
View File

@ -0,0 +1,3 @@
export default Ember.Component.extend({
classNameBindings: [':wizard-image-preview', 'fieldClass']
});

10
app/assets/javascripts/wizard/templates/components/wizard-field-image.hbs
View File

@ -1,3 +1,7 @@
{{#if field.value}}
{{component previewComponent field=field fieldClass=fieldClass}}
{{/if}}
<label class="wizard-btn wizard-btn-upload {{if uploading 'disabled'}}"> <label class="wizard-btn wizard-btn-upload {{if uploading 'disabled'}}">
{{#if uploading}} {{#if uploading}}
{{i18n "wizard.uploading"}} {{i18n "wizard.uploading"}}
@ -8,9 +12,3 @@
<input disabled={{uploading}} type="file" accept="image/*" style="visibility: hidden; position: absolute;" /> <input disabled={{uploading}} type="file" accept="image/*" style="visibility: hidden; position: absolute;" />
</label> </label>
{{#if field.value}}
<div class='wizard-image-preview {{fieldClass}}'>
<img src={{field.value}} class={{fieldClass}}>
</div>
{{/if}}

1
app/assets/javascripts/wizard/templates/components/wizard-image-preview.hbs Normal file
View File

@ -0,0 +1 @@
<img src={{field.value}} class={{fieldClass}}>