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)
16 .find('[data-drupal-selector="field-ui-field-storage-add-form"]')
17 .once('field_ui_add');
19 // Add a few 'js-form-required' and 'form-required' css classes here.
20 // We can not use the Form API '#required' property because both label
21 // elements for "add new" and "re-use existing" can never be filled and
22 // submitted at the same time. The actual validation will happen
26 '.js-form-item-label label,' +
27 '.js-form-item-field-name label,' +
28 '.js-form-item-existing-storage-label label',
30 .addClass('js-form-required form-required');
32 const $newFieldType = $form.find('select[name="new_storage_type"]');
33 const $existingStorageName = $form.find(
34 'select[name="existing_storage_name"]',
36 const $existingStorageLabel = $form.find(
37 'input[name="existing_storage_label"]',
40 // When the user selects a new field type, clear the "existing field"
42 $newFieldType.on('change', function() {
43 if ($(this).val() !== '') {
44 // Reset the "existing storage name" selection.
45 $existingStorageName.val('').trigger('change');
49 // When the user selects an existing storage name, clear the "new field
50 // type" selection and populate the 'existing_storage_label' element.
51 $existingStorageName.on('change', function() {
52 const value = $(this).val();
54 // Reset the "new field type" selection.
55 $newFieldType.val('').trigger('change');
57 // Pre-populate the "existing storage label" element.
59 typeof drupalSettings.existingFieldLabels[value] !== 'undefined'
61 $existingStorageLabel.val(
62 drupalSettings.existingFieldLabels[value],
72 * Attaches the fieldUIOverview behavior.
74 * @type {Drupal~behavior}
76 * @prop {Drupal~behaviorAttach} attach
77 * Attaches the fieldUIOverview behavior.
79 * @see Drupal.fieldUIOverview.attach
81 Drupal.behaviors.fieldUIDisplayOverview = {
82 attach(context, settings) {
84 .find('table#field-display-overview')
85 .once('field-display-overview')
87 Drupal.fieldUIOverview.attach(
89 settings.fieldUIRowsData,
90 Drupal.fieldUIDisplayOverview,
97 * Namespace for the field UI overview.
101 Drupal.fieldUIOverview = {
103 * Attaches the fieldUIOverview behavior.
105 * @param {HTMLTableElement} table
106 * The table element for the overview.
107 * @param {object} rowsData
108 * The data of the rows in the table.
109 * @param {object} rowHandlers
110 * Handlers to be added to the rows.
112 attach(table, rowsData, rowHandlers) {
113 const tableDrag = Drupal.tableDrag[table.id];
115 // Add custom tabledrag callbacks.
116 tableDrag.onDrop = this.onDrop;
117 tableDrag.row.prototype.onSwap = this.onSwap;
119 // Create row handlers.
121 .find('tr.draggable')
123 // Extract server-side data for the row.
125 if (row.id in rowsData) {
126 const data = rowsData[row.id];
127 data.tableDrag = tableDrag;
129 // Create the row handler, make it accessible from the DOM row
131 const rowHandler = new rowHandlers[data.rowHandler](row, data);
132 $(row).data('fieldUIRowHandler', rowHandler);
138 * Event handler to be attached to form inputs triggering a region change.
141 const $trigger = $(this);
142 const $row = $trigger.closest('tr');
143 const rowHandler = $row.data('fieldUIRowHandler');
145 const refreshRows = {};
146 refreshRows[rowHandler.name] = $trigger.get(0);
148 // Handle region change.
149 const region = rowHandler.getRegion();
150 if (region !== rowHandler.region) {
152 $row.find('select.js-field-parent').val('');
153 // Let the row handler deal with the region change.
154 $.extend(refreshRows, rowHandler.regionChange(region));
155 // Update the row region.
156 rowHandler.region = region;
159 // Ajax-update the rows.
160 Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
164 * Lets row handlers react when a row is dropped into a new region.
167 const dragObject = this;
168 const row = dragObject.rowObject.element;
170 const rowHandler = $row.data('fieldUIRowHandler');
171 if (typeof rowHandler !== 'undefined') {
172 const regionRow = $row.prevAll('tr.region-message').get(0);
173 const region = regionRow.className.replace(
174 /([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/,
178 if (region !== rowHandler.region) {
179 // Let the row handler deal with the region change.
180 const refreshRows = rowHandler.regionChange(region);
181 // Update the row region.
182 rowHandler.region = region;
183 // Ajax-update the rows.
184 Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
190 * Refreshes placeholder rows in empty regions while a row is being dragged.
192 * Copied from block.js.
194 * @param {HTMLElement} draggedRow
195 * The tableDrag rowObject for the row being dragged.
198 const rowObject = this;
200 .find('tr.region-message')
202 const $this = $(this);
203 // If the dragged row is in this region, but above the message row, swap
204 // it down one space.
206 $this.prev('tr').get(0) ===
207 rowObject.group[rowObject.group.length - 1]
209 // Prevent a recursion problem when using the keyboard to move rows
212 rowObject.method !== 'keyboard' ||
213 rowObject.direction === 'down'
215 rowObject.swap('after', this);
218 // This region has become empty.
220 $this.next('tr').is(':not(.draggable)') ||
221 $this.next('tr').length === 0
223 $this.removeClass('region-populated').addClass('region-empty');
225 // This region has become populated.
226 else if ($this.is('.region-empty')) {
227 $this.removeClass('region-empty').addClass('region-populated');
233 * Triggers Ajax refresh of selected rows.
235 * The 'format type' selects can trigger a series of changes in child rows.
236 * The #ajax behavior is therefore not attached directly to the selects, but
237 * triggered manually through a hidden #ajax 'Refresh' button.
239 * @param {object} rows
240 * A hash object, whose keys are the names of the rows to refresh (they
241 * will receive the 'ajax-new-content' effect on the server side), and
242 * whose values are the DOM element in the row that should get an Ajax
245 AJAXRefreshRows(rows) {
246 // Separate keys and values.
248 const ajaxElements = [];
249 Object.keys(rows || {}).forEach(rowName => {
250 rowNames.push(rowName);
251 ajaxElements.push(rows[rowName]);
254 if (rowNames.length) {
255 // Add a throbber next each of the ajaxElements.
256 $(ajaxElements).after(Drupal.theme.ajaxProgressThrobber());
258 // Fire the Ajax update.
259 $('input[name=refresh_rows]').val(rowNames.join(' '));
260 $('input[data-drupal-selector="edit-refresh"]').trigger('mousedown');
262 // Disabled elements do not appear in POST ajax data, so we mark the
263 // elements disabled only after firing the request.
264 $(ajaxElements).prop('disabled', true);
270 * Row handlers for the 'Manage display' screen.
274 Drupal.fieldUIDisplayOverview = {};
277 * Constructor for a 'field' row handler.
279 * This handler is used for both fields and 'extra fields' rows.
283 * @param {HTMLTableRowElement} row
284 * The row DOM element.
285 * @param {object} data
286 * Additional data to be populated in the constructed object.
288 * @return {Drupal.fieldUIDisplayOverview.field}
289 * The field row handler constructed.
291 Drupal.fieldUIDisplayOverview.field = function(row, data) {
293 this.name = data.name;
294 this.region = data.region;
295 this.tableDrag = data.tableDrag;
296 this.defaultPlugin = data.defaultPlugin;
298 // Attach change listener to the 'plugin type' select.
299 this.$pluginSelect = $(row).find('.field-plugin-type');
300 this.$pluginSelect.on('change', Drupal.fieldUIOverview.onChange);
302 // Attach change listener to the 'region' select.
303 this.$regionSelect = $(row).find('select.field-region');
304 this.$regionSelect.on('change', Drupal.fieldUIOverview.onChange);
309 Drupal.fieldUIDisplayOverview.field.prototype = {
311 * Returns the region corresponding to the current form values of the row.
314 * Either 'hidden' or 'content'.
317 return this.$regionSelect.val();
321 * Reacts to a row being changed regions.
323 * This function is called when the row is moved to a different region, as
326 * - a drag-and-drop action (the row's form elements then probably need to
327 * be updated accordingly)
328 * - user input in one of the form elements watched by the
329 * {@link Drupal.fieldUIOverview.onChange} change listener.
331 * @param {string} region
332 * The name of the new region for the row.
335 * A hash object indicating which rows should be Ajax-updated as a result
336 * of the change, in the format expected by
337 * {@link Drupal.fieldUIOverview.AJAXRefreshRows}.
339 regionChange(region) {
340 // Replace dashes with underscores.
341 region = region.replace(/-/g, '_');
343 // Set the region of the select list.
344 this.$regionSelect.val(region);
346 // Restore the formatter back to the default formatter only if it was
347 // disabled previously. Pseudo-fields do not have default formatters,
348 // we just return to 'visible' for those.
349 if (this.region === 'hidden') {
351 typeof this.defaultPlugin !== 'undefined'
353 : this.$pluginSelect.find('option').val();
355 if (typeof value !== 'undefined') {
356 this.$pluginSelect.val(value);
360 const refreshRows = {};
361 refreshRows[this.name] = this.$pluginSelect.get(0);
366 })(jQuery, Drupal, drupalSettings);