Chris@0: /**
Chris@0:  * @file
Chris@0:  * Attaches the behaviors for the Field UI module.
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal, drupalSettings) {
Chris@0:   /**
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Adds behaviors to the field storage add form.
Chris@0:    */
Chris@0:   Drupal.behaviors.fieldUIFieldStorageAddForm = {
Chris@0:     attach(context) {
Chris@17:       const $form = $(context)
Chris@17:         .find('[data-drupal-selector="field-ui-field-storage-add-form"]')
Chris@17:         .once('field_ui_add');
Chris@0:       if ($form.length) {
Chris@0:         // Add a few 'js-form-required' and 'form-required' css classes here.
Chris@0:         // We can not use the Form API '#required' property because both label
Chris@0:         // elements for "add new" and "re-use existing" can never be filled and
Chris@0:         // submitted at the same time. The actual validation will happen
Chris@0:         // server-side.
Chris@17:         $form
Chris@17:           .find(
Chris@17:             '.js-form-item-label label,' +
Chris@17:               '.js-form-item-field-name label,' +
Chris@17:               '.js-form-item-existing-storage-label label',
Chris@17:           )
Chris@0:           .addClass('js-form-required form-required');
Chris@0: 
Chris@0:         const $newFieldType = $form.find('select[name="new_storage_type"]');
Chris@17:         const $existingStorageName = $form.find(
Chris@17:           'select[name="existing_storage_name"]',
Chris@17:         );
Chris@17:         const $existingStorageLabel = $form.find(
Chris@17:           'input[name="existing_storage_label"]',
Chris@17:         );
Chris@0: 
Chris@0:         // When the user selects a new field type, clear the "existing field"
Chris@0:         // selection.
Chris@17:         $newFieldType.on('change', function() {
Chris@0:           if ($(this).val() !== '') {
Chris@0:             // Reset the "existing storage name" selection.
Chris@0:             $existingStorageName.val('').trigger('change');
Chris@0:           }
Chris@0:         });
Chris@0: 
Chris@0:         // When the user selects an existing storage name, clear the "new field
Chris@0:         // type" selection and populate the 'existing_storage_label' element.
Chris@17:         $existingStorageName.on('change', function() {
Chris@0:           const value = $(this).val();
Chris@0:           if (value !== '') {
Chris@0:             // Reset the "new field type" selection.
Chris@0:             $newFieldType.val('').trigger('change');
Chris@0: 
Chris@0:             // Pre-populate the "existing storage label" element.
Chris@17:             if (
Chris@17:               typeof drupalSettings.existingFieldLabels[value] !== 'undefined'
Chris@17:             ) {
Chris@17:               $existingStorageLabel.val(
Chris@17:                 drupalSettings.existingFieldLabels[value],
Chris@17:               );
Chris@0:             }
Chris@0:           }
Chris@0:         });
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Attaches the fieldUIOverview behavior.
Chris@0:    *
Chris@0:    * @type {Drupal~behavior}
Chris@0:    *
Chris@0:    * @prop {Drupal~behaviorAttach} attach
Chris@0:    *   Attaches the fieldUIOverview behavior.
Chris@0:    *
Chris@0:    * @see Drupal.fieldUIOverview.attach
Chris@0:    */
Chris@0:   Drupal.behaviors.fieldUIDisplayOverview = {
Chris@0:     attach(context, settings) {
Chris@17:       $(context)
Chris@17:         .find('table#field-display-overview')
Chris@17:         .once('field-display-overview')
Chris@17:         .each(function() {
Chris@17:           Drupal.fieldUIOverview.attach(
Chris@17:             this,
Chris@17:             settings.fieldUIRowsData,
Chris@17:             Drupal.fieldUIDisplayOverview,
Chris@17:           );
Chris@17:         });
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Namespace for the field UI overview.
Chris@0:    *
Chris@0:    * @namespace
Chris@0:    */
Chris@0:   Drupal.fieldUIOverview = {
Chris@0:     /**
Chris@0:      * Attaches the fieldUIOverview behavior.
Chris@0:      *
Chris@0:      * @param {HTMLTableElement} table
Chris@0:      *   The table element for the overview.
Chris@0:      * @param {object} rowsData
Chris@0:      *   The data of the rows in the table.
Chris@0:      * @param {object} rowHandlers
Chris@0:      *   Handlers to be added to the rows.
Chris@0:      */
Chris@0:     attach(table, rowsData, rowHandlers) {
Chris@0:       const tableDrag = Drupal.tableDrag[table.id];
Chris@0: 
Chris@0:       // Add custom tabledrag callbacks.
Chris@0:       tableDrag.onDrop = this.onDrop;
Chris@0:       tableDrag.row.prototype.onSwap = this.onSwap;
Chris@0: 
Chris@0:       // Create row handlers.
Chris@17:       $(table)
Chris@17:         .find('tr.draggable')
Chris@17:         .each(function() {
Chris@17:           // Extract server-side data for the row.
Chris@17:           const row = this;
Chris@17:           if (row.id in rowsData) {
Chris@17:             const data = rowsData[row.id];
Chris@17:             data.tableDrag = tableDrag;
Chris@0: 
Chris@17:             // Create the row handler, make it accessible from the DOM row
Chris@17:             // element.
Chris@17:             const rowHandler = new rowHandlers[data.rowHandler](row, data);
Chris@17:             $(row).data('fieldUIRowHandler', rowHandler);
Chris@17:           }
Chris@17:         });
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Event handler to be attached to form inputs triggering a region change.
Chris@0:      */
Chris@0:     onChange() {
Chris@0:       const $trigger = $(this);
Chris@0:       const $row = $trigger.closest('tr');
Chris@0:       const rowHandler = $row.data('fieldUIRowHandler');
Chris@0: 
Chris@0:       const refreshRows = {};
Chris@0:       refreshRows[rowHandler.name] = $trigger.get(0);
Chris@0: 
Chris@0:       // Handle region change.
Chris@0:       const region = rowHandler.getRegion();
Chris@0:       if (region !== rowHandler.region) {
Chris@0:         // Remove parenting.
Chris@0:         $row.find('select.js-field-parent').val('');
Chris@0:         // Let the row handler deal with the region change.
Chris@0:         $.extend(refreshRows, rowHandler.regionChange(region));
Chris@0:         // Update the row region.
Chris@0:         rowHandler.region = region;
Chris@0:       }
Chris@0: 
Chris@0:       // Ajax-update the rows.
Chris@0:       Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Lets row handlers react when a row is dropped into a new region.
Chris@0:      */
Chris@0:     onDrop() {
Chris@0:       const dragObject = this;
Chris@0:       const row = dragObject.rowObject.element;
Chris@0:       const $row = $(row);
Chris@0:       const rowHandler = $row.data('fieldUIRowHandler');
Chris@0:       if (typeof rowHandler !== 'undefined') {
Chris@0:         const regionRow = $row.prevAll('tr.region-message').get(0);
Chris@17:         const region = regionRow.className.replace(
Chris@17:           /([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/,
Chris@17:           '$2',
Chris@17:         );
Chris@0: 
Chris@0:         if (region !== rowHandler.region) {
Chris@0:           // Let the row handler deal with the region change.
Chris@0:           const refreshRows = rowHandler.regionChange(region);
Chris@0:           // Update the row region.
Chris@0:           rowHandler.region = region;
Chris@0:           // Ajax-update the rows.
Chris@0:           Drupal.fieldUIOverview.AJAXRefreshRows(refreshRows);
Chris@0:         }
Chris@0:       }
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Refreshes placeholder rows in empty regions while a row is being dragged.
Chris@0:      *
Chris@0:      * Copied from block.js.
Chris@0:      *
Chris@0:      * @param {HTMLElement} draggedRow
Chris@0:      *   The tableDrag rowObject for the row being dragged.
Chris@0:      */
Chris@0:     onSwap(draggedRow) {
Chris@0:       const rowObject = this;
Chris@17:       $(rowObject.table)
Chris@17:         .find('tr.region-message')
Chris@17:         .each(function() {
Chris@17:           const $this = $(this);
Chris@17:           // If the dragged row is in this region, but above the message row, swap
Chris@17:           // it down one space.
Chris@17:           if (
Chris@17:             $this.prev('tr').get(0) ===
Chris@17:             rowObject.group[rowObject.group.length - 1]
Chris@17:           ) {
Chris@17:             // Prevent a recursion problem when using the keyboard to move rows
Chris@17:             // up.
Chris@17:             if (
Chris@17:               rowObject.method !== 'keyboard' ||
Chris@17:               rowObject.direction === 'down'
Chris@17:             ) {
Chris@17:               rowObject.swap('after', this);
Chris@17:             }
Chris@0:           }
Chris@17:           // This region has become empty.
Chris@17:           if (
Chris@17:             $this.next('tr').is(':not(.draggable)') ||
Chris@17:             $this.next('tr').length === 0
Chris@17:           ) {
Chris@17:             $this.removeClass('region-populated').addClass('region-empty');
Chris@17:           }
Chris@17:           // This region has become populated.
Chris@17:           else if ($this.is('.region-empty')) {
Chris@17:             $this.removeClass('region-empty').addClass('region-populated');
Chris@17:           }
Chris@17:         });
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Triggers Ajax refresh of selected rows.
Chris@0:      *
Chris@0:      * The 'format type' selects can trigger a series of changes in child rows.
Chris@0:      * The #ajax behavior is therefore not attached directly to the selects, but
Chris@0:      * triggered manually through a hidden #ajax 'Refresh' button.
Chris@0:      *
Chris@0:      * @param {object} rows
Chris@0:      *   A hash object, whose keys are the names of the rows to refresh (they
Chris@0:      *   will receive the 'ajax-new-content' effect on the server side), and
Chris@0:      *   whose values are the DOM element in the row that should get an Ajax
Chris@0:      *   throbber.
Chris@0:      */
Chris@0:     AJAXRefreshRows(rows) {
Chris@0:       // Separate keys and values.
Chris@0:       const rowNames = [];
Chris@0:       const ajaxElements = [];
Chris@17:       Object.keys(rows || {}).forEach(rowName => {
Chris@14:         rowNames.push(rowName);
Chris@14:         ajaxElements.push(rows[rowName]);
Chris@14:       });
Chris@0: 
Chris@0:       if (rowNames.length) {
Chris@0:         // Add a throbber next each of the ajaxElements.
Chris@17:         $(ajaxElements).after(Drupal.theme.ajaxProgressThrobber());
Chris@0: 
Chris@0:         // Fire the Ajax update.
Chris@0:         $('input[name=refresh_rows]').val(rowNames.join(' '));
Chris@0:         $('input[data-drupal-selector="edit-refresh"]').trigger('mousedown');
Chris@0: 
Chris@0:         // Disabled elements do not appear in POST ajax data, so we mark the
Chris@0:         // elements disabled only after firing the request.
Chris@0:         $(ajaxElements).prop('disabled', true);
Chris@0:       }
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * Row handlers for the 'Manage display' screen.
Chris@0:    *
Chris@0:    * @namespace
Chris@0:    */
Chris@0:   Drupal.fieldUIDisplayOverview = {};
Chris@0: 
Chris@0:   /**
Chris@0:    * Constructor for a 'field' row handler.
Chris@0:    *
Chris@0:    * This handler is used for both fields and 'extra fields' rows.
Chris@0:    *
Chris@0:    * @constructor
Chris@0:    *
Chris@0:    * @param {HTMLTableRowElement} row
Chris@0:    *   The row DOM element.
Chris@0:    * @param {object} data
Chris@0:    *   Additional data to be populated in the constructed object.
Chris@0:    *
Chris@0:    * @return {Drupal.fieldUIDisplayOverview.field}
Chris@0:    *   The field row handler constructed.
Chris@0:    */
Chris@17:   Drupal.fieldUIDisplayOverview.field = function(row, data) {
Chris@0:     this.row = row;
Chris@0:     this.name = data.name;
Chris@0:     this.region = data.region;
Chris@0:     this.tableDrag = data.tableDrag;
Chris@0:     this.defaultPlugin = data.defaultPlugin;
Chris@0: 
Chris@0:     // Attach change listener to the 'plugin type' select.
Chris@0:     this.$pluginSelect = $(row).find('.field-plugin-type');
Chris@0:     this.$pluginSelect.on('change', Drupal.fieldUIOverview.onChange);
Chris@0: 
Chris@0:     // Attach change listener to the 'region' select.
Chris@0:     this.$regionSelect = $(row).find('select.field-region');
Chris@0:     this.$regionSelect.on('change', Drupal.fieldUIOverview.onChange);
Chris@0: 
Chris@0:     return this;
Chris@0:   };
Chris@0: 
Chris@0:   Drupal.fieldUIDisplayOverview.field.prototype = {
Chris@0:     /**
Chris@0:      * Returns the region corresponding to the current form values of the row.
Chris@0:      *
Chris@0:      * @return {string}
Chris@0:      *   Either 'hidden' or 'content'.
Chris@0:      */
Chris@0:     getRegion() {
Chris@0:       return this.$regionSelect.val();
Chris@0:     },
Chris@0: 
Chris@0:     /**
Chris@0:      * Reacts to a row being changed regions.
Chris@0:      *
Chris@0:      * This function is called when the row is moved to a different region, as
Chris@0:      * a
Chris@0:      * result of either :
Chris@0:      * - a drag-and-drop action (the row's form elements then probably need to
Chris@0:      * be updated accordingly)
Chris@0:      * - user input in one of the form elements watched by the
Chris@0:      *   {@link Drupal.fieldUIOverview.onChange} change listener.
Chris@0:      *
Chris@0:      * @param {string} region
Chris@0:      *   The name of the new region for the row.
Chris@0:      *
Chris@0:      * @return {object}
Chris@0:      *   A hash object indicating which rows should be Ajax-updated as a result
Chris@0:      *   of the change, in the format expected by
Chris@0:      *   {@link Drupal.fieldUIOverview.AJAXRefreshRows}.
Chris@0:      */
Chris@0:     regionChange(region) {
Chris@0:       // Replace dashes with underscores.
Chris@0:       region = region.replace(/-/g, '_');
Chris@0: 
Chris@0:       // Set the region of the select list.
Chris@0:       this.$regionSelect.val(region);
Chris@0: 
Chris@17:       // Restore the formatter back to the default formatter only if it was
Chris@17:       // disabled previously. Pseudo-fields do not have default formatters,
Chris@17:       // we just return to 'visible' for those.
Chris@17:       if (this.region === 'hidden') {
Chris@17:         const value =
Chris@17:           typeof this.defaultPlugin !== 'undefined'
Chris@17:             ? this.defaultPlugin
Chris@17:             : this.$pluginSelect.find('option').val();
Chris@0: 
Chris@17:         if (typeof value !== 'undefined') {
Chris@17:           this.$pluginSelect.val(value);
Chris@17:         }
Chris@0:       }
Chris@0: 
Chris@0:       const refreshRows = {};
Chris@0:       refreshRows[this.name] = this.$pluginSelect.get(0);
Chris@0: 
Chris@0:       return refreshRows;
Chris@0:     },
Chris@0:   };
Chris@17: })(jQuery, Drupal, drupalSettings);