Missing titles in styleguide.js

This commit is contained in:
eli 2021-11-29 02:19:27 +00:00
parent 9806df89a3
commit dba49a28e5

View File

@ -1,10 +1,9 @@
TocTypeEnum = { TocTypeEnum = {
VERTICAL: 1, VERTICAL: 1,
HORIZONTAL: 2 HORIZONTAL: 2,
}; };
function CreateTOC(tocElement) { function CreateTOC(tocElement) {
// Find the toc element DIV. We'll place our TOC there. // Find the toc element DIV. We'll place our TOC there.
var toc = document.getElementById(tocElement); var toc = document.getElementById(tocElement);
@ -12,50 +11,49 @@ function CreateTOC(tocElement) {
var tocType; var tocType;
switch (tocTypeClass) { switch (tocTypeClass) {
case 'horizontal_toc': case "horizontal_toc":
tocType = TocTypeEnum.HORIZONTAL; tocType = TocTypeEnum.HORIZONTAL;
break; break;
case 'vertical_toc': case "vertical_toc":
tocType = TocTypeEnum.VERTICAL; tocType = TocTypeEnum.VERTICAL;
break; break;
default: default:
tocType = TocTypeEnum.VERTICAL; tocType = TocTypeEnum.VERTICAL;
break; break;
} }
// If toc_levels is defined, set headingLevels to it. // If toc_levels is defined, set headingLevels to it.
// Otherwise, use default value of "h2,h3" // Otherwise, use default value of "h2,h3"
var headingLevels; var headingLevels;
if (typeof toc_levels === 'undefined') { if (typeof toc_levels === "undefined") {
headingLevels = 'h2,h3'; headingLevels = "h2,h3";
} else { } else {
} }
// Collect all section heading elements in an array // Collect all section heading elements in an array
var headings = document.querySelectorAll(headingLevels); var headings = document.querySelectorAll(headingLevels);
// Add TOC title elements // Add TOC title elements
var tocHeadingDiv = document.createElement('div'); var tocHeadingDiv = document.createElement("div");
toc.appendChild(tocHeadingDiv); toc.appendChild(tocHeadingDiv);
tocHeadingDiv.className = 'toc_title'; tocHeadingDiv.className = "toc_title";
var tocHeading = document.createElement('h3'); var tocHeading = document.createElement("h3");
toc.appendChild(tocHeading); toc.appendChild(tocHeading);
tocHeading.className = 'ignoreLink'; tocHeading.className = "ignoreLink";
tocHeading.id = 'toc'; tocHeading.id = "toc";
var tocText = document.createTextNode('Table of Contents'); var tocText = document.createTextNode("Table of Contents");
tocHeading.appendChild(tocText); tocHeading.appendChild(tocText);
// Add table and tbody // Add table and tbody
var tocTable = document.createElement('table'); var tocTable = document.createElement("table");
if (tocType == TocTypeEnum.VERTICAL) { if (tocType == TocTypeEnum.VERTICAL) {
tocTable.className = 'columns'; tocTable.className = "columns";
} }
toc.appendChild(tocTable); toc.appendChild(tocTable);
var tbody_element = document.createElement('tbody'); var tbody_element = document.createElement("tbody");
tbody_element.setAttribute('valign', 'top'); tbody_element.setAttribute("valign", "top");
tbody_element.className = 'toc'; tbody_element.className = "toc";
tocTable.appendChild(tbody_element); tocTable.appendChild(tbody_element);
// Get the highest level heading // Get the highest level heading
@ -67,18 +65,21 @@ function CreateTOC(tocElement) {
switch (tocType) { switch (tocType) {
case TocTypeEnum.HORIZONTAL: case TocTypeEnum.HORIZONTAL:
CreateHorizontalTOC(headings, masterLevel, lowestLevel, tbody_element); CreateHorizontalTOC(headings, masterLevel, lowestLevel, tbody_element);
break; break;
case TocTypeEnum.VERTICAL: case TocTypeEnum.VERTICAL:
CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element); CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element);
break; break;
default: default:
} }
} }
function CreateHorizontalTOC( function CreateHorizontalTOC(
headings, masterLevel, lowestLevel, tbody_element) { headings,
masterLevel,
lowestLevel,
tbody_element
) {
// Initialize the header counter // Initialize the header counter
var h = 0; var h = 0;
var ignoreChildren = false; var ignoreChildren = false;
@ -93,16 +94,16 @@ function CreateHorizontalTOC(
if (isNaN(level) || level < 1 || level > lowestLevel) continue; if (isNaN(level) || level < 1 || level > lowestLevel) continue;
// If level is a masterLevel, make it a TOC parent category // If level is a masterLevel, make it a TOC parent category
if ((level == masterLevel) && (!hasClass(heading, 'ignoreLink'))) { if (level == masterLevel && !hasClass(heading, "ignoreLink")) {
toc_current_row = AddTOCMaster(tbody_element, heading); toc_current_row = AddTOCMaster(tbody_element, heading);
ignoreChildren = false; ignoreChildren = false;
} }
if ((level == masterLevel) && (hasClass(heading, 'ignoreLink'))) { if (level == masterLevel && hasClass(heading, "ignoreLink")) {
ignoreChildren = true; ignoreChildren = true;
} }
if ((level != masterLevel) && (!ignoreChildren)) { if (level != masterLevel && !ignoreChildren) {
AddTOCElements(toc_current_row, heading); AddTOCElements(toc_current_row, heading);
} }
@ -113,63 +114,62 @@ function CreateHorizontalTOC(
// Adds a master Table of Content heading // Adds a master Table of Content heading
function AddTOCMaster(tocTable, heading) { function AddTOCMaster(tocTable, heading) {
// Add the table row scaffolding // Add the table row scaffolding
var toc_tr = document.createElement('tr'); var toc_tr = document.createElement("tr");
tocTable.appendChild(toc_tr); tocTable.appendChild(toc_tr);
toc_tr.setAttribute('valign', 'top'); toc_tr.setAttribute("valign", "top");
var toc_tr_td = document.createElement('td'); var toc_tr_td = document.createElement("td");
toc_tr.appendChild(toc_tr_td); toc_tr.appendChild(toc_tr_td);
var toc_category = document.createElement('div'); var toc_category = document.createElement("div");
toc_tr_td.appendChild(toc_category); toc_tr_td.appendChild(toc_category);
toc_category.className = 'toc_category'; toc_category.className = "toc_category";
// Create the link to this header // Create the link to this header
var link = document.createElement('a'); var link = document.createElement("a");
link.href = '#' + heading.id; // Create the anchor link link.href = "#" + heading.id; // Create the anchor link
link.textContent = heading.textContent; // Link text is same as heading link.textContent = heading.textContent; // Link text is same as heading
toc_category.appendChild(link); toc_category.appendChild(link);
// Add the container table cell for its children // Add the container table cell for its children
var toc_td = document.createElement('td'); var toc_td = document.createElement("td");
toc_tr.appendChild(toc_td); toc_tr.appendChild(toc_td);
var toc_td_div = document.createElement('div'); var toc_td_div = document.createElement("div");
toc_td_div.className = 'toc_stylepoint'; toc_td_div.className = "toc_stylepoint";
toc_td.appendChild(toc_td_div); toc_td.appendChild(toc_td_div);
return (toc_td_div); return toc_td_div;
} }
// Adds Table of Contents element to a master heading as children // Adds Table of Contents element to a master heading as children
function AddTOCElements(toc_div, heading) { function AddTOCElements(toc_div, heading) {
if (heading.offsetParent === null) { if (heading.offsetParent === null) {
// The element is currently hidden, so don't create a TOC entry // The element is currently hidden, so don't create a TOC entry
} else { } else {
// Create the list item element // Create the list item element
var toc_list_element = document.createElement('li'); var toc_list_element = document.createElement("li");
toc_list_element.className = 'toc_entry'; toc_list_element.className = "toc_entry";
toc_div.appendChild(toc_list_element); toc_div.appendChild(toc_list_element);
// Create the link to this header // Create the link to this header
var link = document.createElement('a'); var link = document.createElement("a");
link.href = '#' + heading.id; // Create the anchor link link.href = "#" + heading.id; // Create the anchor link
link.textContent = heading.textContent; // Link text is same as heading link.textContent = heading.textContent; // Link text is same as heading
toc_list_element.appendChild(link); toc_list_element.appendChild(link);
} }
} }
function CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element) { function CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element) {
// Create the Column scaffolding // Create the Column scaffolding
var toc_tr = document.createElement('tr'); var toc_tr = document.createElement("tr");
tbody_element.appendChild(toc_tr); tbody_element.appendChild(toc_tr);
var toc_tr_td = document.createElement('td'); var toc_tr_td = document.createElement("td");
toc_tr_td.className = 'two_columns'; toc_tr_td.className = "two_columns";
toc_tr.appendChild(toc_tr_td); toc_tr.appendChild(toc_tr_td);
// This code is not working correctly when we have a heading like 3.1.1 ( more than one decimal point)
// so inside of the jsguide.html file, in the 3 Source file structure, we are missing 3.3.1 , 3.3.2 but we have 3.3.3,
// I guess it shows us 3.3.3 because these are all 3.(same number)
// Initialize the header counter and the current row
var h = 0; var h = 0;
var toc_current_col = null; var toc_current_col = null;
var ignoreChildren = false; var ignoreChildren = false;
@ -184,19 +184,19 @@ function CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element) {
if (isNaN(level) || level < 1 || level > lowestLevel) continue; if (isNaN(level) || level < 1 || level > lowestLevel) continue;
// If level is a masterLevel, make it a TOC parent category // If level is a masterLevel, make it a TOC parent category
if ((level == masterLevel) && (!hasClass(heading, 'ignoreLink'))) { if (level == masterLevel && !hasClass(heading, "ignoreLink")) {
if (heading.offsetParent === null) { if (heading.offsetParent === null) {
// The element is currently hidden, so don't create a TOC entry // The element is currently hidden, so don't create a TOC entry
} else { } else {
var td_dl = document.createElement('dl'); var td_dl = document.createElement("dl");
toc_tr_td.appendChild(td_dl); toc_tr_td.appendChild(td_dl);
var td_dt = document.createElement('dt'); var td_dt = document.createElement("dt");
td_dl.appendChild(td_dt); td_dl.appendChild(td_dt);
toc_current_col = td_dl; toc_current_col = td_dl;
// Create the link to this header // Create the link to this header
var link = document.createElement('a'); var link = document.createElement("a");
link.href = '#' + heading.id; // Create the anchor link link.href = "#" + heading.id; // Create the anchor link
link.textContent = heading.textContent; // Link text is same as heading link.textContent = heading.textContent; // Link text is same as heading
td_dt.appendChild(link); td_dt.appendChild(link);
ignoreChildren = false; ignoreChildren = false;
@ -205,19 +205,19 @@ function CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element) {
// If level is a masterLevel but it's specified to ignore links, skip it // If level is a masterLevel but it's specified to ignore links, skip it
// and its children. // and its children.
if ((level == masterLevel) && (hasClass(heading, 'ignoreLink'))) { if (level == masterLevel && hasClass(heading, "ignoreLink")) {
ignoreChildren = true; ignoreChildren = true;
} }
if ((level != masterLevel) && (!ignoreChildren)) { if (level != masterLevel && !ignoreChildren) {
if (heading.offsetParent === null) { if (heading.offsetParent === null) {
// The element is currently hidden, so don't create a TOC entry // The element is currently hidden, so don't create a TOC entry
} else { } else {
var td_dd = document.createElement('dd'); var td_dd = document.createElement("dd");
toc_current_col.appendChild(td_dd); toc_current_col.appendChild(td_dd);
// Create the link to this header // Create the link to this header
var link = document.createElement('a'); var link = document.createElement("a");
link.href = '#' + heading.id; // Create the anchor link link.href = "#" + heading.id; // Create the anchor link
link.textContent = heading.textContent; // Link text is same as heading link.textContent = heading.textContent; // Link text is same as heading
td_dd.appendChild(link); td_dd.appendChild(link);
} }
@ -233,7 +233,7 @@ function CreateVerticalTOC(headings, masterLevel, lowestLevel, tbody_element) {
* class. * class.
*/ */
function hasClass(element, cls) { function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
} }
/* /*
@ -243,14 +243,18 @@ function hasClass(element, cls) {
// Add the link image to the element. // Add the link image to the element.
function LinkifyHeader(header, fileName, sizePixels) { function LinkifyHeader(header, fileName, sizePixels) {
var link = document.createElement('a'); var link = document.createElement("a");
link.href = '#' + header.id; link.href = "#" + header.id;
link.setAttribute('alt', 'link to ' + header.id); link.setAttribute("alt", "link to " + header.id);
link.innerHTML = link.innerHTML =
'<img src="include/' + fileName + '"' + '<img src="include/' +
' width=' + sizePixels + fileName +
' height=' + sizePixels + '"' +
' style="float:left;position:relative;bottom:5px;">'; " width=" +
sizePixels +
" height=" +
sizePixels +
' style="float:left;position:relative;bottom:5px;">';
header.appendChild(link); header.appendChild(link);
} }
@ -261,11 +265,11 @@ function LinkifyHeadersForTag(tagName) {
var header; var header;
for (var j = 0; j != headers.length; j++) { for (var j = 0; j != headers.length; j++) {
header = headers[j]; header = headers[j];
if (!hasClass(header, 'ignoreLink') && ('id' in header)) { if (!hasClass(header, "ignoreLink") && "id" in header) {
if (header.id != '') { if (header.id != "") {
LinkifyHeader(header, 'link.png', 21); LinkifyHeader(header, "link.png", 21);
header.style.left = '-46px'; header.style.left = "-46px";
header.style.position = 'relative'; header.style.position = "relative";
} }
} }
} }
@ -273,9 +277,9 @@ function LinkifyHeadersForTag(tagName) {
// Linkify all h2, h3, and h4s. h1s are titles. // Linkify all h2, h3, and h4s. h1s are titles.
function LinkifyHeaders() { function LinkifyHeaders() {
LinkifyHeadersForTag('h2'); LinkifyHeadersForTag("h2");
LinkifyHeadersForTag('h3'); LinkifyHeadersForTag("h3");
LinkifyHeadersForTag('h4'); LinkifyHeadersForTag("h4");
} }
/* /*
@ -285,5 +289,5 @@ function LinkifyHeaders() {
function initStyleGuide() { function initStyleGuide() {
LinkifyHeaders(); LinkifyHeaders();
CreateTOC('tocDiv'); CreateTOC("tocDiv");
} }