theme.es6.js 3.0 KB

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