diff --git a/modules/eb_widget/config/schema/dropzonejs_eb_widget.schema.yml b/modules/eb_widget/config/schema/dropzonejs_eb_widget.schema.yml index e87298b..8ca8feb 100644 --- a/modules/eb_widget/config/schema/dropzonejs_eb_widget.schema.yml +++ b/modules/eb_widget/config/schema/dropzonejs_eb_widget.schema.yml @@ -29,6 +29,15 @@ entity_browser.browser.widget.dropzonejs: resize_height: type: integer label: 'Maximum height' + resize_quality: + type: integer + label: 'Resize quality' + resize_method: + type: string + label: 'Method used for resizing' + thumbnail_method: + type: string + label: 'Method used for generating the thumbnail' entity_browser.browser.widget.dropzonejs_media_entity: type: mapping @@ -64,6 +73,15 @@ entity_browser.browser.widget.dropzonejs_media_entity: resize_height: type: integer label: 'Maximum height' + resize_quality: + type: integer + label: 'Resize quality' + resize_method: + type: string + label: 'Method used for resizing' + thumbnail_method: + type: string + label: 'Method used for generating the thumbnail' entity_browser.browser.widget.dropzonejs_media_entity_inline_entity_form: type: mapping diff --git a/modules/eb_widget/src/Plugin/EntityBrowser/Widget/DropzoneJsEbWidget.php b/modules/eb_widget/src/Plugin/EntityBrowser/Widget/DropzoneJsEbWidget.php index b496478..f96a98b 100644 --- a/modules/eb_widget/src/Plugin/EntityBrowser/Widget/DropzoneJsEbWidget.php +++ b/modules/eb_widget/src/Plugin/EntityBrowser/Widget/DropzoneJsEbWidget.php @@ -107,6 +107,9 @@ class DropzoneJsEbWidget extends WidgetBase { 'clientside_resize' => FALSE, 'resize_width' => NULL, 'resize_height' => NULL, + 'resize_quality' => 1, + 'resize_method' => 'contain', + 'thumbnail_method' => 'contain', ] + parent::defaultConfiguration(); } @@ -130,12 +133,15 @@ class DropzoneJsEbWidget extends WidgetBase { '#max_filesize' => $config['settings']['max_filesize'], '#extensions' => $config['settings']['extensions'], '#max_files' => ($cardinality > 0) ? $cardinality : 0, - '#clientside_resize' => $config['settings']['clientside_resize'] + '#clientside_resize' => $config['settings']['clientside_resize'], ]; if ($config['settings']['clientside_resize']) { $form['upload']['#resize_width'] = $config['settings']['resize_width']; $form['upload']['#resize_height'] = $config['settings']['resize_height']; + $form['upload']['#resize_quality'] = $config['settings']['resize_quality']; + $form['upload']['#resize_method'] = $config['settings']['resize_method']; + $form['upload']['#thumbnail_method'] = $config['settings']['thumbnail_method']; } $form['#attached']['library'][] = 'dropzonejs/widget'; @@ -387,7 +393,7 @@ class DropzoneJsEbWidget extends WidgetBase { ]; if (!$exif_found) { - $form['clientside_resize']['#description'] = $this->t('Requires the exif library. See README for more information.', ['@exif' => 'https://github.com/exif-js/exif-js']); + $form['clientside_resize']['#description'] = $this->t('Requires droopzone version v4.4.0 or higher and the exif library.', ['@exif' => 'https://github.com/exif-js/exif-js']); $form['clientside_resize']['#disabled'] = TRUE; } @@ -400,9 +406,9 @@ class DropzoneJsEbWidget extends WidgetBase { '#min' => 0, '#states' => [ 'visible' => [ - ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => array( + ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => [ 'checked' => TRUE, - ), + ], ] ] ]; @@ -416,9 +422,59 @@ class DropzoneJsEbWidget extends WidgetBase { '#min' => 0, '#states' => [ 'visible' => [ - ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => array( + ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => [ + 'checked' => TRUE, + ], + ] + ] + ]; + + $form['resize_quality'] = [ + '#type' => 'number', + '#title' => $this->t('Resize quality'), + '#default_value' => $configuration['resize_quality'], + '#min' => 0, + '#max' => 1, + '#step' => 0.1, + '#states' => [ + 'visible' => [ + ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => [ + 'checked' => TRUE, + ], + ] + ] + ]; + + $form['resize_method'] = [ + '#type' => 'select', + '#title' => $this->t('Resize method'), + '#default_value' => $configuration['resize_method'], + '#options' => [ + 'contain' => $this->t('Contain (scale)'), + 'crop' => $this->t('Crop'), + ], + '#states' => [ + 'visible' => [ + ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => [ + 'checked' => TRUE, + ], + ] + ] + ]; + + $form['thumbnail_method'] = [ + '#type' => 'select', + '#title' => $this->t('Thumbnail method'), + '#default_value' => $configuration['thumbnail_method'], + '#options' => [ + 'contain' => $this->t('Contain (scale)'), + 'crop' => $this->t('Crop'), + ], + '#states' => [ + 'visible' => [ + ':input[name="table[' . $this->uuid() . '][form][clientside_resize]"]' => [ 'checked' => TRUE, - ), + ], ] ] ]; diff --git a/src/Element/DropzoneJs.php b/src/Element/DropzoneJs.php index 9bc0071..ead6be0 100644 --- a/src/Element/DropzoneJs.php +++ b/src/Element/DropzoneJs.php @@ -13,22 +13,42 @@ use Drupal\Core\Url; /** * Provides a DropzoneJS atop of the file element. * - * Configuration options are: - * - #title + * Required options are: + * - #title (string) * The main field title. - * - #description + * - #description (string) * Description under the field. - * - #dropzone_description + * - #dropzone_description (string) * Will be visible inside the upload area. - * - #max_filesize + * - #max_filesize (string) * Used by dropzonejs and expressed in number + unit (i.e. 1.1M) This will be * converted to a form that DropzoneJs understands. See: * http://www.dropzonejs.com/#config-maxFilesize - * - #extensions + * - #extensions (string) * A string of valid extensions separated by a space. - * - #max_files + * - #max_files (integer) * Number of files that can be uploaded. * If < 1, there is no limit. + * - #clientside_resize (bool) + * Whether or not to use DropzoneJS clientside resizing. It requires v4.4.0+ + * version of the library. + * + * Optional options are: + * - #resize_width (integer) + * (optional) The maximum with in px. If omitted defaults to NULL. + * - #resize_height (integer) + * (optional) The maximum height in px. If omitted defaults to NULL. + * - #resize_quality (float) + * (optional) The quality of the resize. Accepts values from 0 - 1. Ie: 0.8. + * Defautls to 1. + * - #resize_method (string) + * (optional) Accepts 'contain', which scales the image, or 'crop' which crops + * the image. Defaults to 'contain'. + * - #thumbnail_method (string). + * (optional) Accepts 'contain', which scales the image, or 'crop' which crops + * the image. Defaults to 'contain'. + * + * @todo Not sure about the version for clientside. * * When submitted the element returns an array of temporary file locations. It's * the duty of the environment that implements this element to handle the @@ -125,9 +145,9 @@ class DropzoneJs extends FormElement { $element['#attached']['drupalSettings']['dropzonejs']['instances'][$element['#id']] += [ 'resizeWidth' => !empty($element['#resize_width']) ? $element['#resize_width'] : NULL, 'resizeHeight' => !empty($element['#resize_height']) ? $element['#resize_height'] : NULL, - 'resizeMimeType' => !empty($element['#resize_mime_type']) ? $element['#resize_mime_type'] : 'image/jpeg', - // @todo Figure out what to do with this. - 'resizeQuality' => 1, + 'resizeQuality' => !empty($element['#resize_quality']) ? $element['#resize_quality'] : 1, + 'resizeMethod' => !empty($element['#resize_method']) ? $element['#resize_method'] : 'contain', + 'thumbnailMethod' => !empty($element['#thumbnail_method']) ? $element['#thumbnail_method'] : 'contain', ]; array_unshift($element['#attached']['library'], 'dropzonejs/exif-js'); }