https://www.cumela.nl/modules/contrib/webform/js/webform.element.details.toggle.js?tlv48y

1/**
2 * @file
3 * JavaScript behaviors for details element.
4 */
5
6(function ($, Drupal, once) {
7  Drupal.webform = Drupal.webform || {};
8  Drupal.webform.detailsToggle = Drupal.webform.detailsToggle || {};
9  Drupal.webform.detailsToggle.options = Drupal.webform.detailsToggle.options || {};
10
11  /**
12   * Attach handler to toggle details open/close state.
13   *
14   * @type {Drupal~behavior}
15   */
16  Drupal.behaviors.webformDetailsToggle = {
17    attach(context) {
18      $(once('webform-details-toggle', '.js-webform-details-toggle', context)).each(function () {
19        var $form = $(this);
20        var $tabs = $form.find('.webform-tabs');
21
22        // Get only the main details elements and ignore all nested details.
23        var selector = ($tabs.length) ? '.webform-tab' : '.js-webform-details-toggle, .webform-elements';
24        var $details = $form.find('details').filter(function () {
25          var $parents = $(this).parentsUntil(selector);
26          return ($parents.find('details').length === 0);
27        });
28
29        // Toggle is only useful when there are two or more details elements.
30        if ($details.length < 2) {
31          return;
32        }
33
34        var options = $.extend({
35          button: '<button type="button" class="webform-details-toggle-state"></button>'
36        }, Drupal.webform.detailsToggle.options);
37
38        // Create toggle buttons.
39        var $toggle = $(options.button)
40          .attr('title', Drupal.t('Toggle details widget state.'))
41          .on('click', function (e) {
42            // Get details that are not vertical tabs pane.
43            var $details = $form.find('details:not(.vertical-tabs__pane)');
44            var $summary = $details.find('summary');
45            var open;
46            if (Drupal.webform.detailsToggle.isFormDetailsOpen($form)) {
47              $details.removeAttr('open');
48              $summary.attr('aria-expanded', 'false');
49              open = 0;
50            }
51            else {
52              $details.attr('open', 'open');
53              $summary.attr('aria-expanded', 'true');
54              open = 1;
55            }
56            Drupal.webform.detailsToggle.setDetailsToggleLabel($form);
57
58            // Set the saved states for all the details elements.
59            // @see webform.element.details.save.js
60            if (Drupal.webformDetailsSaveGetName) {
61              $details.each(function () {
62                // Note: Drupal.webformDetailsSaveGetName checks if localStorage
63                // exists and is enabled.
64                // @see webform.element.details.save.js
65                var name = Drupal.webformDetailsSaveGetName($(this));
66                if (name) {
67                  localStorage.setItem(name, open);
68                }
69              });
70            }
71          })
72          .wrap('<div class="webform-details-toggle-state-wrapper"></div>')
73          .parent();
74
75        if ($tabs.length) {
76          // Add toggle state before the tabs.
77          $tabs.find('.item-list:first-child').eq(0).before($toggle);
78        }
79        else {
80          // Add toggle state link to first details element.
81          $details.eq(0).before($toggle);
82        }
83
84        Drupal.webform.detailsToggle.setDetailsToggleLabel($form);
85      });
86    }
87  };
88
89  /**
90   * Determine if a webform's details are all opened.
91   *
92   * @param {jQuery} $form
93   *   A webform.
94   *
95   * @return {boolean}
96   *   TRUE if a webform's details are all opened.
97   */
98  Drupal.webform.detailsToggle.isFormDetailsOpen = function ($form) {
99    return ($form.find('details[open]').length === $form.find('details').length);
100  };
101
102  /**
103   * Set a webform's details toggle state widget label.
104   *
105   * @param {jQuery} $form
106   *   A webform.
107   */
108  Drupal.webform.detailsToggle.setDetailsToggleLabel = function ($form) {
109    var isOpen = Drupal.webform.detailsToggle.isFormDetailsOpen($form);
110
111    var label = (isOpen) ? Drupal.t('Collapse all') : Drupal.t('Expand all');
112    $form.find('.webform-details-toggle-state').html(label);
113
114    var text = (isOpen) ? Drupal.t('All details have been expanded.') : Drupal.t('All details have been collapsed.');
115    Drupal.announce(text);
116  };
117
118})(jQuery, Drupal, once);