Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 18x 18x 18x 16x 30x 30x 30x 16x 30x 16x 16x 16x 16x 16x 16x 16x | import * as $ from 'jquery';
const _ = require('underscore');
const __ = require('oro/translator');
const BaseField = require('pim/form/common/fields/field');
const Routing = require('routing');
const Mediator = require('oro/mediator');
const Messenger = require('oro/messenger');
const MediaUrlGenerator = require('pim/media-url-generator');
const template = require('pim/template/form/common/fields/media');
require('jquery.slimbox');
/**
* Media field (using back-end FileInfo)
*
* @author Marie Gautier <marie.gautier@akeneo.com>
* @copyright 2018 Akeneo SAS (http://www.akeneo.com)
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
*/
class MediaField extends BaseField {
readonly template = _.template(template);
constructor(config: any) {
super(config);
this.events = {
'change input[type="file"]': this.uploadMedia,
'click .clear-field': this.clearField,
'click .open-media': this.openMedia
};
}
/**
* {@inheritdoc}
*/
getTemplateContext() {
return BaseField.prototype.getTemplateContext.apply(this, arguments)
.then((templateContext: any) => {
templateContext.mediaUrlGenerator = MediaUrlGenerator;
return templateContext;
});
}
/**
* {@inheritdoc}
*/
renderInput(templateContext: any) {
return this.template(Object.assign(templateContext, {
media: this.getFormData()[this.fieldName],
readOnly: this.readOnly,
uploadLabel: __('pim_common.media_upload')
}));
}
private handleProcess(e: { loaded: number, total: number }) {
this.$('> .akeneo-media-uploader-field .progress').css({opacity: 1});
this.$('> .akeneo-media-uploader-field .progress .bar').css({
width: ((e.loaded / e.total) * 100) + '%'
});
}
private setUploadContextValue(value: any) {
this.updateModel(value);
Mediator.trigger('pim_enrich:form:entity:update_state');
}
private uploadMedia() {
const input = this.$('input[type="file"]')[0];
if (!input || 0 === input.files.length) {
return;
}
const formData = new FormData();
formData.append('file', input.files[0]);
$.ajax({
url: Routing.generate('pim_enrich_media_rest_post'),
type: 'POST',
data: formData,
contentType: false,
cache: false,
processData: false,
xhr: () => {
const myXhr = (<any> $.ajaxSettings).xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', this.handleProcess.bind(this), false);
}
return myXhr;
}
}).done((data) => {
this.setUploadContextValue(data);
this.render();
}).fail((xhr) => {
const message = xhr.responseJSON && xhr.responseJSON.message ?
xhr.responseJSON.message :
__('pim_enrich.entity.product.error.upload');
Messenger.enqueueMessage('error', message);
}).always(() => {
this.$('> .akeneo-media-uploader-field .progress').css({opacity: 0});
});
}
private clearField() {
this.updateModel({
filePath: null,
originalFilename: null
});
this.render();
}
private openMedia() {
const mediaUrl = MediaUrlGenerator.getMediaShowUrl(this.getFormData()[this.fieldName].filePath, 'preview');
if (mediaUrl) {
(<any> $).slimbox(mediaUrl, '', {overlayOpacity: 0.3});
}
}
}
export = MediaField
|