@khesira/textflow 1.1.0 → 1.2.0

package/dist/src/index.d.ts

@@ -14,5 +14,6 @@ export declare class TextFlowElement extends HTMLElement {
     private stopLoop;
     private resize;
     private visibilityChange;
+    private generateScreenReaderTextList;
 }
 export declare function registerTextFlowSlider(tagName?: string): void;

package/dist/textflow.es.js

@@ -382,8 +382,10 @@ var u = class extends HTMLElement {
 			console.error("Could not get context2d");
 			return;
 		}
-		let a = this.dataset.settings, s = l(a ? JSON.parse(a) : c), u = this.dataset.texts, d = u ? JSON.parse(u) : s.texts, f = o.randomDirection(s.headings);
-		this.world = new t(f), this.view = new n(s, this, e, r, this.world), this.textWriter = new i(s, f, this.offsetWidth, this.offsetHeight, this.world, this.view, d), this.startLoop(), document.addEventListener("visibilitychange", this.visibilityChange), this.resizeObserver = new ResizeObserver(() => {
+		let a = this.dataset.settings, s = l(a ? JSON.parse(a) : c), u = this.dataset.texts, d = u ? JSON.parse(u) : s.texts, f = this.generateScreenReaderTextList(d);
+		this.querySelector("ul.sr-only")?.remove(), e.appendChild(f);
+		let p = o.randomDirection(s.headings);
+		this.world = new t(p), this.view = new n(s, this, e, r, this.world), this.textWriter = new i(s, p, this.offsetWidth, this.offsetHeight, this.world, this.view, d), this.startLoop(), document.addEventListener("visibilitychange", this.visibilityChange), this.resizeObserver = new ResizeObserver(() => {
 			this.resize();
 		}), this.resizeObserver.observe(this);
 	}
@@ -405,6 +407,13 @@ var u = class extends HTMLElement {
 	visibilityChange = () => {
 		document.hidden ? this.stopLoop() : this.startLoop();
 	};
+	generateScreenReaderTextList(e) {
+		let t = document.createElement("ul");
+		return t.className = "sr-only", t.setAttribute("aria-label", "Currently flowing words on the canvas"), e.forEach((e) => {
+			let n = document.createElement("li");
+			n.textContent = e, t.appendChild(n);
+		}), t;
+	}
 };
 function d(e = "textflow-container") {
 	typeof window < "u" && !customElements.get(e) && customElements.define(e, u);

package/dist/textflow.umd.js

@@ -2,4 +2,4 @@
             <div class="slider-container">
                 <canvas class="physics-canvas"></canvas>
             </div>
-        `;let e=this.querySelector(`.physics-canvas`),t=e.getContext(`2d`);if(!t){console.error(`Could not get context2d`);return}let i=this.dataset.settings,o=u(i?JSON.parse(i):l),c=this.dataset.texts,d=c?JSON.parse(c):o.texts,f=s.randomDirection(o.headings);this.world=new n(f),this.view=new r(o,this,e,t,this.world),this.textWriter=new a(o,f,this.offsetWidth,this.offsetHeight,this.world,this.view,d),this.startLoop(),document.addEventListener(`visibilitychange`,this.visibilityChange),this.resizeObserver=new ResizeObserver(()=>{this.resize()}),this.resizeObserver.observe(this)}disconnectedCallback(){this.stopLoop(),document.removeEventListener(`visibilitychange`,this.visibilityChange),this.resizeObserver&&this.resizeObserver.disconnect()}loop=()=>{this.active&&(this.animationFrameId=window.requestAnimationFrame(this.loop))};startLoop=()=>{this.active||(this.view.start(),this.world.start(),this.textWriter.start(),this.active=!0,this.animationFrameId=window.requestAnimationFrame(this.loop))};stopLoop(){this.active&&(this.view.stop(),this.world.stop(),this.textWriter.stop(),this.active=!1,this.animationFrameId&&=(window.cancelAnimationFrame(this.animationFrameId),null))}resize(){this.view.resize(),this.world.resize(this.offsetWidth,this.offsetHeight),this.textWriter.resize(this.offsetWidth,this.offsetHeight)}visibilityChange=()=>{document.hidden?this.stopLoop():this.startLoop()}};function f(e=`textflow-container`){typeof window<`u`&&!customElements.get(e)&&customElements.define(e,d)}e.TextFlowElement=d,e.registerTextFlowSlider=f});
+        `;let e=this.querySelector(`.physics-canvas`),t=e.getContext(`2d`);if(!t){console.error(`Could not get context2d`);return}let i=this.dataset.settings,o=u(i?JSON.parse(i):l),c=this.dataset.texts,d=c?JSON.parse(c):o.texts,f=this.generateScreenReaderTextList(d);this.querySelector(`ul.sr-only`)?.remove(),e.appendChild(f);let p=s.randomDirection(o.headings);this.world=new n(p),this.view=new r(o,this,e,t,this.world),this.textWriter=new a(o,p,this.offsetWidth,this.offsetHeight,this.world,this.view,d),this.startLoop(),document.addEventListener(`visibilitychange`,this.visibilityChange),this.resizeObserver=new ResizeObserver(()=>{this.resize()}),this.resizeObserver.observe(this)}disconnectedCallback(){this.stopLoop(),document.removeEventListener(`visibilitychange`,this.visibilityChange),this.resizeObserver&&this.resizeObserver.disconnect()}loop=()=>{this.active&&(this.animationFrameId=window.requestAnimationFrame(this.loop))};startLoop=()=>{this.active||(this.view.start(),this.world.start(),this.textWriter.start(),this.active=!0,this.animationFrameId=window.requestAnimationFrame(this.loop))};stopLoop(){this.active&&(this.view.stop(),this.world.stop(),this.textWriter.stop(),this.active=!1,this.animationFrameId&&=(window.cancelAnimationFrame(this.animationFrameId),null))}resize(){this.view.resize(),this.world.resize(this.offsetWidth,this.offsetHeight),this.textWriter.resize(this.offsetWidth,this.offsetHeight)}visibilityChange=()=>{document.hidden?this.stopLoop():this.startLoop()};generateScreenReaderTextList(e){let t=document.createElement(`ul`);return t.className=`sr-only`,t.setAttribute(`aria-label`,`Currently flowing words on the canvas`),e.forEach(e=>{let n=document.createElement(`li`);n.textContent=e,t.appendChild(n)}),t}};function f(e=`textflow-container`){typeof window<`u`&&!customElements.get(e)&&customElements.define(e,d)}e.TextFlowElement=d,e.registerTextFlowSlider=f});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khesira/textflow",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "Mika Jünger",
   "description": "A framework agnostic canvas physics text slider",