baseframe-js/dist/cjs/Modal.js

A suite of useful Javascript plugins and functions to help with Front-end Development on websites

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _cashDom = _interopRequireDefault(require("cash-dom"));
var _Store = _interopRequireDefault(require("./core/Store"));
var _UrlState = _interopRequireDefault(require("./core/UrlState"));
var _trapFocus = _interopRequireDefault(require("./fn/trapFocus"));
var _helpers = require("./util/helpers");
var _hyperScript = _interopRequireDefault(require("./fn/hyperScript"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var VERSION = '1.2.0';
var EVENT_NAME = 'modal';
var DATA_NAME = 'Modal';
var DEFAULTS = {
  enableEvent: 'click',
  appendTo: document.body,
  ariaLabelledby: null,
  ariaLabel: null,
  cssPrefix: 'modal',
  closeBtnIconCss: 'ico i-close',
  closeBtnLabel: 'Close',
  closeOutDelay: 250,
  focusInDelay: 0,
  backDropClose: true,
  fromDOM: false,
  modalCss: null,
  modalID: null,
  src: '',
  urlFilterType: 'hash',
  historyType: 'replace',
  locationFilter: 'modal',
  loadLocation: true,
  onOpenOnce: _helpers.noop,
  onOpen: _helpers.noop,
  onClose: _helpers.noop,
  afterClose: _helpers.noop
};
var hasCb = function hasCb(cb, modalObj) {
  if (cb && typeof cb === 'function') {
    cb(modalObj);
  }
};
var Modal = exports["default"] = /*#__PURE__*/function () {
  function Modal(element, options) {
    _classCallCheck(this, Modal);
    _defineProperty(this, "element", void 0);
    _defineProperty(this, "params", void 0);
    _defineProperty(this, "modalID", void 0);
    _defineProperty(this, "modalObj", void 0);
    _defineProperty(this, "modalEvent", void 0);
    _defineProperty(this, "trappedFocus", void 0);
    _defineProperty(this, "enabledElem", void 0);
    _defineProperty(this, "openedOnce", void 0);
    var s = this;
    s.element = element;
    var dataOptions = (0, _helpers.getDataOptions)(element, EVENT_NAME);
    s.params = _cashDom["default"].extend({}, Modal.defaults, options, dataOptions);
    s.modalID = s.params.modalID;
    s.modalObj = s.getModalObj();
    s.modalEvent = EVENT_NAME + '_' + s.modalID;
    s.trappedFocus;
    s.enabledElem;
    s.openedOnce = false;
    s.handleEvents();
    s.loadFromUrl();
    (0, _Store["default"])(element, DATA_NAME, s);
    return s;
  }
  return _createClass(Modal, [{
    key: "handleEvents",
    value: function handleEvents() {
      var s = this;
      (0, _cashDom["default"])(s.element).on("".concat(s.params.enableEvent, ".").concat(s.modalEvent), function (e) {
        s.setDisplayAndEvents();
        e.preventDefault();
      });
    }
  }, {
    key: "setDisplayAndEvents",
    value: function setDisplayAndEvents() {
      var s = this;
      s.enableModal();
      (0, _cashDom["default"])(document).on("keydown.".concat(s.modalEvent, "Dismiss"), function (e) {
        var ekey = e.code || e.originalEvent.key; //cash-dom || jquery
        if (ekey === 'Escape') {
          s.close();
          e.preventDefault();
        }
      });
      (0, _cashDom["default"])(document).on("".concat(s.modalEvent, "Dismiss"), s.close);
    }
  }, {
    key: "getModalObj",
    value: function getModalObj() {
      var s = this,
        p = s.params,
        $closeBtn = (0, _hyperScript["default"])("button.".concat(p.cssPrefix, "__btn-dismiss"), {
          type: 'button',
          'aria-label': p.closeBtnLabel
        }).append((0, _hyperScript["default"])("i.".concat(p.closeBtnIconCss))),
        $dialogContent = (0, _hyperScript["default"])("div.".concat(p.cssPrefix, "__dialog-content")),
        $dialog = (0, _hyperScript["default"])("div.".concat(p.cssPrefix, "__dialog")).append($closeBtn, $dialogContent),
        $backdrop = (0, _hyperScript["default"])("div.".concat(p.cssPrefix, "__backdrop")),
        $modal = (0, _hyperScript["default"])("div", {
          "class": p.cssPrefix + (p.modalCss ? ' ' + p.modalCss : ''),
          'aria-label': p.ariaLabel || s.element.dataset.ariaLabel || null,
          'aria-labelledby': p.ariaLabelledby || s.element.dataset.ariaLabelledby || null,
          id: s.modalID
        }).append($backdrop, $dialog),
        $content = (0, _cashDom["default"])(s.params.src || s.element.hash || s.element.dataset.modalSrc);
      return {
        $backdrop: $backdrop,
        $content: $content,
        contentAppended: false,
        $dialog: $dialog,
        $dialogContent: $dialogContent,
        $closeBtn: $closeBtn,
        id: s.modalID,
        $modal: $modal,
        close: function close() {
          return s.close();
        },
        show: false
      };
    }
  }, {
    key: "enableModal",
    value: function enableModal() {
      var s = this;
      var _s$modalObj = s.modalObj,
        $backdrop = _s$modalObj.$backdrop,
        $closeBtn = _s$modalObj.$closeBtn,
        $content = _s$modalObj.$content,
        $modal = _s$modalObj.$modal;
      var p = s.params;
      s.enabledElem = document.activeElement;
      if (p.fromDOM) {
        $content.after((0, _hyperScript["default"])("span.".concat(p.cssPrefix, "-content-placemarker#").concat(s.modalObj.id, "_marker")));
      }
      if (!s.modalObj.contentAppended) {
        s.modalObj.$dialogContent.append($content);
        _cashDom["default"].extend(s.modalObj, {
          contentAppended: true
        });
      }
      (0, _cashDom["default"])(p.appendTo).append($modal);
      // attach events after appended to DOM
      $closeBtn.on("click.".concat(s.modalEvent, "Dismiss"), function () {
        return s.close();
      });
      if (p.backDropClose) $backdrop.on("click.".concat(s.modalEvent, "Dismiss"), function () {
        return s.close();
      });
      hasCb(p.onOpen, s.modalObj);
      if (!s.openedOnce) {
        hasCb(p.onOpenOnce, s.modalObj);
        s.openedOnce = true;
      }
      $modal.attr({
        role: 'dialog',
        'aria-modal': 'true'
      });
      (0, _helpers.reflow)($modal[0]);
      setTimeout(function () {
        $modal.addClass(p.cssPrefix + '--show');
        _cashDom["default"].extend(s.modalObj, {
          show: true
        });
      }, 0);
      if (p.focusInDelay !== null) {
        setTimeout(function () {
          s.trappedFocus = (0, _trapFocus["default"])($modal, {
            nameSpace: (0, _helpers.camelCase)(s.modalID)
          });
        }, p.focusInDelay);
      }
      (0, _cashDom["default"])(p.appendTo).addClass(p.cssPrefix + '-open').css({
        overflow: 'hidden',
        'padding-right': '0px'
      });
      if (p.urlFilterType !== 'none') {
        _UrlState["default"].set(p.urlFilterType, p.locationFilter, s.modalID, p.historyType);
      }
    }
  }, {
    key: "close",
    value: function close() {
      var s = this;
      var _s$modalObj2 = s.modalObj,
        $backdrop = _s$modalObj2.$backdrop,
        $closeBtn = _s$modalObj2.$closeBtn,
        $content = _s$modalObj2.$content,
        $modal = _s$modalObj2.$modal;
      var p = s.params;
      hasCb(p.onClose, s.modalObj);
      $modal.addClass(p.cssPrefix + '--dismissing');
      $modal.removeClass(p.cssPrefix + '--show');
      // detach events
      $closeBtn.off("click.".concat(s.modalEvent, "Dismiss"));
      if (p.backDropClose) $backdrop.off("click.".concat(s.modalEvent, "Dismiss"));
      (0, _cashDom["default"])(document).off("keydown.".concat(s.modalEvent, "Dismiss")).off("".concat(s.modalEvent, "Dismiss"));
      if (p.urlFilterType !== 'none') {
        _UrlState["default"].set(p.urlFilterType, p.locationFilter, null, p.historyType);
      }
      setTimeout(function () {
        $modal.attr({
          role: 'dialog',
          'aria-modal': ''
        }).removeClass(p.cssPrefix + '--dismissing').css({
          display: ''
        });
        (0, _cashDom["default"])(p.appendTo).removeClass(p.cssPrefix + '-open').css({
          overflow: '',
          'padding-right': ''
        });
        if (p.focusInDelay !== null) {
          s.trappedFocus.remove();
        }
        if (s.enabledElem && s.enabledElem instanceof HTMLElement) {
          s.enabledElem.focus();
        }
        if (p.fromDOM) {
          (0, _cashDom["default"])('#' + s.modalObj.id + '_marker').after($content).remove();
          _cashDom["default"].extend(s.modalObj, {
            contentAppended: false
          });
        }
        hasCb(p.afterClose, s.modalObj);
        $modal.remove();
        _cashDom["default"].extend(s.modalObj, {
          show: false
        });
      }, p.closeOutDelay);
    }
  }, {
    key: "loadFromUrl",
    value: function loadFromUrl() {
      var s = this;
      var p = s.params;
      if (p.locationFilter !== null && p.loadLocation && p.urlFilterType !== 'none') {
        var filterEl = _UrlState["default"].get(p.urlFilterType, p.locationFilter);
        if (filterEl === s.modalID) {
          s.modalObj.show ? s.close() : s.setDisplayAndEvents();
        }
      }
    }
  }], [{
    key: "remove",
    value: function remove(element, plugin) {
      (0, _cashDom["default"])(element).each(function () {
        var s = plugin || (0, _Store["default"])(this, DATA_NAME);
        var params = s.params;
        var _s$modalObj3 = s.modalObj,
          $backdrop = _s$modalObj3.$backdrop,
          $closeBtn = _s$modalObj3.$closeBtn;
        s.modalObj.show && s.modalObj.close();
        (0, _cashDom["default"])(s.element).off("".concat(s.params.enableEvent, ".").concat(s.modalEvent));
        $closeBtn.off("click.".concat(s.modalEvent, "Dismiss"));
        if (params.backDropClose) $backdrop.off("click.".concat(s.modalEvent, "Dismiss"));
        (0, _cashDom["default"])(document).off("keydown.".concat(s.modalEvent, "Dismiss")).off("".concat(s.modalEvent, "Dismiss"));
        (0, _cashDom["default"])(window).off("popstate.".concat(s.modalEvent, " ").concat(s.modalEvent));
        (0, _Store["default"])(this, DATA_NAME, null);
      });
    }
  }]);
}();
_defineProperty(Modal, "defaults", DEFAULTS);
_defineProperty(Modal, "version", VERSION);
_defineProperty(Modal, "pluginName", DATA_NAME);