Initial Drupal 11 with DDEV setup

web/core/modules/block/js/block.admin.js

@@ -0,0 +1,105 @@
+/**
+ * @file
+ * Block admin behaviors.
+ */
+
+(function ($, Drupal, debounce, once) {
+  /**
+   * Filters the block list by a text input search string.
+   *
+   * The text input will have the selector `input.block-filter-text`.
+   *
+   * The target element to do searching in will be in the selector
+   * `input.block-filter-text[data-element]`
+   *
+   * The text source where the text should be found will have the selector
+   * `.block-filter-text-source`
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the behavior for the block filtering.
+   */
+  Drupal.behaviors.blockFilterByText = {
+    attach(context, settings) {
+      const $input = $(once('block-filter-text', 'input.block-filter-text'));
+      const $table = $($input.attr('data-element'));
+      let $filterRows;
+
+      /**
+       * Filters the block list.
+       *
+       * @param {jQuery.Event} e
+       *   The jQuery event for the keyup event that triggered the filter.
+       */
+      function filterBlockList(e) {
+        const query = e.target.value.toLowerCase();
+
+        /**
+         * Shows or hides the block entry based on the query.
+         *
+         * @param {number} index
+         *   The index in the loop, as provided by `jQuery.each`
+         * @param {HTMLElement} label
+         *   The label of the block.
+         */
+        function toggleBlockEntry(index, label) {
+          const $row = $(label).parent().parent();
+          const textMatch = label.textContent.toLowerCase().includes(query);
+          $row.toggle(textMatch);
+        }
+
+        // Filter if the length of the query is at least 2 characters.
+        if (query.length >= 2) {
+          $filterRows.each(toggleBlockEntry);
+          Drupal.announce(
+            Drupal.formatPlural(
+              $table.find('tr:visible').length - 1,
+              '1 block is available in the modified list.',
+              '@count blocks are available in the modified list.',
+            ),
+          );
+        } else {
+          $filterRows.each(function (index) {
+            $(this).parent().parent().show();
+          });
+        }
+      }
+
+      if ($table.length) {
+        $filterRows = $table.find('div.block-filter-text-source');
+        $input.on('keyup', debounce(filterBlockList, 200));
+      }
+    },
+  };
+
+  /**
+   * Highlights the block that was just placed into the block listing.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the behavior for the block placement highlighting.
+   */
+  Drupal.behaviors.blockHighlightPlacement = {
+    attach(context, settings) {
+      // Ensure that the block we are attempting to scroll to actually exists.
+      if (settings.blockPlacement && $('.js-block-placed').length) {
+        once(
+          'block-highlight',
+          '[data-drupal-selector="edit-blocks"]',
+          context,
+        ).forEach((container) => {
+          const $container = $(container);
+          window.scrollTo({
+            top:
+              $('.js-block-placed').offset().top -
+              $container.offset().top +
+              $container.scrollTop(),
+            behavior: 'smooth',
+          });
+        });
+      }
+    },
+  };
+})(jQuery, Drupal, Drupal.debounce, once);

web/core/modules/block/js/block.js

