* Attaches the behaviors for the Field UI module.
*/
-(function ($, Drupal, drupalSettings) {
+(function($, Drupal, drupalSettings) {
/**
* @type {Drupal~behavior}
*
*/
Drupal.behaviors.fieldUIFieldStorageAddForm = {
attach(context) {
- const $form = $(context).find('[data-drupal-selector="field-ui-field-storage-add-form"]').once('field_ui_add');
+ const $form = $(context)
+ .find('[data-drupal-selector="field-ui-field-storage-add-form"]')
+ .once('field_ui_add');
if ($form.length) {
// Add a few 'js-form-required' and 'form-required' css classes here.
// We can not use the Form API '#required' property because both label
// elements for "add new" and "re-use existing" can never be filled and
// submitted at the same time. The actual validation will happen
// server-side.
- $form.find(
- '.js-form-item-label label,' +
- '.js-form-item-field-name label,' +
- '.js-form-item-existing-storage-label label')
+ $form
+ .find(
+ '.js-form-item-label label,' +
+ '.js-form-item-field-name label,' +
+ '.js-form-item-existing-storage-label label',
+ )
.addClass('js-form-required form-required');
const $newFieldType = $form.find('select[name="new_storage_type"]');
- const $existingStorageName = $form.find('select[name="existing_storage_name"]');
- const $existingStorageLabel = $form.find('input[name="existing_storage_label"]');
+ const $existingStorageName = $form.find(
+ 'select[name="existing_storage_name"]',
+ );
+ const $existingStorageLabel = $form.find(
+ 'input[name="existing_storage_label"]',
+ );
// When the user selects a new field type, clear the "existing field"
// selection.
- $newFieldType.on('change', function () {
+ $newFieldType.on('change', function() {
if ($(this).val() !== '') {
// Reset the "existing storage name" selection.
$existingStorageName.val('').trigger('change');
// When the user selects an existing storage name, clear the "new field
// type" selection and populate the 'existing_storage_label' element.
- $existingStorageName.on('change', function () {
+ $existingStorageName.on('change', function() {
const value = $(this).val();
if (value !== '') {
// Reset the "new field type" selection.
$newFieldType.val('').trigger('change');
// Pre-populate the "existing storage label" element.
- if (typeof drupalSettings.existingFieldLabels[value] !== 'undefined') {
- $existingStorageLabel.val(drupalSettings.existingFieldLabels[value]);
+ if (
+ typeof drupalSettings.existingFieldLabels[value] !== 'undefined'
+ ) {
+ $existingStorageLabel.val(
+ drupalSettings.existingFieldLabels[value],
+ );
}
}
});
*/
Drupal.behaviors.fieldUIDisplayOverview = {
attach(context, settings) {
- $(context).find('table#field-display-overview').once('field-display-overview').each(function () {
- Drupal.fieldUIOverview.attach(this, settings.fieldUIRowsData, Drupal.fieldUIDisplayOverview);
- });
+ $(context)
+ .find('table#field-display-overview')
+ .once('field-display-overview')
+ .each(function() {
+ Drupal.fieldUIOverview.attach(
+ this,
+ settings.fieldUIRowsData,
+ Drupal.fieldUIDisplayOverview,
+ );
+ });
},
};
* @namespace
*/
Drupal.fieldUIOverview = {
-
/**
* Attaches the fieldUIOverview behavior.
*
tableDrag.row.prototype.onSwap = this.onSwap;
// Create row handlers.
- $(table).find('tr.draggable').each(function () {
- // Extract server-side data for the row.
- const row = this;
- if (row.id in rowsData) {
- const data = rowsData[row.id];
- data.tableDrag = tableDrag;
-
- // Create the row handler, make it accessible from the DOM row
- // element.
- const rowHandler = new rowHandlers[data.rowHandler](row, data);
- $(row).data('fieldUIRowHandler', rowHandler);
- }
- });
+ $(table)
+ .find('tr.draggable')
+ .each(function() {
+ // Extract server-side data for the row.
+ const row = this;
+ if (row.id in rowsData) {
+ const data = rowsData[row.id];
+ data.tableDrag = tableDrag;
+
+ // Create the row handler, make it accessible from the DOM row
+ // element.
+ const rowHandler = new rowHandlers[data.rowHandler](row, data);
+ $(row).data('fieldUIRowHandler', rowHandler);
+ }
+ });
},
/**
const rowHandler = $row.data('fieldUIRowHandler');
if (typeof rowHandler !== 'undefined') {
const regionRow = $row.prevAll('tr.region-message').get(0);
- const region = regionRow.className.replace(/([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/, '$2');
+ const region = regionRow.className.replace(
+ /([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/,
+ '$2',
+ );
if (region !== rowHandler.region) {
// Let the row handler deal with the region change.
*/
onSwap(draggedRow) {
const rowObject = this;
- $(rowObject.table).find('tr.region-message').each(function () {
- const $this = $(this);
- // If the dragged row is in this region, but above the message row, swap
- // it down one space.
- if ($this.prev('tr').get(0) === rowObject.group[rowObject.group.length - 1]) {
- // Prevent a recursion problem when using the keyboard to move rows
- // up.
- if ((rowObject.method !== 'keyboard' || rowObject.direction === 'down')) {
- rowObject.swap('after', this);
+ $(rowObject.table)
+ .find('tr.region-message')
+ .each(function() {
+ const $this = $(this);
+ // If the dragged row is in this region, but above the message row, swap
+ // it down one space.
+ if (
+ $this.prev('tr').get(0) ===
+ rowObject.group[rowObject.group.length - 1]
+ ) {
+ // Prevent a recursion problem when using the keyboard to move rows
+ // up.
+ if (
+ rowObject.method !== 'keyboard' ||
+ rowObject.direction === 'down'
+ ) {
+ rowObject.swap('after', this);
+ }
}
- }
- // This region has become empty.
- if ($this.next('tr').is(':not(.draggable)') || $this.next('tr').length === 0) {
- $this.removeClass('region-populated').addClass('region-empty');
- }
- // This region has become populated.
- else if ($this.is('.region-empty')) {
- $this.removeClass('region-empty').addClass('region-populated');
- }
- });
+ // This region has become empty.
+ if (
+ $this.next('tr').is(':not(.draggable)') ||
+ $this.next('tr').length === 0
+ ) {
+ $this.removeClass('region-populated').addClass('region-empty');
+ }
+ // This region has become populated.
+ else if ($this.is('.region-empty')) {
+ $this.removeClass('region-empty').addClass('region-populated');
+ }
+ });
},
/**
// Separate keys and values.
const rowNames = [];
const ajaxElements = [];
- Object.keys(rows || {}).forEach((rowName) => {
+ Object.keys(rows || {}).forEach(rowName => {
rowNames.push(rowName);
ajaxElements.push(rows[rowName]);
});
if (rowNames.length) {
// Add a throbber next each of the ajaxElements.
- $(ajaxElements).after('<div class="ajax-progress ajax-progress-throbber"><div class="throbber"> </div></div>');
+ $(ajaxElements).after(Drupal.theme.ajaxProgressThrobber());
// Fire the Ajax update.
$('input[name=refresh_rows]').val(rowNames.join(' '));
* @return {Drupal.fieldUIDisplayOverview.field}
* The field row handler constructed.
*/
- Drupal.fieldUIDisplayOverview.field = function (row, data) {
+ Drupal.fieldUIDisplayOverview.field = function(row, data) {
this.row = row;
this.name = data.name;
this.region = data.region;
};
Drupal.fieldUIDisplayOverview.field.prototype = {
-
/**
* Returns the region corresponding to the current form values of the row.
*
// Set the region of the select list.
this.$regionSelect.val(region);
- // Restore the formatter back to the default formatter. Pseudo-fields
- // do not have default formatters, we just return to 'visible' for
- // those.
- const value = (typeof this.defaultPlugin !== 'undefined') ? this.defaultPlugin : this.$pluginSelect.find('option').val();
-
- if (typeof value !== 'undefined') {
- this.$pluginSelect.val(value);
+ // Restore the formatter back to the default formatter only if it was
+ // disabled previously. Pseudo-fields do not have default formatters,
+ // we just return to 'visible' for those.
+ if (this.region === 'hidden') {
+ const value =
+ typeof this.defaultPlugin !== 'undefined'
+ ? this.defaultPlugin
+ : this.$pluginSelect.find('option').val();
+
+ if (typeof value !== 'undefined') {
+ this.$pluginSelect.val(value);
+ }
}
const refreshRows = {};
return refreshRows;
},
};
-}(jQuery, Drupal, drupalSettings));
+})(jQuery, Drupal, drupalSettings);