From 01eca1a96e108b449cc39056b33abe3c21df4578 Mon Sep 17 00:00:00 2001
From: tompng <tomoyapenguin@gmail.com>
Date: Wed, 19 Nov 2025 22:16:45 +0900
Subject: [PATCH] Modernize aliki.js coding style

Use template literals, arrow functions, const, let.
Add "use strict" to detect potential problem quickly.
---
 lib/rdoc/generator/template/aliki/js/aliki.js | 200 +++++++++---------
 1 file changed, 101 insertions(+), 99 deletions(-)

diff --git a/lib/rdoc/generator/template/aliki/js/aliki.js b/lib/rdoc/generator/template/aliki/js/aliki.js
index 5fcc3ac317..af851900c4 100644
--- a/lib/rdoc/generator/template/aliki/js/aliki.js
+++ b/lib/rdoc/generator/template/aliki/js/aliki.js
@@ -1,7 +1,9 @@
+'use strict';
+
 /* ===== Method Source Code Toggling ===== */
 
-function showSource( e ) {
-  var target = e.target;
+function showSource(e) {
+  let target = e.target;
   while (!target.classList.contains('method-detail')) {
     target = target.parentNode;
   }
@@ -11,10 +13,10 @@ function showSource( e ) {
   if (typeof target !== "undefined" && target !== null) {
     target.classList.toggle('active-menu')
   }
-};
+}
 
 function hookSourceViews() {
-  document.querySelectorAll('.method-source-toggle').forEach(function (codeObject) {
+  document.querySelectorAll('.method-source-toggle').forEach((codeObject) => {
     codeObject.addEventListener('click', showSource);
   });
 }
@@ -26,23 +28,23 @@ function createSearchInstance(input, result) {
 
   result.classList.remove("initially-hidden");
 
-  var search = new Search(search_data, input, result);
+  const search = new Search(search_data, input, result);
 
   search.renderItem = function(result) {
-    var li = document.createElement('li');
-    var html = '';
+    const li = document.createElement('li');
+    let html = '';
 
     // TODO add relative path to <script> per-page
-    html += '<p class="search-match"><a href="' + index_rel_prefix + this.escapeHTML(result.path) + '">' + this.hlt(result.title);
+    html += `<p class="search-match"><a href="${index_rel_prefix}${this.escapeHTML(result.path)}">${this.hlt(result.title)}`;
     if (result.params)
-      html += '<span class="params">' + result.params + '</span>';
+      html += `<span class="params">${result.params}</span>`;
     html += '</a>';
 
     if (result.namespace)
-      html += '<p class="search-namespace">' + this.hlt(result.namespace);
+      html += `<p class="search-namespace">${this.hlt(result.namespace)}`;
 
     if (result.snippet)
-      html += '<div class="search-snippet">' + result.snippet + '</div>';
+      html += `<div class="search-snippet">${result.snippet}</div>`;
 
     li.innerHTML = html;
 
@@ -50,10 +52,10 @@ function createSearchInstance(input, result) {
   }
 
   search.select = function(result) {
-    var href = result.firstChild.firstChild.href;
-    var query = this.input.value;
+    let href = result.firstChild.firstChild.href;
+    const query = this.input.value;
     if (query) {
-      var url = new URL(href, window.location.origin);
+      const url = new URL(href, window.location.origin);
       url.searchParams.set('q', query);
       url.searchParams.set('nav', '0');
       href = url.toString();
@@ -67,26 +69,26 @@ function createSearchInstance(input, result) {
 }
 
 function hookSearch() {
-  var input  = document.querySelector('#search-field');
-  var result = document.querySelector('#search-results');
+  const input  = document.querySelector('#search-field');
+  const result = document.querySelector('#search-results');
 
   if (!input || !result) return; // Exit if search elements not found
 
-  var search_section = document.querySelector('#search-section');
+  const search_section = document.querySelector('#search-section');
   if (search_section) {
     search_section.classList.remove("initially-hidden");
   }
 
-  var search = createSearchInstance(input, result);
+  const search = createSearchInstance(input, result);
   if (!search) return;
 
   // Check for ?q= URL parameter and trigger search automatically
   if (typeof URLSearchParams !== 'undefined') {
-    var urlParams = new URLSearchParams(window.location.search);
-    var queryParam = urlParams.get('q');
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryParam = urlParams.get('q');
     if (queryParam) {
-      var navParam = urlParams.get('nav');
-      var autoSelect = navParam !== '0';
+      const navParam = urlParams.get('nav');
+      const autoSelect = navParam !== '0';
       input.value = queryParam;
       search.search(queryParam, autoSelect);
     }
@@ -110,37 +112,37 @@ function hookFocus() {
 /* ===== Mobile Navigation ===== */
 
 function hookSidebar() {
-  var navigation = document.querySelector('#navigation');
-  var navigationToggle = document.querySelector('#navigation-toggle');
+  const navigation = document.querySelector('#navigation');
+  const navigationToggle = document.querySelector('#navigation-toggle');
 
   if (!navigation || !navigationToggle) return;
 
-  function closeNav() {
+  const closeNav = () => {
     navigation.hidden = true;
     navigationToggle.ariaExpanded = 'false';
     document.body.classList.remove('nav-open');
-  }
+  };
 
-  function openNav() {
+  const openNav = () => {
     navigation.hidden = false;
     navigationToggle.ariaExpanded = 'true';
     document.body.classList.add('nav-open');
-  }
+  };
 
-  function toggleNav() {
+  const toggleNav = () => {
     if (navigation.hidden) {
       openNav();
     } else {
       closeNav();
     }
-  }
+  };
 
-  navigationToggle.addEventListener('click', function(e) {
+  navigationToggle.addEventListener('click', (e) => {
     e.stopPropagation();
     toggleNav();
   });
 
-  var isSmallViewport = window.matchMedia("(max-width: 1023px)").matches;
+  const isSmallViewport = window.matchMedia("(max-width: 1023px)").matches;
   if (isSmallViewport) {
     closeNav();
 
@@ -165,29 +167,29 @@ function hookSidebar() {
 /* ===== Right Sidebar Table of Contents ===== */
 
 function generateToc() {
-  var tocNav = document.querySelector('#toc-nav');
+  const tocNav = document.querySelector('#toc-nav');
   if (!tocNav) return; // Exit if TOC nav doesn't exist
 
-  var main = document.querySelector('main');
+  const main = document.querySelector('main');
   if (!main) return;
 
   // Find all h2 and h3 headings in the main content
-  var headings = main.querySelectorAll('h1, h2, h3');
+  const headings = main.querySelectorAll('h1, h2, h3');
   if (headings.length === 0) return;
 
-  var tocList = document.createElement('ul');
+  const tocList = document.createElement('ul');
   tocList.className = 'toc-list';
 
-  headings.forEach(function(heading) {
+  headings.forEach((heading) => {
     // Skip if heading doesn't have an id
     if (!heading.id) return;
 
-    var li = document.createElement('li');
-    var level = heading.tagName.toLowerCase();
-    li.className = 'toc-item toc-' + level;
+    const li = document.createElement('li');
+    const level = heading.tagName.toLowerCase();
+    li.className = `toc-item toc-${level}`;
 
-    var link = document.createElement('a');
-    link.href = '#' + heading.id;
+    const link = document.createElement('a');
+    link.href = `#${heading.id}`;
     link.className = 'toc-link';
     link.textContent = heading.textContent.replace(/¶.*$/, '').trim(); // Remove pilcrow and "top" links
     link.setAttribute('data-target', heading.id);
@@ -200,7 +202,7 @@ function generateToc() {
     tocNav.appendChild(tocList);
   } else {
     // Hide TOC if no headings found
-    var tocContainer = document.querySelector('.table-of-contents');
+    const tocContainer = document.querySelector('.table-of-contents');
     if (tocContainer) {
       tocContainer.style.display = 'none';
     }
@@ -208,11 +210,11 @@ function generateToc() {
 }
 
 function hookTocActiveHighlighting() {
-  var tocLinks = document.querySelectorAll('.toc-link');
-  var targetHeadings = [];
-  tocLinks.forEach(function(link) {
-    var targetId = link.getAttribute('data-target');
-    var heading = document.getElementById(targetId);
+  const tocLinks = document.querySelectorAll('.toc-link');
+  const targetHeadings = [];
+  tocLinks.forEach((link) => {
+    const targetId = link.getAttribute('data-target');
+    const heading = document.getElementById(targetId);
     if (heading) {
       targetHeadings.push(heading);
     }
@@ -220,23 +222,23 @@ function hookTocActiveHighlighting() {
 
   if (targetHeadings.length === 0) return;
 
-  var observerOptions = {
+  const observerOptions = {
     root: null,
     rootMargin: '0% 0px -35% 0px',
     threshold: 0
   };
 
-  var intersectingHeadings = new Set();
-  function update() {
-    var firstIntersectingHeading = targetHeadings.find(function(heading) {
+  const intersectingHeadings = new Set();
+  const update = () => {
+    const firstIntersectingHeading = targetHeadings.find((heading) => {
       return intersectingHeadings.has(heading);
     });
     if (!firstIntersectingHeading) return;
-    var correspondingLink = document.querySelector('.toc-link[data-target="' + firstIntersectingHeading.id + '"]');
+    const correspondingLink = document.querySelector(`.toc-link[data-target="${firstIntersectingHeading.id}"]`);
     if (!correspondingLink) return;
 
     // Remove active class from all links
-    tocLinks.forEach(function(link) {
+    tocLinks.forEach((link) => {
       link.classList.remove('active');
     });
 
@@ -244,18 +246,18 @@ function hookTocActiveHighlighting() {
     correspondingLink.classList.add('active');
 
     // Scroll link into view if needed
-    var tocNav = document.querySelector('#toc-nav');
+    const tocNav = document.querySelector('#toc-nav');
     if (tocNav) {
-      var linkRect = correspondingLink.getBoundingClientRect();
-      var navRect = tocNav.getBoundingClientRect();
+      const linkRect = correspondingLink.getBoundingClientRect();
+      const navRect = tocNav.getBoundingClientRect();
 
       if (linkRect.top < navRect.top || linkRect.bottom > navRect.bottom) {
         correspondingLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
     }
-  }
-  var observer = new IntersectionObserver(function(entries) {
-    entries.forEach(function(entry) {
+  };
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
       if (entry.isIntersecting) {
         intersectingHeadings.add(entry.target);
       } else {
@@ -266,19 +268,19 @@ function hookTocActiveHighlighting() {
   }, observerOptions);
 
   // Observe all headings that have corresponding TOC links
-  targetHeadings.forEach(function(heading) {
+  targetHeadings.forEach((heading) => {
     observer.observe(heading);
   });
 
   // Smooth scroll when clicking TOC links
-  tocLinks.forEach(function(link) {
-    link.addEventListener('click', function(e) {
+  tocLinks.forEach((link) => {
+    link.addEventListener('click', (e) => {
       e.preventDefault();
-      var targetId = this.getAttribute('data-target');
-      var targetHeading = document.getElementById(targetId);
+      const targetId = link.getAttribute('data-target');
+      const targetHeading = document.getElementById(targetId);
       if (targetHeading) {
         targetHeading.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        history.pushState(null, '', '#' + targetId);
+        history.pushState(null, '', `#${targetId}`);
       }
     });
   });
@@ -287,40 +289,40 @@ function hookTocActiveHighlighting() {
 /* ===== Mobile Search Modal ===== */
 
 function hookSearchModal() {
-  var searchToggle = document.querySelector('#search-toggle');
-  var searchModal = document.querySelector('#search-modal');
-  var searchModalClose = document.querySelector('#search-modal-close');
-  var searchModalBackdrop = document.querySelector('.search-modal-backdrop');
-  var searchInput = document.querySelector('#search-field-mobile');
-  var searchResults = document.querySelector('#search-results-mobile');
-  var searchEmpty = document.querySelector('.search-modal-empty');
+  const searchToggle = document.querySelector('#search-toggle');
+  const searchModal = document.querySelector('#search-modal');
+  const searchModalClose = document.querySelector('#search-modal-close');
+  const searchModalBackdrop = document.querySelector('.search-modal-backdrop');
+  const searchInput = document.querySelector('#search-field-mobile');
+  const searchResults = document.querySelector('#search-results-mobile');
+  const searchEmpty = document.querySelector('.search-modal-empty');
 
   if (!searchToggle || !searchModal) return;
 
   // Initialize search for mobile modal
-  var mobileSearch = createSearchInstance(searchInput, searchResults);
+  const mobileSearch = createSearchInstance(searchInput, searchResults);
   if (!mobileSearch) return;
 
   // Hide empty state when there are results
-  var originalRenderItem = mobileSearch.renderItem;
+  const originalRenderItem = mobileSearch.renderItem;
   mobileSearch.renderItem = function(result) {
     if (searchEmpty) searchEmpty.style.display = 'none';
     return originalRenderItem.call(this, result);
   };
 
-  function openSearchModal() {
+  const openSearchModal = () => {
     searchModal.hidden = false;
     document.body.style.overflow = 'hidden';
     // Focus input after animation
-    setTimeout(function() {
+    setTimeout(() => {
       if (searchInput) searchInput.focus();
     }, 100);
-  }
+  };
 
-  function closeSearchModal() {
+  const closeSearchModal = () => {
     searchModal.hidden = true;
     document.body.style.overflow = '';
-  }
+  };
 
   // Open on button click
   searchToggle.addEventListener('click', openSearchModal);
@@ -336,7 +338,7 @@ function hookSearchModal() {
   }
 
   // Close on Escape key
-  document.addEventListener('keydown', function(e) {
+  document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && !searchModal.hidden) {
       closeSearchModal();
     }
@@ -344,15 +346,15 @@ function hookSearchModal() {
 
   // Check for ?q= URL parameter on mobile and open modal
   if (typeof URLSearchParams !== 'undefined') {
-    var urlParams = new URLSearchParams(window.location.search);
-    var queryParam = urlParams.get('q');
-    var isSmallViewport = window.matchMedia("(max-width: 1023px)").matches;
+    const urlParams = new URLSearchParams(window.location.search);
+    const queryParam = urlParams.get('q');
+    const isSmallViewport = window.matchMedia("(max-width: 1023px)").matches;
 
     if (queryParam && isSmallViewport) {
       openSearchModal();
       searchInput.value = queryParam;
-      var navParam = urlParams.get('nav');
-      var autoSelect = navParam !== '0';
+      const navParam = urlParams.get('nav');
+      const autoSelect = navParam !== '0';
       mobileSearch.search(queryParam, autoSelect);
     }
   }
@@ -361,14 +363,14 @@ function hookSearchModal() {
 /* ===== Code Block Copy Functionality ===== */
 
 function createCopyButton() {
-  var button = document.createElement('button');
+  const button = document.createElement('button');
   button.className = 'copy-code-button';
   button.type = 'button';
   button.setAttribute('aria-label', 'Copy code to clipboard');
   button.setAttribute('title', 'Copy code');
 
   // Create clipboard icon SVG
-  var clipboardIcon = `
+  const clipboardIcon = `
     <svg viewBox="0 0 24 24">
       <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
@@ -376,7 +378,7 @@ function createCopyButton() {
   `;
 
   // Create checkmark icon SVG (for copied state)
-  var checkIcon = `
+  const checkIcon = `
     <svg viewBox="0 0 24 24">
       <polyline points="20 6 9 17 4 12"></polyline>
     </svg>
@@ -396,16 +398,16 @@ function wrapCodeBlocksWithCopyButton() {
   // - Modifying the formatter would require extending RDoc's core internals
 
   // Find all pre elements that are not already wrapped
-  var preElements = document.querySelectorAll('main pre:not(.code-block-wrapper pre)');
+  const preElements = document.querySelectorAll('main pre:not(.code-block-wrapper pre)');
 
-  preElements.forEach(function(pre) {
+  preElements.forEach((pre) => {
     // Skip if already wrapped
     if (pre.parentElement.classList.contains('code-block-wrapper')) {
       return;
     }
 
     // Create wrapper
-    var wrapper = document.createElement('div');
+    const wrapper = document.createElement('div');
     wrapper.className = 'code-block-wrapper';
 
     // Insert wrapper before pre
@@ -415,24 +417,24 @@ function wrapCodeBlocksWithCopyButton() {
     wrapper.appendChild(pre);
 
     // Create and add copy button
-    var copyButton = createCopyButton();
+    const copyButton = createCopyButton();
     wrapper.appendChild(copyButton);
 
     // Add click handler
-    copyButton.addEventListener('click', function() {
+    copyButton.addEventListener('click', () => {
       copyCodeToClipboard(pre, copyButton);
     });
   });
 }
 
 function copyCodeToClipboard(preElement, button) {
-  var code = preElement.textContent;
+  const code = preElement.textContent;
 
   // Use the Clipboard API (supported by all modern browsers)
   if (navigator.clipboard && navigator.clipboard.writeText) {
-    navigator.clipboard.writeText(code).then(function() {
+    navigator.clipboard.writeText(code).then(() => {
       showCopySuccess(button);
-    }).catch(function() {
+    }).catch(() => {
       alert('Failed to copy code.');
     });
   } else {
@@ -448,7 +450,7 @@ function showCopySuccess(button) {
   button.setAttribute('title', 'Copied!');
 
   // Revert back after 2 seconds
-  setTimeout(function() {
+  setTimeout(() => {
     button.innerHTML = button.dataset.clipboardIcon;
     button.classList.remove('copied');
     button.setAttribute('aria-label', 'Copy code to clipboard');
@@ -458,7 +460,7 @@ function showCopySuccess(button) {
 
 /* ===== Initialization ===== */
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
   hookSourceViews();
   hookSearch();
   hookFocus();