3 * Provides theme functions for all of Quick Edit's client-side HTML.
6 (function ($, Drupal) {
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) {
37 html += `<div id="${settings.id}" class="quickedit quickedit-toolbar-container clearfix">`;
38 html += '<i class="quickedit-toolbar-pointer"></i>';
39 html += '<div class="quickedit-toolbar-content">';
40 html += '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
41 html += '<div class="quickedit-toolbar-label" />';
43 html += '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
44 html += '</div><div class="quickedit-toolbar-lining"></div></div>';
49 * Theme function for a toolbar container of the Quick Edit module.
51 * @param {object} settings
52 * Settings object used to construct the markup.
53 * @param {string} settings.entityLabel
54 * The title of the active entity.
55 * @param {string} settings.fieldLabel
56 * The label of the highlighted or active field.
59 * The corresponding HTML.
61 Drupal.theme.quickeditEntityToolbarLabel = function (settings) {
62 // @todo Add XSS regression test coverage in https://www.drupal.org/node/2547437
63 return `<span class="field">${Drupal.checkPlain(settings.fieldLabel)}</span>${Drupal.checkPlain(settings.entityLabel)}`;
67 * Element defining a containing box for the placement of the entity toolbar.
70 * The corresponding HTML.
72 Drupal.theme.quickeditEntityToolbarFence = function () {
73 return '<div id="quickedit-toolbar-fence" />';
77 * Theme function for a toolbar container of the Quick Edit module.
79 * @param {object} settings
80 * Settings object used to construct the markup.
81 * @param {string} settings.id
82 * The id to apply to the toolbar container.
85 * The corresponding HTML.
87 Drupal.theme.quickeditFieldToolbar = function (settings) {
88 return `<div id="${settings.id}" />`;
92 * Theme function for a toolbar toolgroup of the Quick Edit module.
94 * @param {object} settings
95 * Settings object used to construct the markup.
96 * @param {string} [settings.id]
97 * The id of the toolgroup.
98 * @param {string} settings.classes
99 * The class of the toolgroup.
100 * @param {Array} settings.buttons
101 * See {@link Drupal.theme.quickeditButtons}.
104 * The corresponding HTML.
106 Drupal.theme.quickeditToolgroup = function (settings) {
108 const classes = (settings.classes || []);
109 classes.unshift('quickedit-toolgroup');
111 html += `<div class="${classes.join(' ')}"`;
113 html += ` id="${settings.id}"`;
116 html += Drupal.theme('quickeditButtons', { buttons: settings.buttons });
122 * Theme function for buttons of the Quick Edit module.
124 * Can be used for the buttons both in the toolbar toolgroups and in the
127 * @param {object} settings
128 * Settings object used to construct the markup.
129 * @param {Array} settings.buttons
130 * - String type: the type of the button (defaults to 'button')
131 * - Array classes: the classes of the button.
132 * - String label: the label of the button.
135 * The corresponding HTML.
137 Drupal.theme.quickeditButtons = function (settings) {
139 for (let i = 0; i < settings.buttons.length; i++) {
140 const button = settings.buttons[i];
141 if (!button.hasOwnProperty('type')) {
142 button.type = 'button';
145 const attributes = [];
146 const attrMap = settings.buttons[i].attributes || {};
147 for (const attr in attrMap) {
148 if (attrMap.hasOwnProperty(attr)) {
149 attributes.push(attr + ((attrMap[attr]) ? `="${attrMap[attr]}"` : ''));
152 html += `<button type="${button.type}" class="${button.classes}"` + ` ${attributes.join(' ')}>`;
153 html += button.label;
160 * Theme function for a form container of the Quick Edit module.
162 * @param {object} settings
163 * Settings object used to construct the markup.
164 * @param {string} settings.id
165 * The id to apply to the toolbar container.
166 * @param {string} settings.loadingMsg
167 * The message to show while loading.
170 * The corresponding HTML.
172 Drupal.theme.quickeditFormContainer = function (settings) {
174 html += `<div id="${settings.id}" class="quickedit-form-container">`;
175 html += ' <div class="quickedit-form">';
176 html += ' <div class="placeholder">';
177 html += settings.loadingMsg;