You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

gsdk.bootstrap.wizard.js 5.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /*!
  2. =========================================================
  3. * Bootstrap Wizard - v1.1.1
  4. =========================================================
  5. * Product Page: https://www.creative-tim.com/product/bootstrap-wizard
  6. * Copyright 2017 Creative Tim (http://www.creative-tim.com)
  7. * Licensed under MIT (https://github.com/creativetimofficial/bootstrap-wizard/blob/master/LICENSE.md)
  8. =========================================================
  9. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  10. */
  11. // Get Shit Done Kit Bootstrap Wizard Functions
  12. searchVisible = 0;
  13. transparent = true;
  14. $(document).ready(function(){
  15. /* Activate the tooltips */
  16. $('[rel="tooltip"]').tooltip();
  17. // Code for the Validator
  18. var $validator = $('.wizard-card form').validate({
  19. rules: {
  20. firstname: {
  21. required: true,
  22. minlength: 3
  23. },
  24. lastname: {
  25. required: true,
  26. minlength: 3
  27. },
  28. email: {
  29. required: true,
  30. minlength: 3,
  31. }
  32. }
  33. });
  34. // Wizard Initialization
  35. $('.wizard-card').bootstrapWizard({
  36. 'tabClass': 'nav nav-pills',
  37. 'nextSelector': '.btn-next',
  38. 'previousSelector': '.btn-previous',
  39. onNext: function(tab, navigation, index) {
  40. var $valid = $('.wizard-card form').valid();
  41. if(!$valid) {
  42. $validator.focusInvalid();
  43. return false;
  44. }
  45. },
  46. onInit : function(tab, navigation, index){
  47. //check number of tabs and fill the entire row
  48. var $total = navigation.find('li').length;
  49. $width = 100/$total;
  50. var $wizard = navigation.closest('.wizard-card');
  51. $display_width = $(document).width();
  52. if($display_width < 600 && $total > 3){
  53. $width = 50;
  54. }
  55. navigation.find('li').css('width',$width + '%');
  56. /*$first_li = navigation.find('li:first-child a').html();*/
  57. /* $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');*/
  58. $moving_div = $('<div class="moving-tab"></div>');
  59. $('.wizard-card .wizard-navigation').append($moving_div);
  60. refreshAnimation($wizard, index);
  61. $('.moving-tab').css('transition','transform 0s');
  62. },
  63. onTabClick : function(tab, navigation, index){
  64. var $valid = $('.wizard-card form').valid();
  65. if(!$valid){
  66. return false;
  67. } else {
  68. return true;
  69. }
  70. },
  71. onTabShow: function(tab, navigation, index) {
  72. var $total = navigation.find('li').length;
  73. var $current = index+1;
  74. var $wizard = navigation.closest('.wizard-card');
  75. // If it's the last tab then hide the last button and show the finish instead
  76. if($current >= $total) {
  77. $($wizard).find('.btn-next').hide();
  78. $($wizard).find('.btn-finish').show();
  79. } else {
  80. $($wizard).find('.btn-next').show();
  81. $($wizard).find('.btn-finish').hide();
  82. }
  83. button_text = navigation.find('li:nth-child(' + $current + ') a').html();
  84. setTimeout(function(){
  85. $('.moving-tab').text(button_text);
  86. }, 150);
  87. var checkbox = $('.footer-checkbox');
  88. if( !index == 0 ){
  89. $(checkbox).css({
  90. 'opacity':'0',
  91. 'visibility':'hidden',
  92. 'position':'absolute'
  93. });
  94. } else {
  95. $(checkbox).css({
  96. 'opacity':'1',
  97. 'visibility':'visible'
  98. });
  99. }
  100. refreshAnimation($wizard, index);
  101. }
  102. });
  103. // Prepare the preview for profile picture
  104. $("#wizard-picture").change(function(){
  105. readURL(this);
  106. });
  107. $('[data-toggle="wizard-radio"]').click(function(){
  108. wizard = $(this).closest('.wizard-card');
  109. wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
  110. $(this).addClass('active');
  111. $(wizard).find('[type="radio"]').removeAttr('checked');
  112. $(this).find('[type="radio"]').attr('checked','true');
  113. });
  114. $('[data-toggle="wizard-checkbox"]').click(function(){
  115. if( $(this).hasClass('active')){
  116. $(this).removeClass('active');
  117. $(this).find('[type="checkbox"]').removeAttr('checked');
  118. } else {
  119. $(this).addClass('active');
  120. $(this).find('[type="checkbox"]').attr('checked','true');
  121. }
  122. });
  123. $('.set-full-height').css('height', 'auto');
  124. });
  125. //Function to show image before upload
  126. function readURL(input) {
  127. if (input.files && input.files[0]) {
  128. var reader = new FileReader();
  129. reader.onload = function (e) {
  130. $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
  131. }
  132. reader.readAsDataURL(input.files[0]);
  133. }
  134. }
  135. $(window).resize(function(){
  136. $('.wizard-card').each(function(){
  137. $wizard = $(this);
  138. index = $wizard.bootstrapWizard('currentIndex');
  139. refreshAnimation($wizard, index);
  140. $('.moving-tab').css({
  141. 'transition': 'transform 0s'
  142. });
  143. });
  144. });
  145. function refreshAnimation($wizard, index){
  146. total_steps = $wizard.find('li').length;
  147. move_distance = $wizard.width() / total_steps;
  148. step_width = move_distance;
  149. move_distance *= index;
  150. $wizard.find('.moving-tab').css('width', step_width);
  151. }
  152. function debounce(func, wait, immediate) {
  153. var timeout;
  154. return function() {
  155. var context = this, args = arguments;
  156. clearTimeout(timeout);
  157. timeout = setTimeout(function() {
  158. timeout = null;
  159. if (!immediate) func.apply(context, args);
  160. }, wait);
  161. if (immediate && !timeout) func.apply(context, args);
  162. };
  163. };