viithiisys / Acufuel

Blame view

app/js/multi-step-modal.js 4.16 KB
edit raw normal view history
4bb02bb84   Rishav   new integration w... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
 
  +function($) {
      'use strict';
  
      var modals = $('.modal.multi-step');
  
      modals.each(function(idx, modal) {
          var $modal = $(modal);
          var $buttons = $modal.find('button.step');
          var total_num_steps = $buttons.length;
          var $progress = $modal.find('.m-progress');
          var $progress_bar = $modal.find('.m-progress-bar');
          var $progress_stats = $modal.find('.m-progress-stats');
          var $progress_current = $modal.find('.m-progress-current');
          var $progress_total = $modal.find('.m-progress-total');
          var $progress_complete  = $modal.find('.m-progress-complete');
          var reset_on_close = $modal.attr('reset-on-close') === 'true';
  
          function reset() {
              $modal.find('.step').hide();
              $modal.find('[data-step]').hide();
          }
  
          function completeSteps() {
              $progress_stats.hide();
              $progress_complete.show();
              $modal.find('.progress-text').animate({
                  top: '-2em'
              });
              $modal.find('.complete-indicator').animate({
                  top: '-2em'
              });
              $progress_bar.addClass('completed');
          }
  
          function getPercentComplete(current_step, total_steps) {
              return Math.min(current_step / total_steps * 100, 100) + '%';
          }
  
          function updateProgress(current, total) {
              $progress_bar.animate({
                  width: getPercentComplete(current, total)
              });
              if (current - 1 >= total_num_steps) {
                  completeSteps();
              } else {
                  $progress_current.text(current);
              }
  
              $progress.find('[data-progress]').each(function() {
                  var dp = $(this);
                  if (dp.data().progress <= current - 1) {
                      dp.addClass('completed');
                  } else {
                      dp.removeClass('completed');
                  }
              });
          }
  
          function goToStep(step) {
              reset();
              var to_show = $modal.find('.step-' + step);
              if (to_show.length === 0) {
                  // at the last step, nothing else to show
                  return;
              }
              to_show.show();
              var current = parseInt(step, 10);
              updateProgress(current, total_num_steps);
              findFirstFocusableInput(to_show).focus();
          }
  
          function findFirstFocusableInput(parent) {
              var candidates = [parent.find('input'), parent.find('select'),
                                parent.find('textarea'),parent.find('button')],
                  winner = parent;
              $.each(candidates, function() {
                  if (this.length > 0) {
                      winner = this[0];
                      return false;
                  }
              });
              return $(winner);
          }
  
          function bindEventsToModal($modal) {
              var data_steps = [];
              $('[data-step]').each(function() {
                  var step = $(this).data().step;
                  if (step && $.inArray(step, data_steps) === -1) {
                      data_steps.push(step);
                  }
              });
  
              $.each(data_steps, function(i, v) {
                  $modal.on('next.m.' + v, {step: v}, function(e) {
                      goToStep(e.data.step);
                  });
              });
          }
  
          function initialize() {
              reset();
              updateProgress(1, total_num_steps);
              $modal.find('.step-1').show();
              $progress_complete.hide();
              $progress_total.text(total_num_steps);
              bindEventsToModal($modal, total_num_steps);
              $modal.data({
                  total_num_steps: $buttons.length,
              });
              if (reset_on_close){
                  //Bootstrap 2.3.2
                  $modal.on('hidden', function () {
                      reset();
                      $modal.find('.step-1').show();
                  })
                  //Bootstrap 3
                  $modal.on('hidden.bs.modal', function () {
                      reset();
                      $modal.find('.step-1').show();
                  })
              }
          }
  
          initialize();
      })
  }(jQuery);