6 (function ($, Drupal) {
11 * Process elements with the .dropbutton class on page load.
13 * @type {Drupal~behavior}
15 * @prop {Drupal~behaviorAttach} attach
16 * Attaches dropButton behaviors.
18 Drupal.behaviors.dropButton = {
19 attach: function (context, settings) {
20 var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
21 if ($dropbuttons.length) {
22 // Adds the delegated handler that will toggle dropdowns on click.
23 var $body = $('body').once('dropbutton-click');
25 $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
27 // Initialize all buttons.
28 var il = $dropbuttons.length;
29 for (var i = 0; i < il; i++) {
30 DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
37 * Delegated callback for opening and closing dropbutton secondary actions.
39 * @function Drupal.DropButton~dropbuttonClickHandler
41 * @param {jQuery.Event} e
42 * The event triggered.
44 function dropbuttonClickHandler(e) {
46 $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
50 * A DropButton presents an HTML list as a button with a primary action.
52 * All secondary actions beyond the first in the list are presented in a
53 * dropdown list accessible through a toggle arrow associated with the button.
55 * @constructor Drupal.DropButton
57 * @param {HTMLElement} dropbutton
59 * @param {object} settings
60 * A list of options including:
61 * @param {string} settings.title
62 * The text inside the toggle link element. This text is hidden
65 function DropButton(dropbutton, settings) {
66 // Merge defaults with settings.
67 var options = $.extend({title: Drupal.t('List additional actions')}, settings);
68 var $dropbutton = $(dropbutton);
73 this.$dropbutton = $dropbutton;
78 this.$list = $dropbutton.find('.dropbutton');
81 * Find actions and mark them.
85 this.$actions = this.$list.find('li').addClass('dropbutton-action');
87 // Add the special dropdown only if there are hidden actions.
88 if (this.$actions.length > 1) {
89 // Identify the first element of the collection.
90 var $primary = this.$actions.slice(0, 1);
91 // Identify the secondary actions.
92 var $secondary = this.$actions.slice(1);
93 $secondary.addClass('secondary-action');
95 $primary.after(Drupal.theme('dropbuttonToggle', options));
98 .addClass('dropbutton-multiple')
102 * Adds a timeout to close the dropdown on mouseleave.
106 'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
109 * Clears timeout when mouseout of the dropdown.
113 'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
116 * Similar to mouseleave/mouseenter, but for keyboard navigation.
120 'focusout.dropbutton': $.proxy(this.focusOut, this),
125 'focusin.dropbutton': $.proxy(this.focusIn, this)
129 this.$dropbutton.addClass('dropbutton-single');
134 * Extend the DropButton constructor.
136 $.extend(DropButton, /** @lends Drupal.DropButton */{
138 * Store all processed DropButtons.
140 * @type {Array.<Drupal.DropButton>}
146 * Extend the DropButton prototype.
148 $.extend(DropButton.prototype, /** @lends Drupal.DropButton# */{
151 * Toggle the dropbutton open and closed.
153 * @param {bool} [show]
154 * Force the dropbutton to open by passing true or to close by
157 toggle: function (show) {
158 var isBool = typeof show === 'boolean';
159 show = isBool ? show : !this.$dropbutton.hasClass('open');
160 this.$dropbutton.toggleClass('open', show);
166 hoverIn: function () {
167 // Clear any previous timer we were using.
169 window.clearTimeout(this.timerID);
176 hoverOut: function () {
177 // Wait half a second before closing.
178 this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
196 * @param {jQuery.Event} e
197 * The event triggered.
199 focusOut: function (e) {
200 this.hoverOut.call(this, e);
204 * @param {jQuery.Event} e
205 * The event triggered.
207 focusIn: function (e) {
208 this.hoverIn.call(this, e);
212 $.extend(Drupal.theme, /** @lends Drupal.theme */{
215 * A toggle is an interactive element often bound to a click handler.
217 * @param {object} options
219 * @param {string} [options.title]
220 * The HTML anchor title attribute and text for the inner span element.
223 * A string representing a DOM fragment.
225 dropbuttonToggle: function (options) {
226 return '<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
230 // Expose constructor in the public space.
231 Drupal.DropButton = DropButton;