123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366 |
- /**
- * @file
- * Attaches the behaviors for the Field UI module.
- */
- (function($, Drupal, drupalSettings) {
- /**
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Adds behaviors to the field storage add form.
- */
- Drupal.behaviors.fieldUIFieldStorageAddForm = {
- attach(context) {
- 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',
- )
- .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"]',
- );
- // When the user selects a new field type, clear the "existing field"
- // selection.
- $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() {
- 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],
- );
- }
- }
- });
- }
- },
- };
- /**
- * Attaches the fieldUIOverview behavior.
- *
- * @type {Drupal~behavior}
- *
- * @prop {Drupal~behaviorAttach} attach
- * Attaches the fieldUIOverview behavior.
- *
- * @see Drupal.fieldUIOverview.attach
- */
- 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,
- );
- });
- },
- };
- /**
- * Namespace for the field UI overview.
- *
- * @namespace
- */
- Drupal.fieldUIOverview = {
- /**
- * Attaches the fieldUIOverview behavior.
- *
- * @param {HTMLTableElement} table
- * The table element for the overview.
- * @param {object} rowsData
- * The data of the rows in the table.
- * @param {object} rowHandlers
- * Handlers to be added to the rows.
- */
- attach(table, rowsData, rowHandlers) {
- const tableDrag = Drupal.tableDrag[table.id];
- // Add custom tabledrag callbacks.
- tableDrag.onDrop = this.onDrop;
- 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);
- }
- });
- },
- /**
- * Event handler to be attached to form inputs triggering a region change.
- */
- onChange() {
- const $trigger = $(this);
- const $row = $trigger.closest('tr');
- const rowHandler = $row.data('fieldUIRowHandler');
- const refreshRows = {};
- refreshRows[rowHandler.name] = $trigger.get(0);
- // Handle region change.
- const region = rowHandler.getRegion();
- if (region !== rowHandler.region) {
- // Remove parenting.
- $row.find('select.js-field-parent').val('');
- // Let the row handler deal with the region change.
- $.extend(refreshRows, rowHandler.regionChange(region));
- // Update the row region.
- rowHandler.region = region;
- }
- // Ajax-update the rows.
- Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
- },
- /**
- * Lets row handlers react when a row is dropped into a new region.
- */
- onDrop() {
- const dragObject = this;
- const row = dragObject.rowObject.element;
- const $row = $(row);
- 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',
- );
- if (region !== rowHandler.region) {
- // Let the row handler deal with the region change.
- const refreshRows = rowHandler.regionChange(region);
- // Update the row region.
- rowHandler.region = region;
- // Ajax-update the rows.
- Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
- }
- }
- },
- /**
- * Refreshes placeholder rows in empty regions while a row is being dragged.
- *
- * Copied from block.js.
- *
- * @param {HTMLElement} draggedRow
- * The tableDrag rowObject for the row being dragged.
- */
- 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);
- }
- }
- // 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');
- }
- });
- },
- /**
- * Triggers Ajax refresh of selected rows.
- *
- * The 'format type' selects can trigger a series of changes in child rows.
- * The #ajax behavior is therefore not attached directly to the selects, but
- * triggered manually through a hidden #ajax 'Refresh' button.
- *
- * @param {object} rows
- * A hash object, whose keys are the names of the rows to refresh (they
- * will receive the 'ajax-new-content' effect on the server side), and
- * whose values are the DOM element in the row that should get an Ajax
- * throbber.
- */
- AJAXRefreshRows(rows) {
- // Separate keys and values.
- const rowNames = [];
- const ajaxElements = [];
- 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(Drupal.theme.ajaxProgressThrobber());
- // Fire the Ajax update.
- $('input[name=refresh_rows]').val(rowNames.join(' '));
- $('input[data-drupal-selector="edit-refresh"]').trigger('mousedown');
- // Disabled elements do not appear in POST ajax data, so we mark the
- // elements disabled only after firing the request.
- $(ajaxElements).prop('disabled', true);
- }
- },
- };
- /**
- * Row handlers for the 'Manage display' screen.
- *
- * @namespace
- */
- Drupal.fieldUIDisplayOverview = {};
- /**
- * Constructor for a 'field' row handler.
- *
- * This handler is used for both fields and 'extra fields' rows.
- *
- * @constructor
- *
- * @param {HTMLTableRowElement} row
- * The row DOM element.
- * @param {object} data
- * Additional data to be populated in the constructed object.
- *
- * @return {Drupal.fieldUIDisplayOverview.field}
- * The field row handler constructed.
- */
- Drupal.fieldUIDisplayOverview.field = function(row, data) {
- this.row = row;
- this.name = data.name;
- this.region = data.region;
- this.tableDrag = data.tableDrag;
- this.defaultPlugin = data.defaultPlugin;
- // Attach change listener to the 'plugin type' select.
- this.$pluginSelect = $(row).find('.field-plugin-type');
- this.$pluginSelect.on('change', Drupal.fieldUIOverview.onChange);
- // Attach change listener to the 'region' select.
- this.$regionSelect = $(row).find('select.field-region');
- this.$regionSelect.on('change', Drupal.fieldUIOverview.onChange);
- return this;
- };
- Drupal.fieldUIDisplayOverview.field.prototype = {
- /**
- * Returns the region corresponding to the current form values of the row.
- *
- * @return {string}
- * Either 'hidden' or 'content'.
- */
- getRegion() {
- return this.$regionSelect.val();
- },
- /**
- * Reacts to a row being changed regions.
- *
- * This function is called when the row is moved to a different region, as
- * a
- * result of either :
- * - a drag-and-drop action (the row's form elements then probably need to
- * be updated accordingly)
- * - user input in one of the form elements watched by the
- * {@link Drupal.fieldUIOverview.onChange} change listener.
- *
- * @param {string} region
- * The name of the new region for the row.
- *
- * @return {object}
- * A hash object indicating which rows should be Ajax-updated as a result
- * of the change, in the format expected by
- * {@link Drupal.fieldUIOverview.AJAXRefreshRows}.
- */
- regionChange(region) {
- // Replace dashes with underscores.
- region = region.replace(/-/g, '_');
- // Set the region of the select list.
- this.$regionSelect.val(region);
- // 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 = {};
- refreshRows[this.name] = this.$pluginSelect.get(0);
- return refreshRows;
- },
- };
- })(jQuery, Drupal, drupalSettings);
|