3 * Provides theme functions for all of Quick Edit's client-side HTML.
8 * Theme function for a "backstage" for the Quick Edit module.
10 * @param {object} settings
11 * Settings object used to construct the markup.
12 * @param {string} settings.id
13 * The id to apply to the backstage.
16 * The corresponding HTML.
18 Drupal.theme.quickeditBackstage = function(settings) {
20 html += `<div id="${settings.id}" />`;
25 * Theme function for a toolbar container of the Quick Edit module.
27 * @param {object} settings
28 * Settings object used to construct the markup.
29 * @param {string} settings.id
30 * the id to apply to the backstage.
33 * The corresponding HTML.
35 Drupal.theme.quickeditEntityToolbar = function(settings) {
39 }" class="quickedit quickedit-toolbar-container clearfix">`;
40 html += '<i class="quickedit-toolbar-pointer"></i>';
41 html += '<div class="quickedit-toolbar-content">';
43 '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
44 html += '<div class="quickedit-toolbar-label" />';
47 '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
48 html += '</div><div class="quickedit-toolbar-lining"></div></div>';
53 * Theme function for a toolbar container of the Quick Edit module.
55 * @param {object} settings
56 * Settings object used to construct the markup.
57 * @param {string} settings.entityLabel
58 * The title of the active entity.
59 * @param {string} settings.fieldLabel
60 * The label of the highlighted or active field.
63 * The corresponding HTML.
65 Drupal.theme.quickeditEntityToolbarLabel = function(settings) {
66 // @todo Add XSS regression test coverage in https://www.drupal.org/node/2547437
67 return `<span class="field">${Drupal.checkPlain(
69 )}</span>${Drupal.checkPlain(settings.entityLabel)}`;
73 * Element defining a containing box for the placement of the entity toolbar.
76 * The corresponding HTML.
78 Drupal.theme.quickeditEntityToolbarFence = function() {
79 return '<div id="quickedit-toolbar-fence" />';
83 * Theme function for a toolbar container of the Quick Edit module.
85 * @param {object} settings
86 * Settings object used to construct the markup.
87 * @param {string} settings.id
88 * The id to apply to the toolbar container.
91 * The corresponding HTML.
93 Drupal.theme.quickeditFieldToolbar = function(settings) {
94 return `<div id="${settings.id}" />`;
98 * Theme function for a toolbar toolgroup of the Quick Edit module.
100 * @param {object} settings
101 * Settings object used to construct the markup.
102 * @param {string} [settings.id]
103 * The id of the toolgroup.
104 * @param {string} settings.classes
105 * The class of the toolgroup.
106 * @param {Array} settings.buttons
107 * See {@link Drupal.theme.quickeditButtons}.
110 * The corresponding HTML.
112 Drupal.theme.quickeditToolgroup = function(settings) {
114 const classes = settings.classes || [];
115 classes.unshift('quickedit-toolgroup');
117 html += `<div class="${classes.join(' ')}"`;
119 html += ` id="${settings.id}"`;
122 html += Drupal.theme('quickeditButtons', { buttons: settings.buttons });
128 * Theme function for buttons of the Quick Edit module.
130 * Can be used for the buttons both in the toolbar toolgroups and in the
133 * @param {object} settings
134 * Settings object used to construct the markup.
135 * @param {Array} settings.buttons
136 * - String type: the type of the button (defaults to 'button')
137 * - Array classes: the classes of the button.
138 * - String label: the label of the button.
141 * The corresponding HTML.
143 Drupal.theme.quickeditButtons = function(settings) {
145 for (let i = 0; i < settings.buttons.length; i++) {
146 const button = settings.buttons[i];
147 if (!button.hasOwnProperty('type')) {
148 button.type = 'button';
151 const attributes = [];
152 const attrMap = settings.buttons[i].attributes || {};
153 Object.keys(attrMap).forEach(attr => {
154 attributes.push(attr + (attrMap[attr] ? `="${attrMap[attr]}"` : ''));
156 html += `<button type="${button.type}" class="${
158 }" ${attributes.join(' ')}>${button.label}</button>`;
164 * Theme function for a form container of the Quick Edit module.
166 * @param {object} settings
167 * Settings object used to construct the markup.
168 * @param {string} settings.id
169 * The id to apply to the toolbar container.
170 * @param {string} settings.loadingMsg
171 * The message to show while loading.
174 * The corresponding HTML.
176 Drupal.theme.quickeditFormContainer = function(settings) {
178 html += `<div id="${settings.id}" class="quickedit-form-container">`;
179 html += ' <div class="quickedit-form">';
180 html += ' <div class="placeholder">';
181 html += settings.loadingMsg;