3 * Attaches the behaviors for the Field UI module.
6 (function ($, Drupal, drupalSettings) {
8 * @type {Drupal~behavior}
10 * @prop {Drupal~behaviorAttach} attach
11 * Adds behaviors to the field storage add form.
13 Drupal.behaviors.fieldUIFieldStorageAddForm = {
15 const $form = $(context).find('[data-drupal-selector="field-ui-field-storage-add-form"]').once('field_ui_add');
17 // Add a few 'js-form-required' and 'form-required' css classes here.
18 // We can not use the Form API '#required' property because both label
19 // elements for "add new" and "re-use existing" can never be filled and
20 // submitted at the same time. The actual validation will happen
23 '.js-form-item-label label,' +
24 '.js-form-item-field-name label,' +
25 '.js-form-item-existing-storage-label label')
26 .addClass('js-form-required form-required');
28 const $newFieldType = $form.find('select[name="new_storage_type"]');
29 const $existingStorageName = $form.find('select[name="existing_storage_name"]');
30 const $existingStorageLabel = $form.find('input[name="existing_storage_label"]');
32 // When the user selects a new field type, clear the "existing field"
34 $newFieldType.on('change', function () {
35 if ($(this).val() !== '') {
36 // Reset the "existing storage name" selection.
37 $existingStorageName.val('').trigger('change');
41 // When the user selects an existing storage name, clear the "new field
42 // type" selection and populate the 'existing_storage_label' element.
43 $existingStorageName.on('change', function () {
44 const value = $(this).val();
46 // Reset the "new field type" selection.
47 $newFieldType.val('').trigger('change');
49 // Pre-populate the "existing storage label" element.
50 if (typeof drupalSettings.existingFieldLabels[value] !== 'undefined') {
51 $existingStorageLabel.val(drupalSettings.existingFieldLabels[value]);
60 * Attaches the fieldUIOverview behavior.
62 * @type {Drupal~behavior}
64 * @prop {Drupal~behaviorAttach} attach
65 * Attaches the fieldUIOverview behavior.
67 * @see Drupal.fieldUIOverview.attach
69 Drupal.behaviors.fieldUIDisplayOverview = {
70 attach(context, settings) {
71 $(context).find('table#field-display-overview').once('field-display-overview').each(function () {
72 Drupal.fieldUIOverview.attach(this, settings.fieldUIRowsData, Drupal.fieldUIDisplayOverview);
78 * Namespace for the field UI overview.
82 Drupal.fieldUIOverview = {
85 * Attaches the fieldUIOverview behavior.
87 * @param {HTMLTableElement} table
88 * The table element for the overview.
89 * @param {object} rowsData
90 * The data of the rows in the table.
91 * @param {object} rowHandlers
92 * Handlers to be added to the rows.
94 attach(table, rowsData, rowHandlers) {
95 const tableDrag = Drupal.tableDrag[table.id];
97 // Add custom tabledrag callbacks.
98 tableDrag.onDrop = this.onDrop;
99 tableDrag.row.prototype.onSwap = this.onSwap;
101 // Create row handlers.
102 $(table).find('tr.draggable').each(function () {
103 // Extract server-side data for the row.
105 if (row.id in rowsData) {
106 const data = rowsData[row.id];
107 data.tableDrag = tableDrag;
109 // Create the row handler, make it accessible from the DOM row
111 const rowHandler = new rowHandlers[data.rowHandler](row, data);
112 $(row).data('fieldUIRowHandler', rowHandler);
118 * Event handler to be attached to form inputs triggering a region change.
121 const $trigger = $(this);
122 const $row = $trigger.closest('tr');
123 const rowHandler = $row.data('fieldUIRowHandler');
125 const refreshRows = {};
126 refreshRows[rowHandler.name] = $trigger.get(0);
128 // Handle region change.
129 const region = rowHandler.getRegion();
130 if (region !== rowHandler.region) {
132 $row.find('select.js-field-parent').val('');
133 // Let the row handler deal with the region change.
134 $.extend(refreshRows, rowHandler.regionChange(region));
135 // Update the row region.
136 rowHandler.region = region;
139 // Ajax-update the rows.
140 Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
144 * Lets row handlers react when a row is dropped into a new region.
147 const dragObject = this;
148 const row = dragObject.rowObject.element;
150 const rowHandler = $row.data('fieldUIRowHandler');
151 if (typeof rowHandler !== 'undefined') {
152 const regionRow = $row.prevAll('tr.region-message').get(0);
153 const region = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
155 if (region !== rowHandler.region) {
156 // Let the row handler deal with the region change.
157 const refreshRows = rowHandler.regionChange(region);
158 // Update the row region.
159 rowHandler.region = region;
160 // Ajax-update the rows.
161 Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
167 * Refreshes placeholder rows in empty regions while a row is being dragged.
169 * Copied from block.js.
171 * @param {HTMLElement} draggedRow
172 * The tableDrag rowObject for the row being dragged.
175 const rowObject = this;
176 $(rowObject.table).find('tr.region-message').each(function () {
177 const $this = $(this);
178 // If the dragged row is in this region, but above the message row, swap
179 // it down one space.
180 if ($this.prev('tr').get(0) === rowObject.group[rowObject.group.length - 1]) {
181 // Prevent a recursion problem when using the keyboard to move rows
183 if ((rowObject.method !== 'keyboard' || rowObject.direction === 'down')) {
184 rowObject.swap('after', this);
187 // This region has become empty.
188 if ($this.next('tr').is(':not(.draggable)') || $this.next('tr').length === 0) {
189 $this.removeClass('region-populated').addClass('region-empty');
191 // This region has become populated.
192 else if ($this.is('.region-empty')) {
193 $this.removeClass('region-empty').addClass('region-populated');
199 * Triggers Ajax refresh of selected rows.
201 * The 'format type' selects can trigger a series of changes in child rows.
202 * The #ajax behavior is therefore not attached directly to the selects, but
203 * triggered manually through a hidden #ajax 'Refresh' button.
205 * @param {object} rows
206 * A hash object, whose keys are the names of the rows to refresh (they
207 * will receive the 'ajax-new-content' effect on the server side), and
208 * whose values are the DOM element in the row that should get an Ajax
211 AJAXRefreshRows(rows) {
212 // Separate keys and values.
214 const ajaxElements = [];
215 Object.keys(rows || {}).forEach((rowName) => {
216 rowNames.push(rowName);
217 ajaxElements.push(rows[rowName]);
220 if (rowNames.length) {
221 // Add a throbber next each of the ajaxElements.
222 $(ajaxElements).after('<div class="ajax-progress ajax-progress-throbber"><div class="throbber"> </div></div>');
224 // Fire the Ajax update.
225 $('input[name=refresh_rows]').val(rowNames.join(' '));
226 $('input[data-drupal-selector="edit-refresh"]').trigger('mousedown');
228 // Disabled elements do not appear in POST ajax data, so we mark the
229 // elements disabled only after firing the request.
230 $(ajaxElements).prop('disabled', true);
236 * Row handlers for the 'Manage display' screen.
240 Drupal.fieldUIDisplayOverview = {};
243 * Constructor for a 'field' row handler.
245 * This handler is used for both fields and 'extra fields' rows.
249 * @param {HTMLTableRowElement} row
250 * The row DOM element.
251 * @param {object} data
252 * Additional data to be populated in the constructed object.
254 * @return {Drupal.fieldUIDisplayOverview.field}
255 * The field row handler constructed.
257 Drupal.fieldUIDisplayOverview.field = function (row, data) {
259 this.name = data.name;
260 this.region = data.region;
261 this.tableDrag = data.tableDrag;
262 this.defaultPlugin = data.defaultPlugin;
264 // Attach change listener to the 'plugin type' select.
265 this.$pluginSelect = $(row).find('.field-plugin-type');
266 this.$pluginSelect.on('change', Drupal.fieldUIOverview.onChange);
268 // Attach change listener to the 'region' select.
269 this.$regionSelect = $(row).find('select.field-region');
270 this.$regionSelect.on('change', Drupal.fieldUIOverview.onChange);
275 Drupal.fieldUIDisplayOverview.field.prototype = {
278 * Returns the region corresponding to the current form values of the row.
281 * Either 'hidden' or 'content'.
284 return this.$regionSelect.val();
288 * Reacts to a row being changed regions.
290 * This function is called when the row is moved to a different region, as
293 * - a drag-and-drop action (the row's form elements then probably need to
294 * be updated accordingly)
295 * - user input in one of the form elements watched by the
296 * {@link Drupal.fieldUIOverview.onChange} change listener.
298 * @param {string} region
299 * The name of the new region for the row.
302 * A hash object indicating which rows should be Ajax-updated as a result
303 * of the change, in the format expected by
304 * {@link Drupal.fieldUIOverview.AJAXRefreshRows}.
306 regionChange(region) {
307 // Replace dashes with underscores.
308 region = region.replace(/-/g, '_');
310 // Set the region of the select list.
311 this.$regionSelect.val(region);
313 // Restore the formatter back to the default formatter. Pseudo-fields
314 // do not have default formatters, we just return to 'visible' for
316 const value = (typeof this.defaultPlugin !== 'undefined') ? this.defaultPlugin : this.$pluginSelect.find('option').val();
318 if (typeof value !== 'undefined') {
319 this.$pluginSelect.val(value);
322 const refreshRows = {};
323 refreshRows[this.name] = this.$pluginSelect.get(0);
328 }(jQuery, Drupal, drupalSettings));