stimulus-check-all/dist/stimulus-check-all.umd.js

A Stimulus Controller to implement check-all checkbox feature

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('stimulus')) :
  typeof define === 'function' && define.amd ? define(['stimulus'], factory) :
  (global = global || self, global.StimulusCheckAll = factory(global.Stimulus));
}(this, (function (stimulus) { 'use strict';

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
  }

  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function");
    }

    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }

  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };

    return _setPrototypeOf(o, p);
  }

  function _isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }

    return self;
  }

  function _possibleConstructorReturn(self, call) {
    if (call && (typeof call === "object" || typeof call === "function")) {
      return call;
    }

    return _assertThisInitialized(self);
  }

  function _createSuper(Derived) {
    var hasNativeReflectConstruct = _isNativeReflectConstruct();

    return function () {
      var Super = _getPrototypeOf(Derived),
          result;

      if (hasNativeReflectConstruct) {
        var NewTarget = _getPrototypeOf(this).constructor;

        result = Reflect.construct(Super, arguments, NewTarget);
      } else {
        result = Super.apply(this, arguments);
      }

      return _possibleConstructorReturn(this, result);
    };
  }

  function subscribe(container) {
    let shiftKey = false;
    let lastCheckbox = null;
    container.addEventListener('mousedown', onMouseDown);
    container.addEventListener('change', onChange);

    function setChecked(target, input, checked, indeterminate = false) {
      if (!(input instanceof HTMLInputElement)) return;
      input.indeterminate = indeterminate;

      if (input.checked !== checked) {
        input.checked = checked;
        setTimeout(() => {
          const event = new CustomEvent('change', {
            bubbles: true,
            cancelable: false,
            detail: {
              relatedTarget: target
            }
          });
          input.dispatchEvent(event);
        });
      }
    }

    function onChange(event) {
      const target = event.target;
      if (!(target instanceof Element)) return;

      if (target.hasAttribute('data-check-all')) {
        onCheckAll(event);
      } else if (target.hasAttribute('data-check-all-item')) {
        onCheckAllItem(event);
      }
    }

    function onCheckAll(event) {
      if (event instanceof CustomEvent && event.detail) {
        const {
          relatedTarget
        } = event.detail;

        if (relatedTarget && relatedTarget.hasAttribute('data-check-all-item')) {
          return;
        }
      }

      const target = event.target;
      if (!(target instanceof HTMLInputElement)) return;
      lastCheckbox = null;

      for (const input of container.querySelectorAll('[data-check-all-item]')) {
        setChecked(target, input, target.checked);
      }

      target.indeterminate = false;
      updateCount();
    }

    function onMouseDown(event) {
      if (!(event.target instanceof Element)) return;
      const target = event.target instanceof HTMLLabelElement ? event.target.control || event.target : event.target;

      if (target.hasAttribute('data-check-all-item')) {
        shiftKey = event.shiftKey;
      }
    }

    function onCheckAllItem(event) {
      if (event instanceof CustomEvent && event.detail) {
        const {
          relatedTarget
        } = event.detail;

        if (relatedTarget && (relatedTarget.hasAttribute('data-check-all') || relatedTarget.hasAttribute('data-check-all-item'))) {
          return;
        }
      }

      const target = event.target;
      if (!(target instanceof HTMLInputElement)) return;
      const itemCheckboxes = Array.from(container.querySelectorAll('[data-check-all-item]'));

      if (shiftKey && lastCheckbox) {
        const [start, end] = [itemCheckboxes.indexOf(lastCheckbox), itemCheckboxes.indexOf(target)].sort();

        for (const input of itemCheckboxes.slice(start, +end + 1 || 9e9)) {
          setChecked(target, input, target.checked);
        }
      }

      shiftKey = false;
      lastCheckbox = target;
      const allCheckbox = container.querySelector('[data-check-all]');

      if (allCheckbox) {
        const total = itemCheckboxes.length;
        const count = itemCheckboxes.filter(checkbox => checkbox instanceof HTMLInputElement && checkbox.checked).length;
        const checked = count === total;
        const indeterminate = total > count && count > 0;
        setChecked(target, allCheckbox, checked, indeterminate);
      }

      updateCount();
    }

    function updateCount() {
      const countContainer = container.querySelector('[data-check-all-count]');

      if (countContainer) {
        const count = container.querySelectorAll('[data-check-all-item]:checked').length;
        countContainer.textContent = count.toString();
      }
    }

    return {
      unsubscribe: () => {
        container.removeEventListener('mousedown', onMouseDown);
        container.removeEventListener('change', onChange);
      }
    };
  }

  var _default = /*#__PURE__*/function (_Controller) {
    _inherits(_default, _Controller);

    var _super = _createSuper(_default);

    function _default() {
      _classCallCheck(this, _default);

      return _super.apply(this, arguments);
    }

    _createClass(_default, [{
      key: "connect",
      value: function connect() {
        this._setAttributes();

        this._subscription = subscribe(this.element);
      }
    }, {
      key: "disconnect",
      value: function disconnect() {
        this._subscription.unsubscribe();

        this._subscription = null;
      }
    }, {
      key: "_setAttributes",
      value: function _setAttributes() {
        if (this.hasAllTarget) {
          this.allTarget.setAttribute('data-check-all', '');
        }

        if (this.hasCountTarget) {
          this.countTarget.setAttribute('data-check-all-count', '');
        }

        this.checkboxes.forEach(function (e) {
          return e.setAttribute('data-check-all-item', '');
        });
      }
    }, {
      key: "checkboxes",
      get: function get() {
        var selector = 'input[type="checkbox"]:not([data-check-all]):not([data-skip])';
        var elements = this.element.querySelectorAll(selector);
        return Array.from(elements);
      }
    }, {
      key: "checked",
      get: function get() {
        return this.checkboxes.filter(function (checkbox) {
          return checkbox.checked;
        });
      }
    }, {
      key: "unchecked",
      get: function get() {
        return this.checkboxes.filter(function (checkbox) {
          return !checkbox.checked;
        });
      }
    }]);

    return _default;
  }(stimulus.Controller);

  _default.targets = ['all', 'count'];

  return _default;

})));
//# sourceMappingURL=stimulus-check-all.umd.js.map