gridstack-8.x-2.5/js/admin/gridstack.admin.layout.js

/**
 * @file
 * Provides GridStack admin utilities for Layout Builder.
 */

(function ($, Drupal) {

  'use strict';

  /**
   * Cleans up region markers.
   */
  function gsCleanUp() {
    var $active = $('.is-gs-region-active');
    if ($active.length) {
      $('body').removeAttr('data-gs-region');
      $('.is-gs-region-active').removeClass('is-gs-region-active');
    }
  }

  /**
   * GridStack functions.
   *
   * @param {int} i
   *   The index of the current element.
   * @param {HTMLElement} elm
   *   The GridStack HTML element.
   */
  function gsAction(i, elm) {
    var $elm = $(elm);
    var regionId = elm.dataset.gsRegion;
    var $config = $elm.closest('.is-gs-lb').parent().find('> .layout-builder__link--configure');

    if ($config.length) {
      var $clone = $config.clone();
      if (!$elm.find('> .layout-builder__link--configure').length) {
        $elm.append($clone[0]);
      }

      var $link = $('> .layout-builder__link--configure', elm);
      Drupal.attachBehaviors($link[0]);

      $link.addClass('layout-builder__link--add gridstack__action--add-classes');
      var href = $link.attr('href');
      var part = href.indexOf('?') > 0 ? '&gs=' : '?gs=';
      href = href + part + regionId;
      $link.attr('href', href).text(Drupal.t('Classes'));

      var toggleRegion = function (e) {
        gsCleanUp();

        var $btn = $(e.target);
        $btn.closest('.gridstack__box').addClass('is-gs-region-active');
        $('body').attr('data-gs-region', regionId);
      };

      $elm.on('mousedown.gsRegion', '.gridstack__action--add-classes', toggleRegion);
    }
  }

  $(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
    var activeRid = $('body').attr('data-gs-region');
    if (activeRid !== 'undefined') {
      var activeRegion = '[data-gs-region="' + activeRid + '"]';
      var $activeRegion = $element.find(activeRegion);
      if ($activeRegion.length) {
        $activeRegion.attr('open', true);
        $('.is-gs-main-settings', $element).attr('open', false);
        $element.find('[data-gs-region]:not(' + activeRegion + ')').addClass('visually-hidden');
        $element.find('.is-gs-aside').addClass('visually-hidden');
      }
    }
  });

  $(window).on('dialog:beforeclose dialog:afterclose', gsCleanUp);

  /**
   * Attaches gridstack behavior to HTML element .gridstack.is-gs-lb.
   *
   * @type {Drupal~behavior}
   */
  Drupal.behaviors.gridStackAdminLayout = {
    attach: function (context) {
      $('.layout-builder__link--configure:not(.gridstack__action--add-classes)', context).once('gsCleanUp').on('mousedown.gsCleanUp', gsCleanUp);
      $('.gridstack__action', context).once('gsAction').each(gsAction);
    }
  };

})(jQuery, Drupal);