wizard.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. (function (global, factory) {
  2. if (typeof define === "function" && define.amd) {
  3. define("/forms/wizard", ["jquery", "Site"], factory);
  4. } else if (typeof exports !== "undefined") {
  5. factory(require("jquery"), require("Site"));
  6. } else {
  7. var mod = {
  8. exports: {}
  9. };
  10. factory(global.jQuery, global.Site);
  11. global.formsWizard = mod.exports;
  12. }
  13. })(this, function (_jquery, _Site) {
  14. "use strict";
  15. _jquery = babelHelpers.interopRequireDefault(_jquery);
  16. (0, _jquery.default)(document).ready(function ($$$1) {
  17. (0, _Site.run)();
  18. }); // Example Wizard Form
  19. // -------------------
  20. (function () {
  21. // set up formvalidation
  22. (0, _jquery.default)('#exampleAccountForm').formValidation({
  23. framework: 'bootstrap',
  24. fields: {
  25. username: {
  26. validators: {
  27. notEmpty: {
  28. message: 'The username is required'
  29. },
  30. stringLength: {
  31. min: 6,
  32. max: 30,
  33. message: 'The username must be more than 6 and less than 30 characters long'
  34. },
  35. regexp: {
  36. regexp: /^[a-zA-Z0-9_\.]+$/,
  37. message: 'The username can only consist of alphabetical, number, dot and underscore'
  38. }
  39. }
  40. },
  41. password: {
  42. validators: {
  43. notEmpty: {
  44. message: 'The password is required'
  45. },
  46. different: {
  47. field: 'username',
  48. message: 'The password cannot be the same as username'
  49. }
  50. }
  51. }
  52. },
  53. err: {
  54. clazz: 'text-help'
  55. },
  56. row: {
  57. invalid: 'has-danger'
  58. }
  59. });
  60. (0, _jquery.default)("#exampleBillingForm").formValidation({
  61. framework: 'bootstrap',
  62. fields: {
  63. number: {
  64. validators: {
  65. notEmpty: {
  66. message: 'The credit card number is required' // creditCard: {
  67. // message: 'The credit card number is not valid'
  68. // }
  69. }
  70. }
  71. },
  72. cvv: {
  73. validators: {
  74. notEmpty: {
  75. message: 'The CVV number is required' // cvv: {
  76. // creditCardField: 'number',
  77. // message: 'The CVV number is not valid'
  78. // }
  79. }
  80. }
  81. }
  82. },
  83. err: {
  84. clazz: 'text-help'
  85. },
  86. row: {
  87. invalid: 'has-danger'
  88. }
  89. }); // init the wizard
  90. var defaults = Plugin.getDefaults("wizard");
  91. var options = _jquery.default.extend(true, {}, defaults, {
  92. buttonsAppendTo: '.panel-body'
  93. });
  94. var wizard = (0, _jquery.default)("#exampleWizardForm").wizard(options).data('wizard'); // setup validator
  95. // http://formvalidation.io/api/#is-valid
  96. wizard.get("#exampleAccount").setValidator(function () {
  97. var fv = (0, _jquery.default)("#exampleAccountForm").data('formValidation');
  98. fv.validate();
  99. if (!fv.isValid()) {
  100. return false;
  101. }
  102. return true;
  103. });
  104. wizard.get("#exampleBilling").setValidator(function () {
  105. var fv = (0, _jquery.default)("#exampleBillingForm").data('formValidation');
  106. fv.validate();
  107. if (!fv.isValid()) {
  108. return false;
  109. }
  110. return true;
  111. });
  112. })(); // Example Wizard Form Container
  113. // -----------------------------
  114. // http://formvalidation.io/api/#is-valid-container
  115. (function () {
  116. var defaults = Plugin.getDefaults("wizard");
  117. var options = _jquery.default.extend(true, {}, defaults, {
  118. onInit: function onInit() {
  119. (0, _jquery.default)('#exampleFormContainer').formValidation({
  120. framework: 'bootstrap',
  121. fields: {
  122. username: {
  123. validators: {
  124. notEmpty: {
  125. message: 'The username is required'
  126. }
  127. }
  128. },
  129. password: {
  130. validators: {
  131. notEmpty: {
  132. message: 'The password is required'
  133. }
  134. }
  135. },
  136. number: {
  137. validators: {
  138. notEmpty: {
  139. message: 'The credit card number is not valid'
  140. }
  141. }
  142. },
  143. cvv: {
  144. validators: {
  145. notEmpty: {
  146. message: 'The CVV number is required'
  147. }
  148. }
  149. }
  150. },
  151. err: {
  152. clazz: 'text-help'
  153. },
  154. row: {
  155. invalid: 'has-danger'
  156. }
  157. });
  158. },
  159. validator: function validator() {
  160. var fv = (0, _jquery.default)('#exampleFormContainer').data('formValidation');
  161. var $this = (0, _jquery.default)(this); // Validate the container
  162. fv.validateContainer($this);
  163. var isValidStep = fv.isValidContainer($this);
  164. if (isValidStep === false || isValidStep === null) {
  165. return false;
  166. }
  167. return true;
  168. },
  169. onFinish: function onFinish() {// $('#exampleFormContainer').submit();
  170. },
  171. buttonsAppendTo: '.panel-body'
  172. });
  173. (0, _jquery.default)("#exampleWizardFormContainer").wizard(options);
  174. })(); // Example Wizard Pager
  175. // --------------------------
  176. (function () {
  177. var defaults = Plugin.getDefaults("wizard");
  178. var options = _jquery.default.extend(true, {}, defaults, {
  179. step: '.wizard-pane',
  180. templates: {
  181. buttons: function buttons() {
  182. var options = this.options;
  183. 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>';
  184. return html;
  185. }
  186. },
  187. buttonLabels: {
  188. next: '<i class="icon wb-chevron-right" aria-hidden="true"></i>',
  189. back: '<i class="icon wb-chevron-left" aria-hidden="true"></i>',
  190. finish: '<i class="icon wb-check" aria-hidden="true"></i>'
  191. },
  192. buttonsAppendTo: '.panel-actions'
  193. });
  194. (0, _jquery.default)("#exampleWizardPager").wizard(options);
  195. })(); // Example Wizard Progressbar
  196. // --------------------------
  197. (function () {
  198. var defaults = Plugin.getDefaults("wizard");
  199. var options = _jquery.default.extend(true, {}, defaults, {
  200. step: '.wizard-pane',
  201. onInit: function onInit() {
  202. this.$progressbar = this.$element.find('.progress-bar').addClass('progress-bar-striped');
  203. },
  204. onBeforeShow: function onBeforeShow(step) {
  205. step.$element.tab('show');
  206. },
  207. onFinish: function onFinish() {
  208. this.$progressbar.removeClass('progress-bar-striped').addClass('progress-bar-success');
  209. },
  210. onAfterChange: function onAfterChange(prev, step) {
  211. var total = this.length();
  212. var current = step.index + 1;
  213. var percent = current / total * 100;
  214. this.$progressbar.css({
  215. width: percent + '%'
  216. }).find('.sr-only').text(current + '/' + total);
  217. },
  218. buttonsAppendTo: '.panel-body'
  219. });
  220. (0, _jquery.default)("#exampleWizardProgressbar").wizard(options);
  221. })(); // Example Wizard Tabs
  222. // -------------------
  223. (function () {
  224. var defaults = Plugin.getDefaults("wizard");
  225. var options = _jquery.default.extend(true, {}, defaults, {
  226. step: '> .nav > li > a',
  227. onBeforeShow: function onBeforeShow(step) {
  228. step.$element.tab('show');
  229. },
  230. classes: {
  231. step: {
  232. //done: 'color-done',
  233. error: 'color-error'
  234. }
  235. },
  236. onFinish: function onFinish() {
  237. alert('finish');
  238. },
  239. buttonsAppendTo: '.tab-content'
  240. });
  241. (0, _jquery.default)("#exampleWizardTabs").wizard(options);
  242. })(); // Example Wizard Accordion
  243. // ------------------------
  244. (function () {
  245. var defaults = Plugin.getDefaults("wizard");
  246. var options = _jquery.default.extend(true, {}, defaults, {
  247. step: '.panel-title[data-toggle="collapse"]',
  248. classes: {
  249. step: {
  250. //done: 'color-done',
  251. error: 'color-error'
  252. }
  253. },
  254. templates: {
  255. buttons: function buttons() {
  256. return '<div class="panel-footer">' + defaults.templates.buttons.call(this) + '</div>';
  257. }
  258. },
  259. onBeforeShow: function onBeforeShow(step) {
  260. step.$pane.collapse('show');
  261. },
  262. onBeforeHide: function onBeforeHide(step) {
  263. step.$pane.collapse('hide');
  264. },
  265. onFinish: function onFinish() {
  266. alert('finish');
  267. },
  268. buttonsAppendTo: '.panel-collapse'
  269. });
  270. (0, _jquery.default)("#exampleWizardAccordion").wizard(options);
  271. })();
  272. });