data-bionic-reading 1.0.3 → 1.0.4

package/README.md

@@ -3,6 +3,8 @@
 Helps developers add support for [bionic reading](https://bionic-reading.com) to
 their content 📚
 
+![](https://github.com/markmead/js-bionic-reading/assets/50486078/ca1eddbd-759f-498e-b368-d5a8a580faad)
+
 ## Install
 
 ### With a CDN
@@ -52,8 +54,6 @@ document.addEventListener('DOMContentLoaded', bionicReading())
 </article>
 ```
 
-And that's it.
-
 ## Stats
 
 ![](https://img.shields.io/bundlephobia/min/data-bionic-reading)

package/dist/reading.esm.js

@@ -1 +1 @@
-function l(){let r=document.querySelector("[data-bionic-reading]");if(!r)return;[...r.querySelectorAll("h1, h2, h3, h4, h5, p, a, li, blockquote")].forEach(e=>{e.style.fontWeight=400;let i=e.innerText.split(" ").map(t=>{let n=t.length;if(n===1)return`<strong>${t}</strong>`;let a=Math.ceil(n/2);return t.split("").map((o,c)=>c<a?`<strong>${o}</strong>`:o).join("")});e.innerHTML=i.join(" ")})}var f=l;export{f as default};
+function l(){let r=[...document.querySelectorAll("[data-bionic-reading]")];r.length&&r.forEach(i=>{[...i.querySelectorAll("h1, h2, h3, h4, h5, p, a, li, blockquote")].forEach(e=>{e.style.fontWeight=400;let a=e.innerText.split(" ").map(t=>{let n=t.length;if(n===1)return`<strong>${t}</strong>`;let c=Math.ceil(n/2);return t.split("").map((o,s)=>s<c?`<strong>${o}</strong>`:o).join("")});e.innerHTML=a.join(" ")})})}var A=l;export{A as default};

package/dist/reading.min.js

@@ -1 +1 @@
-(()=>{function i(){let r=document.querySelector("[data-bionic-reading]");if(!r)return;[...r.querySelectorAll("h1, h2, h3, h4, h5, p, a, li, blockquote")].forEach(e=>{e.style.fontWeight=400;let l=e.innerText.split(" ").map(t=>{let n=t.length;if(n===1)return`<strong>${t}</strong>`;let a=Math.ceil(n/2);return t.split("").map((o,c)=>c<a?`<strong>${o}</strong>`:o).join("")});e.innerHTML=l.join(" ")})}document.addEventListener("DOMContentLoaded",i());})();
+(()=>{function i(){let r=[...document.querySelectorAll("[data-bionic-reading]")];r.length&&r.forEach(l=>{[...l.querySelectorAll("h1, h2, h3, h4, h5, p, a, li, blockquote")].forEach(e=>{e.style.fontWeight=400;let a=e.innerText.split(" ").map(t=>{let n=t.length;if(n===1)return`<strong>${t}</strong>`;let c=Math.ceil(n/2);return t.split("").map((o,s)=>s<c?`<strong>${o}</strong>`:o).join("")});e.innerHTML=a.join(" ")})})}document.addEventListener("DOMContentLoaded",i());})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-bionic-reading",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Helps developers add support for bionic reading to their content 📚",
   "keywords": [
     "Bionic Reading"
@@ -11,6 +11,6 @@
     "build": "node scripts/build.js"
   },
   "devDependencies": {
-    "esbuild": "^0.16.2"
+    "esbuild": "^0.18.17"
   }
 }

package/src/index.js

@@ -1,41 +1,43 @@
 export default function () {
-  const articleElement = document.querySelector('[data-bionic-reading]')
+  const bionicTargets = [...document.querySelectorAll('[data-bionic-reading]')]
 
-  if (!articleElement) {
+  if (!bionicTargets.length) {
     return
   }
 
-  const articleElements = [
-    ...articleElement.querySelectorAll(
-      'h1, h2, h3, h4, h5, p, a, li, blockquote'
-    ),
-  ]
+  bionicTargets.forEach((bionicTarget) => {
+    const articleElements = [
+      ...bionicTarget.querySelectorAll(
+        'h1, h2, h3, h4, h5, p, a, li, blockquote'
+      ),
+    ]
 
-  articleElements.forEach((contentElement) => {
-    contentElement.style.fontWeight = 400
+    articleElements.forEach((contentElement) => {
+      contentElement.style.fontWeight = 400
 
-    const elementText = contentElement.innerText
-    const elementTextArray = elementText.split(' ')
+      const elementText = contentElement.innerText
+      const elementTextArray = elementText.split(' ')
 
-    const elementTextArrayWithBold = elementTextArray.map((textWord) => {
-      const wordLength = textWord.length
+      const elementTextArrayWithBold = elementTextArray.map((textWord) => {
+        const wordLength = textWord.length
 
-      if (wordLength === 1) {
-        return `<strong>${textWord}</strong>`
-      }
+        if (wordLength === 1) {
+          return `<strong>${textWord}</strong>`
+        }
 
-      const wordLengthHalf = Math.ceil(wordLength / 2)
+        const wordLengthHalf = Math.ceil(wordLength / 2)
 
-      const wordArray = textWord.split('')
-      const wordArrayWithBold = wordArray.map((wordLetter, letterIndex) => {
-        return letterIndex < wordLengthHalf
-          ? `<strong>${wordLetter}</strong>`
-          : wordLetter
+        const wordArray = textWord.split('')
+        const wordArrayWithBold = wordArray.map((wordLetter, letterIndex) => {
+          return letterIndex < wordLengthHalf
+            ? `<strong>${wordLetter}</strong>`
+            : wordLetter
+        })
+
+        return wordArrayWithBold.join('')
       })
 
-      return wordArrayWithBold.join('')
+      contentElement.innerHTML = elementTextArrayWithBold.join(' ')
     })
-
-    contentElement.innerHTML = elementTextArrayWithBold.join(' ')
   })
 }