1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
/**
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
**/
(function ($, Drupal) {
'use strict';
Drupal.behaviors.dropButton = {
attach: function attach(context, settings) {
var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
if ($dropbuttons.length) {
var $body = $('body').once('dropbutton-click');
if ($body.length) {
$body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
}
var il = $dropbuttons.length;
for (var i = 0; i < il; i++) {
DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
}
}
}
};
function dropbuttonClickHandler(e) {
e.preventDefault();
$(e.target).closest('.dropbutton-wrapper').toggleClass('open');
}
function DropButton(dropbutton, settings) {
var options = $.extend({ title: Drupal.t('List additional actions') }, settings);
var $dropbutton = $(dropbutton);
this.$dropbutton = $dropbutton;
this.$list = $dropbutton.find('.dropbutton');
this.$actions = this.$list.find('li').addClass('dropbutton-action');
if (this.$actions.length > 1) {
var $primary = this.$actions.slice(0, 1);
var $secondary = this.$actions.slice(1);
$secondary.addClass('secondary-action');
$primary.after(Drupal.theme('dropbuttonToggle', options));
this.$dropbutton.addClass('dropbutton-multiple').on({
'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
'focusout.dropbutton': $.proxy(this.focusOut, this),
'focusin.dropbutton': $.proxy(this.focusIn, this)
});
} else {
this.$dropbutton.addClass('dropbutton-single');
}
}
$.extend(DropButton, {
dropbuttons: []
});
$.extend(DropButton.prototype, {
toggle: function toggle(show) {
var isBool = typeof show === 'boolean';
show = isBool ? show : !this.$dropbutton.hasClass('open');
this.$dropbutton.toggleClass('open', show);
},
hoverIn: function hoverIn() {
if (this.timerID) {
window.clearTimeout(this.timerID);
}
},
hoverOut: function hoverOut() {
this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
},
open: function open() {
this.toggle(true);
},
close: function close() {
this.toggle(false);
},
focusOut: function focusOut(e) {
this.hoverOut.call(this, e);
},
focusIn: function focusIn(e) {
this.hoverIn.call(this, e);
}
});
$.extend(Drupal.theme, {
dropbuttonToggle: function dropbuttonToggle(options) {
return '<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
}
});
Drupal.DropButton = DropButton;
})(jQuery, Drupal);
|
