https://fastercapital.com/assets/2017/public/founder-application-wizard.js

1(function () {
2    'use strict';
3
4    function toArray(collection) {
5        return Array.prototype.slice.call(collection || []);
6    }
7
8    function initializeWizard(form) {
9        var box = form.querySelector('.featured-box');
10        var content = box && box.querySelector('.box-content');
11        if (!box || !content || form.getAttribute('data-fc-wizard-ready') === 'true') {
12            return;
13        }
14
15        var groups = toArray(content.children).filter(function (child) {
16            return child.classList.contains('form-group');
17        });
18        if (groups.length < 9) {
19            return;
20        }
21
22        var labels = ['Startup', 'Founder', 'Funding', 'Review'];
23        try {
24            labels = JSON.parse(form.getAttribute('data-fc-wizard-labels'));
25        } catch (error) {
26            // Retain the accessible English defaults when translated labels are unavailable.
27        }
28
29        var ranges = [[0, 2], [2, 5], [5, 10], [10, groups.length]];
30        var steps = ranges.map(function (range, index) {
31            var step = document.createElement('section');
32            var heading = document.createElement('h3');
33            step.className = 'fc-form-step';
34            step.setAttribute('data-fc-step', String(index));
35            step.setAttribute('aria-labelledby', 'fc-form-step-title-' + index);
36            heading.id = 'fc-form-step-title-' + index;
37            heading.className = 'fc-form-step__title';
38            heading.textContent = labels[index];
39            step.appendChild(heading);
40            groups.slice(range[0], range[1]).forEach(function (group) {
41                step.appendChild(group);
42            });
43            content.appendChild(step);
44            return step;
45        });
46
47        var finalRow = form.querySelector(':scope > .row.pr-sm');
48        if (finalRow) {
49            steps[3].appendChild(finalRow);
50        }
51
52        var progress = document.createElement('ol');
53        progress.className = 'fc-form-progress';
54        progress.setAttribute('aria-label', 'Application progress');
55        labels.forEach(function (label, index) {
56            var item = document.createElement('li');
57            item.className = 'fc-form-progress__item';
58            item.setAttribute('data-fc-progress-step', String(index));
59            item.innerHTML = '<span class="fc-form-progress__number">' + (index + 1) + '</span><span class="fc-form-progress__label"></span>';
60            item.querySelector('.fc-form-progress__label').textContent = label;
61            progress.appendChild(item);
62        });
63        form.insertBefore(progress, box);
64
65        var status = document.createElement('p');
66        status.className = 'sr-only';
67        status.setAttribute('aria-live', 'polite');
68        form.insertBefore(status, box);
69
70        var currentStep = 0;
71
72        function validateStep(step) {
73            var controls = toArray(step.querySelectorAll('input, select, textarea'));
74            var firstInvalid = null;
75            controls.forEach(function (control) {
76                if (!control.disabled && control.type !== 'hidden' && !control.checkValidity() && !firstInvalid) {
77                    firstInvalid = control;
78                }
79            });
80            if (firstInvalid) {
81                if (typeof firstInvalid.reportValidity === 'function') {
82                    firstInvalid.reportValidity();
83                }
84                firstInvalid.focus();
85                return false;
86            }
87            return true;
88        }
89
90        function showStep(index, focusHeading) {
91            currentStep = Math.max(0, Math.min(index, steps.length - 1));
92            steps.forEach(function (step, stepIndex) {
93                var active = stepIndex === currentStep;
94                step.hidden = !active;
95                step.setAttribute('aria-hidden', active ? 'false' : 'true');
96            });
97            toArray(progress.children).forEach(function (item, stepIndex) {
98                item.classList.toggle('is-current', stepIndex === currentStep);
99                item.classList.toggle('is-complete', stepIndex < currentStep);
100                if (stepIndex === currentStep) {
101                    item.setAttribute('aria-current', 'step');
102                } else {
103                    item.removeAttribute('aria-current');
104                }
105            });
106            status.textContent = 'Step ' + (currentStep + 1) + ' of ' + steps.length + ': ' + labels[currentStep];
107            if (focusHeading) {
108                steps[currentStep].querySelector('.fc-form-step__title').setAttribute('tabindex', '-1');
109                steps[currentStep].querySelector('.fc-form-step__title').focus();
110            }
111        }
112
113        steps.forEach(function (step, index) {
114            var navigation = document.createElement('div');
115            navigation.className = 'fc-form-navigation';
116            if (index > 0) {
117                var previous = document.createElement('button');
118                previous.type = 'button';
119                previous.className = 'btn btn-default fc-form-navigation__previous';
120                previous.textContent = 'Previous';
121                previous.addEventListener('click', function () {
122                    showStep(index - 1, true);
123                });
124                navigation.appendChild(previous);
125            }
126            if (index < steps.length - 1) {
127                var next = document.createElement('button');
128                next.type = 'button';
129                next.className = 'btn btn-primary fc-form-navigation__next';
130                next.textContent = 'Continue';
131                next.addEventListener('click', function () {
132                    if (validateStep(step)) {
133                        showStep(index + 1, true);
134                    }
135                });
136                navigation.appendChild(next);
137            }
138            step.appendChild(navigation);
139        });
140
141        form.setAttribute('data-fc-wizard-ready', 'true');
142        showStep(0, false);
143    }
144
145    document.addEventListener('DOMContentLoaded', function () {
146        toArray(document.querySelectorAll('form.fc-founder-application')).forEac

146h(initializeWizard);
147    });
148}());