https://www.intrum.de/App_Plugins/StepByStep/renderer.js

1var scripts = document.getElementsByTagName('script');
2var lastScript = scripts[scripts.length - 1];
3var scriptName = lastScript;
4
5var stepsCount = parseInt(scriptName.getAttribute('data-steps-count')); // stepByStepModel.steps.Count
6
7window.addEventListener('load', () => {
8
9    var mobileBreakpoint = 992;
10
11    $(".step-icon img.default").each(function (index, item) {
12        item = $(item);
13        item.css("display", "");
14    });
15
16
17    $(".step-navigation .nav-prev").on("click", function (e) {
18        navigationHandler('previous');
19    });
20
21
22    $(".step-navigation .nav-next").on("click", function (e) {
23        navigationHandler('next');
24    });
25
26    $("span.close-info").on("click", function () {
27        $(".step-icon").each(function (index, item) {
28            $(item).removeClass("bg-white");
29            refreshStepPictogram(item);
30            $(".step-info").hide();
31            $(".step-icon-with-text p").show();
32        });
33    });
34
35    $(".step-icon").on("click", function (e) {
36
37        var icon = e.target.tagName === "DIV" ? $(e.target) : $(e.target.parentNode);
38        if (icon.hasClass("bg-white") && window.innerWidth > mobileBreakpoint) {
39            setStepInactive(icon);
40            return;
41        }
42
43        resetStepsState();
44        $(".step-icon-with-text p").hide();
45        setStepActive(icon);
46    });
47
48    $('.step-icon').on("keydown", function (e) {
49        if (e.key === "Enter" || e.which === 13) {
50            e.preventDefault();
51            this.click();
52        }
53    });
54
55    function resetStepsState() {
56        $(".step-icon").each(function (index, item) {
57            $(item).removeClass("bg-white");
58            refreshStepPictogram(item);
59            $(".step-info").hide();
60            $(".step-icon-with-text p").show();
61        });
62    }
63
64    function refreshStepPictogram(step) {
65        step = $(step);
66        var defaultImg = step.find("img.default");
67        var activeImg = step.find("img.active");
68
69        if (step.hasClass("bg-white")) {
70            activeImg.css("display", "");
71            defaultImg.css("display", "none");
72        } else {
73            activeImg.css("display", "none");
74            defaultImg.css("display", "");
75        }
76    }
77
78    function setStepInactive(icon) {
79        icon.removeClass("bg-white");
80        refreshStepPictogram(icon);
81        $(".step-info").hide();
82        $(".step-icon-with-text p").show();
83    }
84
85
86    function setStepActive(icon) {
87        icon.addClass("bg-white");
88        refreshStepPictogram(icon);
89
90        var step = icon.data("step");
91
92        $(".step-info .title").text(step.title);
93        $(".step-info .description").text(step.description);
94        $(".step-info").show();
95
96        var stepIndex = icon.data("index");
97        if (stepIndex === 0) {
98            $(".step-navigation span.nav-prev").hide();
99
100        } else {
101            $(".step-navigation span.nav-prev").show();
102        }
103
104        if (stepIndex === (stepsCount - 1)) {
105            $(".step-navigation span.nav-next").hide();
106
107        } else {
108            $(".step-navigation span.nav-next").show();
109        }
110
111    }
112
113    function setFirstStepActive() {
114        if (window.innerWidth <= mobileBreakpoint) {
115            var firstStep = $($("div.step-icon")[0]);
116            var isAnyActive = $("div.step-icon.bg-white");
117            if (!firstStep.hasClass("bg-white") && !isAnyActive.length) {
118                firstStep.trigger("click");
119            }
120        }
121    }
122
123    function navigationHandler(direction) {
124
125        var activeIcon = $(".step-icon.bg-white");
126        var iconIndex = activeIcon.data("index");
127
128        if (direction === 'next') {
129            $(".step-icon[data-index='" + (iconIndex + 1) + "']").trigger("click");
130        }
131        else if (direction === 'previous') {
132            $(".step-icon[data-index='" + (iconIndex - 1) + "']").trigger("click");
133        }
134    }
135
136    var resizeDebounce;
137    $(window).on("resize", function () {
138
139        if (resizeDebounce) {
140            clearTimeout(resizeDebounce);
141        }
142        resizeDebounce = setTimeout(function () {
143            setFirstStepActive();
144            resizeDebounce = null;
145        },
146            300);
147    });

148
149    setFirstStepActive(); //initial for mobile
150});