silverstripe-userforms/client/dist/js/userforms.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// identity function for calling harmony imports with the correct context
/******/ 	__webpack_require__.i = function(value) { return value; };
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./client/src/bundles/bundle.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./client/src/bundles/UserForms.js":
/***/ (function(module, exports, __webpack_require__) {

"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; }; }();

var _i18n = __webpack_require__(0);

var _i18n2 = _interopRequireDefault(_i18n);

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"); } }

document.addEventListener("DOMContentLoaded", function () {

  var forms = document.querySelectorAll('form.userform');
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = forms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var form = _step.value;

      var userForm = new UserForm(form);
      userForm.init();
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }
});

var ProgressBar = function () {
  function ProgressBar(dom, userForm) {
    _classCallCheck(this, ProgressBar);

    this.dom = dom;
    this.userForm = userForm;
    this.progressTitle = this.userForm.dom.querySelector('.progress-title');
    this.buttons = this.dom.querySelectorAll('.step-button-jump');
    this.currentStepNumber = this.dom.querySelector('.current-step-number');
    this.init();
  }

  _createClass(ProgressBar, [{
    key: 'init',
    value: function init() {
      var _this = this;

      this.dom.style.display = 'initial';
      var buttons = this.buttons;

      var _loop = function _loop(button) {
        button.addEventListener('click', function (e) {
          e.preventDefault();
          var stepNumber = parseInt(button.getAttribute('data-step'), 10);
          _this.userForm.jumpToStep(stepNumber);
          return false;
        });
      };

      var _iteratorNormalCompletion2 = true;
      var _didIteratorError2 = false;
      var _iteratorError2 = undefined;

      try {
        for (var _iterator2 = buttons[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
          var button = _step2.value;

          _loop(button);
        }
      } catch (err) {
        _didIteratorError2 = true;
        _iteratorError2 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion2 && _iterator2.return) {
            _iterator2.return();
          }
        } finally {
          if (_didIteratorError2) {
            throw _iteratorError2;
          }
        }
      }

      this.userForm.dom.addEventListener('userform.form.changestep', function (e) {
        _this.update(e.detail.stepId);
      });

      this.update(0);
    }
  }, {
    key: 'isVisible',
    value: function isVisible(element) {
      return !(element.style.display !== 'none' && element.style.visibility !== 'hidden' && element.classList.contains('hide'));
    }
  }, {
    key: 'update',
    value: function update(stepId) {
      var stepNumber = this.userForm.getCurrentStepID() + 1;
      var newStep = this.userForm.getStep(stepId);
      var newStepElement = newStep.step;
      var barWidth = stepId / (this.buttons.length - 1) * 100;

      this.currentStepNumber.innerText = stepNumber;

      var _iteratorNormalCompletion3 = true;
      var _didIteratorError3 = false;
      var _iteratorError3 = undefined;

      try {
        for (var _iterator3 = this.dom.querySelectorAll('[aria-valuenow]')[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
          var e = _step3.value;

          e.setAttribute('aria-valuenow', stepNumber);
        }
      } catch (err) {
        _didIteratorError3 = true;
        _iteratorError3 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion3 && _iterator3.return) {
            _iterator3.return();
          }
        } finally {
          if (_didIteratorError3) {
            throw _iteratorError3;
          }
        }
      }

      var _iteratorNormalCompletion4 = true;
      var _didIteratorError4 = false;
      var _iteratorError4 = undefined;

      try {
        for (var _iterator4 = this.buttons[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
          var button = _step4.value;

          var parent = button.parentNode;
          if (parseInt(button.getAttribute('data-step'), 10) === stepNumber && this.isVisible(button)) {
            parent.classList.add('current');
            parent.classList.add('viewed');

            button.disabled = false;
            break;
          }
          parent.classList.remove('current');
        }
      } catch (err) {
        _didIteratorError4 = true;
        _iteratorError4 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion4 && _iterator4.return) {
            _iterator4.return();
          }
        } finally {
          if (_didIteratorError4) {
            throw _iteratorError4;
          }
        }
      }

      this.progressTitle.innerText = newStepElement.getAttribute('data-title');

      barWidth = barWidth ? barWidth + '%' : '';
      this.dom.querySelector('.progress-bar').style.width = barWidth;
    }
  }]);

  return ProgressBar;
}();

