@frontfactory/readmore 1.1.1 → 1.2.0

package/dist/readmore.d.ts

@@ -19,6 +19,7 @@ export declare class ReadMore {
     static init(target: string | NodeListOf<HTMLElement> | HTMLElement[], options?: ReadMoreOptions): ReadMore[];
     get expanded(): boolean;
     toggle(): void;
+    static getInstance(element: HTMLElement): ReadMore | undefined;
     destroy(): void;
 }
 export {};

package/dist/readmore.js

@@ -1,5 +1,5 @@
 //#region src/readmore.ts
-var e = "readmore-clamp", t = "readmore-clamp--height", n = {
+var e = "readmore-clamp", t = "readmore-clamp--height", n = /* @__PURE__ */ new WeakMap(), r = 0, i = {
 	lines: 3,
 	moreText: "Read more",
 	lessText: "Read less",
@@ -7,43 +7,43 @@ var e = "readmore-clamp", t = "readmore-clamp--height", n = {
 	expandedClass: "is-expanded",
 	openingClass: "is-opening",
 	closingClass: "is-closing"
-}, r = class r {
+}, a = class a {
 	el;
 	options;
 	#e = null;
 	#t = !1;
-	#n = null;
-	#r = null;
-	#i = () => {
-		this.#n !== null && clearTimeout(this.#n), this.#n = setTimeout(() => {
-			this.#n = null, this.#c();
-		}, 100);
-	};
+	#n = !1;
+	#r;
+	#i = null;
 	#a = () => this.toggle();
 	constructor(e, t = {}) {
 		if (!(e instanceof HTMLElement)) throw TypeError("ReadMore: an HTMLElement is required.");
+		if (n.has(e)) throw Error("ReadMore: element is already initialized. Call destroy() first.");
 		this.el = e, this.options = {
-			...n,
+			...i,
 			...t
-		}, this.#o();
+		}, this.#r = new ResizeObserver(() => this.#c()), n.set(e, this), this.#o();
 	}
 	static init(e, t) {
 		let n = typeof e == "string" ? document.querySelectorAll(e) : e;
-		return Array.from(n).map((e) => new r(e, t));
+		return Array.from(n).map((e) => new a(e, t));
 	}
 	get expanded() {
 		return this.#t;
 	}
 	toggle() {
-		this.#t = !this.#t, this.el.classList.toggle(e, !this.#t), this.options.height != null && this.el.classList.toggle(t, !this.#t), this.el.classList.toggle(this.options.expandedClass, this.#t), this.#e && (this.#e.textContent = this.#t ? this.options.lessText : this.options.moreText);
+		this.#t = !this.#t, this.el.classList.toggle(e, !this.#t), this.options.height != null && this.el.classList.toggle(t, !this.#t), this.el.classList.toggle(this.options.expandedClass, this.#t), this.#e && (this.#e.textContent = this.#t ? this.options.lessText : this.options.moreText, this.#e.setAttribute("aria-expanded", String(this.#t)));
 		let n = this.#t ? this.options.openingClass : this.options.closingClass, r = this.#t ? this.options.closingClass : this.options.openingClass;
 		this.el.classList.remove(r), this.#l(n), this.#t || this.#c();
 	}
+	static getInstance(e) {
+		return n.get(e);
+	}
 	destroy() {
-		window.removeEventListener("resize", this.#i), this.#n !== null && (clearTimeout(this.#n), this.#n = null), this.#r &&= (this.el.removeEventListener("transitionend", this.#r), null), this.#d(), this.el.classList.remove(e, t, this.options.expandedClass, this.options.openingClass, this.options.closingClass), this.el.style.removeProperty("--readmore-lines"), this.el.style.removeProperty("--readmore-height");
+		n.delete(this.el), this.#r.disconnect(), this.#i &&= (this.el.removeEventListener("transitionend", this.#i), null), this.#d(), this.el.classList.remove(e, t, this.options.expandedClass, this.options.openingClass, this.options.closingClass), this.el.style.removeProperty("--readmore-lines"), this.el.style.removeProperty("--readmore-height"), this.#n &&= (this.el.removeAttribute("id"), !1);
 	}
 	#o() {
-		this.options.height == null ? (this.el.style.setProperty("--readmore-lines", String(this.options.lines)), this.el.classList.add(e)) : (this.el.style.setProperty("--readmore-height", `${this.options.height}px`), this.el.classList.add(e, t)), window.addEventListener("resize", this.#i), this.#c();
+		this.options.height == null ? (this.el.style.setProperty("--readmore-lines", String(this.options.lines)), this.el.classList.add(e)) : (this.el.style.setProperty("--readmore-height", `${this.options.height}px`), this.el.classList.add(e, t)), this.#r.observe(this.el), this.#c();
 	}
 	#s() {
 		return this.el.scrollHeight - this.el.clientHeight > 1;
@@ -54,24 +54,25 @@ var e = "readmore-clamp", t = "readmore-clamp--height", n = {
 		e && !this.#e ? this.#u() : !e && this.#e && this.#d();
 	}
 	#l(e) {
-		this.#r &&= (this.el.removeEventListener("transitionend", this.#r), null), this.el.classList.add(e);
+		this.#i &&= (this.el.removeEventListener("transitionend", this.#i), null), this.el.classList.add(e);
 		let t = () => this.el.classList.remove(e);
 		if (!getComputedStyle(this.el).transitionDuration.split(",").some((e) => parseFloat(e) > 0)) {
 			setTimeout(t, 0);
 			return;
 		}
 		let n = (e) => {
-			e.target === this.el && (this.el.removeEventListener("transitionend", n), this.#r = null, t());
+			e.target === this.el && (this.el.removeEventListener("transitionend", n), this.#i = null, t());
 		};
-		this.#r = n, this.el.addEventListener("transitionend", n);
+		this.#i = n, this.el.addEventListener("transitionend", n);
 	}
 	#u() {
+		this.el.id || (this.el.id = `readmore-${++r}`, this.#n = !0);
 		let e = document.createElement("button");
-		e.type = "button", e.className = this.options.buttonClass, e.textContent = this.options.moreText, e.addEventListener("click", this.#a), this.el.insertAdjacentElement("afterend", e), this.#e = e;
+		e.type = "button", e.className = this.options.buttonClass, e.textContent = this.options.moreText, e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-controls", this.el.id), e.addEventListener("click", this.#a), this.el.insertAdjacentElement("afterend", e), this.#e = e;
 	}
 	#d() {
 		this.#e &&= (this.#e.removeEventListener("click", this.#a), this.#e.remove(), null);
 	}
 };
 //#endregion
-export { r as ReadMore };
+export { a as ReadMore };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontfactory/readmore",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "Lightweight plugin to clamp text to N lines with ellipsis and a read more action.",
     "type": "module",
     "scripts": {