2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, Drupal) {
9 Drupal.behaviors.dropButton = {
10 attach: function attach(context, settings) {
11 var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
12 if ($dropbuttons.length) {
13 var $body = $('body').once('dropbutton-click');
15 $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
18 var il = $dropbuttons.length;
19 for (var i = 0; i < il; i++) {
20 DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
26 function dropbuttonClickHandler(e) {
28 $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
31 function DropButton(dropbutton, settings) {
32 var options = $.extend({ title: Drupal.t('List additional actions') }, settings);
33 var $dropbutton = $(dropbutton);
35 this.$dropbutton = $dropbutton;
37 this.$list = $dropbutton.find('.dropbutton');
39 this.$actions = this.$list.find('li').addClass('dropbutton-action');
41 if (this.$actions.length > 1) {
42 var $primary = this.$actions.slice(0, 1);
44 var $secondary = this.$actions.slice(1);
45 $secondary.addClass('secondary-action');
47 $primary.after(Drupal.theme('dropbuttonToggle', options));
49 this.$dropbutton.addClass('dropbutton-multiple').on({
50 'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
52 'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
54 'focusout.dropbutton': $.proxy(this.focusOut, this),
56 'focusin.dropbutton': $.proxy(this.focusIn, this)
59 this.$dropbutton.addClass('dropbutton-single');
63 $.extend(DropButton, {
67 $.extend(DropButton.prototype, {
68 toggle: function toggle(show) {
69 var isBool = typeof show === 'boolean';
70 show = isBool ? show : !this.$dropbutton.hasClass('open');
71 this.$dropbutton.toggleClass('open', show);
73 hoverIn: function hoverIn() {
75 window.clearTimeout(this.timerID);
78 hoverOut: function hoverOut() {
79 this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
81 open: function open() {
84 close: function close() {
87 focusOut: function focusOut(e) {
88 this.hoverOut.call(this, e);
90 focusIn: function focusIn(e) {
91 this.hoverIn.call(this, e);
95 $.extend(Drupal.theme, {
96 dropbuttonToggle: function dropbuttonToggle(options) {
97 return '<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
101 Drupal.DropButton = DropButton;