diff --git a/include/jsguide.js b/include/jsguide.js index c5eea05fd..5081f5820 100644 --- a/include/jsguide.js +++ b/include/jsguide.js @@ -1,63 +1,45 @@ +// Defining a style guide initialization function window.initStyleGuide = function(init) { - // Runs the callback on every element matched by the query selector. + // Utility function to iterate over elements matching a query selector function find(querySelector, callback) { - var elements = [].slice.call(document.querySelectorAll(querySelector)); - for (var i = 0; i < elements.length; i++) { - callback(elements[i]); - } + // Using forEach directly on NodeList using Array.prototype.forEach.call + Array.prototype.forEach.call(document.querySelectorAll(querySelector), callback); } - // Add the tocDiv at the top. - var title = document.getElementsByTagName('h1')[0]; - var toc = document.createElement('div'); + + // Adding the tocDiv below the title + const title = document.querySelector('h1'); // Using querySelector for simplicity + const toc = document.createElement('div'); toc.id = 'tocDiv'; toc.className = 'vertical_toc'; title.parentNode.insertBefore(toc, title.nextSibling); - - // If a paragraph starts with (e.g.) "Note:" or "Tip:" then add - // that "callout class" to its element. + + // Adding "callout class" to paragraph elements starting with "Note:" or "Tip:" find('p', function(paragraph) { - var match = /^([a-z]+):/i.exec(paragraph.textContent); - if (match) { - paragraph.classList.add(match[1].toLowerCase()); - } + const match = /^([a-z]+):/i.exec(paragraph.textContent); + if (match) paragraph.classList.add(match[1].toLowerCase()); }); - - // Fill in text for intra-document links, ensuring that links - // remain up-to-date even if sections are moved or renumbered. - // This triggers on any link with "??" as its text and a URL - // starting with "#", and the filled-in text is exactly the same - // as the text of the referenced section heading. + + // Filling in text for intra-document links find('a[href^="#"]', function(link) { - var href = link.getAttribute('href'); - var heading = document.getElementById(href.substring(1)); - // Fill in link text with heading title - if (heading && link.textContent == '??') { - link.textContent = heading.textContent; - } + const heading = document.getElementById(link.getAttribute('href').substring(1)); + if (heading && link.textContent == '??') link.textContent = heading.textContent; }); - - // Hoedown renders fenced code blocks incompatibly with what - // prettify expects. As a result, prettify doesn't handle them - // properly. Fix it by moving the code directly into the pre. + + // Adjusting code blocks for compatibility with prettify find('pre > code', function(code) { - var pre = code.parentElement; - // Internal HTML/CSS & TS style guides do not use prettyprint. - if (code.classList.contains('language-css') || - code.classList.contains('language-django') || - code.classList.contains('language-html') || - code.classList.contains('language-ts')) { - code.classList.add('prettyprint'); - } - pre.className = code.className; - pre.innerHTML = code.innerHTML; + const pre = code.parentElement; + if (['language-css', 'language-django', 'language-html', 'language-ts'].includes(code.className)) { + code.classList.add('prettyprint'); + } + pre.className = code.className; + pre.innerHTML = code.innerHTML; }); - - // Run the normal init function. + + // Running the normal init function init(); - - // Call the pretty-printer after we've fixed up the code blocks. - var pretty = document.createElement('script'); - pretty.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/' + - 'run_prettify.js'; + + // Appending the pretty-print script to the document body + const pretty = document.createElement('script'); + pretty.src = 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'; document.body.appendChild(pretty); }.bind(null, window.initStyleGuide);