3 * Provides theme functions for all of Quick Edit's client-side HTML.
6 (function ($, Drupal) {
11 * Theme function for a "backstage" for the Quick Edit module.
13 * @param {object} settings
14 * Settings object used to construct the markup.
15 * @param {string} settings.id
16 * The id to apply to the backstage.
19 * The corresponding HTML.
21 Drupal.theme.quickeditBackstage = function (settings) {
23 html += '<div id="' + settings.id + '" />';
28 * Theme function for a toolbar container of the Quick Edit module.
30 * @param {object} settings
31 * Settings object used to construct the markup.
32 * @param {string} settings.id
33 * the id to apply to the backstage.
36 * The corresponding HTML.
38 Drupal.theme.quickeditEntityToolbar = function (settings) {
40 html += '<div id="' + settings.id + '" class="quickedit quickedit-toolbar-container clearfix">';
41 html += '<i class="quickedit-toolbar-pointer"></i>';
42 html += '<div class="quickedit-toolbar-content">';
43 html += '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
44 html += '<div class="quickedit-toolbar-label" />';
46 html += '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
47 html += '</div><div class="quickedit-toolbar-lining"></div></div>';
52 * Theme function for a toolbar container of the Quick Edit module.
54 * @param {object} settings
55 * Settings object used to construct the markup.
56 * @param {string} settings.entityLabel
57 * The title of the active entity.
58 * @param {string} settings.fieldLabel
59 * The label of the highlighted or active field.
62 * The corresponding HTML.
64 Drupal.theme.quickeditEntityToolbarLabel = function (settings) {
65 // @todo Add XSS regression test coverage in https://www.drupal.org/node/2547437
66 return '<span class="field">' + Drupal.checkPlain(settings.fieldLabel) + '</span>' + Drupal.checkPlain(settings.entityLabel);
70 * Element defining a containing box for the placement of the entity toolbar.
73 * The corresponding HTML.
75 Drupal.theme.quickeditEntityToolbarFence = function () {
76 return '<div id="quickedit-toolbar-fence" />';
80 * Theme function for a toolbar container of the Quick Edit module.
82 * @param {object} settings
83 * Settings object used to construct the markup.
84 * @param {string} settings.id
85 * The id to apply to the toolbar container.
88 * The corresponding HTML.
90 Drupal.theme.quickeditFieldToolbar = function (settings) {
91 return '<div id="' + settings.id + '" />';
95 * Theme function for a toolbar toolgroup of the Quick Edit module.
97 * @param {object} settings
98 * Settings object used to construct the markup.
99 * @param {string} [settings.id]
100 * The id of the toolgroup.
101 * @param {string} settings.classes
102 * The class of the toolgroup.
103 * @param {Array} settings.buttons
104 * See {@link Drupal.theme.quickeditButtons}.
107 * The corresponding HTML.
109 Drupal.theme.quickeditToolgroup = function (settings) {
111 var classes = (settings.classes || []);
112 classes.unshift('quickedit-toolgroup');
114 html += '<div class="' + classes.join(' ') + '"';
116 html += ' id="' + settings.id + '"';
119 html += Drupal.theme('quickeditButtons', {buttons: settings.buttons});
125 * Theme function for buttons of the Quick Edit module.
127 * Can be used for the buttons both in the toolbar toolgroups and in the
130 * @param {object} settings
131 * Settings object used to construct the markup.
132 * @param {Array} settings.buttons
133 * - String type: the type of the button (defaults to 'button')
134 * - Array classes: the classes of the button.
135 * - String label: the label of the button.
138 * The corresponding HTML.
140 Drupal.theme.quickeditButtons = function (settings) {
142 for (var i = 0; i < settings.buttons.length; i++) {
143 var button = settings.buttons[i];
144 if (!button.hasOwnProperty('type')) {
145 button.type = 'button';
149 var attrMap = settings.buttons[i].attributes || {};
150 for (var attr in attrMap) {
151 if (attrMap.hasOwnProperty(attr)) {
152 attributes.push(attr + ((attrMap[attr]) ? '="' + attrMap[attr] + '"' : ''));
155 html += '<button type="' + button.type + '" class="' + button.classes + '"' + ' ' + attributes.join(' ') + '>';
156 html += button.label;
163 * Theme function for a form container of the Quick Edit module.
165 * @param {object} settings
166 * Settings object used to construct the markup.
167 * @param {string} settings.id
168 * The id to apply to the toolbar container.
169 * @param {string} settings.loadingMsg
170 * The message to show while loading.
173 * The corresponding HTML.
175 Drupal.theme.quickeditFormContainer = function (settings) {
177 html += '<div id="' + settings.id + '" class="quickedit-form-container">';
178 html += ' <div class="quickedit-form">';
179 html += ' <div class="placeholder">';
180 html += settings.loadingMsg;