@@ -0,0 +1,258 @@
+/**
+ * @file
+ * Block behaviors.
+ */
+
+(function ($, window, Drupal, once) {
+  /**
+   * Provide the summary information for the block settings vertical tabs.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the behavior for the block settings summaries.
+   */
+  Drupal.behaviors.blockSettingsSummary = {
+    attach() {
+      // The drupalSetSummary method required for this behavior is not available
+      // on the Blocks administration page, so we need to make sure this
+      // behavior is processed only if drupalSetSummary is defined.
+      if (typeof $.fn.drupalSetSummary === 'undefined') {
+        return;
+      }
+
+      /**
+       * Create a summary for checkboxes in the provided context.
+       *
+       * @param {Document|HTMLElement} context
+       *   A context where one would find checkboxes to summarize.
+       *
+       * @return {string}
+       *   A string with the summary.
+       */
+      function checkboxesSummary(context) {
+        const values = [];
+        const $checkboxes = $(context).find(
+          'input[type="checkbox"]:checked + label',
+        );
+        const il = $checkboxes.length;
+        for (let i = 0; i < il; i++) {
+          values.push($($checkboxes[i]).html());
+        }
+        if (!values.length) {
+          values.push(Drupal.t('Not restricted'));
+        }
+        return values.join(', ');
+      }
+
+      $(
+        '[data-drupal-selector="edit-visibility-node-type"], [data-drupal-selector="edit-visibility-entity-bundlenode"], [data-drupal-selector="edit-visibility-language"], [data-drupal-selector="edit-visibility-user-role"], [data-drupal-selector="edit-visibility-response-status"]',
+      ).drupalSetSummary(checkboxesSummary);
+
+      $(
+        '[data-drupal-selector="edit-visibility-request-path"]',
+      ).drupalSetSummary((context) => {
+        const $pages = $(context).find(
+          'textarea[name="visibility[request_path][pages]"]',
+        );
+        if (!$pages.length || !$pages[0].value) {
+          return Drupal.t('Not restricted');
+        }
+
+        return Drupal.t('Restricted to certain pages');
+      });
+    },
+  };
+
+  /**
+   * Move a block in the blocks table between regions via select list.
+   *
+   * This behavior is dependent on the tableDrag behavior, since it uses the
+   * objects initialized in that behavior to update the row.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the tableDrag behavior for blocks in block administration.
+   */
+  Drupal.behaviors.blockDrag = {
+    attach(context, settings) {
+      // tableDrag is required and we should be on the blocks admin page.
+      if (typeof Drupal?.tableDrag?.blocks === 'undefined') {
+        return;
+      }
+
+      /**
+       * Function to check empty regions and toggle classes based on this.
+       *
+       * @param {jQuery} table
+       *   The jQuery object representing the table to inspect.
+       * @param {Drupal.tableDrag.row} rowObject
+       *   Drupal table drag row dropped.
+       */
+      function checkEmptyRegions(table, 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.element) {
+            // 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').length === 0 ||
+            !$this.next('tr')[0].matches('.draggable')
+          ) {
+            $this.removeClass('region-populated').addClass('region-empty');
+          }
+          // This region has become populated.
+          else if (this.matches('.region-empty')) {
+            $this.removeClass('region-empty').addClass('region-populated');
+          }
+        });
+      }
+
+      /**
+       * Function to update the last placed row with the correct classes.
+       *
+       * @param {jQuery} table
+       *   The jQuery object representing the table to inspect.
+       * @param {Drupal.tableDrag.row} rowObject
+       *   Drupal table drag row dropped.
+       */
+      function updateLastPlaced(table, rowObject) {
+        // Remove the color-success class from new block if applicable.
+        table.find('.color-success').removeClass('color-success');
+        const $rowObject = $(rowObject);
+        if (!rowObject.element.matches('.drag-previous')) {
+          table.find('.drag-previous').removeClass('drag-previous');
+          $rowObject.addClass('drag-previous');
+        }
+      }
+
+      /**
+       * Update block weights in the given region.
+       *
+       * @param {jQuery} table
+       *   Table with draggable items.
+       * @param {string} region
+       *   Machine name of region containing blocks to update.
+       */
+      function updateBlockWeights(table, region) {
+        // Calculate minimum weight.
+        let weight = -Math.round(table.find('.draggable').length / 2);
+        // Update the block weights.
+        table
+          .find(`.region-${region}-message`)
+          .nextUntil('.region-title')
+          .find('select.block-weight')
+          .each(function () {
+            // Increment the weight before assigning it to prevent using the
+            // absolute minimum available weight. This way we always have an
+            // unused upper and lower bound, which makes manually setting the
+            // weights easier for users who prefer to do it that way.
+            this.value = ++weight;
+          });
+      }
+
+      const table = $('#blocks');
+      // Get the blocks tableDrag object.
+      const tableDrag = Drupal.tableDrag.blocks;
+      // Add a handler for when a row is swapped, update empty regions.
+      tableDrag.row.prototype.onSwap = function (swappedRow) {
+        checkEmptyRegions(table, this);
+        updateLastPlaced(table, this);
+      };
+
+      // Add a handler so when a row is dropped, update fields dropped into
+      // new regions.
+      tableDrag.onDrop = function () {
+        const dragObject = this;
+        const $rowElement = $(dragObject.rowObject.element);
+        // Use "region-message" row instead of "region" row because
+        // "region-{region_name}-message" is less prone to regexp match errors.
+        const regionRow = $rowElement.prevAll('tr.region-message').get(0);
+        const regionName = regionRow.className.replace(
+          /([^ ]+[ ]+)*region-([^ ]+)-message([ ]+[^ ]+)*/,
+          '$2',
+        );
+        const regionField = $rowElement.find('select.block-region-select');
+        // Check whether the newly picked region is available for this block.
+        if (regionField.find(`option[value=${regionName}]`).length === 0) {
+          // If not, alert the user and keep the block in its old region
+          // setting.
+          window.alert(Drupal.t('The block cannot be placed in this region.'));
+          // Simulate that there was a selected element change, so the row is
+          // put back to from where the user tried to drag it.
+          regionField.trigger('change');
+        }
+
+        // Update region and weight fields if the region has been changed.
+        if (!regionField[0].matches(`.block-region-${regionName}`)) {
+          const weightField = $rowElement.find('select.block-weight');
+          const oldRegionName = weightField[0].className.replace(
+            /([^ ]+[ ]+)*block-weight-([^ ]+)([ ]+[^ ]+)*/,
+            '$2',
+          );
+          regionField
+            .removeClass(`block-region-${oldRegionName}`)
+            .addClass(`block-region-${regionName}`);
+          weightField
+            .removeClass(`block-weight-${oldRegionName}`)
+            .addClass(`block-weight-${regionName}`);
+          regionField[0].value = regionName;
+        }
+
+        updateBlockWeights(table, regionName);
+      };
+
+      // Add the behavior to each region select list.
+      $(once('block-region-select', 'select.block-region-select', context)).on(
+        'change',
+        function (event) {
+          // Make our new row and select field.
+          const row = $(this).closest('tr');
+          const select = $(this);
+          // Find the correct region and insert the row as the last in the
+          // region.
+          tableDrag.rowObject = new tableDrag.row(row[0]);
+          const regionMessage = table.find(
+            `.region-${select[0].value}-message`,
+          );
+          const regionItems = regionMessage.nextUntil(
+            '.region-message, .region-title',
+          );
+          if (regionItems.length) {
+            regionItems.last().after(row);
+          }
+          // We found that regionMessage is the last row.
+          else {
+            regionMessage.after(row);
+          }
+          updateBlockWeights(table, select[0].value);
+          // Modify empty regions with added or removed fields.
+          checkEmptyRegions(table, tableDrag.rowObject);
+          // Update last placed block indication.
+          updateLastPlaced(table, tableDrag.rowObject);
+          // Show unsaved changes warning.
+          if (!tableDrag.changed) {
+            $(Drupal.theme('tableDragChangedWarning'))
+              .insertBefore(tableDrag.table)
+              .hide()
+              .fadeIn('slow');
+            tableDrag.changed = true;
+          }
+          // Remove focus from selectbox.
+          select.trigger('blur');
+        },
+      );
+    },
+  };
+})(jQuery, window, Drupal, once);