annotate core/modules/responsive_image/src/ResponsiveImageStyleForm.php @ 19:fa3358dc1485 tip

Add ndrum files
author Chris Cannam
date Wed, 28 Aug 2019 13:14:47 +0100
parents af1871eacc83
children
rev   line source
Chris@0 1 <?php
Chris@0 2
Chris@0 3 namespace Drupal\responsive_image;
Chris@0 4
Chris@18 5 use Drupal\Core\Url;
Chris@0 6 use Drupal\breakpoint\BreakpointManagerInterface;
Chris@0 7 use Drupal\Core\Entity\EntityForm;
Chris@0 8 use Drupal\Core\Form\FormStateInterface;
Chris@0 9 use Symfony\Component\DependencyInjection\ContainerInterface;
Chris@0 10
Chris@0 11 /**
Chris@0 12 * Form controller for the responsive image edit/add forms.
Chris@14 13 *
Chris@14 14 * @internal
Chris@0 15 */
Chris@0 16 class ResponsiveImageStyleForm extends EntityForm {
Chris@0 17
Chris@0 18 /**
Chris@0 19 * The breakpoint manager.
Chris@0 20 *
Chris@0 21 * @var \Drupal\breakpoint\BreakpointManagerInterface
Chris@0 22 */
Chris@0 23 protected $breakpointManager;
Chris@0 24
Chris@0 25 /**
Chris@0 26 * {@inheritdoc}
Chris@0 27 */
Chris@0 28 public static function create(ContainerInterface $container) {
Chris@0 29 return new static(
Chris@0 30 $container->get('breakpoint.manager')
Chris@0 31 );
Chris@0 32 }
Chris@0 33
Chris@0 34 /**
Chris@0 35 * Constructs the responsive image style form.
Chris@0 36 *
Chris@0 37 * @param \Drupal\breakpoint\BreakpointManagerInterface $breakpoint_manager
Chris@0 38 * The breakpoint manager.
Chris@0 39 */
Chris@0 40 public function __construct(BreakpointManagerInterface $breakpoint_manager) {
Chris@0 41 $this->breakpointManager = $breakpoint_manager;
Chris@0 42 }
Chris@0 43
Chris@0 44 /**
Chris@0 45 * Overrides Drupal\Core\Entity\EntityForm::form().
Chris@0 46 *
Chris@0 47 * @param array $form
Chris@0 48 * A nested array form elements comprising the form.
Chris@0 49 * @param \Drupal\Core\Form\FormStateInterface $form_state
Chris@0 50 * The current state of the form.
Chris@0 51 *
Chris@0 52 * @return array
Chris@0 53 * The array containing the complete form.
Chris@0 54 */
Chris@0 55 public function form(array $form, FormStateInterface $form_state) {
Chris@0 56 if ($this->operation == 'duplicate') {
Chris@0 57 $form['#title'] = $this->t('<em>Duplicate responsive image style</em> @label', ['@label' => $this->entity->label()]);
Chris@0 58 $this->entity = $this->entity->createDuplicate();
Chris@0 59 }
Chris@0 60 if ($this->operation == 'edit') {
Chris@0 61 $form['#title'] = $this->t('<em>Edit responsive image style</em> @label', ['@label' => $this->entity->label()]);
Chris@0 62 }
Chris@0 63
Chris@0 64 /** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style */
Chris@0 65 $responsive_image_style = $this->entity;
Chris@0 66 $form['label'] = [
Chris@0 67 '#type' => 'textfield',
Chris@0 68 '#title' => $this->t('Label'),
Chris@0 69 '#maxlength' => 255,
Chris@0 70 '#default_value' => $responsive_image_style->label(),
Chris@0 71 '#description' => $this->t("Example: 'Hero image' or 'Author image'."),
Chris@0 72 '#required' => TRUE,
Chris@0 73 ];
Chris@0 74 $form['id'] = [
Chris@0 75 '#type' => 'machine_name',
Chris@0 76 '#default_value' => $responsive_image_style->id(),
Chris@0 77 '#machine_name' => [
Chris@0 78 'exists' => '\Drupal\responsive_image\Entity\ResponsiveImageStyle::load',
Chris@0 79 'source' => ['label'],
Chris@0 80 ],
Chris@0 81 '#disabled' => (bool) $responsive_image_style->id() && $this->operation != 'duplicate',
Chris@0 82 ];
Chris@0 83
Chris@0 84 $image_styles = image_style_options(TRUE);
Chris@18 85 $image_styles[ResponsiveImageStyleInterface::ORIGINAL_IMAGE] = $this->t('- None (original image) -');
Chris@18 86 $image_styles[ResponsiveImageStyleInterface::EMPTY_IMAGE] = $this->t('- empty image -');
Chris@0 87
Chris@0 88 if ((bool) $responsive_image_style->id() && $this->operation != 'duplicate') {
Chris@0 89 $description = $this->t('Select a breakpoint group from the installed themes and modules. Below you can select which breakpoints to use from this group. You can also select which image style or styles to use for each breakpoint you use.') . ' ' . $this->t("Warning: if you change the breakpoint group you lose all your image style selections for each breakpoint.");
Chris@0 90 }
Chris@0 91 else {
Chris@0 92 $description = $this->t('Select a breakpoint group from the installed themes and modules.');
Chris@0 93 }
Chris@0 94
Chris@0 95 $form['breakpoint_group'] = [
Chris@0 96 '#type' => 'select',
Chris@0 97 '#title' => $this->t('Breakpoint group'),
Chris@0 98 '#default_value' => $responsive_image_style->getBreakpointGroup() ?: 'responsive_image',
Chris@0 99 '#options' => $this->breakpointManager->getGroups(),
Chris@0 100 '#required' => TRUE,
Chris@0 101 '#description' => $description,
Chris@0 102 '#ajax' => [
Chris@0 103 'callback' => '::breakpointMappingFormAjax',
Chris@0 104 'wrapper' => 'responsive-image-style-breakpoints-wrapper',
Chris@0 105 ],
Chris@0 106 ];
Chris@0 107
Chris@0 108 $form['keyed_styles'] = [
Chris@0 109 '#type' => 'container',
Chris@0 110 '#attributes' => [
Chris@0 111 'id' => 'responsive-image-style-breakpoints-wrapper',
Chris@0 112 ],
Chris@0 113 ];
Chris@0 114
Chris@0 115 // By default, breakpoints are ordered from smallest weight to largest:
Chris@0 116 // the smallest weight is expected to have the smallest breakpoint width,
Chris@0 117 // while the largest weight is expected to have the largest breakpoint
Chris@0 118 // width. For responsive images, we need largest breakpoint widths first, so
Chris@0 119 // we need to reverse the order of these breakpoints.
Chris@0 120 $breakpoints = array_reverse($this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
Chris@0 121
Chris@0 122 foreach ($breakpoints as $breakpoint_id => $breakpoint) {
Chris@0 123 foreach ($breakpoint->getMultipliers() as $multiplier) {
Chris@0 124 $label = $multiplier . ' ' . $breakpoint->getLabel() . ' [' . $breakpoint->getMediaQuery() . ']';
Chris@0 125 $form['keyed_styles'][$breakpoint_id][$multiplier] = [
Chris@0 126 '#type' => 'details',
Chris@0 127 '#title' => $label,
Chris@0 128 ];
Chris@0 129 $image_style_mapping = $responsive_image_style->getImageStyleMapping($breakpoint_id, $multiplier);
Chris@0 130 if (\Drupal::moduleHandler()->moduleExists('help')) {
Chris@18 131 $description = $this->t('See the <a href=":responsive_image_help">Responsive Image help page</a> for information on the sizes attribute.', [':responsive_image_help' => Url::fromRoute('help.page', ['name' => 'responsive_image'])->toString()]);
Chris@0 132 }
Chris@0 133 else {
Chris@0 134 $description = $this->t('Enable the Help module for more information on the sizes attribute.');
Chris@0 135 }
Chris@0 136 $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = [
Chris@0 137 '#title' => $this->t('Type'),
Chris@0 138 '#type' => 'radios',
Chris@0 139 '#options' => [
Chris@0 140 'sizes' => $this->t('Select multiple image styles and use the sizes attribute.'),
Chris@0 141 'image_style' => $this->t('Select a single image style.'),
Chris@0 142 '_none' => $this->t('Do not use this breakpoint.'),
Chris@0 143 ],
Chris@0 144 '#default_value' => isset($image_style_mapping['image_mapping_type']) ? $image_style_mapping['image_mapping_type'] : '_none',
Chris@0 145 '#description' => $description,
Chris@0 146 ];
Chris@0 147 $form['keyed_styles'][$breakpoint_id][$multiplier]['image_style'] = [
Chris@0 148 '#type' => 'select',
Chris@0 149 '#title' => $this->t('Image style'),
Chris@0 150 '#options' => $image_styles,
Chris@0 151 '#default_value' => isset($image_style_mapping['image_mapping']) && is_string($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : '',
Chris@0 152 '#description' => $this->t('Select an image style for this breakpoint.'),
Chris@0 153 '#states' => [
Chris@0 154 'visible' => [
Chris@0 155 ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'image_style'],
Chris@0 156 ],
Chris@0 157 ],
Chris@0 158 ];
Chris@0 159 $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = [
Chris@0 160 '#type' => 'textfield',
Chris@0 161 '#title' => $this->t('Sizes'),
Chris@0 162 '#default_value' => isset($image_style_mapping['image_mapping']['sizes']) ? $image_style_mapping['image_mapping']['sizes'] : '100vw',
Chris@0 163 '#description' => $this->t('Enter the value for the sizes attribute, for example: %example_sizes.', ['%example_sizes' => '(min-width:700px) 700px, 100vw']),
Chris@0 164 '#states' => [
Chris@0 165 'visible' => [
Chris@0 166 ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
Chris@0 167 ],
Chris@0 168 'required' => [
Chris@0 169 ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
Chris@0 170 ],
Chris@0 171 ],
Chris@0 172 ];
Chris@0 173 $form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'] = [
Chris@0 174 '#title' => $this->t('Image styles'),
Chris@0 175 '#type' => 'checkboxes',
Chris@0 176 '#options' => array_diff_key($image_styles, ['' => '']),
Chris@0 177 '#description' => $this->t('Select image styles with widths that range from the smallest amount of space this image will take up in the layout to the largest, bearing in mind that high resolution screens will need images 1.5x to 2x larger.'),
Chris@0 178 '#default_value' => isset($image_style_mapping['image_mapping']['sizes_image_styles']) ? $image_style_mapping['image_mapping']['sizes_image_styles'] : [],
Chris@0 179 '#states' => [
Chris@0 180 'visible' => [
Chris@0 181 ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
Chris@0 182 ],
Chris@0 183 'required' => [
Chris@0 184 ':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
Chris@0 185 ],
Chris@0 186 ],
Chris@0 187 ];
Chris@0 188
Chris@0 189 // Expand the details if "do not use this breakpoint" was not selected.
Chris@0 190 if ($form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type']['#default_value'] != '_none') {
Chris@0 191 $form['keyed_styles'][$breakpoint_id][$multiplier]['#open'] = TRUE;
Chris@0 192 }
Chris@0 193 }
Chris@0 194 }
Chris@0 195
Chris@0 196 $form['fallback_image_style'] = [
Chris@0 197 '#title' => $this->t('Fallback image style'),
Chris@0 198 '#type' => 'select',
Chris@0 199 '#default_value' => $responsive_image_style->getFallbackImageStyle(),
Chris@0 200 '#options' => $image_styles,
Chris@0 201 '#required' => TRUE,
Chris@0 202 '#description' => t('Select the smallest image style you expect to appear in this space. The fallback image style should only appear on the site if an error occurs.'),
Chris@0 203 ];
Chris@0 204
Chris@0 205 $form['#tree'] = TRUE;
Chris@0 206
Chris@0 207 return parent::form($form, $form_state, $responsive_image_style);
Chris@0 208 }
Chris@0 209
Chris@0 210 /**
Chris@0 211 * Get the form for mapping breakpoints to image styles.
Chris@0 212 */
Chris@0 213 public function breakpointMappingFormAjax($form, FormStateInterface $form_state) {
Chris@0 214 return $form['keyed_styles'];
Chris@0 215 }
Chris@0 216
Chris@0 217 /**
Chris@0 218 * {@inheritdoc}
Chris@0 219 */
Chris@0 220 public function validateForm(array &$form, FormStateInterface $form_state) {
Chris@0 221 parent::validateForm($form, $form_state);
Chris@0 222 // Only validate on edit.
Chris@0 223 if ($form_state->hasValue('keyed_styles')) {
Chris@0 224 // Check if another breakpoint group is selected.
Chris@0 225 if ($form_state->getValue('breakpoint_group') != $form_state->getCompleteForm()['breakpoint_group']['#default_value']) {
Chris@0 226 // Remove the image style mappings since the breakpoint ID has changed.
Chris@0 227 $form_state->unsetValue('keyed_styles');
Chris@0 228 }
Chris@0 229
Chris@0 230 // Check that at least 1 image style has been selected when using sizes.
Chris@0 231 foreach ($form_state->getValue('keyed_styles') as $breakpoint_id => $multipliers) {
Chris@0 232 foreach ($multipliers as $multiplier => $image_style_mapping) {
Chris@0 233 if ($image_style_mapping['image_mapping_type'] === 'sizes') {
Chris@0 234 if (empty($image_style_mapping['sizes'])) {
Chris@0 235 $form_state->setError($form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'], 'Provide a value for the sizes attribute.');
Chris@0 236 }
Chris@0 237 if (empty(array_keys(array_filter($image_style_mapping['sizes_image_styles'])))) {
Chris@0 238 $form_state->setError($form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'], 'Select at least one image style.');
Chris@0 239 }
Chris@0 240 }
Chris@0 241 }
Chris@0 242 }
Chris@0 243 }
Chris@0 244 }
Chris@0 245
Chris@0 246 /**
Chris@0 247 * {@inheritdoc}
Chris@0 248 */
Chris@0 249 public function save(array $form, FormStateInterface $form_state) {
Chris@0 250 /** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style */
Chris@0 251 $responsive_image_style = $this->entity;
Chris@0 252 // Remove all the existing mappings and replace with submitted values.
Chris@0 253 $responsive_image_style->removeImageStyleMappings();
Chris@0 254 if ($form_state->hasValue('keyed_styles')) {
Chris@0 255 foreach ($form_state->getValue('keyed_styles') as $breakpoint_id => $multipliers) {
Chris@0 256 foreach ($multipliers as $multiplier => $image_style_mapping) {
Chris@0 257 if ($image_style_mapping['image_mapping_type'] === 'sizes') {
Chris@0 258 $mapping = [
Chris@0 259 'image_mapping_type' => 'sizes',
Chris@0 260 'image_mapping' => [
Chris@0 261 'sizes' => $image_style_mapping['sizes'],
Chris@0 262 'sizes_image_styles' => array_keys(array_filter($image_style_mapping['sizes_image_styles'])),
Chris@17 263 ],
Chris@0 264 ];
Chris@0 265 $responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $mapping);
Chris@0 266 }
Chris@0 267 elseif ($image_style_mapping['image_mapping_type'] === 'image_style') {
Chris@0 268 $mapping = [
Chris@0 269 'image_mapping_type' => 'image_style',
Chris@0 270 'image_mapping' => $image_style_mapping['image_style'],
Chris@0 271 ];
Chris@0 272 $responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $mapping);
Chris@0 273 }
Chris@0 274 }
Chris@0 275 }
Chris@0 276 }
Chris@0 277 $responsive_image_style->save();
Chris@0 278
Chris@0 279 $this->logger('responsive_image')->notice('Responsive image style @label saved.', ['@label' => $responsive_image_style->label()]);
Chris@17 280 $this->messenger()->addStatus($this->t('Responsive image style %label saved.', ['%label' => $responsive_image_style->label()]));
Chris@0 281
Chris@0 282 // Redirect to edit form after creating a new responsive image style or
Chris@0 283 // after selecting another breakpoint group.
Chris@0 284 if (!$responsive_image_style->hasImageStyleMappings()) {
Chris@0 285 $form_state->setRedirect(
Chris@0 286 'entity.responsive_image_style.edit_form',
Chris@0 287 ['responsive_image_style' => $responsive_image_style->id()]
Chris@0 288 );
Chris@0 289 }
Chris@0 290 else {
Chris@18 291 $form_state->setRedirectUrl($this->entity->toUrl('collection'));
Chris@0 292 }
Chris@0 293 }
Chris@0 294
Chris@0 295 }