@khesira/textflow 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/src/index.d.ts +1 -0
- package/dist/textflow.es.js +11 -2
- package/dist/textflow.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,7 +27,7 @@ bun add @khesira/textflow
|
|
|
27
27
|
|
|
28
28
|
## Usage
|
|
29
29
|
|
|
30
|
-
1. In Astro (or similar Frontend Frameworks)
|
|
30
|
+
### 1. In Astro (or similar Frontend Frameworks)
|
|
31
31
|
Register the custom element in your client-side script and pass your configuration via data-* attributes.
|
|
32
32
|
|
|
33
33
|
```html
|
|
@@ -65,7 +65,7 @@ const settings: Settings = {
|
|
|
65
65
|
</script>
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
### 2. Pure HTML / JavaScript
|
|
69
69
|
|
|
70
70
|
```html
|
|
71
71
|
<!DOCTYPE html>
|
package/dist/src/index.d.ts
CHANGED
package/dist/textflow.es.js
CHANGED
|
@@ -382,8 +382,10 @@ var u = class extends HTMLElement {
|
|
|
382
382
|
console.error("Could not get context2d");
|
|
383
383
|
return;
|
|
384
384
|
}
|
|
385
|
-
let a = this.dataset.settings, s = l(a ? JSON.parse(a) : c), u = this.dataset.texts, d = u ? JSON.parse(u) : s.texts, f =
|
|
386
|
-
this.
|
|
385
|
+
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);
|
|
386
|
+
this.querySelector("ul.sr-only")?.remove(), e.appendChild(f);
|
|
387
|
+
let p = o.randomDirection(s.headings);
|
|
388
|
+
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(() => {
|
|
387
389
|
this.resize();
|
|
388
390
|
}), this.resizeObserver.observe(this);
|
|
389
391
|
}
|
|
@@ -405,6 +407,13 @@ var u = class extends HTMLElement {
|
|
|
405
407
|
visibilityChange = () => {
|
|
406
408
|
document.hidden ? this.stopLoop() : this.startLoop();
|
|
407
409
|
};
|
|
410
|
+
generateScreenReaderTextList(e) {
|
|
411
|
+
let t = document.createElement("ul");
|
|
412
|
+
return t.className = "sr-only", t.setAttribute("aria-label", "Currently flowing words on the canvas"), e.forEach((e) => {
|
|
413
|
+
let n = document.createElement("li");
|
|
414
|
+
n.textContent = e, t.appendChild(n);
|
|
415
|
+
}), t;
|
|
416
|
+
}
|
|
408
417
|
};
|
|
409
418
|
function d(e = "textflow-container") {
|
|
410
419
|
typeof window < "u" && !customElements.get(e) && customElements.define(e, u);
|
package/dist/textflow.umd.js
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
<div class="slider-container">
|
|
3
3
|
<canvas class="physics-canvas"></canvas>
|
|
4
4
|
</div>
|
|
5
|
-
`;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(
|
|
5
|
+
`;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});
|