first commit

core/misc/dropbutton/dropbutton.css

@@ -0,0 +1,163 @@
+/**
+ * @file
+ * Base styles for dropbuttons.
+ */
+
+/**
+ * When a dropbutton has only one option, it is simply a button.
+ */
+.dropbutton-wrapper,
+.dropbutton-wrapper div {
+  box-sizing: border-box;
+}
+.js .dropbutton-wrapper,
+.js .dropbutton-widget {
+  position: relative;
+  display: block;
+}
+
+@media screen and (max-width: 600px) {
+  .js .dropbutton-wrapper {
+    width: 100%;
+  }
+}
+
+/* Splitbuttons */
+@media screen and (min-width: 600px) {
+  .form-actions .dropbutton-wrapper {
+    float: left; /* LTR */
+  }
+  [dir="rtl"] .form-actions .dropbutton-wrapper {
+    float: right;
+  }
+}
+.js .form-actions .dropbutton-widget {
+  position: static;
+}
+.js td .dropbutton-multiple .dropbutton-widget {
+  position: absolute;
+}
+.js td .dropbutton-wrapper {
+  min-height: 2em;
+}
+.js td .dropbutton-multiple {
+  max-width: 100%;
+  margin-right: 2em; /* LTR */
+  padding-right: 10em; /* LTR */
+}
+[dir="rtl"].js td .dropbutton-multiple {
+  margin-right: 0;
+  margin-left: 2em;
+  padding-right: 0;
+  padding-left: 10em;
+}
+.js td .dropbutton-multiple .dropbutton-action a,
+.js td .dropbutton-multiple .dropbutton-action input,
+.js td .dropbutton-multiple .dropbutton-action button {
+  width: auto;
+}
+
+/* UL styles are over-scoped in core, so this selector needs weight parity. */
+.js .dropbutton-widget .dropbutton {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  list-style-image: none;
+}
+.js .dropbutton li,
+.js .dropbutton a {
+  display: block;
+  outline: none;
+}
+
+.js .dropbutton li:hover,
+.js .dropbutton li:focus,
+.js .dropbutton a:hover,
+.js .dropbutton a:focus {
+  outline: initial;
+}
+
+/**
+ * The dropbutton styling.
+ *
+ * A dropbutton is a widget that displays a list of action links as a button
+ * with a primary action. Secondary actions are hidden behind a click on a
+ * twisty arrow.
+ *
+ * The arrow is created using border on a zero-width, zero-height span.
+ * The arrow inherits the link color, but can be overridden with border colors.
+ */
+.js .dropbutton-multiple .dropbutton-widget {
+  padding-right: 2em; /* LTR */
+}
+.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
+  padding-right: 0;
+  padding-left: 2em;
+}
+.dropbutton-multiple.open,
+.dropbutton-multiple.open .dropbutton-widget {
+  max-width: none;
+}
+.dropbutton-multiple.open {
+  z-index: 100;
+}
+.dropbutton-multiple .dropbutton .secondary-action {
+  display: none;
+}
+.dropbutton-multiple.open .dropbutton .secondary-action {
+  display: block;
+}
+.dropbutton-toggle {
+  position: absolute;
+  top: 0;
+  right: 0; /* LTR */
+  bottom: 0;
+  display: block;
+  width: 2em;
+  white-space: nowrap;
+  text-indent: 110%;
+}
+[dir="rtl"] .dropbutton-toggle {
+  right: auto;
+  left: 0;
+}
+.dropbutton-toggle button {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border: 0;
+  background: none;
+}
+.dropbutton-toggle button:hover,
+.dropbutton-toggle button:focus {
+  outline: initial;
+}
+.dropbutton-arrow {
+  position: absolute;
+  top: 50%;
+  right: 40%; /* 0.6667em; */ /* LTR */
+  display: block;
+  overflow: hidden;
+  width: 0;
+  height: 0;
+  margin-top: -0.1666em;
+  border-width: 0.3333em 0.3333em 0;
+  border-style: solid;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  line-height: 0;
+}
+[dir="rtl"] .dropbutton-arrow {
+  right: auto;
+  left: 0.6667em;
+}
+.dropbutton-multiple.open .dropbutton-arrow {
+  top: 0.6667em;
+  border-top-color: transparent;
+  border-bottom: 0.3333em solid;
+}

core/misc/dropbutton/dropbutton.js

