Chris@0: /**
Chris@0:  * @file
Chris@0:  * Provides theme functions for image Quick Edit's client-side HTML.
Chris@0:  */
Chris@0: 
Chris@17: (function(Drupal) {
Chris@0:   /**
Chris@0:    * Theme function for validation errors of the Image in-place editor.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.errors
Chris@0:    *   Already escaped HTML representing error messages.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditImageErrors = function(settings) {
Chris@0:     return `<div class="quickedit-image-errors">${settings.errors}</div>`;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for the dropzone element of the Image module's in-place
Chris@0:    * editor.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.state
Chris@0:    *   State of the upload.
Chris@0:    * @param {string} settings.text
Chris@0:    *   Text to display inline with the dropzone element.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditImageDropzone = function(settings) {
Chris@17:     return (
Chris@17:       `<div class="quickedit-image-dropzone ${settings.state}">` +
Chris@0:       '  <i class="quickedit-image-icon"></i>' +
Chris@0:       `  <span class="quickedit-image-text">${settings.text}</span>` +
Chris@17:       '</div>'
Chris@17:     );
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for the toolbar of the Image module's in-place editor.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {bool} settings.alt_field
Chris@0:    *   Whether or not the "Alt" field is enabled for this field.
Chris@0:    * @param {bool} settings.alt_field_required
Chris@0:    *   Whether or not the "Alt" field is required for this field.
Chris@0:    * @param {string} settings.alt
Chris@0:    *   The current value for the "Alt" field.
Chris@0:    * @param {bool} settings.title_field
Chris@0:    *   Whether or not the "Title" field is enabled for this field.
Chris@0:    * @param {bool} settings.title_field_required
Chris@0:    *   Whether or not the "Title" field is required for this field.
Chris@0:    * @param {string} settings.title
Chris@0:    *   The current value for the "Title" field.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditImageToolbar = function(settings) {
Chris@0:     let html = '<form class="quickedit-image-field-info">';
Chris@0:     if (settings.alt_field) {
Chris@17:       html +=
Chris@17:         `<div><label for="alt" class="${
Chris@17:           settings.alt_field_required ? 'required' : ''
Chris@17:         }">${Drupal.t('Alternative text')}</label>` +
Chris@17:         `<input type="text" placeholder="${settings.alt}" value="${
Chris@17:           settings.alt
Chris@17:         }" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
Chris@0:         '  </div>';
Chris@0:     }
Chris@0:     if (settings.title_field) {
Chris@17:       html +=
Chris@17:         `<div><label for="title" class="${
Chris@17:           settings.title_field_required ? 'form-required' : ''
Chris@17:         }">${Drupal.t('Title')}</label>` +
Chris@17:         `<input type="text" placeholder="${settings.title}" value="${
Chris@17:           settings.title
Chris@17:         }" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
Chris@17:         '</div>';
Chris@0:     }
Chris@0:     html += '</form>';
Chris@0: 
Chris@0:     return html;
Chris@0:   };
Chris@17: })(Drupal);