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

A few minor cleanup tweaks to heading-anchors

Browse Source
This commit is contained in:
Zach Leatherman 2024-08-26 16:44:53 -05:00
parent 6f64905ca6
commit f7d1e3d2ee
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ class HeadingAnchors extends HTMLElement {
static attributes = { static attributes = {
exclude: "data-heading-anchors-exclude" exclude: "data-heading-anchors-exclude"
}; }
static classes = { static classes = {
anchor: "heading-a", anchor: "heading-a",
@ -25,6 +25,7 @@ class HeadingAnchors extends HTMLElement {
static css = ` static css = `
.${HeadingAnchors.classes.anchor} { .${HeadingAnchors.classes.anchor} {
position: absolute;
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
opacity: 0; opacity: 0;
@ -44,14 +45,12 @@ class HeadingAnchors extends HTMLElement {
position: relative; position: relative;
} }
.${HeadingAnchors.classes.anchor} { .${HeadingAnchors.classes.anchor} {
position: absolute;
left: 0; left: 0;
transform: translateX(-100%); transform: translateX(-100%);
} }
} }
@supports (anchor-name: none) { @supports (anchor-name: none) {
.${HeadingAnchors.classes.anchor} { .${HeadingAnchors.classes.anchor} {
position: absolute;
right: anchor(left); right: anchor(left);
top: anchor(top); top: anchor(top);
} }
@ -89,12 +88,12 @@ class HeadingAnchors extends HTMLElement {
// Prefers anchor position approach for better accessibility // Prefers anchor position approach for better accessibility
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ // https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
if(this.supportsAnchorPosition) { if(this.supportsAnchorPosition) {
let anchorName = `--h-a_${index}`; let anchorName = `--ha_${index}`;
heading.style.anchorName = anchorName; heading.style.anchorName = anchorName;
anchor.style.positionAnchor = anchorName; anchor.style.positionAnchor = anchorName;
let fontSize = parseInt(getComputedStyle(heading).getPropertyValue("font-size"), 10); let fontSize = parseInt(getComputedStyle(heading).getPropertyValue("font-size"), 10);
anchor.style.fontSize = `${(fontSize / 16).toFixed(3)}em`; anchor.style.fontSize = `${fontSize / 16}em`;
heading.after(anchor); heading.after(anchor);
} else { } else {