Refactored file jsguide.js

This commit is contained in:
khaidao000 2023-09-28 03:11:28 -05:00
parent cf722264e7
commit dea1cc92ab

View File

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