@@ -0,0 +1,236 @@
+/**
+ * @file
+ * Dropbutton feature.
+ */
+
+(function ($, Drupal) {
+  /**
+   * 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.
+   *
+   * @constructor Drupal.DropButton
+   *
+   * @param {HTMLElement} dropbutton
+   *   A DOM element.
+   * @param {object} settings
+   *   A list of options including:
+   * @param {string} settings.title
+   *   The text inside the toggle link element. This text is hidden
+   *   from visual UAs.
+   */
+  function DropButton(dropbutton, settings) {
+    // Merge defaults with settings.
+    const options = $.extend(
+      { title: Drupal.t('List additional actions') },
+      settings,
+    );
+    const $dropbutton = $(dropbutton);
+
+    /**
+     * @type {jQuery}
+     */
+    this.$dropbutton = $dropbutton;
+
+    /**
+     * @type {jQuery}
+     */
+    this.$list = $dropbutton.find('.dropbutton');
+
+    /**
+     * Find actions and mark them.
+     *
+     * @type {jQuery}
+     */
+    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.
+      const $primary = this.$actions.slice(0, 1);
+      // Identify the secondary actions.
+      const $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').on({
+        /**
+         * Adds a timeout to close the dropdown on mouseleave.
+         *
+         * @ignore
+         */
+        'mouseleave.dropbutton': this.hoverOut.bind(this),
+
+        /**
+         * Clears timeout when mouseout of the dropdown.
+         *
+         * @ignore
+         */
+        'mouseenter.dropbutton': this.hoverIn.bind(this),
+
+        /**
+         * Similar to mouseleave/mouseenter, but for keyboard navigation.
+         *
+         * @ignore
+         */
+        'focusout.dropbutton': this.focusOut.bind(this),
+
+        /**
+         * @ignore
+         */
+        'focusin.dropbutton': this.focusIn.bind(this),
+      });
+    } else {
+      this.$dropbutton.addClass('dropbutton-single');
+    }
+  }
+
+  /**
+   * Delegated callback for opening and closing dropbutton secondary actions.
+   *
+   * @function Drupal.DropButton~dropbuttonClickHandler
+   *
+   * @param {jQuery.Event} e
+   *   The event triggered.
+   */
+  function dropbuttonClickHandler(e) {
+    e.preventDefault();
+    $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
+  }
+
+  /**
+   * Process elements with the .dropbutton class on page load.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches dropButton behaviors.
+   */
+  Drupal.behaviors.dropButton = {
+    attach(context, settings) {
+      const dropbuttons = once('dropbutton', '.dropbutton-wrapper', context);
+      if (dropbuttons.length) {
+        // Adds the delegated handler that will toggle dropdowns on click.
+        const body = once('dropbutton-click', 'body');
+        if (body.length) {
+          $(body).on('click', '.dropbutton-toggle', dropbuttonClickHandler);
+        }
+        // Initialize all buttons.
+        dropbuttons.forEach((dropbutton) => {
+          DropButton.dropbuttons.push(
+            new DropButton(dropbutton, settings.dropbutton),
+          );
+        });
+      }
+    },
+  };
+
+  /**
+   * Extend the DropButton constructor.
+   */
+  $.extend(
+    DropButton,
+    /** @lends Drupal.DropButton */ {
+      /**
+       * Store all processed DropButtons.
+       *
+       * @type {Array.<Drupal.DropButton>}
+       */
+      dropbuttons: [],
+    },
+  );
+
+  /**
+   * Extend the DropButton prototype.
+   */
+  $.extend(
+    DropButton.prototype,
+    /** @lends Drupal.DropButton# */ {
+      /**
+       * Toggle the dropbutton open and closed.
+       *
+       * @param {boolean} [show]
+       *   Force the dropbutton to open by passing true or to close by
+       *   passing false.
+       */
+      toggle(show) {
+        const isBool = typeof show === 'boolean';
+        show = isBool ? show : !this.$dropbutton.hasClass('open');
+        this.$dropbutton.toggleClass('open', show);
+      },
+
+      /**
+       * @method
+       */
+      hoverIn() {
+        // Clear any previous timer we were using.
+        if (this.timerID) {
+          window.clearTimeout(this.timerID);
+        }
+      },
+
+      /**
+       * @method
+       */
+      hoverOut() {
+        // Wait half a second before closing.
+        this.timerID = window.setTimeout(this.close.bind(this), 500);
+      },
+
+      /**
+       * @method
+       */
+      open() {
+        this.toggle(true);
+      },
+
+      /**
+       * @method
+       */
+      close() {
+        this.toggle(false);
+      },
+
+      /**
+       * @param {jQuery.Event} e
+       *   The event triggered.
+       */
+      focusOut(e) {
+        this.hoverOut.call(this, e);
+      },
+
+      /**
+       * @param {jQuery.Event} e
+       *   The event triggered.
+       */
+      focusIn(e) {
+        this.hoverIn.call(this, e);
+      },
+    },
+  );
+
+  $.extend(
+    Drupal.theme,
+    /** @lends Drupal.theme */ {
+      /**
+       * A toggle is an interactive element often bound to a click handler.
+       *
+       * @param {object} options
+       *   Options object.
+       * @param {string} [options.title]
+       *   The button text.
+       *
+       * @return {string}
+       *   A string representing a DOM fragment.
+       */
+      dropbuttonToggle(options) {
+        return `<li class="dropbutton-toggle"><button type="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, Drupal);