Fixed: Dont crop svg files

This commit is contained in:
philipp lang 2020-10-29 22:25:28 +01:00
parent efe0b265a6
commit 1af4858d60
4 changed files with 23 additions and 15 deletions

View File

@ -75,15 +75,20 @@ class Responsiveimage extends FormWidgetBase
protected function prepareVars() protected function prepareVars()
{ {
$this->vars['aspectRatio'] = $this->aspectRatio $this->vars['aspectRatio'] = $this->aspectRatio
? str_replace('"', "'", json_encode(explode(' / ', $this->aspectRatio))) ? $this->vueParam(explode(' / ', $this->aspectRatio))
: 'null'; : 'null';
$this->vars['minWidth'] = $this->minWidth ?: '0'; $this->vars['minWidth'] = $this->minWidth ?: '0';
$this->vars['name'] = $this->formField->getName(); $this->vars['name'] = $this->formField->getName();
$this->vars['value'] = $this->getLoadValue() ?: 'null'; $this->vars['value'] = $this->getLoadValue() ?: 'null';
$this->vars['meta'] = $this->getLoadValue() $this->vars['meta'] = $this->getLoadValue()
? str_replace('"', "'", json_encode(app(UploadStorage::class)->getFileData($this->getLoadValue()))) ? $this->vueParam(app(UploadStorage::class)->getFileData($this->getLoadValue()))
: 'null'; : 'null';
$this->vars['model'] = $this->model; $this->vars['model'] = $this->model;
$this->vars['croppableTypes'] = $this->vueParam(SourceFile::$croppableTypes);
}
private function vueParam($config) {
return str_replace('"', "'", json_encode($config));
} }
/** /**
@ -100,11 +105,11 @@ class Responsiveimage extends FormWidgetBase
*/ */
public function getSaveValue($value) public function getSaveValue($value)
{ {
return $value; return is_numeric($value) ? $value : null;
} }
public function getLoadValue() { public function getLoadValue() {
return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : null; return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : '';
} }
/** /**

View File

@ -11,7 +11,7 @@ export default {
onChangeCrop() { onChangeCrop() {
this.popup.values.crop = this.jcrop.tellSelect(); this.popup.values.crop = this.jcrop.tellSelect();
}, },
showPopup(file) { showPopup(file, cro) {
var _cls = this; var _cls = this;
this.popup = { this.popup = {
file: file, file: file,
@ -31,15 +31,17 @@ export default {
imageElement.src = file.dataURL; imageElement.src = file.dataURL;
$cropContainer.append(imageElement); $cropContainer.append(imageElement);
var jcropOptions = { if (_cls.cropOptions.types.some(type => type == file.type)) {
shade: true, var jcropOptions = {
boxWidth: $cropContainer.width(), shade: true,
onChange: _cls.onChangeCrop, boxWidth: $cropContainer.width(),
aspectRatio: _cls.realAspectRatio, onChange: _cls.onChangeCrop,
minSize: [_cls.cropOptions.minWidth, 0] aspectRatio: _cls.realAspectRatio,
}; minSize: [_cls.cropOptions.minWidth, 0]
};
_cls.jcrop = $.Jcrop($popup.find('[data-jcrop] img').get(0), jcropOptions); _cls.jcrop = $.Jcrop($popup.find('[data-jcrop] img').get(0), jcropOptions);
}
$popup.on('change', '[name=title]', (e) => { _cls.popup.values.title = e.target.value }); $popup.on('change', '[name=title]', (e) => { _cls.popup.values.title = e.target.value });
$popup.on('change', '[name=description]', (e) => { _cls.popup.values.description = e.target.value }); $popup.on('change', '[name=description]', (e) => { _cls.popup.values.description = e.target.value });

View File

@ -13,6 +13,7 @@
:crop-options="{ :crop-options="{
aspectRatio: <?= $aspectRatio ?>, aspectRatio: <?= $aspectRatio ?>,
minWidth: <?= $minWidth ?>, minWidth: <?= $minWidth ?>,
types: <?= $croppableTypes; ?>
}" }"
:value="<?= $value; ?>" :value="<?= $value; ?>"
:meta="<?= $meta; ?>" :meta="<?= $meta; ?>"

View File

@ -12,7 +12,7 @@ class SourceFile extends Model
protected $slugs = ['slug' => 'basename']; protected $slugs = ['slug' => 'basename'];
protected $croppableTypes = [ 'image/jpeg', 'image/gif', 'image/png', 'image/webp' ]; public static $croppableTypes = [ 'image/jpeg', 'image/gif', 'image/png', 'image/webp' ];
/** /**
* @var string The database table used by the model. * @var string The database table used by the model.
@ -63,6 +63,6 @@ class SourceFile extends Model
} }
public function isCroppable(): bool { public function isCroppable(): bool {
return in_array($this->type, $this->croppableTypes); return in_array($this->type, static::$croppableTypes);
} }
} }