Security update for Core, with self-updated composer
[yaffs-website] / web / core / modules / quickedit / js / theme.es6.js
1 /**
2  * @file
3  * Provides theme functions for all of Quick Edit's client-side HTML.
4  */
5
6 (function ($, Drupal) {
7   /**
8    * Theme function for a "backstage" for the Quick Edit module.
9    *
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.
14    *
15    * @return {string}
16    *   The corresponding HTML.
17    */
18   Drupal.theme.quickeditBackstage = function (settings) {
19     let html = '';
20     html += `<div id="${settings.id}" />`;
21     return html;
22   };
23
24   /**
25    * Theme function for a toolbar container of the Quick Edit module.
26    *
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.
31    *
32    * @return {string}
33    *   The corresponding HTML.
34    */
35   Drupal.theme.quickeditEntityToolbar = function (settings) {
36     let html = '';
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" />';
42     html += '</div>';
43     html += '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
44     html += '</div><div class="quickedit-toolbar-lining"></div></div>';
45     return html;
46   };
47
48   /**
49    * Theme function for a toolbar container of the Quick Edit module.
50    *
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.
57    *
58    * @return {string}
59    *   The corresponding HTML.
60    */
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)}`;
64   };
65
66   /**
67    * Element defining a containing box for the placement of the entity toolbar.
68    *
69    * @return {string}
70    *   The corresponding HTML.
71    */
72   Drupal.theme.quickeditEntityToolbarFence = function () {
73     return '<div id="quickedit-toolbar-fence" />';
74   };
75
76   /**
77    * Theme function for a toolbar container of the Quick Edit module.
78    *
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.
83    *
84    * @return {string}
85    *   The corresponding HTML.
86    */
87   Drupal.theme.quickeditFieldToolbar = function (settings) {
88     return `<div id="${settings.id}" />`;
89   };
90
91   /**
92    * Theme function for a toolbar toolgroup of the Quick Edit module.
93    *
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}.
102    *
103    * @return {string}
104    *   The corresponding HTML.
105    */
106   Drupal.theme.quickeditToolgroup = function (settings) {
107     // Classes.
108     const classes = (settings.classes || []);
109     classes.unshift('quickedit-toolgroup');
110     let html = '';
111     html += `<div class="${classes.join(' ')}"`;
112     if (settings.id) {
113       html += ` id="${settings.id}"`;
114     }
115     html += '>';
116     html += Drupal.theme('quickeditButtons', { buttons: settings.buttons });
117     html += '</div>';
118     return html;
119   };
120
121   /**
122    * Theme function for buttons of the Quick Edit module.
123    *
124    * Can be used for the buttons both in the toolbar toolgroups and in the
125    * modal.
126    *
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.
133    *
134    * @return {string}
135    *   The corresponding HTML.
136    */
137   Drupal.theme.quickeditButtons = function (settings) {
138     let html = '';
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';
143       }
144       // Attributes.
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]}"` : ''));
150         }
151       }
152       html += `<button type="${button.type}" class="${button.classes}"` + ` ${attributes.join(' ')}>`;
153       html += button.label;
154       html += '</button>';
155     }
156     return html;
157   };
158
159   /**
160    * Theme function for a form container of the Quick Edit module.
161    *
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.
168    *
169    * @return {string}
170    *   The corresponding HTML.
171    */
172   Drupal.theme.quickeditFormContainer = function (settings) {
173     let html = '';
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;
178     html += '    </div>';
179     html += '  </div>';
180     html += '</div>';
181     return html;
182   };
183 }(jQuery, Drupal));