WebBuild/wwwroot/libs/wizard/js/MultiStep.js

! function(root, factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], function($) {
            return factory($, window, document);
        });
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = function(root, $) {
            if (!root) {
                root = window;
            }
            if (!$) {
                $ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
                    require('jquery') :
                    require('jquery')(root);
            }
            return factory($, root, root.document);
        };
    } else {
        // Browser
        factory(jQuery, window, document);
    }
}(this, function($, w, d) {
    'use strict';

    var _multiModalClass = 'multi-step';
    var _modalHeaderClass = 'modal-header';
    var _modalBodyClass = 'modal-body';
    var _modalFooterClass = 'modal-footer';
    var _modalStepsClass = 'modal-steps';
    var _stepDotClass = 'dot';
    var _stepLabelClass = 'label';
    var _stepClass = 'step';
    var _stepContentContainerClass = 'step-content-container';
    var _stepContentClass = 'step-content';
    var _contentInnerClass = 'content-inner';
    var _prevClass = 'btn-prev';
    var _skipClass = 'btn-skip';
    var _nextClass = 'btn-next';
    var _currentClass = 'current';
    var _completedClass = 'completed';
    var _skippedClass = 'skipped';
    var _disabledClass = 'disabled';
    var _skippableClass = 'skippable';
    var defaults = {
        data: [],
        final: 'Are you sure you want to confirm?',
        finalLabel: 'Complete',
        title: '',
        prevText: 'Previous',
        skipText: 'Skip',
        nextText: 'Next',
        finishText: 'Finish',
        modalSize: 'md',
        onClose: function() {

        },
        onDestroy: function($elem) {

        }

    };

    var multiStep = function($element, options) {
        var $this = this;
        this.element = $element;
        this.options = $.extend({}, defaults, options);
        this.destroy = function() {
            this.element.html('');
            var id = this.element.attr('data-id')
            this.element.attr('id', id);
            this.element.removeAttr('data-id')
                .removeAttr('class')
                .removeAttr('tabindex')
                .removeAttr('role')
                .removeAttr('aria-labelledby')
                .removeAttr('aria-hidden');
            this._onDestroy();
        }
        this.init();
    };

    function uuidv4() {
        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
        )
    }

    multiStep.prototype = {
        constructor: multiStep,
        init: function() {
            this._buildModal();
            this._buildMultiStep();
        },
        update: function(options) {
            this.options = $.extend({}, this.options, options);
            this.init();
        },
        _buildMultiStep: function() {

            var $element = this.element;
            var id = $element.attr('id')
            if (!id || id.trim() == '') {
                id = uuidv4();
                $element.attr('id', id);
            }
            this.id = id;
            $element.addClass(_multiModalClass);
            var $header = $element.find(`.${_modalHeaderClass}`);
            this.header = $header;
            $header.append(`<div class="${_modalStepsClass}"></div>`);
            var $modalSteps = $header.find(`.${_modalStepsClass}`);
            this.modalSteps = $modalSteps;
            var $body = $element.find(`.${_modalBodyClass}`);
            this.body = $body;
            var $footer = $element.find(`.${_modalFooterClass}`);
            this.footer = $footer;
            this._buildDataContent();
            this._buildFooterContent();
            this._attachEvents();
            this._initialModal();

        },
        _buildModal: function() {
            var id = this.element.attr('id');
            var dataId = id;
            if (this.options.id) {
                id = this.options.id;
            }
            if (!id) {
                id = uuidv4();
            }
            this.element.attr('id', id)
                .attr('data-id', dataId)
                .attr('class', 'modal fade')
                .attr('tabindex', '-1')
                .attr('role', 'dialog')
                .attr('aria-labelledby', `${id}Title`)
                .attr('aria-hidden', 'true');
            this.element.html(`<div class="modal-dialog modal-dialog-centered modal-${this.options.modalSize} multi-step" role="document"><div class="modal-content"><div class="modal-header py-2"><div id="div_errroMessage" class="w-80 font-weight-400" style="margin:auto"></div><a href="javascript:;" class="close-btn" data-dismiss="modal"><i class="text-dark la la-times"></i></a></div><div class="modal-body h-430p py-2"></div><div class="modal-footer py-2"></div></div></div>`);
            var $this = this;
            this.element.on('hide.bs.modal', function() {
                $this._initialModal();
                $this._onClose();
            }).on('hidden.bs.modal', function() {
                $this._initialModal();
                $this._onClose();
            })
        },
        _onClose: function() {
            if (typeof this.options.onClose == 'function') {
                this.options.onClose(this.element);
            }
        },
        _onDestroy: function() {
            if (typeof this.options.onDestroy == 'function') {
                this.options.onDestroy();
            }
        },
        _buildDataContent: function() {
            var data = this.options.data;
            if (data && data.length > 0) {
                var steps = '';
                var stepContent = '';
                this.data = data;
                this.stepsCount = data.length;
                for (var i in data) {
                    var currentStep = Number(i) + 1;
                    var stepLabel = data[i].label ? data[i].label : `Step ${currentStep}`;
                    steps += `<div class="${_stepClass}" data-step="${currentStep}" data-step-skip=${data[i].skip==true}>
                                <div class="${_stepDotClass}"></div>
                                <label class="${_stepLabelClass}">${stepLabel}</label>
                                </div>`;
                    stepContent += `<div class="${_stepContentClass}" data-step="${currentStep}" data-step-skip=${data[i].skip==true}>
                                       <div class="${_contentInnerClass}">${data[i].content}</div>
                                       </div>`
                }
                steps += `<div class="${_stepClass}" data-step="${data.length+1}" data-step-skip=false>
                                <div class="${_stepDotClass}"></div>
                                <label class="${_stepLabelClass}">${this.options.finalLabel}</label>
                                </div>`;
                stepContent += `<div class="${_stepContentClass}" data-step="${data.length+1}" data-step-skip=false>
                                       <div class="${_contentInnerClass}">${this.options.final}</div>
                                       </div>`
                this.modalSteps.html(steps);
                stepContent = `<div class="${_stepContentContainerClass}">${stepContent}</div>`;
                this.body.html(stepContent);
                this.stepContentContainer = this.body.find(`.${_stepContentContainerClass}`);
            }

        },
        _buildFooterContent: function() {
            var footer = `<a href="javascript:;" id="multi_Step-prev" class="btn btn-sm btn-primary multi_Step-prev ${_prevClass}">${this.options.prevText}</a>
            <a href="javascript:;" class="btn btn-sm ${_skipClass} btn-primary">${this.options.skipText}</a>
           <a href="javascript:;" class="btn btn-sm btn-primary" data-isNext="true">NEXT</a>
            <a href="javascript:;" id="multi_Step-next" class="d-none btn btn-sm btn-primary multi_Step-next ${_nextClass}">${this.options.nextText}</a>`;
            this.footer.html(footer);
            this.prev = this.footer.find(`.${_prevClass}`);
            this.skip = this.footer.find(`.${_skipClass}`);
            this.next = this.footer.find(`.${_nextClass}`);
        },
        _attachEvents: function() {
            this._attachPrevEvent();
            this._attachSkipEvent();
            this._attachNextEvent();
        },
        _attachPrevEvent: function() {
            var $this = this;
            $this.prev.click(function() {
                $this.next.text($this.options.nextText);
                var prevIdx = $this.currentStepIdx - 1;
                if (prevIdx <= 1) {
                    prevIdx = 1;
                    $this.prev.addClass(_disabledClass).attr(_disabledClass, _disabledClass);
                } else {
                    $this.prev.removeClass(_disabledClass).removeAttr(_disabledClass);
                }
                $this._currentStep(prevIdx);
                $this._checkSkip();
                $this._showContent(prevIdx);
            });
        },
        _checkSkip: function() {
            var skipStep = this.modalSteps.find(`.${_currentClass}`).attr('data-step-skip') == 'true';
            if (skipStep) {
                this.skip.addClass(_skippableClass);
            } else {
                this.skip.removeClass(_skippableClass);
            }

        },
        _attachSkipEvent: function() {
            var $this = this;
            $this.skip.click(function() {
                var nextIdx = $this.currentStepIdx;
                if (nextIdx + 1 <= 1) {
                    $this.prev.addClass(_disabledClass).attr(_disabledClass, _disabledClass);
                } else {
                    $this.prev.removeClass(_disabledClass).removeAttr(_disabledClass);
                }
                $this._skipStep(nextIdx);
                $this._showContent(nextIdx + 1);

            });
        },
        _attachNextEvent: function() {
            var $this = this;
            $this.next.click(function() {
                var nextIdx = $this.currentStepIdx;
                if (nextIdx >= $this.stepsCount + 1) {
                    $this.element.modal('hide');
                    return;
                }
                if (nextIdx >= $this.stepsCount) {
                    $this.next.text($this.options.finishText);
                } else {
                    $this.next.text($this.options.nextText);
                }
                if (nextIdx + 1 <= 1) {
                    $this.prev.addClass(_disabledClass).attr(_disabledClass, _disabledClass);
                } else {
                    $this.prev.removeClass(_disabledClass).removeAttr(_disabledClass);
                }
                $this._completeStep(nextIdx);
                $this._showContent(nextIdx + 1);

            });
        },
        _currentStep: function(i) {
            var idx = this.modalSteps.find(`[data-step]`).length;
            this._recursiveCurrentStep(i, idx);
            this.currentStepIdx = i;

        },
        _showContent: function(i) {
            var $this = this;
            if (this.stepContentContainer) {
                this.stepContentContainer.find(`.${_stepContentClass}`).removeClass('active');
                this.stepContentContainer.find(`[data-step="${i}"]`).addClass('active');

            }

        },
        _recursiveCurrentStep: function(target, i) {
            if (i < 1) {
                return;
            }
            var currentStep = this.modalSteps.find(`[data-step="${i}"]`);
            var $this = this;
            if (target == i) {
                currentStep.removeClasses([_completedClass, _skippedClass]).addClass(_currentClass);
                $this._checkSkip();
            } else {
                if (currentStep.hasAnyClass([_completedClass, _currentClass, _skippedClass])) {
                    currentStep.removeClasses([_completedClass, _currentClass, _skippedClass]);
                    setTimeout(function() {
                        $this._recursiveCurrentStep(target, --i);
                    }, 200);
                } else {
                    $this._recursiveCurrentStep(target, --i);
                }
            }

        },
        _completeStep: function(i) {
            var $this = this;
            this.modalSteps.find(`[data-step="${i}"]`).addClass(_completedClass).removeClasses([_currentClass, _skippedClass]);
            setTimeout(function() {
                $this.modalSteps.find(`[data-step="${Number(i)+1}"]`).addClass(_currentClass);
                $this.currentStepIdx = Number(i) + 1;
                $this._checkSkip();
            }, 200);
        },
        _skipStep: function(i) {
            var $this = this;
            this.modalSteps.find(`[data-step="${i}"]`).addClass(_skippedClass).removeClasses([_currentClass, _completedClass]);
            setTimeout(function() {
                $this.modalSteps.find(`[data-step="${Number(i)+1}"]`).addClass(_currentClass);
                $this.currentStepIdx = Number(i) + 1;
                $this._checkSkip();
            }, 200);
        },
        _initialModal: function() {
            this._currentStep(1);
            this.prev.addClass(_disabledClass).attr(_disabledClass, _disabledClass);
            this._checkSkip();
            this._showContent(1);
            this.next.text(this.options.nextText);
        }
    }



    $.fn.MultiStep = function(options, callback) {
        if (typeof options == 'object') {
            options = $.extend(true, {}, defaults, options);
        }
        this.each(function() {
            var $this = $(this);
            if (!$this.data('multiStep') && (options ? typeof options == 'object' : true)) {
                $this.data('multiStep', new multiStep($this, options));
            } else if ($this.data('multiStep')) {
                if (typeof options == 'string') {
                    var func = options;
                    var params = callback;
                    $this.data('multiStep')[func].call(params);
                } else {
                    $this.data('multiStep').update(options);
                }

            }


        });
        if (typeof callback == 'function') {
            callback.call(this.element);
        };
        return this;
    };
    $.fn.MultiStep.defaults = defaults;
    $.fn.MultiStep.multiStep = multiStep;


    $(document).ready(function() {
        $('.multi-step').MultiStep();
    });
});
$.fn.removeClasses = function(arr) {
    if (typeof arr == 'string') {
        arr = [arr];
    }
    for (var i = arr.length - 1; i >= 0; i--) {
        var x = arr[i];
        this.removeClass(x);
    }
    return this;
}
$.fn.addClasses = function(arr) {
    if (typeof arr == 'string') {
        arr = [arr];
    }
    for (var i = arr.length - 1; i >= 0; i--) {
        var x = arr[i];
        this.addClass(x);
    }
    return this;
}
$.fn.hasAnyClass = function(arr) {
    if (typeof arr == 'string') {
        arr = [arr];
    }
    for (var i = arr.length - 1; i >= 0; i--) {
        var x = arr[i];
        if (this.hasClass(x)) {
            return true;
        }
    }
    return false;
}