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

(function (document, Drupal, once) {

  Drupal.behaviors.develWizardSpellModule = {
    attach: function () {
      once('develWizardSpellModule', '.devel-wizard-spell-subform-devel-wizard-module input')
        .forEach(
          /**
           * @param {HTMLInputElement} element
           */
          function (element) {
            element.addEventListener('input', Drupal.develWizardSpellModule.onInput);
            element.addEventListener('change', Drupal.develWizardSpellModule.onInput);
          },
        );
    },
  };

  Drupal.develWizardSpellModule = Drupal.develWizardSpellModule || {};

  /**
   * @param {InputEvent} event
   */
  Drupal.develWizardSpellModule.onInput = function (event) {
    const wrapperElement = event.currentTarget.closest('.devel-wizard-spell-subform-devel-wizard-module');

    // @todo DRY.
    const baseName = wrapperElement
      .querySelector('input[name$="[type]"]')
      .getAttribute('name')
      .replace(/\[type]$/g, '');

    const typeElement = wrapperElement.querySelector(`input[name="${baseName}[type]"]:checked`);
    const type = typeElement.value;

    const subModuleOfElement = wrapperElement.querySelector(`input[name="${baseName}[sub_module_of]"]`);
    const subModuleOf = subModuleOfElement.value || '<parent>';

    const machineNameElement = wrapperElement.querySelector('input[name$="[machine_name]"]');
    const machineName = machineNameElement.value || '<name>';

    const parentDirElement = wrapperElement.querySelector('input[name$="[parent_dir]"]');
    const parentDirWrapperElement = parentDirElement.closest('.form-item');
    parentDirElement.setAttribute(
      'placeholder',
      Drupal.develWizardSpellModule.getParentDirByType(type, subModuleOf),
    );
    parentDirWrapperElement
      .querySelector('.form-item__suffix > code')
      .textContent = `/${machineName}/${machineName}.info.yml`;
  };

  /**
   * @param {String} type
   * @param {String} subModuleOf
   *
   * @return {String}
   */
  Drupal.develWizardSpellModule.getParentDirByType = function (type, subModuleOf) {
    switch (type) {
      case 'custom':
        return 'modules/custom';

      case 'standalone':
        return '../../../drupal';

      case 'sub_module':
        return `modules/(custom|contrib)/${subModuleOf}/modules`;
    }

    return '';
  }

})(document, Drupal, once);