@govtechsg/oobee 0.10.70 → 0.10.74

package/src/static/ejs/partials/scripts/ruleModal/utilities.ejs

@@ -0,0 +1,483 @@
+<script>
+  function generateWcagConformanceLinks(conformanceList) {
+    const wcagConformanceUrls = {
+      wcag111: 'https://www.w3.org/TR/WCAG22/#non-text-content',
+      wcag122: 'https://www.w3.org/TR/WCAG22/#captions-prerecorded',
+      wcag131: 'https://www.w3.org/TR/WCAG22/#info-and-relationships',
+      wcag135: 'https://www.w3.org/TR/WCAG22/#identify-input-purpose',
+      wcag141: 'https://www.w3.org/TR/WCAG22/#use-of-color',
+      wcag142: 'https://www.w3.org/TR/WCAG22/#audio-control',
+      wcag143: 'https://www.w3.org/TR/WCAG22/#contrast-minimum',
+      wcag144: 'https://www.w3.org/TR/WCAG22/#resize-text',
+      wcag146: 'https://www.w3.org/TR/WCAG22/#contrast-enhanced',
+      wcag1412: 'https://www.w3.org/TR/WCAG22/#text-spacing',
+      wcag211: 'https://www.w3.org/TR/WCAG22/#keyboard',
+      wcag213: 'https://www.w3.org/WAI/WCAG22/Understanding/keyboard-no-exception.html',
+      wcag221: 'https://www.w3.org/TR/WCAG22/#timing-adjustable',
+      wcag222: 'https://www.w3.org/TR/WCAG22/#pause-stop-hide',
+      wcag224: 'https://www.w3.org/TR/WCAG22/#interruptions',
+      wcag241: 'https://www.w3.org/TR/WCAG22/#bypass-blocks',
+      wcag242: 'https://www.w3.org/TR/WCAG22/#page-titled',
+      wcag244: 'https://www.w3.org/TR/WCAG22/#link-purpose-in-context',
+      wcag249: 'https://www.w3.org/TR/WCAG22/#link-purpose-link-only',
+      wcag258: 'https://www.w3.org/TR/WCAG22/#target-size-minimum',
+      wcag311: 'https://www.w3.org/TR/WCAG22/#language-of-page',
+      wcag312: 'https://www.w3.org/TR/WCAG22/#language-of-parts',
+      wcag315: 'https://www.w3.org/TR/WCAG22/#reading-level',
+      wcag325: 'https://www.w3.org/TR/WCAG22/#change-on-request',
+      wcag332: 'https://www.w3.org/TR/WCAG22/#labels-or-instructions',
+      wcag412: 'https://www.w3.org/TR/WCAG22/#name-role-value',
+    };
+
+    const links = [];
+    for (let i = 1; i < conformanceList.length; i++) {
+      const [wcagSection, subSection, ...sectionItem] = conformanceList[i].slice(4);
+      const formattedConformanceNumber = `${wcagSection}.${subSection}.${sectionItem.join('')}`;
+      links.push(
+        `<a href="${wcagConformanceUrls[conformanceList[i]]}" target="_blank">WCAG ${formattedConformanceNumber}</a>`,
+      );
+    }
+    return links.join('&nbsp&nbsp,&nbsp&nbsp&nbsp');
+  }
+
+  function generateItemMessageElement(displayNeedsReview, rawMessage) {
+    if (rawMessage.includes('\n\nFix')) {
+      rawMessage = rawMessage.replace('\n\nFix', '\n  Fix');
+    }
+
+    const htmlEscapedMessageArray = rawMessage.split('\n  ').map(m => htmlEscapeString(m));
+
+    if (displayNeedsReview) {
+      if (htmlEscapedMessageArray.length === 1) {
+        return `<p class="mb-0">${htmlEscapedMessageArray[0]}</p>`;
+      } else {
+        return `<ul>${htmlEscapedMessageArray.map(m => `<li>${m}</li>`).join('')}</ul>`;
+      }
+    } else {
+      let i = 0;
+      const elements = [];
+      while (i < htmlEscapedMessageArray.length) {
+        if (htmlEscapedMessageArray[i].startsWith('Fix ')) {
+          elements.push(`<p class="mb-0">${htmlEscapedMessageArray[i]}</p>`);
+          i++;
+        } else {
+          const fixesList = [];
+          while (
+            i < htmlEscapedMessageArray.length &&
+            !htmlEscapedMessageArray[i].startsWith('Fix a')
+          ) {
+            fixesList.push(`<li>${htmlEscapedMessageArray[i]}</li>`);
+            i++;
+          }
+          elements.push(`<ul>${fixesList.join('')}</ul>`);
+        }
+      }
+
+      return elements.join('');
+    }
+  }
+
+  // Generate AI-powered fix suggestions using wcag-eval API
+  const generateGenAiSuggestFix = async (ruleId, accordionDiv, html, buttonDiv, errorDiv) => {
+    console.log('Gen AI Suggest Fix called:', { ruleId, accordionDiv, html, buttonDiv, errorDiv });
+
+    const SUPPORTED_RULES = ['color-contrast', 'oobee-accessible-label', 'image-alt', 'listitem', 'link-in-text-block', 'target-size'];
+    if (!SUPPORTED_RULES.includes(ruleId)) {
+      console.warn(`Gen AI Suggest Fix not yet available for ${ruleId}`);
+      return;
+    }
+
+    // Update button state
+    const button = document.getElementById(buttonDiv);
+    if (!button) {
+      console.error('Gen AI button not found:', buttonDiv);
+      return;
+    }
+
+    button.disabled = true;
+    button.textContent = 'Generating Fix...';
+
+    // Clear previous errors
+    const errorContainer = document.getElementById(errorDiv);
+    if (errorContainer) {
+      errorContainer.innerHTML = '';
+    }
+
+    try {
+      let violationContext = null;
+      let elementContext = null;
+
+      // Attempt to get violation context from embedded JSON data
+      if (window.oobeeJsonContextParser && window.oobeeJsonContextParser.jsonData) {
+        violationContext = window.oobeeJsonContextParser.getViolationContextByHtml(html, ruleId);
+
+        if (violationContext) {
+          console.log('Found violation context from embedded JSON:', violationContext);
+        } else {
+          console.warn('No matching violation found in embedded JSON data, will extract context from DOM');
+        }
+      } else {
+        console.warn('Embedded JSON context parser not available, will extract context from DOM');
+      }
+
+      // Extract element context from DOM if embedded JSON data is not available
+      if (!violationContext || !violationContext.colorData) {
+        console.log('Extracting element context from DOM as fallback');
+        elementContext = extractElementContext(html);
+      } else {
+        console.log('Using embedded JSON violation context, skipping DOM extraction');
+      }
+
+      // Build scanner findings from embedded JSON data or fallback to extracted context
+      let scannerFindings;
+      if (violationContext && violationContext.colorData) {
+        const colorData = violationContext.colorData;
+        console.log('Using color data from embedded JSON:', {
+          foreground: colorData.foreground,
+          background: colorData.background,
+          currentRatio: colorData.currentRatio,
+          requiredRatio: colorData.requiredRatio,
+          fontSize: colorData.fontSize,
+          fontWeight: colorData.fontWeight
+        });
+
+        scannerFindings = {
+          foreground: colorData.foreground || '#000000',
+          background: colorData.background || '#ffffff',
+          font_size_px: colorData.fontSize || 16,
+          font_weight: colorData.fontWeight || '400',
+          contrast_ratio: colorData.currentRatio || 1.0,
+          required_ratio: colorData.requiredRatio || 4.5,
+          actual_html: violationContext.html,
+          xpath_selector: violationContext.xpath
+        };
+        console.log('Using embedded JSON-based scanner findings with contrast ratio:', scannerFindings.contrast_ratio);
+      } else {
+        scannerFindings = {
+          foreground: elementContext?.foreground || '#000000',
+          background: elementContext?.background || '#ffffff',
+          font_size_px: elementContext?.fontSize || 16,
+          font_weight: elementContext?.fontWeight || '400',
+          contrast_ratio: elementContext?.contrastRatio || 1.0,
+          required_ratio: 4.5
+        };
+        console.log('Using fallback scanner findings:', scannerFindings);
+      }
+
+      const violationTypeMap = {
+        'color-contrast': 'color-contrast',
+        'oobee-accessible-label': 'accessible-label',
+        'image-alt': 'image-alt',
+        'listitem': 'listitem',
+        'target-size': 'target-size'
+      };
+      let violationType = violationTypeMap[ruleId] || ruleId;
+
+      // Prepare payload for wcag-eval API
+      const apiPayload = {
+        violationType: violationType,
+        html: html,
+        css: elementContext?.css || '',
+        violationContext: violationContext ? {
+          severity: violationContext.severity,
+          issue_description: violationContext.issueDescription,
+          wcag_conformance: violationContext.wcagConformance,
+          page_title: violationContext.pageTitle,
+          page_url: violationContext.url,
+          how_to_fix: violationContext.howToFix,
+          axe_impact: violationContext.axeImpact,
+          learn_more: violationContext.learnMore
+        } : {},
+        context: {
+          rule_id: ruleId,
+          timestamp: new Date().toISOString(),
+          data_source: violationContext ? 'json_scan_results' : 'dom_extraction'
+        }
+      };
+
+      // Add scannerFindings for color-contrast violations
+      if (violationType === 'color-contrast') {
+        apiPayload.scannerFindings = scannerFindings;
+      }
+
+      console.log('Sending request to wcag-eval API:', apiPayload);
+
+      // Call wcag-eval API (now in oobee-web-proxy)
+      const wcagEvalApiUrl = `${proxyUrl}/api/ai/generate-fix` || 'http://localhost:3002/api/ai/generate-fix';
+      const response = await fetch(wcagEvalApiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify(apiPayload)
+      });
+
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+      }
+
+      const apiResponse = await response.json();
+      console.log('Received response from wcag-eval API:', apiResponse);
+
+      if (!apiResponse.success) {
+        throw new Error(apiResponse.error || 'API returned unsuccessful response');
+      }
+
+      const fixSuggestion = apiResponse.fixSuggestion;
+      console.log('Fix suggestion data:', fixSuggestion);
+      console.log('Code fixes array:', fixSuggestion?.codeFixes);
+
+      // Format the AI response for display
+      const formattedResponse = formatFixSuggestionResponse(fixSuggestion);
+
+      // Display the generated fix
+      const responseContainer = document.getElementById(accordionDiv);
+      if (responseContainer) {
+        responseContainer.innerHTML = formattedResponse;
+
+        // Highlight code blocks
+        responseContainer.querySelectorAll('.codeForAiResponse').forEach(el => {
+          if (typeof hljs !== 'undefined') {
+            hljs.highlightElement(el);
+          }
+        });
+      }
+
+      // Reset button to regenerate state
+      button.disabled = false;
+      button.style = 'border: 1px solid var(--oobee-blue-100); color: var(--oobee-blue-100);';
+      button.textContent = 'Regenerate Fix';
+
+    } catch (error) {
+      console.error('Error in Gen AI fix generation:', error);
+
+      // Reset button to initial state
+      button.disabled = false;
+      button.style = 'border: 1px solid var(--oobee-blue-100); color: var(--oobee-blue-100);';
+      button.textContent = 'Gen AI Suggest Fix';
+
+      if (errorContainer) {
+        const isConnectionError = error.message.includes('fetch') || error.message.includes('Failed to fetch');
+        const errorMessage = isConnectionError
+          ? 'Unable to connect to AI service. Please ensure the wcag-eval API is running on port 5000.'
+          : `Failed to generate fix suggestion: ${error.message}`;
+
+        errorContainer.innerHTML = `<div class="generateAiError">${errorMessage}</div>`;
+      }
+    }
+  };
+
+  // Helper function to extract element context from HTML/CSS
+  function extractElementContext(html) {
+    const context = {
+      css: '',
+      foreground: '#000000',
+      background: '#ffffff',
+      fontSize: 16,
+      fontWeight: '400',
+      contrastRatio: 1.0
+    };
+
+    try {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+      const element = tempDiv.querySelector('*') || tempDiv;
+
+      if (element && element.parentNode) {
+        document.body.appendChild(tempDiv);
+        const computedStyle = window.getComputedStyle(element);
+
+        context.foreground = rgbToHex(computedStyle.color) || context.foreground;
+        context.background = rgbToHex(computedStyle.backgroundColor) || context.background;
+        context.fontSize = parseFloat(computedStyle.fontSize) || context.fontSize;
+        context.fontWeight = computedStyle.fontWeight || context.fontWeight;
+
+        if (element.style && element.style.cssText) {
+          context.css = element.style.cssText;
+        }
+
+        document.body.removeChild(tempDiv);
+      }
+
+      if (context.foreground && context.background) {
+        context.contrastRatio = calculateContrastRatio(context.foreground, context.background);
+      }
+
+    } catch (error) {
+      console.warn('Could not extract element context:', error);
+    }
+
+    return context;
+  }
+
+  // Format fix suggestion response for display
+  function formatFixSuggestionResponse(fixSuggestion) {
+    // Support both snake_case (Python) and camelCase (TypeScript) responses
+    const contrastAnalysis = fixSuggestion.contrast_analysis || fixSuggestion.contrastAnalysis || {};
+    const targetSizeAnalysis = fixSuggestion.target_size_analysis || fixSuggestion.targetSizeAnalysis || {};
+    const plainExplanation = fixSuggestion.why_it_matters || fixSuggestion.explanation || 'This fix improves accessibility for users with visual impairments.';
+    const diagnosis = fixSuggestion.diagnosis || fixSuggestion.explanation || plainExplanation;
+
+    // Escape HTML for safe rendering
+    const escapeHtml = (text) => String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+
+    // Build code fixes section
+    let codeFixesHtml = '';
+
+    // Handle TypeScript format (css/html directly in response)
+    if (fixSuggestion.css || fixSuggestion.html) {
+      const mainFix = [];
+      if (fixSuggestion.css) {
+        mainFix.push(`
+          <div style="margin-bottom: 16px;">
+            <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">Recommended CSS Fix:</p>
+            <code class="codeForAiResponse language-css hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(fixSuggestion.css)}</code>
+          </div>
+        `);
+      }
+      if (fixSuggestion.html) {
+        mainFix.push(`
+          <div style="margin-bottom: 16px;">
+            <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">Recommended HTML Fix:</p>
+            <code class="codeForAiResponse language-html hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(fixSuggestion.html)}</code>
+          </div>
+        `);
+      }
+
+      // Handle alternatives
+      if (fixSuggestion.alternatives && Array.isArray(fixSuggestion.alternatives) && fixSuggestion.alternatives.length > 0) {
+        const alternatives = fixSuggestion.alternatives.map((alt, index) => {
+          const altCode = alt.css || alt.html || '';
+          return `
+            <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
+              <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">Alternative ${index + 1}: ${escapeHtml(alt.explanation || '')}</p>
+              <code class="codeForAiResponse language-${alt.css ? 'css' : 'html'} hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(altCode)}</code>
+            </div>
+          `;
+        }).join('');
+        mainFix.push(alternatives);
+      }
+
+      codeFixesHtml = `
+        <div style="margin-bottom: 16px;">
+          <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">Code Fix:</h4>
+          ${mainFix.join('')}
+        </div>
+      `;
+    }
+    // Handle Python format (code_fixes array)
+    else if (fixSuggestion.code_fixes && Array.isArray(fixSuggestion.code_fixes) && fixSuggestion.code_fixes.length > 0) {
+      const codeFixes = fixSuggestion.code_fixes.map((fix, index) => {
+        const language = fix.language || 'html';
+        const description = fix.description || `Option ${index + 1}`;
+        const code = fix.after || fix.before || '';
+        const marginBottom = index === fixSuggestion.code_fixes.length - 1 ? '0' : '20px';
+
+        return `
+        <div style="margin-bottom: ${marginBottom};">
+          <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">${escapeHtml(description)}</p>
+          <code class="codeForAiResponse language-${escapeHtml(language)} hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(code)}</code>
+        </div>`;
+      }).join('');
+
+      codeFixesHtml = `
+      <div style="margin-bottom: 16px;">
+        <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">Code Fix${fixSuggestion.code_fixes.length > 1 ? 'es' : ''}:</h4>
+        ${codeFixes}
+      </div>
+    `;
+    }
+
+    return `
+      <div class="genai-response-card">
+        <div style="margin-bottom: 24px;">
+          <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">What's the problem?</h4>
+          <p style="font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: #333;">
+            ${escapeHtml(diagnosis)}
+          </p>
+
+          ${contrastAnalysis.current_ratio ? `
+          <div style="background: #FAF8FD; padding: 12px; border-radius: 6px; margin-bottom: 16px;">
+            <p style="margin: 0; font-size: 14px; line-height: 1.6; color: #333;">
+              The current text has a contrast ratio of <strong>${contrastAnalysis.current_ratio}:1</strong>,
+              but it needs at least <strong>${contrastAnalysis.required_ratio}:1</strong> to meet accessibility standards.
+              ${contrastAnalysis.passes_aa
+                ? `The suggested fix achieves <strong>${contrastAnalysis.proposed_ratio}:1</strong>, which passes WCAG AA requirements.`
+                : `The suggested fix improves it to <strong>${contrastAnalysis.proposed_ratio}:1</strong>.`}
+            </p>
+          </div>
+          ` : ''}
+
+          ${targetSizeAnalysis && (targetSizeAnalysis.estimated_width !== undefined || targetSizeAnalysis.estimated_height !== undefined || targetSizeAnalysis.notes) ? `
+          <div style="background: #F5FAFF; padding: 12px; border-radius: 6px; margin-bottom: 16px; border: 1px solid #e0efff;">
+            <p style="margin: 0; font-size: 14px; line-height: 1.6; color: #333;">
+              ${targetSizeAnalysis.meets_minimum === false
+                ? 'Estimated hit area is below the WCAG 2.5.8 minimum of 24x24 CSS pixels.'
+                : 'Target size analysis for this control:'}
+              ${targetSizeAnalysis.estimated_width !== undefined && targetSizeAnalysis.estimated_width !== null
+                ? ` Estimated width: <strong>${targetSizeAnalysis.estimated_width}${typeof targetSizeAnalysis.estimated_width === 'number' ? 'px' : ''}</strong>.`
+                : ''}
+              ${targetSizeAnalysis.estimated_height !== undefined && targetSizeAnalysis.estimated_height !== null
+                ? ` Estimated height: <strong>${targetSizeAnalysis.estimated_height}${typeof targetSizeAnalysis.estimated_height === 'number' ? 'px' : ''}</strong>.`
+                : ''}
+              ${targetSizeAnalysis.notes ? ` ${escapeHtml(targetSizeAnalysis.notes)}` : ''}
+            </p>
+          </div>
+          ` : ''}
+
+          ${fixSuggestion.fix_steps && fixSuggestion.fix_steps.length > 0 ? `
+          <div style="margin-top: 16px;">
+            <h5 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">How to fix it:</h5>
+            <ol style="margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; color: #333;">
+              ${fixSuggestion.fix_steps.map(step => `<li style="word-wrap: break-word; overflow-wrap: break-word;">${escapeHtml(step)}</li>`).join('')}
+            </ol>
+          </div>
+          ` : ''}
+        </div>
+
+        ${codeFixesHtml}
+      </div>
+    `;
+  }
+
+  // Convert RGB color to hex format
+  function rgbToHex(rgb) {
+    if (!rgb || rgb === 'transparent' || rgb === 'inherit') return null;
+
+    const result = rgb.match(/\d+/g);
+    if (!result || result.length < 3) return null;
+
+    const r = parseInt(result[0]);
+    const g = parseInt(result[1]);
+    const b = parseInt(result[2]);
+
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  }
+
+  // Calculate WCAG contrast ratio between two colors
+  function calculateContrastRatio(color1, color2) {
+    try {
+      const getLuminance = (hex) => {
+        const rgb = hex.match(/\w\w/g).map(h => parseInt(h, 16) / 255);
+        const [r, g, b] = rgb.map(c => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+      };
+
+      const l1 = getLuminance(color1.replace('#', ''));
+      const l2 = getLuminance(color2.replace('#', ''));
+      const lightest = Math.max(l1, l2);
+      const darkest = Math.min(l1, l2);
+
+      return Math.round(((lightest + 0.05) / (darkest + 0.05)) * 100) / 100;
+    } catch (error) {
+      console.warn('Could not calculate contrast ratio:', error);
+      return 1.0;
+    }
+  }
+</script>

package/src/static/ejs/partials/scripts/scannedPagesSegmentedTabs.ejs

@@ -0,0 +1,35 @@
+<script>
+  document.addEventListener('click', function (e) {
+    const btn = e.target.closest('.seg-pill');
+    if (!btn) return;
+
+    const container = btn.closest('.segmented-tabs');
+    const targetSel = btn.getAttribute('data-tab-target');
+    const panel = document.querySelector(targetSel);
+    if (!panel) return;
+
+    container.querySelectorAll('.seg-pill').forEach((p) =>
+      p.setAttribute('aria-selected', 'false')
+    );
+    btn.setAttribute('aria-selected', 'true');
+
+    document
+      .querySelectorAll('.seg-panels > [role="tabpanel"]')
+      .forEach((p) => (p.hidden = true));
+    panel.hidden = false;
+  });
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const pairs = [
+      ['#seg-not-scanned', '#totalPagesNotScannedLabel'],
+      ['#seg-unsupported', '#totalUnsupportedDocsLabel']
+    ];
+    pairs.forEach(([btnSel, countSel]) => {
+      const btn = document.querySelector(btnSel);
+      const countEl = document.querySelector(countSel);
+      if (btn && countEl && countEl.textContent.trim() === '0') {
+        btn.style.display = 'none';
+      }
+    });
+  });
+</script>

