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

Open in your IDE?
  1. class Dropdown {
  2.     EVENTS = {
  3.         ITEM_CLICK: 'itemClick',
  4.         ON_DROPDOWN_SHOW: 'onDropdownShow',
  5.         ON_DROPDOWN_HIDE: 'onDropdownHide',
  6.     };
  8.     options = {
  9.         preventDropdownClose: false,
  10.     };
  12.     constructor(dropdownElement, options = null) {
  13.         this.options = { ...this.options, ...options };
  15.         this.dropdownElement = dropdownElement;
  16.         this.dropdownButton = $(dropdownElement).find('.dropdown-toggle')[0];
  18.         this.eventDispatcher = new EventDispatcher();
  19.         this._addEventListeners();
  21.         this.options.preventDropdownClose = this.options.preventDropdownClose || $(this.dropdownElement).is('[data-prevent-dropdown-close]');
  22.         if (this.options.preventDropdownClose) {
  23.                 this._preventDropdownClose();
  24.         }
  25.     }
  27.     _preventDropdownClose() {
  28.         const dropdownMenu = $(this.dropdownElement).find('.dropdown-menu');
  30.         dropdownMenu.on('click', function(e) {
  31.             e.stopPropagation();
  32.         });
  33.     }
  35.     setDropdownButtonText(text) {
  36.         if (this.dropdownButton) {
  37.             this.dropdownButton.textContent = text;
  38.         }
  39.     }
  41.     getDropdownButtonText() {
  42.         return this.dropdownButton ? this.dropdownButton.textContent : '';
  43.     }
  45.     onDropdownItemClick(dropdownItem) {
  46.         const selectedText = $(dropdownItem)[0].innerText;
  47.         const selectedId = $(dropdownItem).data('list-item-id');
  49.         let result = this.eventDispatcher.emit(this.EVENTS.ITEM_CLICK, {
  50.             dropdownItem,
  51.             selectedText,
  52.             selectedId,
  53.             dropdownElement: this.dropdownElement,
  54.         });
  56.         if (result.defaultPrevented) {
  57.             return;
  58.         }
  60.         const dropdownButton = $(this.dropdownElement).find('.dropdown-toggle');
  61.         const selectElement = $(this.dropdownElement).find('select');
  63.         dropdownButton.attr('data-selected-id', selectedId);
  64.         dropdownButton.html(dropdownButton.is('.form-select') ? selectedText
  65.             : selectedText.replace(/\n/g, '<br>'));
  66.         selectElement.val(selectedId).trigger('change');
  67.     }
  69.     _addEventListeners() {
  70.         const dropdownItems = $(this.dropdownElement).find('.dropdown-item');
  71.         const me = this;
  73.         dropdownItems.click(function() {
  74.             me.onDropdownItemClick($(this)[0]);
  75.         });
  77.         $(this.dropdownElement).on('show.bs.dropdown', function() {
  78.             me.eventDispatcher.emit(me.EVENTS.ON_DROPDOWN_SHOW, {
  79.                 dropdownElement: me.dropdownElement,
  80.             });
  81.         });
  83.         $(this.dropdownElement).on('hide.bs.dropdown', function() {
  84.             me.eventDispatcher.emit(me.EVENTS.ON_DROPDOWN_HIDE, {
  85.                 dropdownElement: me.dropdownElement,
  86.             });
  87.         });
  88.     }
  90.     createNewDropDownItemsByData(itemsData) {
  91.         const dropdownMenu = $(this.dropdownElement).find('.dropdown-menu');
  92.         dropdownMenu.empty();
  94.         itemsData.forEach(itemData => {
  95.             const itemElement = $('<li></li>');
  96.             const linkElement = $('<a></a>')
  97.                 .addClass('dropdown-item')
  98.                 .attr('href', 'javascript:void(0)')
  99.                 .attr('data-list-item-id', itemData.listItemId)
  100.                 .attr('data-option-value', itemData.optionValue)
  101.                 .html(itemData.optionValue.toString().replace(/\n/g, '<br>'));
  102.             itemElement.append(linkElement);
  104.             dropdownMenu.append(itemElement);
  105.         });
  107.         // Re-add event listeners to new items
  108.         this._addEventListeners();
  109.     }
  111.     getDropDownItemValue(item) {
  112.         let optionValue = $(item).data('option-value');
  113.         if (!optionValue) {
  114.             optionValue = $(item)[0].innerText;
  115.             if (optionValue) {
  116.                 optionValue = optionValue.trim();
  117.             }
  118.         }
  119.         return optionValue;
  120.     }
  122.     getDropDownItemsData() {
  123.         const itemsData = [];
  124.         const dropdownItems = $(this.dropdownElement).find('.dropdown-item');
  126.         dropdownItems.each((index, item) => {
  127.             const itemId = $(item).data('list-item-id');
  129.             let optionValue = this.getDropDownItemValue(item);
  131.             itemsData.push({
  132.                 listItemId: itemId,
  133.                 optionValue: optionValue
  134.             });
  135.         });
  137.         return itemsData;
  138.     }
  140.     getSelectedItem() {
  141.         const selectedId = $(this.dropdownElement).find('.dropdown-toggle').attr('data-selected-id');
  142.         const dropdownItems = $(this.dropdownElement).find('.dropdown-item');
  144.         let selectedItem = null;
  146.         dropdownItems.each((index, item) => {
  147.             const itemId = $(item).data('list-item-id');
  148.             if (itemId.toString() === selectedId.toString()) {
  149.                 selectedItem = item;
  150.                 return false; // Break the loop
  151.             }
  152.         });
  154.         return selectedItem;
  155.     }
  157.     getSelectedItemValue() {
  158.         let item = this.getSelectedItem();
  159.         return this.getDropDownItemValue(item);
  160.     }
  162.     getSelectedItemId() {
  163.         return $(this.dropdownElement).find('.dropdown-toggle').attr('data-selected-id');
  164.     }
  165. }