https://www.apu.edu.my/modules/contrib/webform/js/webform.element.details.toggle.js?v=10.4.3

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