https://ninjascan.ai/js/steps.js

1document.addEventListener('DOMContentLoaded', () => {
2  const steps      = [...document.querySelectorAll('.step-item')];
3  const connectors = [...document.querySelectorAll('.step-connector')];
4
5  const headingEl = document.getElementById('detail-heading');
6  const descEl    = document.getElementById('detail-description');
7  const imgEl     = document.getElementById('detail-image');
8
9    const stepDetails = {
10    1: {
11        headingKey:    "home.how.detail.step1.heading",
12        descriptionKey:"home.how.detail.step1.description",
13        imgSrc:        "./img/Home Dashboard 4.png",
14        imgAlt:        "Screenshot showing website analysis dashboard"
15    },
16    2: {
17        headingKey:    "home.how.detail.step2.heading",
18        descriptionKey:"home.how.detail.step2.description",
19        imgSrc:        "./img/Group 202.png",
20        imgAlt:        "Screenshot of the Accessibility & Sustainability report"
21    },
22    3: {
23        headingKey:    "home.how.detail.step3.heading",
24        descriptionKey:"home.how.detail.step3.description",
25        imgSrc:        "./img/Group 201.png",
26        imgAlt:        "Screenshot showing fixing issues"
27    }
28    };
29
30  function clearAll() {
31    steps.forEach(el => {
32        el.querySelector('.step-number')
33        .classList.remove('text-[#624BFF]', 'font-bold');
34        el.querySelector('.step-text')
35        .classList.remove('text-[#624BFF]', 'font-bold');
36    });
37
38    connectors.forEach(el => {
39        el.classList.remove(
40        'border-[#624BFF]',
41        'border-gray-300',
42        'border-black'
43        );
44
45        if (el.dataset.connector === '2') {
46        el.classList.add('border-black');
47        } else {
48        el.classList.add('border-gray-300');
49        }
50    });
51    }
52
53  function activate(upTo) {
54    steps
55      .filter(el => +el.dataset.step <= upTo)
56      .forEach(el => {
57        el.querySelector('.step-number')
58          .classList.add('text-[#624BFF]', 'font-bold');
59        el.querySelector('.step-text')
60          .classList.add('text-[#624BFF]', 'font-bold');
61      });
62
63    document.querySelector('.step-connector[data-connector="1"]')
64      .classList.replace('border-gray-300', 'border-[#624BFF]');
65
66    const c2 = document.querySelector('.step-connector[data-connector="2"]');
67    if (upTo >= 3) {
68      c2.classList.replace('border-black', 'border-[#624BFF]');
69    }
70  }
71
72  function updateDetail(n) {
73    const detail = stepDetails[n];
74    headingEl.textContent = Translator.get(detail.headingKey);
75    descEl.textContent    = Translator.get(detail.descriptionKey);
76    imgEl.src                 = detail.imgSrc;
77    imgEl.alt                 = detail.imgAlt;
78  }
79
80  let currentStep = 1;
81
82  {
83    const origSetLang = Translator.setLang.bind(Translator);
84    Translator.setLang = (lang) => {
85      origSetLang(lang);
86      updateDetail(currentStep);
87    };
88  }
89
90  steps.forEach(el => {
91    el.addEventListener('click', () => {
92      const n = +el.dataset.step;
93      currentStep = n;     
94      clearAll();          
95      activate(n);
96      updateDetail(n);
97
98      // Accessibility announcement
99      const stepHeading = Translator.get(stepDetails[n].headingKey);
100      announce(`Step ${n} of ${steps.length}: ${stepHeading}`);
101    });
102  });
103
104  clearAll();
105  activate(1);
106  updateDetail(1);
107});