Chris@0: /**
Chris@0:  * @file
Chris@0:  * Provides theme functions for all of Quick Edit's client-side HTML.
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal) {
Chris@0:   /**
Chris@0:    * Theme function for a "backstage" for the Quick Edit module.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.id
Chris@0:    *   The id to apply to the backstage.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditBackstage = function(settings) {
Chris@0:     let html = '';
Chris@0:     html += `<div id="${settings.id}" />`;
Chris@0:     return html;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for a toolbar container of the Quick Edit module.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.id
Chris@0:    *   the id to apply to the backstage.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditEntityToolbar = function(settings) {
Chris@0:     let html = '';
Chris@17:     html += `<div id="${
Chris@17:       settings.id
Chris@17:     }" class="quickedit quickedit-toolbar-container clearfix">`;
Chris@0:     html += '<i class="quickedit-toolbar-pointer"></i>';
Chris@0:     html += '<div class="quickedit-toolbar-content">';
Chris@17:     html +=
Chris@17:       '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
Chris@0:     html += '<div class="quickedit-toolbar-label" />';
Chris@0:     html += '</div>';
Chris@17:     html +=
Chris@17:       '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
Chris@0:     html += '</div><div class="quickedit-toolbar-lining"></div></div>';
Chris@0:     return html;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for a toolbar container of the Quick Edit module.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.entityLabel
Chris@0:    *   The title of the active entity.
Chris@0:    * @param {string} settings.fieldLabel
Chris@0:    *   The label of the highlighted or active field.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditEntityToolbarLabel = function(settings) {
Chris@0:     // @todo Add XSS regression test coverage in https://www.drupal.org/node/2547437
Chris@17:     return `<span class="field">${Drupal.checkPlain(
Chris@17:       settings.fieldLabel,
Chris@17:     )}</span>${Drupal.checkPlain(settings.entityLabel)}`;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Element defining a containing box for the placement of the entity toolbar.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditEntityToolbarFence = function() {
Chris@0:     return '<div id="quickedit-toolbar-fence" />';
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for a toolbar container of the Quick Edit module.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.id
Chris@0:    *   The id to apply to the toolbar container.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditFieldToolbar = function(settings) {
Chris@0:     return `<div id="${settings.id}" />`;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for a toolbar toolgroup of the Quick Edit module.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} [settings.id]
Chris@0:    *   The id of the toolgroup.
Chris@0:    * @param {string} settings.classes
Chris@0:    *   The class of the toolgroup.
Chris@0:    * @param {Array} settings.buttons
Chris@0:    *   See {@link Drupal.theme.quickeditButtons}.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditToolgroup = function(settings) {
Chris@0:     // Classes.
Chris@17:     const classes = settings.classes || [];
Chris@0:     classes.unshift('quickedit-toolgroup');
Chris@0:     let html = '';
Chris@0:     html += `<div class="${classes.join(' ')}"`;
Chris@0:     if (settings.id) {
Chris@0:       html += ` id="${settings.id}"`;
Chris@0:     }
Chris@0:     html += '>';
Chris@0:     html += Drupal.theme('quickeditButtons', { buttons: settings.buttons });
Chris@0:     html += '</div>';
Chris@0:     return html;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for buttons of the Quick Edit module.
Chris@0:    *
Chris@0:    * Can be used for the buttons both in the toolbar toolgroups and in the
Chris@0:    * modal.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {Array} settings.buttons
Chris@0:    * - String type: the type of the button (defaults to 'button')
Chris@0:    * - Array classes: the classes of the button.
Chris@0:    * - String label: the label of the button.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditButtons = function(settings) {
Chris@0:     let html = '';
Chris@0:     for (let i = 0; i < settings.buttons.length; i++) {
Chris@0:       const button = settings.buttons[i];
Chris@0:       if (!button.hasOwnProperty('type')) {
Chris@0:         button.type = 'button';
Chris@0:       }
Chris@0:       // Attributes.
Chris@0:       const attributes = [];
Chris@0:       const attrMap = settings.buttons[i].attributes || {};
Chris@17:       Object.keys(attrMap).forEach(attr => {
Chris@17:         attributes.push(attr + (attrMap[attr] ? `="${attrMap[attr]}"` : ''));
Chris@14:       });
Chris@17:       html += `<button type="${button.type}" class="${
Chris@17:         button.classes
Chris@17:       }" ${attributes.join(' ')}>${button.label}</button>`;
Chris@0:     }
Chris@0:     return html;
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Theme function for a form container of the Quick Edit module.
Chris@0:    *
Chris@0:    * @param {object} settings
Chris@0:    *   Settings object used to construct the markup.
Chris@0:    * @param {string} settings.id
Chris@0:    *   The id to apply to the toolbar container.
Chris@0:    * @param {string} settings.loadingMsg
Chris@0:    *   The message to show while loading.
Chris@0:    *
Chris@0:    * @return {string}
Chris@0:    *   The corresponding HTML.
Chris@0:    */
Chris@17:   Drupal.theme.quickeditFormContainer = function(settings) {
Chris@0:     let html = '';
Chris@0:     html += `<div id="${settings.id}" class="quickedit-form-container">`;
Chris@0:     html += '  <div class="quickedit-form">';
Chris@0:     html += '    <div class="placeholder">';
Chris@0:     html += settings.loadingMsg;
Chris@0:     html += '    </div>';
Chris@0:     html += '  </div>';
Chris@0:     html += '</div>';
Chris@0:     return html;
Chris@0:   };
Chris@17: })(jQuery, Drupal);