updated to 7.x-1.11

search_api.admin.js

@@ -1,7 +1,14 @@
+/**
+ * @file
+ * Javascript enhancements for the Search API admin pages.
+ */
 
-// Copied from filter.admin.js
 (function ($) {
 
+/**
+ * Allows the re-ordering of enabled data alterations and processors.
+ */
+// Copied from filter.admin.js
 Drupal.behaviors.searchApiStatus = {
   attach: function (context, settings) {
     $('.search-api-status-wrapper input.form-checkbox', context).once('search-api-status', function () {
@@ -43,19 +50,158 @@ Drupal.behaviors.searchApiStatus = {
   }
 };
 
-Drupal.behaviors.searchApiEditMenu = {
+/**
+ * Processes elements with the .dropbutton class on page load.
+ */
+Drupal.behaviors.searchApiDropButton = {
   attach: function (context, settings) {
-    $('.search-api-edit-menu-toggle', context).click(function (e) {
-      $menu = $(this).parent().find('.search-api-edit-menu');
-      if ($menu.is('.collapsed')) {
-    	$menu.removeClass('collapsed');
+    var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
+    if ($dropbuttons.length) {
+      //$('.dropbutton-toggle', $dropbuttons).click(dropbuttonClickHandler);
+      // Initialize all buttons.
+      for (var i = 0, il = $dropbuttons.length; i < il; i++) {
+        DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
       }
-      else {
-    	$menu.addClass('collapsed');
-      }
-      return false;
-    });
+      // Adds the delegated handler that will toggle dropdowns on click.
+      $('.dropbutton-toggle', $dropbuttons).click(dropbuttonClickHandler);
+    }
   }
 };
 
+/**
+ * Delegated callback for opening and closing dropbutton secondary actions.
+ */
+function dropbuttonClickHandler(e) {
+  e.preventDefault();
+  $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
+}
+
+/**
+ * A DropButton presents an HTML list as a button with a primary action.
+ *
+ * All secondary actions beyond the first in the list are presented in a
+ * dropdown list accessible through a toggle arrow associated with the button.
+ *
+ * @param {jQuery} dropbutton
+ *   A jQuery element.
+ *
+ * @param {Object} settings
+ *   A list of options including:
+ *    - {String} title: The text inside the toggle link element. This text is
+ *      hidden from visual UAs.
+ */
+function DropButton(dropbutton, settings) {
+  // Merge defaults with settings.
+  var options = $.extend({'title': Drupal.t('List additional actions')}, settings);
+  var $dropbutton = $(dropbutton);
+  this.$dropbutton = $dropbutton;
+  this.$list = $dropbutton.find('.dropbutton');
+  // Find actions and mark them.
+  this.$actions = this.$list.find('li').addClass('dropbutton-action');
+
+  // Add the special dropdown only if there are hidden actions.
+  if (this.$actions.length > 1) {
+    // Identify the first element of the collection.
+    var $primary = this.$actions.slice(0, 1);
+    // Identify the secondary actions.
+    var $secondary = this.$actions.slice(1);
+    $secondary.addClass('secondary-action');
+    // Add toggle link.
+    $primary.after(Drupal.theme('dropbuttonToggle', options));
+    // Bind mouse events.
+    this.$dropbutton
+      .addClass('dropbutton-multiple')
+      /**
+       * Adds a timeout to close the dropdown on mouseleave.
+       */
+      .bind('mouseleave.dropbutton', $.proxy(this.hoverOut, this))
+      /**
+       * Clears timeout when mouseout of the dropdown.
+       */
+      .bind('mouseenter.dropbutton', $.proxy(this.hoverIn, this))
+      /**
+       * Similar to mouseleave/mouseenter, but for keyboard navigation.
+       */
+      .bind('focusout.dropbutton', $.proxy(this.focusOut, this))
+      .bind('focusin.dropbutton', $.proxy(this.focusIn, this));
+  }
+}
+
+/**
+ * Extend the DropButton constructor.
+ */
+$.extend(DropButton, {
+  /**
+   * Store all processed DropButtons.
+   *
+   * @type {Array}
+   */
+  dropbuttons: []
+});
+
+/**
+ * Extend the DropButton prototype.
+ */
+$.extend(DropButton.prototype, {
+  /**
+   * Toggle the dropbutton open and closed.
+   *
+   * @param {Boolean} show
+   *   (optional) Force the dropbutton to open by passing true or to close by
+   *   passing false.
+   */
+  toggle: function (show) {
+    var isBool = typeof show === 'boolean';
+    show = isBool ? show : !this.$dropbutton.hasClass('open');
+    this.$dropbutton.toggleClass('open', show);
+  },
+
+  hoverIn: function () {
+    // Clear any previous timer we were using.
+    if (this.timerID) {
+      window.clearTimeout(this.timerID);
+    }
+  },
+
+  hoverOut: function () {
+    // Wait half a second before closing.
+    this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
+  },
+
+  open: function () {
+    this.toggle(true);
+  },
+
+  close: function () {
+    this.toggle(false);
+  },
+
+  focusOut: function (e) {
+    this.hoverOut.call(this, e);
+  },
+
+  focusIn: function (e) {
+    this.hoverIn.call(this, e);
+  }
+});
+
+$.extend(Drupal.theme, {
+  /**
+   * A toggle is an interactive element often bound to a click handler.
+   *
+   * @param {Object} options
+   *   - {String} title: (optional) The HTML anchor title attribute and
+   *     text for the inner span element.
+   *
+   * @return {String}
+   *   A string representing a DOM fragment.
+   */
+  dropbuttonToggle: function (options) {
+    return '<li class="dropbutton-toggle"><button type="button" role="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
+  }
+});
+
+// Expose constructor in the public space.
+Drupal.DropButton = DropButton;
+
 })(jQuery);