This commit is contained in:
sriramphanib committed 2023-03-11 17:30:20 +00:00
commit b6c4e025bc
5124 files changed
+1153349

No files matched your search

+58
View File
@@ -0,0 +1,58 @@
.multi-step .btn.btn-primary {
color: white;
}
.multi-step .modal-header .modal-steps .step:before {
border-color: #EAEAEA;
}
.multi-step .modal-header .modal-steps .step .dot {
border-color: #EAEAEA;
background-color: #EAEAEA;
}
.multi-step .modal-header .modal-steps .step:after {
border-color: #EAEAEA;
}
.multi-step .modal-header .modal-steps .step.current .dot:before {
background-color: #EAEAEA;
}
.multi-step .modal-header .modal-steps .step.skipped:after {
border-color: #ffc107;
}
.multi-step .modal-header .modal-steps .step.skipped .dot {
border-color: #ffc107;
}
.multi-step .modal-header .modal-steps .step.skipped .dot:before {
background-color: #ffc107;
}
.multi-step .modal-footer .btn-prev {
background-color: #39c0ba;
}
.multi-step .modal-footer .btn-prev.disabled {
background-color: #EAEAEA;
color: #000;
}
.multi-step .modal-footer .btn-skip {
background-color: #ffc107;
}
.multi-step .modal-footer .btn-skip.disabled {
background-color: #EAEAEA;
color: #000;
}
.multi-step .modal-footer .btn-next {
background-color: #39c0ba;
}
.multi-step .modal-footer .btn-next.disabled {
background-color: #EAEAEA;
color: #000;
}
+5
View File
@@ -0,0 +1,5 @@
[disabled="disabled"] {
display: none;
}
.multi-step,.multi-step *{-webkit-box-sizing:border-box;box-sizing:border-box;}.multi-step ::after,.multi-step ::before{-webkit-box-sizing:border-box;box-sizing:border-box}.multi-step .btn{-webkit-box-shadow:rgba(0,0,0,.16) 0 2px 5px 0,rgba(0,0,0,.12) 0 2px 10px 0;box-shadow:rgba(0,0,0,.16) 0 2px 5px 0,rgba(0,0,0,.12) 0 2px 10px 0;cursor:pointer;text-transform:uppercase;white-space:normal;overflow-wrap:break-word;color:#fff;line-height:1.5;-webkit-transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s,-webkit-box-shadow .15s ease-in-out 0s;-o-transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s,-webkit-box-shadow .15s ease-in-out 0s;margin:.375rem;border-width:0;border-style:initial;border-color:initial;-webkit-border-image:initial;-o-border-image:initial;border-image:initial;-webkit-border-radius:.125rem;border-radius:.125rem;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-size:.64rem;padding:.5rem 1.6rem}.multi-step .modal-header{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.multi-step .modal-header .modal-title{text-align:center;-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;font-size:.8rem}.multi-step .modal-header .modal-steps{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:.3rem}.multi-step .modal-header .modal-steps .step{width:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.multi-step .modal-header .modal-steps .step:after,.multi-step .modal-header .modal-steps .step:before{position:absolute;border:1px solid;height:1px;display:block;z-index:1;top:11px;content:''}.multi-step .modal-header .modal-steps .step:first-child:after,.multi-step .modal-header .modal-steps .step:first-child:before{width:50%!important;left:unset;right:unset;-webkit-transform:translateX(51%);-ms-transform:translateX(51%);transform:translateX(51%)}.multi-step .modal-header .modal-steps .step:last-child:after,.multi-step .modal-header .modal-steps .step:last-child:before{width:50%!important;left:0}.multi-step .modal-header .modal-steps .step:before{width:100%}.multi-step .modal-header .modal-steps .step:after{width:0%;left:0;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear}.multi-step .modal-header .modal-steps .step.current:after{width:calc(50% - 10px);-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear}.multi-step .modal-header .modal-steps .step.current:first-child:after{width:0%!important;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear}.multi-step .modal-header .modal-steps .step.completed:after,.multi-step .modal-header .modal-steps .step.skipped:after{width:100%;-webkit-transition:.2s linear;-o-transition:.2s linear;transition:.2s linear}.multi-step .modal-header .modal-steps .step .dot{height:20px;width:20px;-webkit-border-radius:20px;border-radius:20px;display:inline-block;position:relative;top:.125em;z-index:2;margin:auto;border:1px solid}.multi-step .modal-header .modal-steps .step .dot:before{content:'';position:absolute;top:-1px;left:-1px;width:20px;height:20px;-webkit-transform:scale(.75);-ms-transform:scale(.75);transform:scale(.75);-webkit-border-radius:20px;border-radius:20px}.multi-step .modal-header .modal-steps .step .label{font-size:12px;display:block;margin:.5em 0;text-align:center;-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%}.multi-step .modal-body .step-content-container{position:relative;height:100%}.multi-step .modal-body .step-content-container .step-content{display:none;position:relative;top:0;left:0;width:100%}.multi-step .modal-body .step-content-container .step-content .content-inner{position:relative}.multi-step .modal-body .step-content-container .step-content.active{display:inline-block}.multi-step .modal-footer .btn-prev{margin-right:auto}.multi-step .modal-footer .btn-skip{display:none}.multi-step .modal-footer .btn-skip.skippable{display:block}.multi-step .modal-footer .disabled,.multi-step .modal-footer :disabled{cursor:not-allowed}.flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webLine truncated
+401
View File
@@ -0,0 +1,401 @@
! 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;
}