www.aleph1.co.uk Git - yaffs-website/blob - web/core/misc/dropbutton/dropbutton.js

   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
   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');
  14         if ($body.length) {
  15           $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
  16         }
  17
  18         var il = $dropbuttons.length;
  19         for (var i = 0; i < il; i++) {
  20           DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
  21         }
  22       }
  23     }
  24   };
  25
  26   function dropbuttonClickHandler(e) {
  27     e.preventDefault();
  28     $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
  29   }
  30
  31   function DropButton(dropbutton, settings) {
  32     var options = $.extend({ title: Drupal.t('List additional actions') }, settings);
  33     var $dropbutton = $(dropbutton);
  34
  35     this.$dropbutton = $dropbutton;
  36
  37     this.$list = $dropbutton.find('.dropbutton');
  38
  39     this.$actions = this.$list.find('li').addClass('dropbutton-action');
  40
  41     if (this.$actions.length > 1) {
  42       var $primary = this.$actions.slice(0, 1);
  43
  44       var $secondary = this.$actions.slice(1);
  45       $secondary.addClass('secondary-action');
  46
  47       $primary.after(Drupal.theme('dropbuttonToggle', options));
  48
  49       this.$dropbutton.addClass('dropbutton-multiple').on({
  50         'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
  51
  52         'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
  53
  54         'focusout.dropbutton': $.proxy(this.focusOut, this),
  55
  56         'focusin.dropbutton': $.proxy(this.focusIn, this)
  57       });
  58     } else {
  59       this.$dropbutton.addClass('dropbutton-single');
  60     }
  61   }
  62
  63   $.extend(DropButton, {
  64     dropbuttons: []
  65   });
  66
  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);
  72     },
  73     hoverIn: function hoverIn() {
  74       if (this.timerID) {
  75         window.clearTimeout(this.timerID);
  76       }
  77     },
  78     hoverOut: function hoverOut() {
  79       this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
  80     },
  81     open: function open() {
  82       this.toggle(true);
  83     },
  84     close: function close() {
  85       this.toggle(false);
  86     },
  87     focusOut: function focusOut(e) {
  88       this.hoverOut.call(this, e);
  89     },
  90     focusIn: function focusIn(e) {
  91       this.hoverIn.call(this, e);
  92     }
  93   });
  94
  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>';
  98     }
  99   });
 100
 101   Drupal.DropButton = DropButton;
 102 })(jQuery, Drupal);