dropbutton.js 2.9 KB

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