Merge pull request #1 from daviddarnes/v2

Version 2
daviddarnes · Jul 22, 2024 · faa6ed7 · faa6ed7
2 parents 94c6aa3 + 7d2e373
commit faa6ed7
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -11,10 +11,13 @@ A Web Component to add anchor links to headings with IDs.
 
 <heading-anchors>
   <h2 id="heading-level-2">Heading level 2</h2>
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste sunt temporibus suscipit, et inventore veniam neque corrupti est facere rem incidunt?</p>
+  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 
   <h3 id="heading-level-3">Heading level 3</h3>
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis dolorem porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto blanditiis ea, temporibus perferendis libero.</p>
+  <p>
+    Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis
+    dolorem porro cupiditate quam eaque voluptates.
+  </p>
 </heading-anchors>
 ```
 
@@ -23,6 +26,8 @@ A Web Component to add anchor links to headings with IDs.
 This Web Component allows you to:
 
 - Add anchor links to headings which have an ID attribute and value
+- Customise which elements will be appended with an anchor link using the `selector` attribute
+- Customise where the anchor link is appended using the `position` attribute
 
 ## Installation
 
@@ -43,16 +48,43 @@ Make sure you include the `<script>` in your project (choose one of these):
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
-<script type="module" src="https://www.unpkg.com/@daviddarnes/heading-anchors@1.0.0/heading-anchors.js"></script>
+<script
+  type="module"
+  src="https://www.unpkg.com/@daviddarnes/heading-anchors@2.0.0/heading-anchors.js"
+></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
-<script type="module" src="https://esm.sh/@daviddarnes/heading-anchors@1.0.0"></script>
+<script
+  type="module"
+  src="https://esm.sh/@daviddarnes/heading-anchors@2.0.0"
+></script>
+```
+
+### Using `selector` and `position`
+
+By default `heading-anchors` will select all the `h2[id]`, `h3[id]` and `h4[id]` elements within it to append an anchor link to. However with the `selector` attribute you can pass in a different selector string to select:
+
+```html
+<heading-anchors selector="h2[id]">
+  <!-- ... -->
+</heading-anchors>
+```
+
+_Note: It's recommended you use selectors that utilise the `[id]` attribute selector for better reliability_
+
+By default `heading-anchors` will append anchor links right after the element, using the [`insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) API. However you can adjust this using the `position` attribute:
+
+```html
+<heading-anchors position="beforeend">
+  <!-- ... -->
+</heading-anchors>
 ```
 
 ## Credit
 
 With thanks to the following people:
 
 - [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template)
+- [Curtis Wilcox](https://github.com/extra808) for the accessibility feedback
diff --git a/demo-styling.html b/demo-styling.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Demo of heading-anchors Web Component" />
+    <title>heading-anchors Web Component Demo</title>
+    <script type="module" src="heading-anchors.js"></script>
+
+    <style>
+      a[href^="#"] {
+        display: inline-block;
+        max-inline-size: 1ch;
+        white-space: nowrap;
+        overflow-x: hidden;
+        pointer-events: none;
+        color: transparent;
+        margin-inline-start: 0.5ch;
+      }
+
+      a[href^="#"]::before {
+        content: "#";
+        color: blue;
+        pointer-events: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <heading-anchors position="beforeend" selector="h2[id]">
+      <h1>Heading level 1</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos,
+        possimus laboriosam ullam eum consectetur suscipit quidem nam inventore
+        repellat harum ut odio laudantium labore officia, eligendi placeat
+        asperiores at?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos,
+        possimus laboriosam ullam eum consectetur suscipit quidem nam inventore
+        repellat harum ut odio laudantium labore officia, eligendi placeat
+        asperiores at?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos,
+        possimus laboriosam ullam eum consectetur suscipit quidem nam inventore
+        repellat harum ut odio laudantium labore officia, eligendi
+      </p>
+      <h2 id="heading-level-2">Heading level 2</h2>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+        repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste
+        sunt temporibus suscipit, et inventore veniam neque corrupti est facere
+        rem incidunt?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+        repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste
+        sunt temporibus suscipit, et inventore veniam neque corrupti est facere
+        rem incidunt?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+        repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste
+        sunt temporibus suscipit, et inventore veniam neque corrupti est facere
+        rem incidunt?
+      </p>
+      <h3 id="heading-level-3">Heading level 3</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
+        eligendi exercitationem, ratione, in delectus vitae veritatis dolorem
+        porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto
+        blanditiis ea, temporibus perferendis libero.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
+        eligendi exercitationem, ratione, in delectus vitae veritatis dolorem
+        porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto
+        blanditiis ea, temporibus perferendis libero.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
+        eligendi exercitationem, ratione, in delectus vitae veritatis dolorem
+        porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto
+        blanditiis ea, temporibus perferendis libero.
+      </p>
+      <h2 id="heading-level-2-again">Heading level 2 again</h2>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia
+        fugit iste, recusandae illo natus laudantium dolores enim facilis,
+        distinctio dolor ipsa doloribus, molestias excepturi quod ratione
+        officia expedita molestiae.
+      </p>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia
+        fugit iste, recusandae illo natus laudantium dolores enim facilis,
+        distinctio dolor ipsa doloribus, molestias excepturi quod ratione
+        officia expedita molestiae.
+      </p>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia
+        fugit iste, recusandae illo natus laudantium dolores enim facilis,
+        distinctio dolor ipsa doloribus, molestias excepturi quod ratione
+        officia expedita molestiae.
+      </p>
+      <h4 id="heading-level-4">Heading level 4</h4>
+    </heading-anchors>
+  </body>
+</html>
diff --git a/demo.html b/demo.html
@@ -1,38 +1,90 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="description" content="Demo of heading-anchors Web Component" />
-		<title>heading-anchors Web Component Demo</title>
-
-		<style>
-			:is(h2, h3, h4) a {
-				margin-inline-start: .5ch;
-			}
-		</style>
-
-		<script type="module" src="heading-anchors.js"></script>
-	</head>
-	<body>
-    		<heading-anchors>
-			<h1>Heading level 1</h1>
-			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos, possimus laboriosam ullam eum consectetur suscipit quidem nam inventore repellat harum ut odio laudantium labore officia, eligendi placeat asperiores at?</p>
-			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos, possimus laboriosam ullam eum consectetur suscipit quidem nam inventore repellat harum ut odio laudantium labore officia, eligendi placeat asperiores at?</p>
-			<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos, possimus laboriosam ullam eum consectetur suscipit quidem nam inventore repellat harum ut odio laudantium labore officia, eligendi
-			<h2 id="heading-level-2">Heading level 2</h2>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste sunt temporibus suscipit, et inventore veniam neque corrupti est facere rem incidunt?</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste sunt temporibus suscipit, et inventore veniam neque corrupti est facere rem incidunt?</p>
-			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste sunt temporibus suscipit, et inventore veniam neque corrupti est facere rem incidunt?</p>
-			<h3 id="heading-level-3">Heading level 3</h3>
-			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis dolorem porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto blanditiis ea, temporibus perferendis libero.</p>
-			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis dolorem porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto blanditiis ea, temporibus perferendis libero.</p>
-			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis dolorem porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto blanditiis ea, temporibus perferendis libero.</p>
-			<h2 id="heading-level-2-again">Heading level 2 again</h2>
-			<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia fugit iste, recusandae illo natus laudantium dolores enim facilis, distinctio dolor ipsa doloribus, molestias excepturi quod ratione officia expedita molestiae.</p>
-			<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia fugit iste, recusandae illo natus laudantium dolores enim facilis, distinctio dolor ipsa doloribus, molestias excepturi quod ratione officia expedita molestiae.</p>
-			<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia fugit iste, recusandae illo natus laudantium dolores enim facilis, distinctio dolor ipsa doloribus, molestias excepturi quod ratione officia expedita molestiae.</p>
-			<h4 id="heading-level-4">Heading level 4</h4>
-		</heading-anchors>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Demo of heading-anchors Web Component" />
+    <title>heading-anchors Web Component Demo</title>
+    <script type="module" src="heading-anchors.js"></script>
+  </head>
+  <body>
+    <heading-anchors>
+      <h1>Heading level 1</h1>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos,
+        possimus laboriosam ullam eum consectetur suscipit quidem nam inventore
+        repellat harum ut odio laudantium labore officia, eligendi placeat
+        asperiores at?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos,
+        possimus laboriosam ullam eum consectetur suscipit quidem nam inventore
+        repellat harum ut odio laudantium labore officia, eligendi placeat
+        asperiores at?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quos,
+        possimus laboriosam ullam eum consectetur suscipit quidem nam inventore
+        repellat harum ut odio laudantium labore officia, eligendi
+      </p>
+      <h2 id="heading-level-2" tabindex="2">Heading level 2</h2>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+        repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste
+        sunt temporibus suscipit, et inventore veniam neque corrupti est facere
+        rem incidunt?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+        repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste
+        sunt temporibus suscipit, et inventore veniam neque corrupti est facere
+        rem incidunt?
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+        repudiandae expedita totam nesciunt quisquam voluptatum eos optio iste
+        sunt temporibus suscipit, et inventore veniam neque corrupti est facere
+        rem incidunt?
+      </p>
+      <h3 id="heading-level-3">Heading level 3</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
+        eligendi exercitationem, ratione, in delectus vitae veritatis dolorem
+        porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto
+        blanditiis ea, temporibus perferendis libero.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
+        eligendi exercitationem, ratione, in delectus vitae veritatis dolorem
+        porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto
+        blanditiis ea, temporibus perferendis libero.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
+        eligendi exercitationem, ratione, in delectus vitae veritatis dolorem
+        porro cupiditate quam eaque voluptates. Aliquid reprehenderit iusto
+        blanditiis ea, temporibus perferendis libero.
+      </p>
+      <h2 id="heading-level-2-again">Heading level 2 again</h2>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia
+        fugit iste, recusandae illo natus laudantium dolores enim facilis,
+        distinctio dolor ipsa doloribus, molestias excepturi quod ratione
+        officia expedita molestiae.
+      </p>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia
+        fugit iste, recusandae illo natus laudantium dolores enim facilis,
+        distinctio dolor ipsa doloribus, molestias excepturi quod ratione
+        officia expedita molestiae.
+      </p>
+      <p>
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio mollitia
+        fugit iste, recusandae illo natus laudantium dolores enim facilis,
+        distinctio dolor ipsa doloribus, molestias excepturi quod ratione
+        officia expedita molestiae.
+      </p>
+      <h4 id="heading-level-4">Heading level 4</h4>
+    </heading-anchors>
+  </body>
 </html>
diff --git a/heading-anchors.js b/heading-anchors.js
@@ -7,20 +7,31 @@ class HeadingAnchors extends HTMLElement {
 
   connectedCallback() {
     this.headings.forEach((heading) => {
-      heading.append(this.anchor(heading));
+      if (!heading.hasAttribute("tabindex")) {
+        heading.setAttribute("tabindex", -1);
+      }
+      heading.insertAdjacentHTML(this.position, this.anchor(heading));
     });
   }
 
   anchor(heading) {
     let anchor = document.createElement("a");
     anchor.href = `#${heading.id}`;
-    anchor.innerHTML = "#";
-    anchor.title = `Jump link to '${heading.textContent}'`;
-    return anchor;
+    anchor.innerHTML = `Jump to '${heading.textContent}'`;
+
+    return anchor.outerHTML;
   }
 
   get headings() {
-    return this.querySelectorAll("h2[id], h3[id], h4[id]");
+    return this.querySelectorAll(this.selector);
+  }
+
+  get selector() {
+    return this.getAttribute("selector") || "h2[id], h3[id], h4[id]";
+  }
+
+  get position() {
+    return this.getAttribute("position") || "afterend";
   }
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@daviddarnes/heading-anchors",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A Web Component to add anchor links to headings with IDs",
   "main": "heading-anchors.js",
   "scripts": {