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 */ /* Anchor links color */
a[href]:is(:link, :visited).heading-a { a[href]:is(:link, :visited).ha {
color: #aaa; color: #aaa;
} }

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

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