diff --git a/formwidgets/responsiveimage/assets/css/main.css b/formwidgets/responsiveimage/assets/css/main.css index 2dc4235..6ec87a0 100644 --- a/formwidgets/responsiveimage/assets/css/main.css +++ b/formwidgets/responsiveimage/assets/css/main.css @@ -156,6 +156,12 @@ .field-responsiveimage.style-file-single .upload-object .icon-container:after {width:20px;height:20px;margin-top:-10px;margin-left:-10px;background-size:20px 20px} .field-responsiveimage.style-file-single .upload-object.is-error .icon-container:after {font-size:20px} +.responsiveimage-jcrop-body { + div[data-jcrop].no-jcrop img { + max-width: 100%; + } +} + .field-responsiveimage { .vue-dropzone { display: none; diff --git a/formwidgets/responsiveimage/assets/src/popup.mixin.js b/formwidgets/responsiveimage/assets/src/popup.mixin.js index 914c47f..aa716df 100644 --- a/formwidgets/responsiveimage/assets/src/popup.mixin.js +++ b/formwidgets/responsiveimage/assets/src/popup.mixin.js @@ -18,7 +18,7 @@ export default { values: { crop: null } }; - $('body').append(this.popupContent); + $('body').append(this.popupContent(file)); return new Promise((resolve, reject) => { var $popup = $(`#${this.popupId}`); @@ -31,7 +31,7 @@ export default { imageElement.src = file.dataURL; $cropContainer.append(imageElement); - if (_cls.cropOptions.types.some(type => type == file.type)) { + if (_cls.useJcrop) { var jcropOptions = { shade: true, boxWidth: $cropContainer.width(), @@ -71,19 +71,9 @@ export default { reject(null); }); }); - } - }, - - computed: { - realAspectRatio() { - return this.cropOptions.aspectRatio - ? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1] - : null; }, - popupId() { - return `subform-popup-${this.formid}`; - }, - popupContent() { + popupContent(file) { + var decoration = this.jcropContainerDecoration(file); return `