Skip to content
Snippets Groups Projects

Issue #3420037: have SvgImageWidget inherit from ImageWidget instead of FileWidget

Closed Issue #3420037: have SvgImageWidget inherit from ImageWidget instead of FileWidget
issue/svg_image-3420037:3420037-why-is-svgimagewidget into 3.x
All threads resolved!
Closed Frank Mably requested to merge issue/svg_image-3420037:3420037-why-is-svgimagewidget into 3.x
All threads resolved!
Compare
and
1 file
+ 46
− 330
Compare changes
  • Side-by-side
  • Inline
src/Plugin/Field/FieldWidget/SvgImageWidget.php
+ 46
− 330
@@ -2,13 +2,11 @@
namespace Drupal\svg_image\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Component\Utility\NestedArray;
use Drupal\Core\Form\FormStateInterface;
use Drupal\file\Entity\File;
use Drupal\file\Plugin\Field\FieldWidget\FileWidget;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Drupal\file\FileInterface;
use Drupal\image\Plugin\Field\FieldWidget\ImageWidget;
/**
* Override plugin of the 'image_image' widget.
@@ -24,199 +22,39 @@ use Symfony\Component\DependencyInjection\ContainerInterface;
* }
* )
*/
class SvgImageWidget extends FileWidget {
/**
* Container.
*
* @var \Symfony\Component\DependencyInjection\ContainerInterface
*/
private $container;
/**
* Entity repository service instance.
*
* @var \Drupal\Core\Entity\EntityRepository
*/
protected $entityRepository;
/**
* Renderer instance.
*
* @var \Drupal\Core\Render\Renderer
*/
protected $renderer;
/**
* EntityType manager.
*
* @var \Drupal\Core\Entity\EntityTypeManagerInterface
*/
protected $entityTypeManager;
/**
* Image style storage.
*
* @var \Drupal\Core\Entity\EntityStorageInterface
*/
protected $imageStyleStorage;
/**
* The image factory service.
*
* @var \Drupal\Core\Image\ImageFactory
*/
protected $imageFactory;
class SvgImageWidget extends ImageWidget {
/**
* {@inheritdoc}
*/
public function __construct($pluginId, $pluginDefinition, FieldDefinitionInterface $fieldDefinition, array $settings, array $thirdPartySettings, ContainerInterface $container) {
parent::__construct($pluginId, $pluginDefinition, $fieldDefinition, $settings, $thirdPartySettings, $container->get('element_info'));
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
$this->container = $container;
$this->entityRepository = $container->get('entity.repository');
$this->renderer = $container->get('renderer');
$this->entityTypeManager = $container->get('entity_type.manager');
$this->imageStyleStorage = $this->entityTypeManager->getStorage('image_style');
$this->imageFactory = $container->get('image.factory');
}
$field_settings = $this->getFieldSettings();
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $pluginId, $pluginDefinition) {
return new static(
$pluginId,
$pluginDefinition,
$configuration['field_definition'],
$configuration['settings'],
$configuration['third_party_settings'],
$container
);
}
/**
* {@inheritdoc}
*/
public static function defaultSettings() {
return [
'progress_indicator' => 'throbber',
'preview_image_style' => 'thumbnail',
] + parent::defaultSettings();
}
$extensions = $field_settings['file_extensions'];
$supported_extensions = $this->imageFactory->getSupportedExtensions();
$supported_extensions[] = 'svg';
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $formState) {
$element = parent::settingsForm($form, $formState);
// If using custom extension validation, ensure that the extensions are
// supported by the current image toolkit. Otherwise, validate against all
// toolkit supported extensions.
$extensions = !empty($extensions) ? array_intersect(explode(' ', $extensions), $supported_extensions) : $supported_extensions;
$element['preview_image_style'] = [
'#title' => $this->t('Preview image style'),
'#type' => 'select',
'#options' => image_style_options(FALSE),
'#empty_option' => '<' . $this->t('no preview') . '>',
'#default_value' => $this->getSetting('preview_image_style'),
'#description' => $this->t('The preview image will be shown while editing the content.'),
'#weight' => 15,
];
return $element;
}
/**
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = parent::settingsSummary();
$imageStyles = image_style_options(FALSE);
// Unset possible 'No defined styles' option.
unset($imageStyles['']);
// Styles could be lost because of enabled/disabled modules that defines
// their styles in code.
$imageStyleSetting = $this->getSetting('preview_image_style');
if (isset($imageStyles[$imageStyleSetting])) {
$previewImageStyle = $this->t('Preview image style: @style', ['@style' => $imageStyles[$imageStyleSetting]]);
}
else {
$previewImageStyle = $this->t('No preview');
}
array_unshift($summary, $previewImageStyle);
return $summary;
}
/**
* {@inheritdoc}
*/
protected function formMultipleElements(FieldItemListInterface $items, array &$form, FormStateInterface $formState) {
$elements = parent::formMultipleElements($items, $form, $formState);
// Drupal 10.2 changes the file validation API.
// @see https://www.drupal.org/node/3363700
if (version_compare(\Drupal::VERSION, '10.2', '>=')) {
// Remove default image validation.
unset($element['#upload_validators']['FileIsImage']);
$cardinality = $this->fieldDefinition->getFieldStorageDefinition()->getCardinality();
$fileUploadHelp = [
'#theme' => 'file_upload_help',
'#description' => '',
'#upload_validators' => $elements[0]['#upload_validators'],
'#cardinality' => $cardinality,
];
if ($cardinality == 1) {
// If there's only one field, return it as delta 0.
if (empty($elements[0]['#default_value']['fids'])) {
$fileUploadHelp['#description'] = $this->getFilteredDescription();
$elements[0]['#description'] = $this->renderer->renderPlain($fileUploadHelp);
}
$element['#upload_validators']['FileExtension']['extensions'] = implode(' ', $extensions);
}
else {
$elements['#file_upload_description'] = $fileUploadHelp;
}
return $elements;
}
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $formState) {
$element = parent::formElement($items, $delta, $element, $form, $formState);
$fieldSettings = $this->getFieldSettings();
// Add upload resolution validation.
if ($fieldSettings['max_resolution'] || $fieldSettings['min_resolution']) {
$element['#upload_validators']['file_validate_image_resolution'] = [$fieldSettings['max_resolution'], $fieldSettings['min_resolution']];
}
// Remove default image validation.
unset($element['#upload_validators']['file_validate_is_image']);
// If not using custom extension validation, ensure this is an image.
$supportedExtensions = $this->imageFactory->getSupportedExtensions();
$supportedExtensions[] = 'svg';
$extensions = $element['#upload_validators']['file_validate_extensions'][0] ?? implode(' ', $supportedExtensions);
$extensions = array_intersect(explode(' ', $extensions), $supportedExtensions);
$element['#upload_validators']['file_validate_extensions'][0] = implode(' ', $extensions);
// Add mobile device image capture acceptance.
$element['#accept'] = 'image/*';
// Add properties needed by process() method.
$element['#preview_image_style'] = $this->getSetting('preview_image_style');
$element['#title_field'] = $fieldSettings['title_field'];
$element['#title_field_required'] = $fieldSettings['title_field_required'];
$element['#alt_field'] = $fieldSettings['alt_field'];
$element['#alt_field_required'] = $fieldSettings['alt_field_required'];
// Default image.
$defaultImage = $fieldSettings['default_image'];
if (empty($defaultImage['uuid'])) {
$defaultImage = $this->fieldDefinition->getFieldStorageDefinition()->getSetting('default_image');
$element['#upload_validators']['file_validate_extensions'][0] = implode(' ', $extensions);
}
// Convert the stored UUID into a file ID.
if (!empty($defaultImage['uuid']) && $entity = $this->entityRepository->loadEntityByUuid('file', $defaultImage['uuid'])) {
$defaultImage['fid'] = $entity->id();
}
$element['#default_image'] = !empty($defaultImage['fid']) ? $defaultImage : [];
return $element;
}
@@ -224,168 +62,46 @@ class SvgImageWidget extends FileWidget {
/**
* {@inheritdoc}
*/
public static function process($element, FormStateInterface $formState, $form) {
$item = $element['#value'];
$item['fids'] = $element['fids']['#value'];
$element['#theme'] = 'image_widget';
public static function process($element, FormStateInterface $form_state, $form) {
$element = parent::process($element, $form_state, $form);
// Add the image preview.
if (!empty($element['#files']) && $element['#preview_image_style']) {
// Override image preview if SVG file.
$file = reset($element['#files']);
$variables = svg_image_get_image_file_dimensions($file);
$variables['style_name'] = $element['#preview_image_style'];
$variables['uri'] = $file->getFileUri();
// Add a custom preview for SVG file.
if (svg_image_is_file_svg($file)) {
$element['preview'] = [
'#weight' => -10,
'#theme' => 'image',
'#width' => $variables['width'],
'#height' => $variables['height'],
'#uri' => $variables['uri'],
];
$element['preview'] = static::buildSvgPreview($file);
}
else {
$element['preview'] = [
'#weight' => -10,
'#theme' => 'image_style',
'#width' => $variables['width'],
'#height' => $variables['height'],
'#style_name' => $variables['style_name'],
'#uri' => $variables['uri'],
];
}
// Store the dimensions in the form so the file doesn't have to be
// accessed again. This is important for remote files.
$element['width'] = [
'#type' => 'hidden',
'#value' => $variables['width'],
];
$element['height'] = [
'#type' => 'hidden',
'#value' => $variables['height'],
];
}
elseif (!empty($element['#default_image'])) {
$defaultImage = $element['#default_image'];
$file = File::load($defaultImage['fid']);
if (!empty($file)) {
$element['preview'] = [
'#weight' => -10,
'#theme' => 'image_style',
'#width' => $defaultImage['width'],
'#height' => $defaultImage['height'],
'#style_name' => $element['#preview_image_style'],
'#uri' => $file->getFileUri(),
];
// Override default image preview if SVG file.
$file = File::load($element['#default_image']['fid']);
if ($file && svg_image_is_file_svg($file)) {
$element['preview'] = static::buildSvgPreview($file);
}
}
// Add the additional alt and title fields.
$element['alt'] = [
'#title' => t('Alternative text'),
'#type' => 'textfield',
'#default_value' => isset($item['alt']) ? $item['alt'] : '',
'#description' => t('This text will be used by screen readers, search engines, or when the image cannot be loaded.'),
// @see https://www.drupal.org/node/465106#alt-text
'#maxlength' => 512,
'#weight' => -12,
'#access' => (bool) $item['fids'] && $element['#alt_field'],
'#required' => $element['#alt_field_required'],
'#element_validate' => $element['#alt_field_required'] == 1 ? [[get_called_class(), 'validateRequiredFields']] : [],
];
$element['title'] = [
'#type' => 'textfield',
'#title' => t('Title'),
'#default_value' => isset($item['title']) ? $item['title'] : '',
'#description' => t('The title is used as a tool tip when the user hovers the mouse over the image.'),
'#maxlength' => 1024,
'#weight' => -11,
'#access' => (bool) $item['fids'] && $element['#title_field'],
'#required' => $element['#title_field_required'],
'#element_validate' => $element['#title_field_required'] == 1 ? [[get_called_class(), 'validateRequiredFields']] : [],
];
return parent::process($element, $formState, $form);
return $element;
}
/**
* Validate callback for alt and title field, if the user wants them required.
* Builds the SVG file preview.
*
* This is separated in a validate function instead of a #required flag to
* avoid being validated on the process callback.
*/
public static function validateRequiredFields($element, FormStateInterface $formState) {
// Only do validation if the function is triggered from other places than
// the image process form.
$triggering_element = $formState->getTriggeringElement();
if (!empty($triggering_element['#submit']) && in_array('file_managed_file_submit', $triggering_element['#submit'], TRUE)) {
$formState->setLimitValidationErrors([]);
}
}
/**
* {@inheritdoc}
*/
public function calculateDependencies() {
$dependencies = parent::calculateDependencies();
$styleId = $this->getSetting('preview_image_style');
if ($styleId) {
/** @var \Drupal\image\ImageStyleStorage $imageStyleStorage */
$style = $this->imageStyleStorage->load($styleId);
if ($style) {
// If this widget uses a valid image style to display the preview of
// the uploaded image, add that image style configuration entity
// as dependency of this widget.
$dependencies[$style->getConfigDependencyKey()][] = $style->getConfigDependencyName();
}
}
return $dependencies;
}
/**
* {@inheritdoc}
* @param \Drupal\file\FileInterface $file
* The SVG file.
*
* @return array
* The render array.
*/
public function onDependencyRemoval(array $dependencies) {
$changed = parent::onDependencyRemoval($dependencies);
$styleId = $this->getSetting('preview_image_style');
/** @var \Drupal\image\ImageStyleInterface $style */
if ($styleId) {
$style = $this->imageStyleStorage->load($styleId);
if ($style) {
if (!empty($dependencies[$style->getConfigDependencyKey()][$style->getConfigDependencyName()])) {
/** @var \Drupal\image\ImageStyleStorageInterface $storage */
$storage = $this->entityTypeManager->getStorage($style->getEntityTypeId());
$replacementId = $storage->getReplacementId($styleId);
// If a valid replacement has been provided in the storage, replace
// the preview image style with the replacement.
if ($replacementId && $this->imageStyleStorage->load($replacementId)) {
$this->setSetting('preview_image_style', $replacementId);
}
// If there's no replacement or the replacement is invalid, disable
// the image preview.
else {
$this->setSetting('preview_image_style', '');
}
// Signal that the formatter plugin settings were updated.
$changed = TRUE;
}
}
}
return $changed;
protected static function buildSvgPreview(FileInterface $file): array {
$dimensions = svg_image_get_image_file_dimensions($file);
return [
'#weight' => -10,
'#theme' => 'image',
'#width' => $dimensions['width'],
'#height' => $dimensions['height'],
'#uri' => $file->getFileUri(),
];
}
}