6 (function ($, Drupal) {
8 * Process elements with the .dropbutton class on page load.
10 * @type {Drupal~behavior}
12 * @prop {Drupal~behaviorAttach} attach
13 * Attaches dropButton behaviors.
15 Drupal.behaviors.dropButton = {
16 attach(context, settings) {
17 const $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
18 if ($dropbuttons.length) {
19 // Adds the delegated handler that will toggle dropdowns on click.
20 const $body = $('body').once('dropbutton-click');
22 $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
24 // Initialize all buttons.
25 const il = $dropbuttons.length;
26 for (let i = 0; i < il; i++) {
27 DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
34 * Delegated callback for opening and closing dropbutton secondary actions.
36 * @function Drupal.DropButton~dropbuttonClickHandler
38 * @param {jQuery.Event} e
39 * The event triggered.
41 function dropbuttonClickHandler(e) {
43 $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
47 * A DropButton presents an HTML list as a button with a primary action.
49 * All secondary actions beyond the first in the list are presented in a
50 * dropdown list accessible through a toggle arrow associated with the button.
52 * @constructor Drupal.DropButton
54 * @param {HTMLElement} dropbutton
56 * @param {object} settings
57 * A list of options including:
58 * @param {string} settings.title
59 * The text inside the toggle link element. This text is hidden
62 function DropButton(dropbutton, settings) {
63 // Merge defaults with settings.
64 const options = $.extend({ title: Drupal.t('List additional actions') }, settings);
65 const $dropbutton = $(dropbutton);
70 this.$dropbutton = $dropbutton;
75 this.$list = $dropbutton.find('.dropbutton');
78 * Find actions and mark them.
82 this.$actions = this.$list.find('li').addClass('dropbutton-action');
84 // Add the special dropdown only if there are hidden actions.
85 if (this.$actions.length > 1) {
86 // Identify the first element of the collection.
87 const $primary = this.$actions.slice(0, 1);
88 // Identify the secondary actions.
89 const $secondary = this.$actions.slice(1);
90 $secondary.addClass('secondary-action');
92 $primary.after(Drupal.theme('dropbuttonToggle', options));
95 .addClass('dropbutton-multiple')
99 * Adds a timeout to close the dropdown on mouseleave.
103 'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
106 * Clears timeout when mouseout of the dropdown.
110 'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
113 * Similar to mouseleave/mouseenter, but for keyboard navigation.
117 'focusout.dropbutton': $.proxy(this.focusOut, this),
122 'focusin.dropbutton': $.proxy(this.focusIn, this),
126 this.$dropbutton.addClass('dropbutton-single');
131 * Extend the DropButton constructor.
133 $.extend(DropButton, /** @lends Drupal.DropButton */{
135 * Store all processed DropButtons.
137 * @type {Array.<Drupal.DropButton>}
143 * Extend the DropButton prototype.
145 $.extend(DropButton.prototype, /** @lends Drupal.DropButton# */{
148 * Toggle the dropbutton open and closed.
150 * @param {bool} [show]
151 * Force the dropbutton to open by passing true or to close by
155 const isBool = typeof show === 'boolean';
156 show = isBool ? show : !this.$dropbutton.hasClass('open');
157 this.$dropbutton.toggleClass('open', show);
164 // Clear any previous timer we were using.
166 window.clearTimeout(this.timerID);
174 // Wait half a second before closing.
175 this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
193 * @param {jQuery.Event} e
194 * The event triggered.
197 this.hoverOut.call(this, e);
201 * @param {jQuery.Event} e
202 * The event triggered.
205 this.hoverIn.call(this, e);
209 $.extend(Drupal.theme, /** @lends Drupal.theme */{
212 * A toggle is an interactive element often bound to a click handler.
214 * @param {object} options
216 * @param {string} [options.title]
217 * The HTML anchor title attribute and text for the inner span element.
220 * A string representing a DOM fragment.
222 dropbuttonToggle(options) {
223 return `<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">${options.title}</span></span></button></li>`;
227 // Expose constructor in the public space.
228 Drupal.DropButton = DropButton;