comparison core/misc/tableselect.es6.js @ 0:c75dbcec494b

Initial commit from drush-created site

+/**
+ * @file
+ * Table select functionality.
+ */
+
+(function ($, Drupal) {
+  /**
+   * Initialize tableSelects.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches tableSelect functionality.
+   */
+  Drupal.behaviors.tableSelect = {
+    attach(context, settings) {
+      // Select the inner-most table in case of nested tables.
+      $(context)
+        .find('th.select-all')
+        .closest('table')
+        .once('table-select')
+        .each(Drupal.tableSelect);
+    },
+  };
+
+  /**
+   * Callback used in {@link Drupal.behaviors.tableSelect}.
+   */
+  Drupal.tableSelect = function () {
+    // Do not add a "Select all" checkbox if there are no rows with checkboxes
+    // in the table.
+    if ($(this).find('td input[type="checkbox"]').length === 0) {
+      return;
+    }
+
+    // Keep track of the table, which checkbox is checked and alias the
+    // settings.
+    const table = this;
+    let checkboxes;
+    let lastChecked;
+    const $table = $(table);
+    const strings = {
+      selectAll: Drupal.t('Select all rows in this table'),
+      selectNone: Drupal.t('Deselect all rows in this table'),
+    };
+    const updateSelectAll = function (state) {
+      // Update table's select-all checkbox (and sticky header's if available).
+      $table.prev('table.sticky-header').addBack().find('th.select-all input[type="checkbox"]').each(function () {
+        const $checkbox = $(this);
+        const stateChanged = $checkbox.prop('checked') !== state;
+
+        $checkbox.attr('title', state ? strings.selectNone : strings.selectAll);
+
+        /**
+         * @checkbox {HTMLElement}
+         */
+        if (stateChanged) {
+          $checkbox.prop('checked', state).trigger('change');
+        }
+      });
+    };
+
+    // Find all <th> with class select-all, and insert the check all checkbox.
+    $table.find('th.select-all').prepend($('<input type="checkbox" class="form-checkbox" />').attr('title', strings.selectAll)).on('click', (event) => {
+      if ($(event.target).is('input[type="checkbox"]')) {
+        // Loop through all checkboxes and set their state to the select all
+        // checkbox' state.
+        checkboxes.each(function () {
+          const $checkbox = $(this);
+          const stateChanged = $checkbox.prop('checked') !== event.target.checked;
+
+          /**
+           * @checkbox {HTMLElement}
+           */
+          if (stateChanged) {
+            $checkbox.prop('checked', event.target.checked).trigger('change');
+          }
+          // Either add or remove the selected class based on the state of the
+          // check all checkbox.
+
+          /**
+           * @checkbox {HTMLElement}
+           */
+          $checkbox.closest('tr').toggleClass('selected', this.checked);
+        });
+        // Update the title and the state of the check all box.
+        updateSelectAll(event.target.checked);
+      }
+    });
+
+    // For each of the checkboxes within the table that are not disabled.
+    checkboxes = $table.find('td input[type="checkbox"]:enabled').on('click', function (e) {
+      // Either add or remove the selected class based on the state of the
+      // check all checkbox.
+
+      /**
+       * @this {HTMLElement}
+       */
+      $(this).closest('tr').toggleClass('selected', this.checked);
+
+      // If this is a shift click, we need to highlight everything in the
+      // range. Also make sure that we are actually checking checkboxes
+      // over a range and that a checkbox has been checked or unchecked before.
+      if (e.shiftKey && lastChecked && lastChecked !== e.target) {
+        // We use the checkbox's parent <tr> to do our range searching.
+        Drupal.tableSelectRange($(e.target).closest('tr')[0], $(lastChecked).closest('tr')[0], e.target.checked);
+      }
+
+      // If all checkboxes are checked, make sure the select-all one is checked
+      // too, otherwise keep unchecked.
+      updateSelectAll((checkboxes.length === checkboxes.filter(':checked').length));
+
+      // Keep track of the last checked checkbox.
+      lastChecked = e.target;
+    });
+
+    // If all checkboxes are checked on page load, make sure the select-all one
+    // is checked too, otherwise keep unchecked.
+    updateSelectAll((checkboxes.length === checkboxes.filter(':checked').length));
+  };
+
+  /**
+   * @param {HTMLElement} from
+   *   The HTML element representing the "from" part of the range.
+   * @param {HTMLElement} to
+   *   The HTML element representing the "to" part of the range.
+   * @param {bool} state
+   *   The state to set on the range.
+   */
+  Drupal.tableSelectRange = function (from, to, state) {
+    // We determine the looping mode based on the order of from and to.
+    const mode = from.rowIndex > to.rowIndex ? 'previousSibling' : 'nextSibling';
+
+    // Traverse through the sibling nodes.
+    for (let i = from[mode]; i; i = i[mode]) {
+      const $i = $(i);
+      // Make sure that we're only dealing with elements.
+      if (i.nodeType !== 1) {
+        continue;
+      }
+      // Either add or remove the selected class based on the state of the
+      // target checkbox.
+      $i.toggleClass('selected', state);
+      $i.find('input[type="checkbox"]').prop('checked', state);
+
+      if (to.nodeType) {
+        // If we are at the end of the range, stop.
+        if (i === to) {
+          break;
+        }
+      }
+      // A faster alternative to doing $(i).filter(to).length.
+      else if ($.filter(to, [i]).r.length) {
+        break;
+      }
+    }
+  };
+}(jQuery, Drupal));