yaffs.net Git - yaffs-website/blob - web/core/modules/image/js/theme.es6.js

   1 /**
   2  * @file
   3  * Provides theme functions for image Quick Edit's client-side HTML.
   4  */
   5
   6 (function (Drupal) {
   7   /**
   8    * Theme function for validation errors of the Image in-place editor.
   9    *
  10    * @param {object} settings
  11    *   Settings object used to construct the markup.
  12    * @param {string} settings.errors
  13    *   Already escaped HTML representing error messages.
  14    *
  15    * @return {string}
  16    *   The corresponding HTML.
  17    */
  18   Drupal.theme.quickeditImageErrors = function (settings) {
  19     return `<div class="quickedit-image-errors">${settings.errors}</div>`;
  20   };
  21
  22   /**
  23    * Theme function for the dropzone element of the Image module's in-place
  24    * editor.
  25    *
  26    * @param {object} settings
  27    *   Settings object used to construct the markup.
  28    * @param {string} settings.state
  29    *   State of the upload.
  30    * @param {string} settings.text
  31    *   Text to display inline with the dropzone element.
  32    *
  33    * @return {string}
  34    *   The corresponding HTML.
  35    */
  36   Drupal.theme.quickeditImageDropzone = function (settings) {
  37     return `<div class="quickedit-image-dropzone ${settings.state}">` +
  38       '  <i class="quickedit-image-icon"></i>' +
  39       `  <span class="quickedit-image-text">${settings.text}</span>` +
  40       '</div>';
  41   };
  42
  43   /**
  44    * Theme function for the toolbar of the Image module's in-place editor.
  45    *
  46    * @param {object} settings
  47    *   Settings object used to construct the markup.
  48    * @param {bool} settings.alt_field
  49    *   Whether or not the "Alt" field is enabled for this field.
  50    * @param {bool} settings.alt_field_required
  51    *   Whether or not the "Alt" field is required for this field.
  52    * @param {string} settings.alt
  53    *   The current value for the "Alt" field.
  54    * @param {bool} settings.title_field
  55    *   Whether or not the "Title" field is enabled for this field.
  56    * @param {bool} settings.title_field_required
  57    *   Whether or not the "Title" field is required for this field.
  58    * @param {string} settings.title
  59    *   The current value for the "Title" field.
  60    *
  61    * @return {string}
  62    *   The corresponding HTML.
  63    */
  64   Drupal.theme.quickeditImageToolbar = function (settings) {
  65     let html = '<form class="quickedit-image-field-info">';
  66     if (settings.alt_field) {
  67       html += `${'  <div>' +
  68         '    <label for="alt" class="'}${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` +
  69         `    <input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
  70         '  </div>';
  71     }
  72     if (settings.title_field) {
  73       html += `${'  <div>' +
  74         '    <label for="title" class="'}${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` +
  75         `    <input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
  76         '  </div>';
  77     }
  78     html += '</form>';
  79
  80     return html;
  81   };
  82 }(Drupal));