devel_wizard-2.x-dev/js/spell/layout.js

(function (document, Drupal, once) {

  /**
   * @todo This is the same as image_effect.js.
   *
   * @type {{attach: Drupal.behaviors.develWizardSpellLayout.attach}}
   */
  Drupal.behaviors.develWizardSpellLayout = {
    attach: function () {
      const sourceSelector = Drupal.develWizardSpellLayout.wrapperSelector
        + ' '
        + Drupal.develWizardSpellLayout.fieldPrefixSourceSelector;
      once('develWizardSpellLayout', sourceSelector)
        .forEach(
          /**
           * @param {HTMLInputElement} element
           */
          function (element) {
            element.addEventListener('input', Drupal.develWizardSpellLayout.onModuleInput);
            element.addEventListener('change', Drupal.develWizardSpellLayout.onModuleInput);
          },
        );
    },
  };

  Drupal.develWizardSpellLayout = Drupal.develWizardSpellLayout || {};

  Drupal.develWizardSpellLayout.wrapperSelector = '.dws--layout';

  /**
   * Inside the wrapper.
   *
   * @type {string}
   */
  Drupal.develWizardSpellLayout.fieldPrefixSourceSelector = '*[name*="[extension][machineName]"]';

  /**
   * Inside the wrapper.
   *
   * @type {string}
   */
  Drupal.develWizardSpellLayout.fieldPrefixTargetsSelector = '*[name*="[layout][id]"]';

  /**
   * @param {InputEvent} event
   */
  Drupal.develWizardSpellLayout.onModuleInput = function (event) {
    const moduleMachineName = event.currentTarget.value;
    const wrapperElement = event.currentTarget.closest(Drupal.develWizardSpellLayout.wrapperSelector);
    const targetInputElements = wrapperElement.querySelectorAll(Drupal.develWizardSpellLayout.fieldPrefixTargetsSelector)
    /**
     * @param {HTMLInputElement} targetInputElement
     */
    targetInputElements.forEach(function (targetInputElement) {
      targetInputElement
        .closest('.form-item')
        .querySelector('.form-item__prefix')
        .textContent = `${moduleMachineName}_`;
    });
  };

})(document, Drupal, once);