package/src/static/ejs/partials/scripts/screenshotLightbox.ejs

@@ -1,71 +1,75 @@
 <%# functions used to show lightbox of screenshot when thumbnail is clicked on %>
 <script>
-    const lightbox = document.getElementsByClassName('screenshot-lightbox')[0];
-    const lightboxHeader = document.getElementsByClassName('lightbox-header')[0];
-    const lightboxTitle = document.querySelector('.lightbox-header h5');
-    const lightboxContent = document.getElementsByClassName('lightbox-content')[0]; 
-    const lightboxImg = document.getElementById('lightbox-image');
+  const lightbox = document.getElementsByClassName('screenshot-lightbox')[0];
+  const lightboxHeader = document.getElementsByClassName('lightbox-header')[0];
+  const lightboxTitle = document.querySelector('.lightbox-header h5');
+  const lightboxContent = document.getElementsByClassName('lightbox-content')[0];
+  const lightboxImg = document.getElementById('lightbox-image');
 
-    var customFlowScreenshots = document.getElementsByClassName('custom-flow-screenshot'); 
-    Array.from(customFlowScreenshots).forEach(screenshot => {
-        screenshot.onerror = function(event) {
-            screenshot.onerror = null;
-            screenshot.remove();
-        }
-        screenshot.onclick = event => {
-            event.preventDefault();
-            const pageTitle = screenshot.parentNode.getElementsByTagName('a')[0].textContent;
-            const pageUrl = screenshot.parentNode.getElementsByTagName('a')[0].href;
-            openLightbox(screenshot.src, pageTitle, pageUrl);
-        }
-    }) 
+  var customFlowScreenshots = document.getElementsByClassName('custom-flow-screenshot');
+  Array.from(customFlowScreenshots).forEach(screenshot => {
+    screenshot.onerror = function (event) {
+      screenshot.onerror = null;
+      screenshot.remove();
+    };
+    screenshot.onclick = event => {
+      event.preventDefault();
+      const pageTitle = screenshot.parentNode.getElementsByTagName('a')[0].textContent;
+      const pageUrl = screenshot.parentNode.getElementsByTagName('a')[0].href;
+      openLightbox(screenshot.src, pageTitle, pageUrl);
+    };
+  });
 
