Unverified Commit 65f5c4c8 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3096241 by huzooka, Vinodhini.E: Refactor image and file field widgets... 

Issue #3096241 by huzooka, Vinodhini.E: Refactor image and file field widgets to improve contrib compatibility and to make their templates and preprocess functions DRY
parent 5367f8a5

core/themes/claro/claro.theme

+55 −19
Original line number Diff line number Diff line
@@ -17,6 +17,7 @@ 
use Drupal\Core\Template\Attribute;

use Drupal\Core\Url;

use Drupal\media\MediaForm;

use Drupal\file\FileInterface;



/**

 * Implements hook_theme_suggestions_HOOK_alter() for form_element.
@@ -1088,23 +1089,13 @@ function claro_preprocess_links__action_links(&$variables) { 
 * Implements hook_preprocess_HOOK() for file_managed_file.

 */

function claro_preprocess_file_managed_file(&$variables) {

  $element = $variables['element'];



  // Calculate helper values for the template.

  $upload_is_accessible = !isset($element['upload']['#access']) || $element['upload']['#access'] !== FALSE;

  $is_multiple = !empty($element['#cardinality']) && $element['#cardinality'] !== 1;

  $has_value = isset($element['#value']['fids']) && !empty($element['#value']['fids']);

  $display_can_be_displayed = !empty($element['#display_field']);

  // Display is rendered in a separate table cell for multiple value widgets.

  $display_is_visible = $display_can_be_displayed && !$is_multiple && isset($element['display']['#type']) && $element['display']['#type'] !== 'hidden';

  $description_can_be_displayed = !empty($element['#description_field']);

  $description_is_visible = $description_can_be_displayed && isset($element['description']);

  // Produce the same renderable element structure as image widget has.

  $child_keys = Element::children($variables['element']);

  foreach ($child_keys as $child_key) {

    $variables['data'][$child_key] = $variables['element'][$child_key];

  }



  $variables['multiple'] = $is_multiple;

  $variables['upload'] = $upload_is_accessible;

  $variables['has_value'] = $has_value;

  $variables['has_meta'] = $display_is_visible || $description_is_visible;

  $variables['display'] = $display_is_visible;

  _claro_preprocess_file_and_image_widget($variables);

}



/**
@@ -1183,8 +1174,6 @@ function claro_preprocess_file_widget_multiple(&$variables) { 
 * Implements hook_preprocess_HOOK() for image_widget.

 */

function claro_preprocess_image_widget(&$variables) {

  $element = $variables['element'];



  // Stable adds the file size as #suffix for image file_link renderable array.

  // We have to remove that because we will render it in our file_link template

  // for every kind of files, and not just for images.
@@ -1193,10 +1182,37 @@ function claro_preprocess_image_widget(&$variables) { 
    unset($variables['data']['file_' . $file->id()]['filename']['#suffix']);

  }



  _claro_preprocess_file_and_image_widget($variables);

}



/**

 * Helper pre-process callback for file_managed_file and image_widget.

 *

 * @param array $variables

 *   The renderable array of image and file widgets, with 'element' and 'data'

 *   keys.

 */

