123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- (function (global, factory) {
- if (typeof define === "function" && define.amd) {
- define("/forms/wizard", ["jquery", "Site"], factory);
- } else if (typeof exports !== "undefined") {
- factory(require("jquery"), require("Site"));
- } else {
- var mod = {
- exports: {}
- };
- factory(global.jQuery, global.Site);
- global.formsWizard = mod.exports;
- }
- })(this, function (_jquery, _Site) {
- "use strict";
- _jquery = babelHelpers.interopRequireDefault(_jquery);
- (0, _jquery.default)(document).ready(function ($$$1) {
- (0, _Site.run)();
- }); // Example Wizard Form
- // -------------------
- (function () {
- // set up formvalidation
- (0, _jquery.default)('#exampleAccountForm').formValidation({
- framework: 'bootstrap',
- fields: {
- username: {
- validators: {
- notEmpty: {
- message: 'The username is required'
- },
- stringLength: {
- min: 6,
- max: 30,
- message: 'The username must be more than 6 and less than 30 characters long'
- },
- regexp: {
- regexp: /^[a-zA-Z0-9_\.]+$/,
- message: 'The username can only consist of alphabetical, number, dot and underscore'
- }
- }
- },
- password: {
- validators: {
- notEmpty: {
- message: 'The password is required'
- },
- different: {
- field: 'username',
- message: 'The password cannot be the same as username'
- }
- }
- }
- },
- err: {
- clazz: 'text-help'
- },
- row: {
- invalid: 'has-danger'
- }
- });
- (0, _jquery.default)("#exampleBillingForm").formValidation({
- framework: 'bootstrap',
- fields: {
- number: {
- validators: {
- notEmpty: {
- message: 'The credit card number is required' // creditCard: {
- // message: 'The credit card number is not valid'
- // }
- }
- }
- },
- cvv: {
- validators: {
- notEmpty: {
- message: 'The CVV number is required' // cvv: {
- // creditCardField: 'number',
- // message: 'The CVV number is not valid'
- // }
- }
- }
- }
- },
- err: {
- clazz: 'text-help'
- },
- row: {
- invalid: 'has-danger'
- }
- }); // init the wizard
- var defaults = Plugin.getDefaults("wizard");
- var options = _jquery.default.extend(true, {}, defaults, {
- buttonsAppendTo: '.panel-body'
- });
- var wizard = (0, _jquery.default)("#exampleWizardForm").wizard(options).data('wizard'); // setup validator
- // http://formvalidation.io/api/#is-valid
- wizard.get("#exampleAccount").setValidator(function () {
- var fv = (0, _jquery.default)("#exampleAccountForm").data('formValidation');
- fv.validate();
- if (!fv.isValid()) {
- return false;
- }
- return true;
- });
- wizard.get("#exampleBilling").setValidator(function () {
- var fv = (0, _jquery.default)("#exampleBillingForm").data('formValidation');
- fv.validate();
- if (!fv.isValid()) {
- return false;
- }
- return true;
- });
- })(); // Example Wizard Form Container
- // -----------------------------
- // http://formvalidation.io/api/#is-valid-container
- (function () {
- var defaults = Plugin.getDefaults("wizard");
- var options = _jquery.default.extend(true, {}, defaults, {
- onInit: function onInit() {
- (0, _jquery.default)('#exampleFormContainer').formValidation({
- framework: 'bootstrap',
- fields: {
- username: {
- validators: {
- notEmpty: {
- message: 'The username is required'
- }
- }
- },
- password: {
- validators: {
- notEmpty: {
- message: 'The password is required'
- }
- }
- },
- number: {
- validators: {
- notEmpty: {
- message: 'The credit card number is not valid'
- }
- }
- },
- cvv: {
- validators: {
- notEmpty: {
- message: 'The CVV number is required'
- }
- }
- }
- },
- err: {
- clazz: 'text-help'
- },
- row: {
- invalid: 'has-danger'
- }
- });
- },
- validator: function validator() {
- var fv = (0, _jquery.default)('#exampleFormContainer').data('formValidation');
- var $this = (0, _jquery.default)(this); // Validate the container
- fv.validateContainer($this);
- var isValidStep = fv.isValidContainer($this);
- if (isValidStep === false || isValidStep === null) {
- return false;
- }
- return true;
- },
- onFinish: function onFinish() {// $('#exampleFormContainer').submit();
- },
- buttonsAppendTo: '.panel-body'
- });
- (0, _jquery.default)("#exampleWizardFormContainer").wizard(options);
- })(); // Example Wizard Pager
- // --------------------------
- (function () {
- var defaults = Plugin.getDefaults("wizard");
- var options = _jquery.default.extend(true, {}, defaults, {
- step: '.wizard-pane',
- templates: {
- buttons: function buttons() {
- var options = this.options;
- var html = '<div class="btn-group btn-group-sm">' + '<a class="btn btn-default btn-outline" href="#' + this.id + '" data-wizard="back" role="button">' + options.buttonLabels.back + '</a>' + '<a class="btn btn-success btn-outline float-right" href="#' + this.id + '" data-wizard="finish" role="button">' + options.buttonLabels.finish + '</a>' + '<a class="btn btn-default btn-outline float-right" href="#' + this.id + '" data-wizard="next" role="button">' + options.buttonLabels.next + '</a>' + '</div>';
- return html;
- }
- },
- buttonLabels: {
- next: '<i class="icon wb-chevron-right" aria-hidden="true"></i>',
- back: '<i class="icon wb-chevron-left" aria-hidden="true"></i>',
- finish: '<i class="icon wb-check" aria-hidden="true"></i>'
- },
- buttonsAppendTo: '.panel-actions'
- });
- (0, _jquery.default)("#exampleWizardPager").wizard(options);
- })(); // Example Wizard Progressbar
- // --------------------------
- (function () {
- var defaults = Plugin.getDefaults("wizard");
- var options = _jquery.default.extend(true, {}, defaults, {
- step: '.wizard-pane',
- onInit: function onInit() {
- this.$progressbar = this.$element.find('.progress-bar').addClass('progress-bar-striped');
- },
- onBeforeShow: function onBeforeShow(step) {
- step.$element.tab('show');
- },
- onFinish: function onFinish() {
- this.$progressbar.removeClass('progress-bar-striped').addClass('progress-bar-success');
- },
- onAfterChange: function onAfterChange(prev, step) {
- var total = this.length();
- var current = step.index + 1;
- var percent = current / total * 100;
- this.$progressbar.css({
- width: percent + '%'
- }).find('.sr-only').text(current + '/' + total);
- },
- buttonsAppendTo: '.panel-body'
- });
- (0, _jquery.default)("#exampleWizardProgressbar").wizard(options);
- })(); // Example Wizard Tabs
- // -------------------
- (function () {
- var defaults = Plugin.getDefaults("wizard");
- var options = _jquery.default.extend(true, {}, defaults, {
- step: '> .nav > li > a',
- onBeforeShow: function onBeforeShow(step) {
- step.$element.tab('show');
- },
- classes: {
- step: {
- //done: 'color-done',
- error: 'color-error'
- }
- },
- onFinish: function onFinish() {
- alert('finish');
- },
- buttonsAppendTo: '.tab-content'
- });
- (0, _jquery.default)("#exampleWizardTabs").wizard(options);
- })(); // Example Wizard Accordion
- // ------------------------
- (function () {
- var defaults = Plugin.getDefaults("wizard");
- var options = _jquery.default.extend(true, {}, defaults, {
- step: '.panel-title[data-toggle="collapse"]',
- classes: {
- step: {
- //done: 'color-done',
- error: 'color-error'
- }
- },
- templates: {
- buttons: function buttons() {
- return '<div class="panel-footer">' + defaults.templates.buttons.call(this) + '</div>';
- }
- },
- onBeforeShow: function onBeforeShow(step) {
- step.$pane.collapse('show');
- },
- onBeforeHide: function onBeforeHide(step) {
- step.$pane.collapse('hide');
- },
- onFinish: function onFinish() {
- alert('finish');
- },
- buttonsAppendTo: '.panel-collapse'
- });
- (0, _jquery.default)("#exampleWizardAccordion").wizard(options);
- })();
- });
|