templates/js/library/dropdown_with_textarea/dropdown_with_textarea.js.twig line 1

Open in your IDE?
  1. class DropdownWithTextarea extends Dropdown {
  2.     EVENTS = {
  3.         TEXTAREA_VALUE_CHANGED: 'textareaValueChanged'
  4.     };
  6.     constructor(containerElement, options = null) {
  7.         const dropdownElement = $(containerElement).find('.dropdown')[0];
  8.         super(dropdownElement, options);
  10.         this.containerElement = containerElement;
  11.         this.textareaElement = $(containerElement).find('textarea')[0];
  12.         this.showTextareaForItemId = $(containerElement).data('show-textarea-for-item-id');
  13.         this.emptyTextareaForItemId = $(containerElement).data('empty-textarea-for-item-id');
  15.         // Слушатель изменений textarea (реагирует на ввод и изменения)
  16.         if (this.textareaElement) {
  17.             $(this.textareaElement).on('input change', (e) => {
  18.                 const value = $(this.textareaElement).val();
  20.                 this.eventDispatcher.emit(this.EVENTS.TEXTAREA_VALUE_CHANGED, {
  21.                     value: value,
  22.                     containerElement: this.containerElement,
  23.                     textareaElement: this.textareaElement,
  24.                     originalEvent: e
  25.                 });
  26.             });
  27.         }
  28.     }
  30.     onDropdownItemClick(dropdownItem) {
  31.         const itemId = $(dropdownItem).data('list-item-id');
  32.         let optionValue = null;
  34.         // Показываем/скрываем textarea в зависимости от выбранного элемента
  35.         if (itemId === this.showTextareaForItemId) {
  36.             $(this.textareaElement).show();
  37.         } else if (itemId === this.emptyTextareaForItemId) {
  38.             $(this.textareaElement).hide();
  39.             optionValue = '';
  40.         } else {
  41.             $(this.textareaElement).hide();
  43.             optionValue = $(dropdownItem).data('option-value');
  44.             if (!optionValue) {
  45.                 optionValue = $(dropdownItem)[0].innerText;
  46.                 if (optionValue) {
  47.                     optionValue = optionValue.trim();
  48.                 }
  49.             }
  50.         }
  52.         // Заполняем textarea если есть значение
  53.         if (optionValue !== undefined && optionValue !== null) {
  54.             $(this.textareaElement).val(optionValue);
  56.             // Уведомляем слушателей о программном изменении значения textarea
  57.             this.eventDispatcher.emit(this.EVENTS.TEXTAREA_VALUE_CHANGED, {
  58.                 value: optionValue,
  59.                 containerElement: this.containerElement,
  60.                 textareaElement: this.textareaElement,
  61.                 triggeredBy: 'dropdownItemClick'
  62.             });
  63.         }
  65.         super.onDropdownItemClick(dropdownItem);
  66.     }
  68.     getDropDownItemsData() {
  69.         let itemsData = super.getDropDownItemsData();
  71.         itemsData = itemsData.filter(item => {
  72.             return item.listItemId !== this.showTextareaForItemId && item.listItemId !== this.emptyTextareaForItemId;
  73.         });
  75.         return itemsData;
  76.     }
  78.     getAllDropDownItemsData() {
  79.         return super.getDropDownItemsData();
  80.     }
  82.     isItemSelected() {
  83.         const selectedId = $(this.dropdownElement).find('.dropdown-toggle').attr('data-selected-id');
  85.         return !(selectedId === this.showTextareaForItemId || selectedId === this.emptyTextareaForItemId);
  86.     }
  88.     isManualInput() {
  89.         const selectedId = $(this.dropdownElement).find('.dropdown-toggle').attr('data-selected-id');
  91.         return selectedId === this.showTextareaForItemId;
  92.     }
  94.     getTextareaValue() {
  95.         return $(this.textareaElement).val();
  96.     }
  97. }