function _claro_preprocess_file_and_image_widget(array &$variables) {

  $element = $variables['element'];

  $main_item_keys = [

    'upload',

    'upload_button',

    'remove_button',

  ];



  // Calculate helper values for the template.

  $upload_is_accessible = !isset($element['upload']['#access']) || $element['upload']['#access'] !== FALSE;

  $is_multiple = !empty($element['#cardinality']) && $element['#cardinality'] !== 1;

  $has_value = isset($element['#value']['fids']) && !empty($element['#value']['fids']);



  // File widget properties.

  $display_can_be_displayed = !empty($element['#display_field']);

  // Display is rendered in a separate table cell for multiple value widgets.

  $display_is_visible = $display_can_be_displayed && !$is_multiple && isset($element['display']['#type']) && $element['display']['#type'] !== 'hidden';

  $description_can_be_displayed = !empty($element['#description_field']);

  $description_is_visible = $description_can_be_displayed && isset($element['description']);



  // Image widget properties.

  $alt_can_be_displayed = !empty($element['#alt_field']);

  $alt_is_visible = $alt_can_be_displayed && (!isset($element['alt']['#access']) || $element['alt']['#access'] !== FALSE);

  $title_can_be_displayed = !empty($element['#title_field']);
@@ -1205,5 +1221,25 @@ function claro_preprocess_image_widget(&$variables) { 
  $variables['multiple'] = $is_multiple;

  $variables['upload'] = $upload_is_accessible;

  $variables['has_value'] = $has_value;

  $variables['has_meta'] = $alt_is_visible || $title_is_visible;

  $variables['has_meta'] = $alt_is_visible || $title_is_visible || $display_is_visible || $description_is_visible;

  $variables['display'] = $display_is_visible;



  // Render file upload input and upload button (or file name and remove button,

  // if the field is not empty) in an emphasized div.

  foreach ($variables['data'] as $key => $item) {

    $item_is_filename = isset($item['filename']['#file']) && $item['filename']['#file'] instanceof FileInterface;



    // Move filename to main items.

    if ($item_is_filename) {

      $variables['main_items']['filename'] = $item;

      unset($variables['data'][$key]);

      continue;

    }



    // Move buttons, upload input and hidden items to main items.

    if (in_array($key, $main_item_keys)) {

      $variables['main_items'][$key] = $item;

      unset($variables['data'][$key]);

    }

  }

}

core/themes/claro/css/components/form--managed-file.css

+5 −12
Original line number Diff line number Diff line
@@ -266,15 +266,6 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
  }

}



/**

 * Remove the default margins of buttons.

 * The '.button' selector is doubled for RTL layouts.

 */



.form-managed-file .button.button {

  margin: 0;

}



/**

 * The file upload input.

 */
@@ -285,12 +276,14 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
}



/**

 * This applies both on the 'no-js' upload button and the remove button.

 * We don't want to let these to be shrinked.

 * Remove the default button margins and prevent shrinking or growing buttons.

 * This applies both on the 'no-js' upload button and the remove button. The

 * weight of this ruleset has been increase for this to take effect on RTL.

 */



.form-managed-file__main .button {

.form-managed-file__main .button.button {

  flex: 0 0 auto;

  margin: 0;

}



/**

core/themes/claro/css/components/form--managed-file.pcss.css

+5 −11
Original line number Diff line number Diff line
@@ -203,14 +203,6 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
  }

}



/**

 * Remove the default margins of buttons.

 * The '.button' selector is doubled for RTL layouts.

 */

.form-managed-file .button.button {

  margin: 0;

}



/**

 * The file upload input.

 */
@@ -220,11 +212,13 @@ td .form-managed-file.no-meta .form-managed-file__image-preview { 
}



/**

 * This applies both on the 'no-js' upload button and the remove button.

 * We don't want to let these to be shrinked.

 * Remove the default button margins and prevent shrinking or growing buttons.

 * This applies both on the 'no-js' upload button and the remove button. The

 * weight of this ruleset has been increase for this to take effect on RTL.

 */

.form-managed-file__main .button {

.form-managed-file__main .button.button {

  flex: 0 0 auto;

  margin: 0;

}



/**

core/themes/claro/css/components/table--file-multiple-widget.css

+1 −1
Original line number Diff line number Diff line
@@ -101,7 +101,7 @@ 
  margin-bottom: 0;

}



.table-file-multiple-widget .button.button {

.table-file-multiple-widget .button.button:only-child {

  margin: 0;

}

core/themes/claro/css/components/table--file-multiple-widget.pcss.css

+1 −1
Original line number Diff line number Diff line
@@ -49,7 +49,7 @@ 
  margin-bottom: 0;

}



.table-file-multiple-widget .button.button {

.table-file-multiple-widget .button.button:only-child {

  margin: 0;

}