pille
/
oc-resizer-plugin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed: Dont make svgs too wide in jcrop container

This commit is contained in:
Philipp Lang 2020-10-29 23:42:48 +00:00
parent 82b358f69d
commit b9283a46c4
2 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
formwidgets/responsiveimage/assets/css/main.css
View File

@ -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 .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} .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 { .field-responsiveimage {
.vue-dropzone { .vue-dropzone {
display: none; display: none;

41
formwidgets/responsiveimage/assets/src/popup.mixin.js
View File

@ -18,7 +18,7 @@ export default {
values: { crop: null } values: { crop: null }
}; };
$('body').append(this.popupContent); $('body').append(this.popupContent(file));
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var $popup = $(`#${this.popupId}`); var $popup = $(`#${this.popupId}`);
@ -31,7 +31,7 @@ export default {
imageElement.src = file.dataURL; imageElement.src = file.dataURL;
$cropContainer.append(imageElement); $cropContainer.append(imageElement);
if (_cls.cropOptions.types.some(type => type == file.type)) { if (_cls.useJcrop) {
var jcropOptions = { var jcropOptions = {
shade: true, shade: true,
boxWidth: $cropContainer.width(), boxWidth: $cropContainer.width(),
@ -71,19 +71,9 @@ export default {
reject(null); reject(null);
}); });
}); });
}
},
computed: {
realAspectRatio() {
return this.cropOptions.aspectRatio
? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1]
: null;
}, },
popupId() { popupContent(file) {
return `subform-popup-${this.formid}`; var decoration = this.jcropContainerDecoration(file);
},
popupContent() {
return `<div class="control-popup modal fade" id="${this.popupId}"> return `<div class="control-popup modal fade" id="${this.popupId}">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -92,8 +82,8 @@ export default {
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Bild konfigurieren</h4> <h4 class="modal-title">Bild konfigurieren</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body responsiveimage-jcrop-body">
<div data-jcrop></div> <div data-jcrop ${decoration}></div>
<p style="margin-top: 2rem;">Füge dem Anhang einen Titel und eine Beschreibung hinzu.</p> <p style="margin-top: 2rem;">Füge dem Anhang einen Titel und eine Beschreibung hinzu.</p>
<div class="form-group text-field span-full"> <div class="form-group text-field span-full">
<input type="text" name="title" value="" placeholder="Titel" class="form-control" autocomplete="off" maxlength="255"> <input type="text" name="title" value="" placeholder="Titel" class="form-control" autocomplete="off" maxlength="255">
@ -110,7 +100,24 @@ export default {
</div> </div>
</div> </div>
</div>`; </div>`;
} },
useJcrop(file) {
return this.cropOptions.types.some(type => type == file.type);
},
jcropContainerDecoration(file) {
return this.useJcrop(file) ? '' : 'class="no-jcrop"';
},
},
computed: {
realAspectRatio() {
return this.cropOptions.aspectRatio
? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1]
: null;
},
popupId() {
return `subform-popup-${this.formid}`;
},
}, },
mounted() { mounted() {