1053 lines
30 KiB
JavaScript
1053 lines
30 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
|
||
|
|
||
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
||
|
|
||
|
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||
|
|
||
|
/*!
|
||
|
* jQuery SmartWizard v5.1.1
|
||
|
* The awesome jQuery step wizard plugin
|
||
|
* http://www.techlaboratory.net/jquery-smartwizard
|
||
|
*
|
||
|
* Created by Dipu Raj
|
||
|
* http://dipu.me
|
||
|
*
|
||
|
* @license Licensed under the terms of the MIT License
|
||
|
* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
|
||
|
*/
|
||
|
(function (factory) {
|
||
|
if (typeof define === 'function' && define.amd) {
|
||
|
// AMD. Register as an anonymous module.
|
||
|
define(['jquery'], factory);
|
||
|
} else if ((typeof module === "undefined" ? "undefined" : _typeof(module)) === 'object' && module.exports) {
|
||
|
// Node/CommonJS
|
||
|
module.exports = function (root, jQuery) {
|
||
|
if (jQuery === undefined) {
|
||
|
// require('jQuery') returns a factory that requires window to
|
||
|
// build a jQuery instance, we normalize how we use modules
|
||
|
// that require this pattern but the window provided is a noop
|
||
|
// if it's defined (how jquery works)
|
||
|
if (typeof window !== 'undefined') {
|
||
|
jQuery = require('jquery');
|
||
|
} else {
|
||
|
jQuery = require('jquery')(root);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
factory(jQuery);
|
||
|
return jQuery;
|
||
|
};
|
||
|
} else {
|
||
|
// Browser globals
|
||
|
factory(jQuery);
|
||
|
}
|
||
|
})(function ($) {
|
||
|
"use strict"; // Default options
|
||
|
|
||
|
var defaults = {
|
||
|
selected: 0,
|
||
|
// Initial selected step, 0 = first step
|
||
|
theme: 'default',
|
||
|
// theme for the wizard, related css need to include for other than default theme
|
||
|
justified: true,
|
||
|
// Nav menu justification. true/false
|
||
|
darkMode: false,
|
||
|
// Enable/disable Dark Mode if the theme supports. true/false
|
||
|
autoAdjustHeight: true,
|
||
|
// Automatically adjust content height
|
||
|
cycleSteps: false,
|
||
|
// Allows to cycle the navigation of steps
|
||
|
backButtonSupport: true,
|
||
|
// Enable the back button support
|
||
|
enableURLhash: true,
|
||
|
// Enable selection of the step based on url hash
|
||
|
transition: {
|
||
|
animation: 'none',
|
||
|
// Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
|
||
|
speed: '400',
|
||
|
// Transion animation speed
|
||
|
easing: '' // Transition animation easing. Not supported without a jQuery easing plugin
|
||
|
|
||
|
},
|
||
|
toolbarSettings: {
|
||
|
toolbarPosition: 'bottom',
|
||
|
// none, top, bottom, both
|
||
|
toolbarButtonPosition: 'right',
|
||
|
// left, right, center
|
||
|
showNextButton: true,
|
||
|
// show/hide a Next button
|
||
|
showPreviousButton: true,
|
||
|
// show/hide a Previous button
|
||
|
toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
|
||
|
|
||
|
},
|
||
|
anchorSettings: {
|
||
|
anchorClickable: true,
|
||
|
// Enable/Disable anchor navigation
|
||
|
enableAllAnchors: false,
|
||
|
// Activates all anchors clickable all times
|
||
|
markDoneStep: true,
|
||
|
// Add done state on navigation
|
||
|
markAllPreviousStepsAsDone: true,
|
||
|
// When a step selected by url hash, all previous steps are marked done
|
||
|
removeDoneStepOnNavigateBack: false,
|
||
|
// While navigate back done step after active step will be cleared
|
||
|
enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
|
||
|
|
||
|
},
|
||
|
keyboardSettings: {
|
||
|
keyNavigation: true,
|
||
|
// Enable/Disable keyboard navigation(left and right keys are used if enabled)
|
||
|
keyLeft: [37],
|
||
|
// Left key code
|
||
|
keyRight: [39] // Right key code
|
||
|
|
||
|
},
|
||
|
lang: {
|
||
|
// Language variables for button
|
||
|
next: 'Next',
|
||
|
previous: 'Previous'
|
||
|
},
|
||
|
disabledSteps: [],
|
||
|
// Array Steps disabled
|
||
|
errorSteps: [],
|
||
|
// Highlight step with errors
|
||
|
hiddenSteps: [] // Hidden steps
|
||
|
|
||
|
};
|
||
|
|
||
|
var SmartWizard = /*#__PURE__*/function () {
|
||
|
function SmartWizard(element, options) {
|
||
|
_classCallCheck(this, SmartWizard);
|
||
|
|
||
|
// Merge user settings with default
|
||
|
this.options = $.extend(true, {}, defaults, options); // Main container element
|
||
|
|
||
|
this.main = $(element); // Navigation bar element
|
||
|
|
||
|
this.nav = this._getFirstDescendant('.nav'); // Step anchor elements
|
||
|
|
||
|
this.steps = this.nav.find('.nav-link'); // Content container
|
||
|
|
||
|
this.container = this._getFirstDescendant('.tab-content'); // Content pages
|
||
|
|
||
|
this.pages = this.container.children('.tab-pane'); // Assign options
|
||
|
|
||
|
this._initOptions(); // Initial load
|
||
|
|
||
|
|
||
|
this._initLoad();
|
||
|
} // Initial Load Method
|
||
|
|
||
|
|
||
|
_createClass(SmartWizard, [{
|
||
|
key: "_initLoad",
|
||
|
value: function _initLoad() {
|
||
|
// Clean the elements
|
||
|
this.pages.hide();
|
||
|
this.steps.removeClass('done active'); // Active step index
|
||
|
|
||
|
this.current_index = null; // Get the initial step index
|
||
|
|
||
|
var idx = this._getStepIndex(); // Mark any previous steps done
|
||
|
|
||
|
|
||
|
this._setPreviousStepsDone(idx); // Show the initial step
|
||
|
|
||
|
|
||
|
this._showStep(idx);
|
||
|
} // Initialize options
|
||
|
|
||
|
}, {
|
||
|
key: "_initOptions",
|
||
|
value: function _initOptions() {
|
||
|
// Set the elements
|
||
|
this._setElements(); // Add toolbar
|
||
|
|
||
|
|
||
|
this._setToolbar(); // Assign plugin events
|
||
|
|
||
|
|
||
|
this._setEvents();
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getFirstDescendant",
|
||
|
value: function _getFirstDescendant(selector) {
|
||
|
// Check for first level element
|
||
|
var elm = this.main.children(selector);
|
||
|
|
||
|
if (elm.length > 0) {
|
||
|
return elm;
|
||
|
} // Check for second level element
|
||
|
|
||
|
|
||
|
this.main.children().each(function (i, n) {
|
||
|
var tmp = $(n).children(selector);
|
||
|
|
||
|
if (tmp.length > 0) {
|
||
|
elm = tmp;
|
||
|
return false;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
if (elm.length > 0) {
|
||
|
return elm;
|
||
|
} // Element not found
|
||
|
|
||
|
|
||
|
this._showError("Element not found " + selector);
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setElements",
|
||
|
value: function _setElements() {
|
||
|
// Set the main element
|
||
|
this.main.addClass('sw');
|
||
|
|
||
|
this._setTheme(this.options.theme);
|
||
|
|
||
|
this._setJustify(this.options.justified);
|
||
|
|
||
|
this._setDarkMode(this.options.darkMode); // Set the anchor default style
|
||
|
|
||
|
|
||
|
if (this.options.anchorSettings.enableAllAnchors !== true || this.options.anchorSettings.anchorClickable !== true) {
|
||
|
this.steps.addClass('inactive');
|
||
|
} // Disabled steps
|
||
|
|
||
|
|
||
|
this._setCSSClass(this.options.disabledSteps, "disabled"); // Error steps
|
||
|
|
||
|
|
||
|
this._setCSSClass(this.options.errorSteps, "danger"); // Hidden steps
|
||
|
|
||
|
|
||
|
this._setCSSClass(this.options.hiddenSteps, "hidden");
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setEvents",
|
||
|
value: function _setEvents() {
|
||
|
var _this = this;
|
||
|
|
||
|
// Check if event handler already exists
|
||
|
if (this.main.data('click-init')) {
|
||
|
return true;
|
||
|
} // Flag item to prevent attaching handler again
|
||
|
|
||
|
|
||
|
this.main.data('click-init', true); // Anchor click event
|
||
|
|
||
|
$(this.steps).on("click", function (e) {
|
||
|
e.preventDefault();
|
||
|
|
||
|
if (_this.options.anchorSettings.anchorClickable === false) {
|
||
|
return true;
|
||
|
} // Get the step index
|
||
|
|
||
|
|
||
|
var idx = _this.steps.index(e.currentTarget);
|
||
|
|
||
|
if (idx === _this.current_index) {
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
if (_this.options.anchorSettings.enableAnchorOnDoneStep === false && _this._isDone(idx)) {
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
if (_this.options.anchorSettings.enableAllAnchors !== false || _this._isDone(idx)) {
|
||
|
_this._showStep(idx);
|
||
|
}
|
||
|
}); // Next button event
|
||
|
|
||
|
this.main.find('.sw-btn-next').on("click", function (e) {
|
||
|
e.preventDefault();
|
||
|
|
||
|
_this._showNext();
|
||
|
}); // Previous button event
|
||
|
|
||
|
this.main.find('.sw-btn-prev').on("click", function (e) {
|
||
|
e.preventDefault();
|
||
|
|
||
|
_this._showPrevious();
|
||
|
}); // Keyboard navigation event
|
||
|
|
||
|
if (this.options.keyboardSettings.keyNavigation) {
|
||
|
$(document).keyup(function (e) {
|
||
|
_this._keyNav(e);
|
||
|
});
|
||
|
} // Back/forward browser button event
|
||
|
|
||
|
|
||
|
if (this.options.backButtonSupport) {
|
||
|
$(window).on('hashchange', function (e) {
|
||
|
var idx = _this._getURLHashIndex();
|
||
|
|
||
|
if (idx !== false) {
|
||
|
e.preventDefault();
|
||
|
|
||
|
_this._showStep(idx);
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setToolbar",
|
||
|
value: function _setToolbar() {
|
||
|
// Skip right away if the toolbar is not enabled
|
||
|
if (this.options.toolbarSettings.toolbarPosition === 'none') {
|
||
|
return true;
|
||
|
} // Append toolbar based on the position
|
||
|
|
||
|
|
||
|
switch (this.options.toolbarSettings.toolbarPosition) {
|
||
|
case 'top':
|
||
|
this.container.before(this._createToolbar('top'));
|
||
|
break;
|
||
|
|
||
|
case 'bottom':
|
||
|
this.container.after(this._createToolbar('bottom'));
|
||
|
break;
|
||
|
|
||
|
case 'both':
|
||
|
this.container.before(this._createToolbar('top'));
|
||
|
this.container.after(this._createToolbar('bottom'));
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
this.container.after(this._createToolbar('bottom'));
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_createToolbar",
|
||
|
value: function _createToolbar(position) {
|
||
|
// Skip if the toolbar is already created
|
||
|
if (this.main.find('.toolbar-' + position).length > 0) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
var toolbar = $('<div></div>').addClass('toolbar toolbar-' + position).attr('role', 'toolbar'); // Create the toolbar buttons
|
||
|
|
||
|
var btnNext = this.options.toolbarSettings.showNextButton !== false ? $('<button></button>').text(this.options.lang.next).addClass('btn btn-primary sw-btn-next').attr('type', 'button') : null;
|
||
|
var btnPrevious = this.options.toolbarSettings.showPreviousButton !== false ? $('<button></button>').text(this.options.lang.previous).addClass('btn btn-primary sw-btn-prev').attr('type', 'button') : null;
|
||
|
toolbar.append(btnPrevious, btnNext); // Add extra toolbar buttons
|
||
|
|
||
|
if (this.options.toolbarSettings.toolbarExtraButtons && this.options.toolbarSettings.toolbarExtraButtons.length > 0) {
|
||
|
$.each(this.options.toolbarSettings.toolbarExtraButtons, function (_i, n) {
|
||
|
toolbar.append(n.clone(true));
|
||
|
});
|
||
|
}
|
||
|
|
||
|
toolbar.css('text-align', this.options.toolbarSettings.toolbarButtonPosition);
|
||
|
return toolbar;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_showNext",
|
||
|
value: function _showNext() {
|
||
|
var si = this._getNextShowable(this.current_index);
|
||
|
|
||
|
if (si === false) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
this._showStep(si);
|
||
|
}
|
||
|
}, {
|
||
|
key: "_showPrevious",
|
||
|
value: function _showPrevious() {
|
||
|
var si = this._getPreviousShowable(this.current_index);
|
||
|
|
||
|
if (si === false) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
this._showStep(si);
|
||
|
}
|
||
|
}, {
|
||
|
key: "_showStep",
|
||
|
value: function _showStep(idx) {
|
||
|
// If current step is requested again, skip
|
||
|
if (idx == this.current_index) {
|
||
|
return false;
|
||
|
} // If step not found, skip
|
||
|
|
||
|
|
||
|
if (!this.steps.eq(idx)) {
|
||
|
return false;
|
||
|
} // If it is a disabled step, skip
|
||
|
|
||
|
|
||
|
if (!this._isShowable(idx)) {
|
||
|
return false;
|
||
|
} // Load step content
|
||
|
|
||
|
|
||
|
this._loadStep(idx);
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getNextShowable",
|
||
|
value: function _getNextShowable(idx) {
|
||
|
var si = false; // Find the next showable step
|
||
|
|
||
|
for (var i = idx + 1; i < this.steps.length; i++) {
|
||
|
if (this._isShowable(i)) {
|
||
|
si = i;
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (si !== false && this.steps.length <= si) {
|
||
|
if (!this.options.cycleSteps) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
si = 0;
|
||
|
}
|
||
|
|
||
|
return si;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getPreviousShowable",
|
||
|
value: function _getPreviousShowable(idx) {
|
||
|
var si = false; // Find the previous showable step
|
||
|
|
||
|
for (var i = idx - 1; i >= 0; i--) {
|
||
|
if (this._isShowable(i)) {
|
||
|
si = i;
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (si !== false && 0 > si) {
|
||
|
if (!this.options.cycleSteps) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
si = this.steps.length - 1;
|
||
|
}
|
||
|
|
||
|
return si;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_isShowable",
|
||
|
value: function _isShowable(idx) {
|
||
|
var elm = this.steps.eq(idx);
|
||
|
|
||
|
if (elm.hasClass('disabled') || elm.hasClass('hidden')) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
return true;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_isDone",
|
||
|
value: function _isDone(idx) {
|
||
|
var elm = this.steps.eq(idx);
|
||
|
|
||
|
if (elm.hasClass('done')) {
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setPreviousStepsDone",
|
||
|
value: function _setPreviousStepsDone(idx) {
|
||
|
if (idx > 0 && this.options.anchorSettings.markDoneStep && this.options.anchorSettings.markAllPreviousStepsAsDone) {
|
||
|
// Mark previous steps of the active step as done
|
||
|
for (var i = idx; i >= 0; i--) {
|
||
|
this._setCSSClass(i, "done");
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setCSSClass",
|
||
|
value: function _setCSSClass(idx, cls) {
|
||
|
var _this2 = this;
|
||
|
|
||
|
if (idx === null) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
var idxs = $.isArray(idx) ? idx : [idx];
|
||
|
idxs.map(function (i) {
|
||
|
_this2.steps.eq(i).addClass(cls);
|
||
|
});
|
||
|
}
|
||
|
}, {
|
||
|
key: "_resetCSSClass",
|
||
|
value: function _resetCSSClass(idx, cls) {
|
||
|
var _this3 = this;
|
||
|
|
||
|
var idxs = $.isArray(idx) ? idx : [idx];
|
||
|
idxs.map(function (i) {
|
||
|
_this3.steps.eq(i).removeClass(cls);
|
||
|
});
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getStepDirection",
|
||
|
value: function _getStepDirection(idx) {
|
||
|
if (this.current_index == null) {
|
||
|
return '';
|
||
|
}
|
||
|
|
||
|
return this.current_index < idx ? "forward" : "backward";
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getStepPosition",
|
||
|
value: function _getStepPosition(idx) {
|
||
|
var stepPosition = 'middle';
|
||
|
|
||
|
if (idx === 0) {
|
||
|
stepPosition = 'first';
|
||
|
} else if (idx === this.steps.length - 1) {
|
||
|
stepPosition = 'last';
|
||
|
}
|
||
|
|
||
|
return stepPosition;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getStepAnchor",
|
||
|
value: function _getStepAnchor(idx) {
|
||
|
if (idx == null) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
return this.steps.eq(idx);
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getStepPage",
|
||
|
value: function _getStepPage(idx) {
|
||
|
if (idx == null) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
var anchor = this._getStepAnchor(idx);
|
||
|
|
||
|
return anchor.length > 0 ? this.main.find(anchor.attr("href")) : null;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setStepContent",
|
||
|
value: function _setStepContent(idx, html) {
|
||
|
var page = this._getStepPage(idx);
|
||
|
|
||
|
if (page) {
|
||
|
page.html(html);
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_loadStep",
|
||
|
value: function _loadStep(idx) {
|
||
|
var _this4 = this;
|
||
|
|
||
|
// Get current step element
|
||
|
var curStep = this._getStepAnchor(this.current_index); // Get step direction
|
||
|
|
||
|
|
||
|
var stepDirection = this._getStepDirection(idx); // Get the direction of step navigation
|
||
|
|
||
|
|
||
|
if (this.current_index !== null) {
|
||
|
// Trigger "leaveStep" event
|
||
|
if (this._triggerEvent("leaveStep", [curStep, this.current_index, idx, stepDirection]) === false) {
|
||
|
return false;
|
||
|
}
|
||
|
} // Get next step element
|
||
|
|
||
|
|
||
|
var selStep = this._getStepAnchor(idx); // Get the content if used
|
||
|
|
||
|
|
||
|
var getStepContent = this._triggerEvent("stepContent", [selStep, idx, stepDirection]);
|
||
|
|
||
|
if (getStepContent) {
|
||
|
if (_typeof(getStepContent) == "object") {
|
||
|
getStepContent.then(function (res) {
|
||
|
_this4._setStepContent(idx, res);
|
||
|
|
||
|
_this4._transitStep(idx);
|
||
|
})["catch"](function (err) {
|
||
|
console.error(err);
|
||
|
|
||
|
_this4._setStepContent(idx, err);
|
||
|
|
||
|
_this4._transitStep(idx);
|
||
|
});
|
||
|
} else if (typeof getStepContent == "string") {
|
||
|
this._setStepContent(idx, getStepContent);
|
||
|
|
||
|
this._transitStep(idx);
|
||
|
} else {
|
||
|
this._transitStep(idx);
|
||
|
}
|
||
|
} else {
|
||
|
this._transitStep(idx);
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_transitStep",
|
||
|
value: function _transitStep(idx) {
|
||
|
var _this5 = this;
|
||
|
|
||
|
// Get step to show element
|
||
|
var selStep = this._getStepAnchor(idx); // Change the url hash to new step
|
||
|
|
||
|
|
||
|
this._setURLHash(selStep.attr("href")); // Update controls
|
||
|
|
||
|
|
||
|
this._setAnchor(idx); // Get the direction of step navigation
|
||
|
|
||
|
|
||
|
var stepDirection = this._getStepDirection(idx); // Get the position of step
|
||
|
|
||
|
|
||
|
var stepPosition = this._getStepPosition(idx); // Animate the step
|
||
|
|
||
|
|
||
|
this._doStepAnimation(idx, function () {
|
||
|
// Fix height with content
|
||
|
_this5._fixHeight(idx); // Trigger "showStep" event
|
||
|
|
||
|
|
||
|
_this5._triggerEvent("showStep", [selStep, _this5.current_index, stepDirection, stepPosition]);
|
||
|
}); // Update the current index
|
||
|
|
||
|
|
||
|
this.current_index = idx; // Set the buttons based on the step
|
||
|
|
||
|
this._setButtons(idx);
|
||
|
}
|
||
|
}, {
|
||
|
key: "_doStepAnimation",
|
||
|
value: function _doStepAnimation(idx, callback) {
|
||
|
var _this6 = this;
|
||
|
|
||
|
// Get current step element
|
||
|
var curPage = this._getStepPage(this.current_index); // Get next step element
|
||
|
|
||
|
|
||
|
var selPage = this._getStepPage(idx); // Get the animation
|
||
|
|
||
|
|
||
|
var animation = this.options.transition.animation.toLowerCase(); // Complete any ongoing animations
|
||
|
|
||
|
this._stopAnimations();
|
||
|
|
||
|
switch (animation) {
|
||
|
case 'slide-horizontal':
|
||
|
case 'slide-h':
|
||
|
// horizontal slide
|
||
|
var containerWidth = this.container.width();
|
||
|
var curLastLeft = containerWidth;
|
||
|
var nextFirstLeft = containerWidth * -2; // Forward direction
|
||
|
|
||
|
if (idx > this.current_index) {
|
||
|
curLastLeft = containerWidth * -1;
|
||
|
nextFirstLeft = containerWidth;
|
||
|
} // First load set the container width
|
||
|
|
||
|
|
||
|
if (this.current_index == null) {
|
||
|
this.container.height(selPage.outerHeight());
|
||
|
}
|
||
|
|
||
|
var css_pos, css_left;
|
||
|
|
||
|
if (curPage) {
|
||
|
css_pos = curPage.css("position");
|
||
|
css_left = curPage.css("left");
|
||
|
curPage.css("position", 'absolute').css("left", 0).animate({
|
||
|
left: curLastLeft
|
||
|
}, this.options.transition.speed, this.options.transition.easing, function () {
|
||
|
$(this).hide();
|
||
|
curPage.css("position", css_pos).css("left", css_left);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
css_pos = selPage.css("position");
|
||
|
css_left = selPage.css("left");
|
||
|
selPage.css("position", 'absolute').css("left", nextFirstLeft).outerWidth(containerWidth).show().animate({
|
||
|
left: 0
|
||
|
}, this.options.transition.speed, this.options.transition.easing, function () {
|
||
|
selPage.css("position", css_pos).css("left", css_left);
|
||
|
callback();
|
||
|
});
|
||
|
break;
|
||
|
|
||
|
case 'slide-vertical':
|
||
|
case 'slide-v':
|
||
|
// vertical slide
|
||
|
var containerHeight = this.container.height();
|
||
|
var curLastTop = containerHeight;
|
||
|
var nextFirstTop = containerHeight * -2; // Forward direction
|
||
|
|
||
|
if (idx > this.current_index) {
|
||
|
curLastTop = containerHeight * -1;
|
||
|
nextFirstTop = containerHeight;
|
||
|
}
|
||
|
|
||
|
var css_vpos, css_vtop;
|
||
|
|
||
|
if (curPage) {
|
||
|
css_vpos = curPage.css("position");
|
||
|
css_vtop = curPage.css("top");
|
||
|
curPage.css("position", 'absolute').css("top", 0).animate({
|
||
|
top: curLastTop
|
||
|
}, this.options.transition.speed, this.options.transition.easing, function () {
|
||
|
$(this).hide();
|
||
|
curPage.css("position", css_vpos).css("top", css_vtop);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
css_vpos = selPage.css("position");
|
||
|
css_vtop = selPage.css("top");
|
||
|
selPage.css("position", 'absolute').css("top", nextFirstTop).show().animate({
|
||
|
top: 0
|
||
|
}, this.options.transition.speed, this.options.transition.easing, function () {
|
||
|
selPage.css("position", css_vpos).css("top", css_vtop);
|
||
|
callback();
|
||
|
});
|
||
|
break;
|
||
|
|
||
|
case 'slide-swing':
|
||
|
case 'slide-s':
|
||
|
// normal slide
|
||
|
if (curPage) {
|
||
|
curPage.slideUp('fast', this.options.transition.easing, function () {
|
||
|
selPage.slideDown(_this6.options.transition.speed, _this6.options.transition.easing, function () {
|
||
|
callback();
|
||
|
});
|
||
|
});
|
||
|
} else {
|
||
|
selPage.slideDown(this.options.transition.speed, this.options.transition.easing, function () {
|
||
|
callback();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'fade':
|
||
|
// normal fade
|
||
|
if (curPage) {
|
||
|
curPage.fadeOut('fast', this.options.transition.easing, function () {
|
||
|
selPage.fadeIn('fast', _this6.options.transition.easing, function () {
|
||
|
callback();
|
||
|
});
|
||
|
});
|
||
|
} else {
|
||
|
selPage.fadeIn(this.options.transition.speed, this.options.transition.easing, function () {
|
||
|
callback();
|
||
|
});
|
||
|
}
|
||
|
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
if (curPage) {
|
||
|
curPage.hide();
|
||
|
}
|
||
|
|
||
|
selPage.show();
|
||
|
callback();
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_stopAnimations",
|
||
|
value: function _stopAnimations() {
|
||
|
this.pages.finish();
|
||
|
this.container.finish();
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setAnchor",
|
||
|
value: function _setAnchor(idx) {
|
||
|
// Current step anchor > Remove other classes and add done class
|
||
|
this._resetCSSClass(this.current_index, "active");
|
||
|
|
||
|
if (this.options.anchorSettings.markDoneStep !== false && this.current_index !== null) {
|
||
|
this._setCSSClass(this.current_index, "done");
|
||
|
|
||
|
if (this.options.anchorSettings.removeDoneStepOnNavigateBack !== false && this._getStepDirection(idx) === 'backward') {
|
||
|
this._resetCSSClass(this.current_index, "done");
|
||
|
}
|
||
|
} // Next step anchor > Remove other classes and add active class
|
||
|
|
||
|
|
||
|
this._resetCSSClass(idx, "done");
|
||
|
|
||
|
this._setCSSClass(idx, "active");
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setButtons",
|
||
|
value: function _setButtons(idx) {
|
||
|
// Previous/Next Button enable/disable based on step
|
||
|
if (!this.options.cycleSteps) {
|
||
|
this.main.find('.sw-btn-prev').removeClass("disabled");
|
||
|
this.main.find('.sw-btn-next').removeClass("disabled");
|
||
|
|
||
|
switch (this._getStepPosition(idx)) {
|
||
|
case 'first':
|
||
|
this.main.find('.sw-btn-prev').addClass("disabled");
|
||
|
break;
|
||
|
|
||
|
case 'last':
|
||
|
this.main.find('.sw-btn-next').addClass("disabled");
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
if (this._getNextShowable(idx) === false) {
|
||
|
this.main.find('.sw-btn-next').addClass("disabled");
|
||
|
}
|
||
|
|
||
|
if (this._getPreviousShowable(idx) === false) {
|
||
|
this.main.find('.sw-btn-prev').addClass("disabled");
|
||
|
}
|
||
|
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getStepIndex",
|
||
|
value: function _getStepIndex() {
|
||
|
// Get selected step from the url
|
||
|
var idx = this._getURLHashIndex();
|
||
|
|
||
|
return idx === false ? this.options.selected : idx;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setTheme",
|
||
|
value: function _setTheme(theme) {
|
||
|
this.main.removeClass(function (index, className) {
|
||
|
return (className.match(/(^|\s)sw-theme-\S+/g) || []).join(' ');
|
||
|
}).addClass('sw-theme-' + theme);
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setJustify",
|
||
|
value: function _setJustify(justified) {
|
||
|
if (justified === true) {
|
||
|
this.main.addClass('sw-justified');
|
||
|
} else {
|
||
|
this.main.removeClass('sw-justified');
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setDarkMode",
|
||
|
value: function _setDarkMode(darkMode) {
|
||
|
if (darkMode === true) {
|
||
|
this.main.addClass('sw-dark');
|
||
|
} else {
|
||
|
this.main.removeClass('sw-dark');
|
||
|
}
|
||
|
} // HELPER FUNCTIONS
|
||
|
|
||
|
}, {
|
||
|
key: "_keyNav",
|
||
|
value: function _keyNav(e) {
|
||
|
// Keyboard navigation
|
||
|
if ($.inArray(e.which, this.options.keyboardSettings.keyLeft) > -1) {
|
||
|
// left
|
||
|
this._showPrevious();
|
||
|
|
||
|
e.preventDefault();
|
||
|
} else if ($.inArray(e.which, this.options.keyboardSettings.keyRight) > -1) {
|
||
|
// right
|
||
|
this._showNext();
|
||
|
|
||
|
e.preventDefault();
|
||
|
} else {
|
||
|
return; // exit this handler for other keys
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_fixHeight",
|
||
|
value: function _fixHeight(idx) {
|
||
|
// Auto adjust height of the container
|
||
|
if (this.options.autoAdjustHeight) {
|
||
|
var selPage = this._getStepPage(idx);
|
||
|
|
||
|
this.container.finish().animate({
|
||
|
height: selPage.outerHeight()
|
||
|
}, this.options.transition.speed);
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_triggerEvent",
|
||
|
value: function _triggerEvent(name, params) {
|
||
|
// Trigger an event
|
||
|
var e = $.Event(name);
|
||
|
this.main.trigger(e, params);
|
||
|
|
||
|
if (e.isDefaultPrevented()) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
return e.result;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_setURLHash",
|
||
|
value: function _setURLHash(hash) {
|
||
|
if (this.options.enableURLhash && window.location.hash !== hash) {
|
||
|
history.pushState(null, null, hash);
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_getURLHashIndex",
|
||
|
value: function _getURLHashIndex() {
|
||
|
if (this.options.enableURLhash) {
|
||
|
// Get step number from url hash if available
|
||
|
var hash = window.location.hash;
|
||
|
|
||
|
if (hash.length > 0) {
|
||
|
var elm = this.nav.find("a[href*='" + hash + "']");
|
||
|
|
||
|
if (elm.length > 0) {
|
||
|
return this.steps.index(elm);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
}, {
|
||
|
key: "_loader",
|
||
|
value: function _loader(action) {
|
||
|
switch (action) {
|
||
|
case 'show':
|
||
|
this.main.addClass('sw-loading');
|
||
|
break;
|
||
|
|
||
|
case 'hide':
|
||
|
this.main.removeClass('sw-loading');
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
this.main.toggleClass('sw-loading');
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "_showError",
|
||
|
value: function _showError(msg) {
|
||
|
console.error(msg);
|
||
|
} // PUBLIC FUNCTIONS
|
||
|
|
||
|
}, {
|
||
|
key: "goToStep",
|
||
|
value: function goToStep(stepIndex) {
|
||
|
this._showStep(stepIndex);
|
||
|
}
|
||
|
}, {
|
||
|
key: "next",
|
||
|
value: function next() {
|
||
|
this._showNext();
|
||
|
}
|
||
|
}, {
|
||
|
key: "prev",
|
||
|
value: function prev() {
|
||
|
this._showPrevious();
|
||
|
}
|
||
|
}, {
|
||
|
key: "reset",
|
||
|
value: function reset() {
|
||
|
// Reset all
|
||
|
this._setURLHash('#');
|
||
|
|
||
|
this._initOptions();
|
||
|
|
||
|
this._initLoad();
|
||
|
}
|
||
|
}, {
|
||
|
key: "stepState",
|
||
|
value: function stepState(stepArray, state) {
|
||
|
if (!stepArray) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
switch (state) {
|
||
|
case 'disable':
|
||
|
this._setCSSClass(stepArray, 'disabled');
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'enable':
|
||
|
this._resetCSSClass(stepArray, 'disabled');
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'hide':
|
||
|
this._setCSSClass(stepArray, 'hidden');
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'show':
|
||
|
this._resetCSSClass(stepArray, 'hidden');
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'error-on':
|
||
|
this._setCSSClass(stepArray, 'danger');
|
||
|
|
||
|
break;
|
||
|
|
||
|
case 'error-off':
|
||
|
this._resetCSSClass(stepArray, 'danger');
|
||
|
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}, {
|
||
|
key: "setOptions",
|
||
|
value: function setOptions(options) {
|
||
|
this.options = $.extend(true, {}, this.options, options);
|
||
|
|
||
|
this._initOptions();
|
||
|
}
|
||
|
}, {
|
||
|
key: "getStepIndex",
|
||
|
value: function getStepIndex() {
|
||
|
return this.current_index;
|
||
|
}
|
||
|
}, {
|
||
|
key: "loader",
|
||
|
value: function loader(state) {
|
||
|
if (state === "show") {
|
||
|
this.main.addClass('sw-loading');
|
||
|
} else {
|
||
|
this.main.removeClass('sw-loading');
|
||
|
}
|
||
|
}
|
||
|
}]);
|
||
|
|
||
|
return SmartWizard;
|
||
|
}(); // Wrapper for the plugin
|
||
|
|
||
|
|
||
|
$.fn.smartWizard = function (options) {
|
||
|
if (options === undefined || _typeof(options) === 'object') {
|
||
|
return this.each(function () {
|
||
|
if (!$.data(this, "smartWizard")) {
|
||
|
$.data(this, "smartWizard", new SmartWizard(this, options));
|
||
|
}
|
||
|
});
|
||
|
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||
|
var instance = $.data(this[0], 'smartWizard');
|
||
|
|
||
|
if (options === 'destroy') {
|
||
|
$.data(this, 'smartWizard', null);
|
||
|
}
|
||
|
|
||
|
if (instance instanceof SmartWizard && typeof instance[options] === 'function') {
|
||
|
return instance[options].apply(instance, Array.prototype.slice.call(arguments, 1));
|
||
|
} else {
|
||
|
return this;
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
});
|