cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak to class names, allow override text content

Browse Source
This commit is contained in:
Zach Leatherman 2024-08-26 17:33:39 -05:00
parent 2b40c3c7a4
commit 2df6143099
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/index.css
View File

@ -257,6 +257,6 @@ header {
}
/* Anchor links color */
a[href]:is(:link, :visited).heading-a {
a[href]:is(:link, :visited).ha {
color: #aaa;
}

17
public/js/heading-anchors.js
View File

@ -9,12 +9,13 @@ class HeadingAnchors extends HTMLElement {
}
static attributes = {
exclude: "data-heading-anchors-exclude"
exclude: "data-ha-exclude",
content: "data-ha-text"
}
static classes = {
anchor: "heading-a",
heading: "heading-a-h", // only used for nested method
anchor: "ha",
heading: "ha-h", // only used for nested method
}
static defaultSelector = "h2,h3,h4,h5,h6";
@ -101,14 +102,20 @@ class HeadingAnchors extends HTMLElement {
});
}
getText(heading) {
return heading.getAttribute(HeadingAnchors.attributes.content) || "#";
}
getAnchorElement(heading) {
let anchor = document.createElement("a");
anchor.href = `#${heading.id}`;
anchor.classList.add(HeadingAnchors.classes.anchor);
let text = this.getText(heading);
if(this.supportsAnchorPosition) {
anchor.innerHTML = `<span class="visually-hidden">Jump to section titled: ${heading.textContent}</span><span aria-hidden="true">#</span>`;
anchor.innerHTML = `<span class="visually-hidden">Jump to section titled: ${heading.textContent}</span><span aria-hidden="true">${text}</span>`;
} else {
anchor.innerHTML = `<span aria-hidden="true">#</span>`;
anchor.innerHTML = `<span aria-hidden="true">${text}</span>`;
}
return anchor;