var FormStep = function () {
  function FormStep(step, userForm) {
    _classCallCheck(this, FormStep);

    this.step = step;
    this.userForm = userForm;
    this.viewed = false;
    this.buttonHolder = null;
    this.id = 0;

    this.init();
  }

  _createClass(FormStep, [{
    key: 'init',
    value: function init() {
      var _this2 = this;

      var id = this.getHTMLId();
      this.buttonHolder = document.querySelector('.step-button-wrapper[data-for=\'' + id + '\']');
      ['userform.field.hide', 'userform.field.show'].forEach(function (action) {
        _this2.buttonHolder.addEventListener(action, function () {
          _this2.userForm.dom.trigger('userform.form.conditionalstep');
        });
      });
    }
  }, {
    key: 'setId',
    value: function setId(id) {
      this.id = id;
    }
  }, {
    key: 'getHTMLId',
    value: function getHTMLId() {
      return this.step.getAttribute('id');
    }
  }, {
    key: 'show',
    value: function show() {
      this.step.setAttribute('aria-hidden', false);
      this.step.classList.remove('hide');
      this.step.classList.add('viewed');
      this.viewed = true;
    }
  }, {
    key: 'hide',
    value: function hide() {
      this.step.setAttribute('aria-hidden', true);
      this.step.classList.add('hide');
    }
  }, {
    key: 'conditionallyHidden',
    value: function conditionallyHidden() {
      var button = this.buttonHolder.querySelector('button');
      return !(button.style.display !== 'none' && button.visibility !== 'hidden' && button.classList.contains('hide'));
    }
  }]);

  return FormStep;
}();

var FormActions = function () {
  function FormActions(dom, userForm) {
    _classCallCheck(this, FormActions);

    this.dom = dom;
    this.userForm = userForm;
    this.prevButton = dom.querySelector('.step-button-prev');
    this.nextButton = dom.querySelector('.step-button-next');

    this.init();
  }

  _createClass(FormActions, [{
    key: 'init',
    value: function init() {
      var _this3 = this;

      this.prevButton.addEventListener('click', function (e) {
        e.preventDefault();

        window.triggerDispatchEvent(_this3.userForm.dom, 'userform.action.prev');
      });
      this.nextButton.addEventListener('click', function (e) {
        e.preventDefault();

        window.triggerDispatchEvent(_this3.userForm.dom, 'userform.action.next');
      });

      this.update();

      this.userForm.dom.addEventListener('userform.form.changestep', function () {
        _this3.update();
      });

      this.userForm.dom.addEventListener('userform.form.conditionalstep', function () {
        _this3.update();
      });
    }
  }, {
    key: 'update',
    value: function update() {
      var numberOfSteps = this.userForm.getNumberOfSteps();
      var stepID = this.userForm.getCurrentStepID();
      var i = null;
      var lastStep = null;
      for (i = numberOfSteps - 1; i >= 0; i--) {
        lastStep = this.userForm.getStep(i);
        if (!lastStep.conditionallyHidden()) {
          if (stepID >= i) {
            this.nextButton.parentNode.classList.add('hide');
            this.prevButton.parentNode.classList.remove('hide');
          } else {
            this.nextButton.parentNode.classList.remove('hide');
            this.prevButton.parentNode.classList.add('hide');
          }

          if (stepID >= i) {
            this.dom.querySelector('.btn-toolbar').classList.remove('hide');
          } else {
            this.dom.querySelector('.btn-toolbar').classList.add('hide');
          }

          break;
        }
      }
    }
  }]);

  return FormActions;
}();

