https://www.herningbib.dk/modules/contrib/facets/js/dropdown-widget.js?tm7zx0

1/**
2 * @file
3 * Transforms links into a dropdown list.
4 */
5
6(function ($, Drupal, once) {
7  Drupal.facets = Drupal.facets || {};
8  Drupal.behaviors.facetsDropdownWidget = {
9    attach: (context, settings) => {
10      Drupal.facets.makeDropdown(context, settings);
11    },
12  };
13
14  /**
15   * Turns all facet links into a dropdown with options for every link.
16   *
17   * @param {object} context
18   *   Context.
19   * @param {object} settings
20   *   Settings.
21   */
22  Drupal.facets.makeDropdown = function (context, settings) {
23    // Find all dropdown facet links and turn them into an option.
24    $(once('facets-dropdown-transform', '.js-facets-dropdown-links')).each(
25      function () {
26        const $ul = $(this);
27        const $links = $ul.find('.facet-item a');
28        const $dropdown = $('<select></select>');
29        // Preserve all attributes of the list.
30        $ul.each(function () {
31          $.each(this.attributes, function (idx, elem) {
32            $dropdown.attr(elem.name, elem.value);
33          });
34        });
35        // Remove the class which we are using for .once().
36        $dropdown.removeClass('js-facets-dropdown-links');
37
38        $dropdown.addClass('facets-dropdown');
39        $dropdown.addClass('js-facets-widget');
40        $dropdown.addClass('js-facets-dropdown');
41        $dropdown.attr('name', `${$ul.data('drupal-facet-filter-key')}[]`);
42
43        const id = $(this).data('drupal-facet-id');
44        // Add aria-labelledby attribute to reference label.
45        $dropdown.attr('aria-labelledby', `facet_${id}_label`);
46        const defaultOptionLabel =
47          settings.facets.dropdown_widget[id]['facet-default-option-label'];
48
49        // Add empty text option first.
50        const $defaultOption = $('<option></option>').attr('value', '');
51        $defaultOption[0].textContent = defaultOptionLabel;
52        $dropdown.append($defaultOption);
53
54        $ul.prepend(
55          `<li class="default-option"><a href="${
56            window.location.href.split('?')[0]
57          }">${Drupal.checkPlain(defaultOptionLabel)}</a></li>`,
58        );
59
60        let hasActive = false;
61        $links.each(function () {
62          const $link = $(this);
63          const active = $link.hasClass('is-active');
64          const type = $link.data('drupal-facet-widget-element-class');
65          const $option = $('<option></option>')
66            .attr('value', $link.attr('href'))
67            .data($link.data())
68            .addClass(type);
69          $option[0].value = $link.data('drupal-facet-filter-value');
70          if (active) {
71            hasActive = true;
72            // Set empty text value to this link to unselect facet.
73            $defaultOption.attr('value', $link.attr('href'));
74            $ul.find('.default-option a').attr('href', $link.attr('href'));
75            $option.attr('selected', 'selected');
76            $link.find('.js-facet-deactivate').remove();
77          }
78          const optionLabel = () => {
79            // Add hierarchy indicator in case hierarchy is enabled.
80            const $parents = $link
81              .parent('li.facet-item')
82              .parents('li.facet-item');
83            let prefix = '';
84            for (let i = 0; i < $parents.length; i++) {
85              prefix += '-';
86            }
87            return `${prefix} ${$link[0].textContent.trim()}`;
88          };
89          $option[0].textContent = optionLabel();
90          $dropdown.append($option);
91        });
92
93        // Go to the selected option when it's clicked.
94        $dropdown.on('change.facets', function () {
95          const anchor = $($ul).find(
96            `[data-drupal-facet-item-id='${$(this)
97              .find(':selected')
98              .data('drupalFacetItemId')}']`,
99          );
100          const $linkElement =
101            anchor.length > 0 ? $(anchor) : $ul.find('.default-option a');
102          const url = $linkElement.attr('href');
103          $(this).trigger('facets_filter', [url]);
104        });
105
106        // Append empty text option.
107        if (!hasActive) {
108          $defaultOption.attr('selected', 'selected');
109        }
110
111        // Replace links with dropdown.
112        $ul.after($dropdown).hide();
113        Drupal.attachBehaviors($dropdown.parent()[0], Drupal.settings);
114      },
115    );
116  };
117})(jQuery, Drupal, once);