webpack-bootstrap-ui-kit/src/js_old/_components/_ui.form.stepped.js

"use strict";

import $ from "jquery";
import Events from "../_events";
import LANG from "../lang/_en";
import FormValidateField from "./_ui.form.validate.field";

import "../../scss/_components/_ui.form.stepped.scss";

const SteppedForm = (($) => {
  // Constants
  const NAME = "jsSteppedForm";
  const DATA_KEY = NAME;

  class SteppedForm {
    constructor(element) {
      console.log(`${NAME}: init`);

      const ui = this;
      const $element = $(element);

      $element.data(DATA_KEY, this);

      if (!$element.find(".steps-counter").length) {
        $element.prepend(LANG["en"][NAME]["STEPCOUNTER"]);
      }

      if (!$element.find(".steps-buttons").length) {
        $element.append(LANG["en"][NAME]["STEPBUTTONS"]);
      }

      ui._currentStepCounter = $element.find(".steps-counter .current-step");
      ui._totalStepsCounter = $element.find(".steps-counter .total-steps");

      ui._steps = $element.find(".step");
      ui._steps.each((i, el) => {
        const $el = $(el);

        if (!$el.data("step")) {
          $el.data("step", i + 1);
          $el.attr("data-step", i + 1);
        }
      });

      ui._stepNext = $element.find(".step-next");

      ui._stepPrev = $element.find(".step-prev");
      ui._actions = $element.children(".btn-toolbar,.form-actions");

      ui._element = element;
      ui._currentStep = 1;
      ui._totalSteps = ui._steps.last().data("step") || ui._steps.length;
      ui._stepsOrder = [];

      ui._totalStepsCounter.text(ui._totalSteps);

      // check if one of the steps already has an error
      const $hasError = ui._steps
        .find(
          ".field.error,.field.holder-error,.field.holder-validation,.field.holder-info,.field.holder-warning,.field.holder-good"
        )
        .first();
      if ($hasError.length) {
        const $modal = $element.parents(".modal");

        // show modal
        if ($modal.length && typeof $modal.modal !== "undefined") {
          $modal.modal("show");
        }

        ui._currentStep =
          $hasError.parents(".step").data("step") || ui._currentStep;
      }
      //

      ui.step(`.step[data-step="${ui._currentStep}"]`);

      ui._stepNext.on("click", (e) => {
        e.preventDefault();
        ui.next();
      });

      ui._stepPrev.on("click", (e) => {
        e.preventDefault();
        ui.prev();
      });

      $element.find(".step-toggle").on("click", (e) => {
        const $el = $(e.currentTarget);

        e.preventDefault();
        ui.step($el.data("target"));
      });

      $element.addClass(`${NAME}-active`);
      $element.trigger(Events.FORM_INIT_STEPPED);
    }

    // Public methods
    dispose() {
      console.log(`${NAME}: dispose`);
      const ui = this;
      const $element = $(ui._element);

      $element.removeClass(`${NAME}-active`);
      $.removeData(ui._element, DATA_KEY);
      ui._element = null;
    }

    next() {
      const ui = this;

      if (ui._currentStep >= ui._totalSteps) {
        return;
      }

      ui.step(`.step[data-step="${ui._currentStep + 1}"]`);
    }

    prev() {
      const ui = this;

      if (ui._currentStep <= 1) {
        return;
      }

      ui.step(ui._stepsOrder[ui._currentStep - 1]);
    }

    step(target) {
      const ui = this;
      const $element = $(ui._element);
      const $target = $element.find(target);
      const targetStep = parseInt($target.data("step"));

      // validate current step
      let valid = true;

      if (targetStep > ui._currentStep) {
        ui.currentStep()
          .find("input,textarea,select")
          .each((i, el) => {
            const $el = $(el);
            const fieldUI = $el.data("jsFormValidateField");

            if (fieldUI && !fieldUI.validate()) {
              valid = false;
            }
          });
      }

      if (!valid) {
        return false;
      }
      //

      if (parseInt($target.data("step")) <= "1") {
        ui._stepPrev.hide();
        $element.trigger(Events.FORM_STEPPED_FIRST_STEP);
      } else {
        ui._stepPrev.show();
      }

      if (parseInt($target.data("step")) >= ui._totalSteps) {
        ui._stepNext.hide();
        ui._actions.show();

        $element.trigger(Events.FORM_STEPPED_LAST_STEP);
      } else {
        ui._stepNext.show();
        ui._actions.hide();
      }

      ui._currentStep = targetStep;
      ui._stepsOrder[ui._currentStep] = $target;

      ui._steps.removeClass("active");
      $target.addClass("active");

      ui._currentStepCounter.text(ui._currentStep);

      $target.trigger(Events.FORM_STEPPED_NEW_STEP);
      $element.trigger(Events.FORM_STEPPED_NEW_STEP);
    }

    currentStep() {
      const ui = this;
      const $element = $(ui._element);

      return $element.find(".step.active");
    }

    static _jQueryInterface() {
      return this.each(function () {
        // attach functionality to element
        const $element = $(this);
        let data = $element.data(DATA_KEY);

        if (!data) {
          data = new SteppedForm(this);
          $element.data(DATA_KEY, data);
        }
      });
    }
  }

  // jQuery interface
  $.fn[NAME] = SteppedForm._jQueryInterface;
  $.fn[NAME].Constructor = SteppedForm;
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT;
    return SteppedForm._jQueryInterface;
  };

  // auto-apply
  $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
    $(".form-stepped").jsSteppedForm();
  });

  return SteppedForm;
})($);

export default SteppedForm;