var UserForm = function () {
  function UserForm(form) {
    _classCallCheck(this, UserForm);

    this.dom = form;
    this.CONSTANTS = {};
    this.steps = [];
    this.progressBar = null;
    this.actions = null;
    this.currentStep = null;

    this.CONSTANTS.ENABLE_LIVE_VALIDATION = this.dom.getAttribute('livevalidation') !== undefined;
    this.CONSTANTS.DISPLAY_ERROR_MESSAGES_AT_TOP = this.dom.getAttribute('toperrors') !== undefined;
  }

  _createClass(UserForm, [{
    key: 'init',
    value: function init() {
      this.initialiseFormSteps();
    }
  }, {
    key: 'initialiseFormSteps',
    value: function initialiseFormSteps() {
      var _this4 = this;

      var steps = this.dom.querySelectorAll('.form-step');
      var _iteratorNormalCompletion5 = true;
      var _didIteratorError5 = false;
      var _iteratorError5 = undefined;

      try {
        for (var _iterator5 = steps[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
          var stepDom = _step5.value;

          var step = new FormStep(stepDom, this);
          step.hide();
          this.addStep(step);
        }
      } catch (err) {
        _didIteratorError5 = true;
        _iteratorError5 = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion5 && _iterator5.return) {
            _iterator5.return();
          }
        } finally {
          if (_didIteratorError5) {
            throw _iteratorError5;
          }
        }
      }

      this.setCurrentStep(this.steps[0]);

      var progressBarDom = this.dom.querySelector('.userform-progress');
      if (progressBarDom) {
        this.progressBar = new ProgressBar(progressBarDom, this);
      }

      var stepNavigation = this.dom.querySelector('.step-navigation');
      if (stepNavigation) {
        this.formActions = new FormActions(stepNavigation, this);
        this.formActions.update();
      }

      this.setUpPing();

      this.dom.addEventListener('userform.action.next', function () {
        _this4.nextStep();
      });

      this.dom.addEventListener('userform.action.prev', function () {
        _this4.prevStep();
      });
    }
  }, {
    key: 'setCurrentStep',
    value: function setCurrentStep(step) {
      if (!(step instanceof FormStep)) {
        return;
      }
      this.currentStep = step;
      this.currentStep.show();
    }
  }, {
    key: 'addStep',
    value: function addStep(step) {
      if (!(step instanceof FormStep)) {
        return;
      }
      step.setId(this.steps.length);
      this.steps.push(step);
    }
  }, {
    key: 'getNumberOfSteps',
    value: function getNumberOfSteps() {
      return this.steps.length;
    }
  }, {
    key: 'getCurrentStepID',
    value: function getCurrentStepID() {
      return this.currentStep.id ? this.currentStep.id : 0;
    }
  }, {
    key: 'getStep',
    value: function getStep(index) {
      return this.steps[index];
    }
  }, {
    key: 'nextStep',
    value: function nextStep() {
      this.jumpToStep(this.steps.indexOf(this.currentStep) + 1, true);
    }
  }, {
    key: 'prevStep',
    value: function prevStep() {
      this.jumpToStep(this.steps.indexOf(this.currentStep) - 1, true);
    }
  }, {
    key: 'jumpToStep',
    value: function jumpToStep(stepNumber, direction) {
      var targetStep = this.steps[stepNumber];
      var isValid = false;
      var forward = direction === undefined ? true : direction;

      if (targetStep === undefined) {
        return;
      }

      if (targetStep.conditionallyHidden()) {
        if (forward) {
          this.jumpToStep(stepNumber + 1, direction);
        } else {
          this.jumpToStep(stepNumber - 1, direction);
        }
        return;
      }

      if (this.currentStep) {
        this.currentStep.hide();
      }

      this.setCurrentStep(targetStep);

      window.triggerDispatchEvent(this.dom, 'userform.form.changestep', {
        stepId: targetStep.id
      });
    }
  }, {
    key: 'setUpPing',
    value: function setUpPing() {
      window.setInterval(function () {
        fetch('UserDefinedFormController/ping');
      }, 180 * 1000);
    }
  }]);

  return UserForm;
}();

/***/ }),

/***/ "./client/src/bundles/bundle.js":
/***/ (function(module, exports, __webpack_require__) {

"use strict";


__webpack_require__("./client/src/bundles/UserForms.js");

/***/ }),

/***/ 0:
/***/ (function(module, exports) {

module.exports = i18n;

/***/ })

/******/ });
//# sourceMappingURL=userforms.js.map