-    lightbox.addEventListener('click', event => {
-        if (event.target === lightbox || event.target === lightboxHeader || event.target === lightboxTitle) {
-            closeLightbox();
-        }
-    })
+  lightbox.addEventListener('click', event => {
+    if (
+      event.target === lightbox ||
+      event.target === lightboxHeader ||
+      event.target === lightboxTitle
+    ) {
+      closeLightbox();
+    }
+  });
 
-    const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
-    const offcanvasItem = new bootstrap.Offcanvas(offcanvasElem); 
-    offcanvasItem._config.keyboard = false; // Disable default keyboard handling
+  const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
+  const offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
+  offcanvasItem._config.keyboard = false; // Disable default keyboard handling
 
-    const pagesScannedModalElem = document.getElementById('pagesScannedModal'); 
-    const pagesScannedModalItem = new bootstrap.Modal(pagesScannedModalElem);
-    pagesScannedModalItem._config.keyboard = false; 
+  const pagesScannedModalElem = document.getElementById('pagesScannedModal');
+  const pagesScannedModalItem = new bootstrap.Modal(pagesScannedModalElem);
+  pagesScannedModalItem._config.keyboard = false;
 
-    document.addEventListener('keydown', event => {
-      if (event.key === 'Escape') {
-        if (offcanvasItem._isShown) {
-          if (lightbox.style.display === 'block') {
-            event.preventDefault(); // Prevent default bootstrap behaviour
-            closeLightbox(); 
-          } else {
-            offcanvasItem.hide();
-          }
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape') {
+      if (offcanvasItem._isShown) {
+        if (lightbox.style.display === 'block') {
+          event.preventDefault(); // Prevent default bootstrap behaviour
+          closeLightbox();
+        } else {
+          offcanvasItem.hide();
         }
+      }
 
-        if (pagesScannedModalItem._isShown) {
-          if (lightbox.style.display === 'block') {
-            event.preventDefault(); // Prevent default bootstrap behaviour
-            closeLightbox(); 
-          } else {
-            pagesScannedModalItem.hide();
-          }
+      if (pagesScannedModalItem._isShown) {
+        if (lightbox.style.display === 'block') {
+          event.preventDefault(); // Prevent default bootstrap behaviour
+          closeLightbox();
+        } else {
+          pagesScannedModalItem.hide();
         }
       }
-    })
+    }
+  });
 
-    const openLightbox = (imgSrc, pageTitle, pageUrl) => {
-        lightbox.style.display = 'block';
-        
-        lightboxImg.src = imgSrc;
-        lightboxImg.alt = `Screenshot of ${pageUrl}`;
+  function openLightbox(imgSrc, pageTitle, pageUrl) {
+    lightbox.style.display = 'block';
 
-        lightboxTitle.textContent = pageTitle;
-    }
+    lightboxImg.src = imgSrc;
+    lightboxImg.alt = `Screenshot of ${pageUrl}`;
 
-    const closeLightbox = () => {
-        lightbox.style.display = 'none'; 
-    }
-</script>
+    lightboxTitle.textContent = pageTitle;
+  };
+
+  function closeLightbox() {
+    lightbox.style.display = 'none';
+  };
+</script>