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

Open in your IDE?
  1. class Dropdown {
  2.     EVENTS = {
  3.         ITEM_CLICK: 'itemClick',
  4.     };
  6.     options = {
  7.         preventDropdownClose: false,
  8.     };
  10.     constructor(dropdownElement, options = null) {
  11.         this.options = { ...this.options, ...options };
  13.         this.dropdownElement = dropdownElement;
  14.         this.dropdownButton = $(dropdownElement).find('.dropdown-toggle')[0];
  16.         this.eventDispatcher = new EventDispatcher();
  17.         this._addEventListeners();
  19.         if (this.options.preventDropdownClose) {
  20.                 this._preventDropdownClose();
  21.         }
  22.     }
  24.     _preventDropdownClose() {
  25.         const dropdownMenu = $(this.dropdownElement).find('.dropdown-menu');
  27.         dropdownMenu.on('click', function(e) {
  28.             e.stopPropagation();
  29.         });
  30.     }
  32.     setDropdownButtonText(text) {
  33.         if (this.dropdownButton) {
  34.             this.dropdownButton.textContent = text;
  35.         }
  36.     }
  38.     getDropdownButtonText() {
  39.         return this.dropdownButton ? this.dropdownButton.textContent : '';
  40.     }
  42.     onDropdownItemClick(dropdownItem) {
  43.         const selectedText = $(dropdownItem)[0].innerText;
  44.         const selectedId = $(dropdownItem).data('list-item-id');
  46.         let result = this.eventDispatcher.emit(this.EVENTS.ITEM_CLICK, {
  47.             dropdownItem,
  48.             selectedText,
  49.             selectedId,
  50.             dropdownElement: this.dropdownElement,
  51.         });
  53.         if (result.defaultPrevented) {
  54.             return;
  55.         }
  57.         const dropdownButton = $(this.dropdownElement).find('.dropdown-toggle');
  58.         const selectElement = $(this.dropdownElement).find('select');
  60.         dropdownButton.attr('data-selected-id', selectedId);
  61.         dropdownButton.html(dropdownButton.is('.form-select') ? selectedText
  62.             : selectedText.replace(/\n/g, '<br>'));
  63.         selectElement.val(selectedId).trigger('change');
  64.     }
  66.     _addEventListeners() {
  67.         const dropdownItems = $(this.dropdownElement).find('.dropdown-item');
  68.         const me = this;
  70.         dropdownItems.click(function() {
  71.             me.onDropdownItemClick($(this)[0]);
  72.         });
  73.     }
  75.     createNewDropDownItemsByData(itemsData) {
  76.         const dropdownMenu = $(this.dropdownElement).find('.dropdown-menu');
  77.         dropdownMenu.empty();
  79.         itemsData.forEach(itemData => {
  80.             const itemElement = $('<li></li>');
  81.             const linkElement = $('<a></a>')
  82.                 .addClass('dropdown-item')
  83.                 .attr('href', 'javascript:void(0)')
  84.                 .attr('data-list-item-id', itemData.listItemId)
  85.                 .attr('data-option-value', itemData.optionValue)
  86.                 .html(itemData.optionValue.toString().replace(/\n/g, '<br>'));
  87.             itemElement.append(linkElement);
  89.             dropdownMenu.append(itemElement);
  90.         });
  92.         // Re-add event listeners to new items
  93.         this._addEventListeners();
  94.     }
  96.     getDropDownItemValue(item) {
  97.         let optionValue = $(item).data('option-value');
  98.         if (!optionValue) {
  99.             optionValue = $(item)[0].innerText;
  100.             if (optionValue) {
  101.                 optionValue = optionValue.trim();
  102.             }
  103.         }
  104.         return optionValue;
  105.     }
  107.     getDropDownItemsData() {
  108.         const itemsData = [];
  109.         const dropdownItems = $(this.dropdownElement).find('.dropdown-item');
  111.         dropdownItems.each((index, item) => {
  112.             const itemId = $(item).data('list-item-id');
  114.             let optionValue = this.getDropDownItemValue(item);
  116.             itemsData.push({
  117.                 listItemId: itemId,
  118.                 optionValue: optionValue
  119.             });
  120.         });
  122.         return itemsData;
  123.     }
  125.     getSelectedItem() {
  126.         const selectedId = $(this.dropdownElement).find('.dropdown-toggle').attr('data-selected-id');
  127.         const dropdownItems = $(this.dropdownElement).find('.dropdown-item');
  129.         let selectedItem = null;
  131.         dropdownItems.each((index, item) => {
  132.             const itemId = $(item).data('list-item-id');
  133.             if (itemId.toString() === selectedId.toString()) {
  134.                 selectedItem = item;
  135.                 return false; // Break the loop
  136.             }
  137.         });
  139.         return selectedItem;
  140.     }
  142.     getSelectedItemValue() {
  143.         let item = this.getSelectedItem();
  144.         return this.getDropDownItemValue(item);
  145.     }
  147.     getSelectedItemId() {
  148.         return $(this.dropdownElement).find('.dropdown-toggle').attr('data-selected-id');
  149.     }
  150. }