(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';

var _modal = require('./modal');

// initialize all elements
var componentsList = document.querySelectorAll(_modal.Modal.getSelector()); // Import all components

for (var i = 0; i < componentsList.length; i++) {
	new _modal.Modal(componentsList[i]);
}
},{"./modal":2}],2:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Modal = undefined;

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * modal.js
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * Script to toggle modal
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      */

var _elementHelpers = require('../helpers/element-helpers');

var _elementHelpers2 = _interopRequireDefault(_elementHelpers);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

/**
 * Declare constants
 */
var attributeBase = 'data-rs-modal';

var Modal = exports.Modal = function () {
  function Modal(element) {
    _classCallCheck(this, Modal);

    this.element = element;
    this.openTrigger = _elementHelpers2.default.getElementByAttribute(this.attributes.trigger, this.element.getAttribute(attributeBase));
    this.closeTrigger = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.closeTrigger);
    this.doNotCloseOnClickOverlay = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.doNotCloseOnClickOverlay);
    this.dialog = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.dialog);
    this.main = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.main);
    this.header = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.header);
    this.footer = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.footer);
    this.disableHistory = this.element.getAttribute(this.attributes.disableHistory) !== null;
    this.popupDelay = this.element.getAttribute(this.attributes.popupDelay);
    this.defaultPopupDelay = 5;
    this.scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    this.scrollPosition = 3;
    this.bodyMarginTop = Modal.initializeBodyMarginTop();
    this.addEventHandlers();
    this.handleDividers();
    this.handleQueryStringParameters();
    this.initializePopup();
  }

  /**
   * Declare classes
   */


  _createClass(Modal, [{
    key: 'addEventHandlers',


    /**
     * Add event handlers
     */
    value: function addEventHandlers() {
      var _this = this;

      // toggle modal on click trigger
      this.openTrigger.addEventListener('click', function (event) {
        event.preventDefault();
        _this.scrollPosition = window.pageYOffset;
        _this.toggleModal(!_this.disableHistory);
      });
      // close/toggle modal on click close trigger
      this.closeTrigger.addEventListener('click', function (event) {
        event.preventDefault();
        _this.toggleModal(!_this.disableHistory);
        document.body.style.marginTop = _this.bodyMarginTop + 'px';
        window.scrollTo(0, _this.scrollPosition);
      });
      // if clicked outside modal/on overlay close/toggle modal
      this.element.addEventListener('mousedown', function (clickEvent) {
        if (!_this.doNotCloseOnClickOverlay && clickEvent.target !== _this.dialog && !_this.dialog.contains(clickEvent.target)) {
          _this.toggleModal(!_this.disableHistory);
          document.body.style.marginTop = _this.bodyMarginTop + 'px';
          window.scrollTo(0, _this.scrollPosition);
        }
      });
      // on resize, handle dividers of modal
      window.addEventListener('resize', function () {
        _this.handleDividers();
      });
      // on scroll, check position to set/unset dividers
      this.main.addEventListener('scroll', function () {
        _this.checkPosition();
      }, { passive: true });
      // on popstate event (i.e. back button in browser), handle querystring parameters
      window.addEventListener('popstate', function () {
        _this.handleQueryStringParameters(false);
      });
      // handle key down event - close modal if escape is pressed
      document.addEventListener('keydown', function (keydownEvent) {
        _this.handleButtonKeys(keydownEvent);
      });
    }

    /**
     * Toggle modal
     */

  }, {
    key: 'toggleModal',
    value: function toggleModal() {
      var changePushState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

      this.element.classList.contains(this.classes.modalActive) ? this.closeModal(changePushState) : this.openModal(changePushState);
    }

    /**
     * Close modal - closes modal, set styling and edit pushstate
     * @param {boolean} changePushState - determines if history push state should be adjusted
     */

  }, {
    key: 'closeModal',
    value: function closeModal(changePushState) {
      // remove width of scrollbar to body and modal
      document.body.style.paddingRight = '0px';
      this.element.style.paddingRight = '';

      // if changePushState is true, remove querystring parameters from url
      if (changePushState) {
        window.history.pushState({}, '', window.location.pathname);
      }
      document.querySelector('html').classList.remove(this.classes.modalOpen);
      this.element.setAttribute(this.attributes.hidden, '');
      this.element.classList.remove(this.classes.modalActive);
    }

    /**
     * Open modal - opens modal, set styling and edit pushstate
     * @param {boolean} changePushState - determines if history push state should be adjusted
     */

  }, {
    key: 'openModal',
    value: function openModal(changePushState) {
      document.body.style.marginTop = this.bodyMarginTop - this.scrollPosition + 'px';
      document.body.style.paddingRight = this.scrollbarWidth + 'px';
      this.element.style.paddingRight = this.scrollbarWidth + 'px';

      // if changePushState is true, add querystring parameters to url
      if (changePushState) {
        window.history.pushState({}, '', window.location.pathname + '?' + this.attributes.modalOpen + '=' + this.element.getAttribute(attributeBase));
      }
      document.querySelector('html').classList.add(this.classes.modalOpen);
      this.element.removeAttribute(this.attributes.hidden);
      this.element.classList.add(this.classes.modalActive);
    }

    /**
     * Handle dividers - add or remove dividers
     */

  }, {
    key: 'handleDividers',
    value: function handleDividers() {
      if (this.main.scrollHeight > this.main.offsetHeight) {
        // article element has a scrollbar, add divider classes
        this.addDivider();
      } else if (this.header && this.header.classList.contains(this.classes.divider)) {
        // article element has no scrollbar, remove divider classes
        this.removeDivider();
      }
    }

    /**
     * Add divider - add divider classes if main content is scrollable
     */

  }, {
    key: 'addDivider',
    value: function addDivider() {
      this.main.classList.add(this.classes.modalMainOverflow);
      if (this.footer !== null) {
        this.footer.classList.add(this.classes.divider, this.classes.dividerTop);
      }
    }

    /**
     * Remove divider - remove divider classes if main content is not scrollable
     */

  }, {
    key: 'removeDivider',
    value: function removeDivider() {
      this.header.classList.remove(this.classes.divider);
      this.main.classList.remove(this.classes.modalMainOverflow);
      if (this.footer !== null) {
        this.footer.classList.remove(this.classes.dividerTop);
      }
    }

    /**
     * Check position
     */

  }, {
    key: 'checkPosition',
    value: function checkPosition() {
      var modalMainY = this.main.scrollTop;
      if (this.header && modalMainY > this.scrollPosition) {
        this.header.classList.add(this.classes.divider);
        this.header.classList.add(this.classes.modalHeaderDividerIn);
        this.header.classList.remove(this.classes.modalHeaderDividerOut);
      }
      if (this.header && modalMainY < this.scrollPosition || this.header && modalMainY === 0) {
        this.header.classList.add(this.classes.modalHeaderDividerOut);
        this.header.classList.remove(this.classes.divider);
        this.header.classList.remove(this.classes.modalHeaderDividerIn);
      }
    }

    /**
     * Handle querystring parameters - check querystring parameters to show or hide modal
     */

  }, {
    key: 'handleQueryStringParameters',
    value: function handleQueryStringParameters() {
      if (window.location.href.includes('?' + this.attributes.modalOpen)) {
        var urlParams = new URLSearchParams(window.location.search);

        // open modal if element is equal to value in querystring parameter
        this.openModalElement = urlParams.get(this.attributes.modalOpen);
        if (this.openModalElement === this.element.getAttribute(attributeBase)) {
          this.openModal(false);
        }
      } else {
        this.closeModal(false);
      }
    }

    /**
     * Initialize popup - if element contains popup-delay attribute => show popup with delay, if no delay found  -> set to 5 sec
     */

  }, {
    key: 'initializePopup',
    value: function initializePopup() {
      var _this2 = this;

      if (this.popupDelay !== null) {
        var popupDelay = this.element.getAttribute(this.attributes.popupDelay);
        setTimeout(function () {
          _this2.openModal(false);
        }, (popupDelay === '' ? this.defaultPopupDelay : popupDelay) * 1000);
      }
    }

    /**
     * Handle button keys - handle key presses escape
     *
     * @param {Event} event - event triggered
     */

  }, {
    key: 'handleButtonKeys',
    value: function handleButtonKeys(event) {
      if (event != null) {
        switch (_elementHelpers2.default.getKeyCodeOnKeyDownEvent(event)) {
          case this.keyCodes.Escape:
            event.preventDefault();
            this.closeModal(true);
            document.body.style.marginTop = this.bodyMarginTop + 'px';
            window.scrollTo(0, this.scrollPosition);
            break;
        }
      }
    }

    /**
     * Get selector
     */

  }, {
    key: 'classes',
    get: function get() {
      return {
        modalActive: 'modal--active',
        modalOpen: 'modal-open',
        modalHeaderDivider: 'divider',
        modalHeaderDividerIn: 'modal__header--divider-in',
        modalHeaderDividerOut: 'modal__header--divider-out',
        modalMainOverflow: 'modal__main--overflow',
        divider: 'divider',
        dividerTop: 'divider--top'
      };
    }

    /**
     * Declare attribute constants
     */

  }, {
    key: 'attributes',
    get: function get() {
      return {
        trigger: attributeBase + '-trigger',
        popupDelay: attributeBase + '-popup-delay',
        closeTrigger: attributeBase + '-close-trigger',
        dialog: attributeBase + '-dialog',
        main: attributeBase + '-main',
        doNotCloseOnClickOverlay: attributeBase + '-do-not-close-on-click-overlay',
        header: attributeBase + '-header',
        footer: attributeBase + '-footer',
        disableHistory: attributeBase + '-disable-history',
        modalOpen: 'modal_open',
        hidden: 'hidden'
      };
    }

    /**
     * Declare key codes
     */

  }, {
    key: 'keyCodes',
    get: function get() {
      return {
        Escape: 'Escape'
      };
    }

    /**
     * Initalize body margin top
     */

  }], [{
    key: 'initializeBodyMarginTop',
    value: function initializeBodyMarginTop() {
      var marginTop = document.body.style.marginTop;
      return !marginTop ? 0 : marginTop.slice(0, marginTop.length - 2);
    }
  }, {
    key: 'getSelector',
    value: function getSelector() {
      return '[' + attributeBase + ']';
    }
  }]);

  return Modal;
}();
},{"../helpers/element-helpers":3}],3:[function(require,module,exports){
'use strict';

var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

var ElementHelpers = function () {
	function ElementHelpers() {
		_classCallCheck(this, ElementHelpers);
	}

	_createClass(ElementHelpers, null, [{
		key: 'triggerEvent',


		/**
   * Trigger an event on a specified element
   * @param element {Node}
   * @param eventType
   */
		value: function triggerEvent(element, eventType) {
			var event = void 0;

			if (typeof Event === 'function') {
				event = new Event(eventType);
			} else {
				event = document.createEvent('Event');
				event.initEvent(eventType, true, true);
			}
			element.dispatchEvent(event);
		}

		/**
   * Get element by attribute and optional by attribute value
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementByAttribute',
		value: function getElementByAttribute(attributeName, attributeValue) {
			if (attributeValue) {
				return document.querySelector('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return document.querySelector('[' + attributeName + ']');
			}
		}

		/**
   * Get multiple elements by attribute and optional by attribute value
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementsByAttribute',
		value: function getElementsByAttribute(attributeName, attributeValue) {
			if (attributeValue) {
				return document.querySelectorAll('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return document.querySelectorAll('[' + attributeName + ']');
			}
		}

		/**
   * Get element by attribute and optional by attribute value, within an element
   * @param element
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementByAttributeWithinElement',
		value: function getElementByAttributeWithinElement(element, attributeName, attributeValue) {
			if (attributeValue) {
				return element.querySelector('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return element.querySelector('[' + attributeName + ']');
			}
		}

		/**
   * check if mouse pointer is on element
   * @param element
   */

	}, {
		key: 'isMouseOver',
		value: function isMouseOver(element) {
			return Array.prototype.slice.call(element.parentElement.querySelectorAll(':hover')).filter(function () {
				return element[0] == this;
			}).length > 0;
		}

		/**
   * Get multiple elements by attribute and optional by attribute value, within an element
   * @param element
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementsByAttributeWithinElement',
		value: function getElementsByAttributeWithinElement(element, attributeName, attributeValue) {
			if (attributeValue) {
				return element.querySelectorAll('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return element.querySelectorAll('[' + attributeName + ']');
			}
		}

		/**
   * Get element by class, within an element
   * @param element
   * @param className
   */

	}, {
		key: 'getElementByClassWithinElement',
		value: function getElementByClassWithinElement(element, className) {
			return element.querySelector('.' + className);
		}

		/**
   * get max width for mobile viewports 
   */

	}, {
		key: 'maxWidthMobileViewports',
		value: function maxWidthMobileViewports() {
			return 940;
		}

		/**
   * Create an event
   * @param eventType
   */

	}, {
		key: 'createEvent',
		value: function createEvent(eventType) {
			var event = void 0;
			if (typeof Event === 'function') {
				event = new Event(eventType);
			} else {
				event = document.createEvent('Event');
				event.initEvent(eventType, true, true);
			}
			return event;
		}

		/**
   * checks if viewport is desktop size
   */

	}, {
		key: 'isDesktop',
		value: function isDesktop() {
			return Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > this.maxWidthMobileViewports();
		}
	}, {
		key: 'isIE11',
		value: function isIE11() {
			return navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1;
		}

		/**
   * Get keycode on keydown event, as fallback if event.code is not supported yet by the browser
   * @param event
   */

	}, {
		key: 'getKeyCodeOnKeyDownEvent',
		value: function getKeyCodeOnKeyDownEvent(event) {
			var keyCode = void 0;
			if (event != null) {
				if (typeof event.code === 'undefined') {
					switch (event.keyCode) {
						case 13:
							keyCode = 'Enter';
							break;
						case 38:
							keyCode = 'ArrowUp';
							break;
						case 40:
							keyCode = 'ArrowDown';
							break;
						case 9:
							keyCode = 'Tab';
							break;
						case 27:
							keyCode = 'Escape';
							break;
						case 33:
							keyCode = 'PageUp';
							break;
						case 34:
							keyCode = 'PageDown';
							break;
						default:
							keyCode = undefined;
							break;
					}
				} else {
					keyCode = event.code;
				}
			}
			return keyCode;
		}
	}]);

	return ElementHelpers;
}();

module.exports = ElementHelpers;
},{}]},{},[1]);
