@frontfactory/readmore 1.0.0 → 1.0.1

package/README.md

@@ -14,6 +14,18 @@ button.
 npm install @frontfactory/readmore
 ```
 
+## Playground
+
+Try it live on StackBlitz — no installation required:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/~/github.com/front-factory/readmore)
+
+Or run it locally:
+
+```shell
+npm run dev
+```
+
 ## Usage
 
 ```ts

package/dist/readmore.d.ts

@@ -0,0 +1,19 @@
+export interface ReadMoreOptions {
+    lines?: number;
+    moreText?: string;
+    lessText?: string;
+    buttonClass?: string;
+    expandedClass?: string;
+}
+type ResolvedOptions = Required<ReadMoreOptions>;
+export declare class ReadMore {
+    #private;
+    readonly el: HTMLElement;
+    readonly options: ResolvedOptions;
+    constructor(element: HTMLElement, options?: ReadMoreOptions);
+    static init(target: string | NodeListOf<HTMLElement> | HTMLElement[], options?: ReadMoreOptions): ReadMore[];
+    get expanded(): boolean;
+    toggle(): void;
+    destroy(): void;
+}
+export {};

package/dist/readmore.js

@@ -0,0 +1,57 @@
+//#region src/readmore.ts
+var e = "readmore-clamp", t = {
+	lines: 3,
+	moreText: "Read more",
+	lessText: "Read less",
+	buttonClass: "readmore-btn",
+	expandedClass: "is-expanded"
+}, n = class n {
+	el;
+	options;
+	#e = null;
+	#t = !1;
+	#n = () => this.#o();
+	#r = () => this.toggle();
+	constructor(e, n = {}) {
+		if (!(e instanceof HTMLElement)) throw TypeError("ReadMore: an HTMLElement is required.");
+		this.el = e, this.options = {
+			...t,
+			...n
+		}, this.#i();
+	}
+	static init(e, t) {
+		let r = typeof e == "string" ? document.querySelectorAll(e) : e;
+		return Array.from(r).map((e) => new n(e, t));
+	}
+	get expanded() {
+		return this.#t;
+	}
+	toggle() {
+		this.#t = !this.#t, this.el.classList.toggle(e, !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.#o();
+	}
+	destroy() {
+		window.removeEventListener("resize", this.#n), this.#c(), this.el.classList.remove(e, this.options.expandedClass), this.el.style.removeProperty("--readmore-lines");
+	}
+	#i() {
+		this.el.style.setProperty("--readmore-lines", String(this.options.lines)), this.el.classList.add(e), window.addEventListener("resize", this.#n), this.#o();
+	}
+	#a() {
+		return this.el.scrollHeight - this.el.clientHeight > 1;
+	}
+	#o() {
+		if (this.#t) return;
+		let e = this.#a();
+		e && !this.#e ? this.#s() : !e && this.#e && this.#c();
+	}
+	#s() {
+		let e = document.createElement("button");
+		e.type = "button", e.className = this.options.buttonClass, e.textContent = this.options.moreText, e.addEventListener("click", this.#r), this.el.insertAdjacentElement("afterend", e), this.#e = e;
+	}
+	#c() {
+		this.#e &&= (this.#e.removeEventListener("click", this.#r), this.#e.remove(), null);
+	}
+};
+//#endregion
+export { n as ReadMore };
+
+//# sourceMappingURL=readmore.js.map

package/dist/readmore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readmore.js","names":["#refresh","#init","#expanded","#button","#onResize","#unmountButton","#isOverflowing","#mountButton","#onClick"],"sources":["../src/readmore.ts"],"sourcesContent":["export interface ReadMoreOptions {\n    lines?: number;\n    moreText?: string;\n    lessText?: string;\n    buttonClass?: string;\n    expandedClass?: string;\n}\n\ntype ResolvedOptions = Required<ReadMoreOptions>;\n\nconst CLAMP_CLASS = 'readmore-clamp';\n\nconst DEFAULTS: ResolvedOptions = {\n    lines: 3,\n    moreText: 'Read more',\n    lessText: 'Read less',\n    buttonClass: 'readmore-btn',\n    expandedClass: 'is-expanded'\n};\n\nexport class ReadMore {\n    readonly el: HTMLElement;\n    readonly options: ResolvedOptions;\n\n    #button: HTMLButtonElement | null = null;\n    #expanded = false;\n    #onResize = (): void => this.#refresh();\n    #onClick = (): void => this.toggle();\n\n    constructor(element: HTMLElement, options: ReadMoreOptions = {}) {\n        if (!(element instanceof HTMLElement)) {\n            throw new TypeError('ReadMore: an HTMLElement is required.');\n        }\n        this.el = element;\n        this.options = { ...DEFAULTS, ...options };\n        this.#init();\n    }\n\n    static init(\n        target: string | NodeListOf<HTMLElement> | HTMLElement[],\n        options?: ReadMoreOptions\n    ): ReadMore[] {\n        const nodes =\n            typeof target === 'string'\n                ? document.querySelectorAll<HTMLElement>(target)\n                : target;\n        return Array.from(nodes).map((n) => new ReadMore(n, options));\n    }\n\n    get expanded(): boolean {\n        return this.#expanded;\n    }\n\n    toggle(): void {\n        this.#expanded = !this.#expanded;\n        this.el.classList.toggle(CLAMP_CLASS, !this.#expanded);\n        this.el.classList.toggle(this.options.expandedClass, this.#expanded);\n        if (this.#button) {\n            this.#button.textContent = this.#expanded\n                ? this.options.lessText\n                : this.options.moreText;\n        }\n        if (!this.#expanded) this.#refresh();\n    }\n\n    destroy(): void {\n        window.removeEventListener('resize', this.#onResize);\n        this.#unmountButton();\n        this.el.classList.remove(CLAMP_CLASS, this.options.expandedClass);\n        this.el.style.removeProperty('--readmore-lines');\n    }\n\n    #init(): void {\n        this.el.style.setProperty('--readmore-lines', String(this.options.lines));\n        this.el.classList.add(CLAMP_CLASS);\n        window.addEventListener('resize', this.#onResize);\n        this.#refresh();\n    }\n\n    #isOverflowing(): boolean {\n        return this.el.scrollHeight - this.el.clientHeight > 1;\n    }\n\n    #refresh(): void {\n        if (this.#expanded) return;\n        const overflowing = this.#isOverflowing();\n        if (overflowing && !this.#button) {\n            this.#mountButton();\n        } else if (!overflowing && this.#button) {\n            this.#unmountButton();\n        }\n    }\n\n    #mountButton(): void {\n        const btn = document.createElement('button');\n        btn.type = 'button';\n        btn.className = this.options.buttonClass;\n        btn.textContent = this.options.moreText;\n        btn.addEventListener('click', this.#onClick);\n        this.el.insertAdjacentElement('afterend', btn);\n        this.#button = btn;\n    }\n\n    #unmountButton(): void {\n        if (!this.#button) return;\n        this.#button.removeEventListener('click', this.#onClick);\n        this.#button.remove();\n        this.#button = null;\n    }\n}\n"],"mappings":";AAUA,IAAM,IAAc,kBAEd,IAA4B;CAC9B,OAAO;CACP,UAAU;CACV,UAAU;CACV,aAAa;CACb,eAAe;CAClB,EAEY,IAAb,MAAa,EAAS;CAClB;CACA;CAEA,KAAoC;CACpC,KAAY;CACZ,WAAwB,KAAKA,IAAU;CACvC,WAAuB,KAAK,QAAQ;CAEpC,YAAY,GAAsB,IAA2B,EAAE,EAAE;EAC7D,IAAI,EAAE,aAAmB,cACrB,MAAU,UAAU,wCAAwC;EAIhE,AAFA,KAAK,KAAK,GACV,KAAK,UAAU;GAAE,GAAG;GAAU,GAAG;GAAS,EAC1C,KAAKC,IAAO;;CAGhB,OAAO,KACH,GACA,GACU;EACV,IAAM,IACF,OAAO,KAAW,WACZ,SAAS,iBAA8B,EAAO,GAC9C;EACV,OAAO,MAAM,KAAK,EAAM,CAAC,KAAK,MAAM,IAAI,EAAS,GAAG,EAAQ,CAAC;;CAGjE,IAAI,WAAoB;EACpB,OAAO,KAAKC;;CAGhB,SAAe;EASX,AARA,KAAKA,KAAY,CAAC,KAAKA,IACvB,KAAK,GAAG,UAAU,OAAO,GAAa,CAAC,KAAKA,GAAU,EACtD,KAAK,GAAG,UAAU,OAAO,KAAK,QAAQ,eAAe,KAAKA,GAAU,EAChE,KAAKC,OACL,KAAKA,GAAQ,cAAc,KAAKD,KAC1B,KAAK,QAAQ,WACb,KAAK,QAAQ,WAElB,KAAKA,MAAW,KAAKF,IAAU;;CAGxC,UAAgB;EAIZ,AAHA,OAAO,oBAAoB,UAAU,KAAKI,GAAU,EACpD,KAAKC,IAAgB,EACrB,KAAK,GAAG,UAAU,OAAO,GAAa,KAAK,QAAQ,cAAc,EACjE,KAAK,GAAG,MAAM,eAAe,mBAAmB;;CAGpD,KAAc;EAIV,AAHA,KAAK,GAAG,MAAM,YAAY,oBAAoB,OAAO,KAAK,QAAQ,MAAM,CAAC,EACzE,KAAK,GAAG,UAAU,IAAI,EAAY,EAClC,OAAO,iBAAiB,UAAU,KAAKD,GAAU,EACjD,KAAKJ,IAAU;;CAGnB,KAA0B;EACtB,OAAO,KAAK,GAAG,eAAe,KAAK,GAAG,eAAe;;CAGzD,KAAiB;EACb,IAAI,KAAKE,IAAW;EACpB,IAAM,IAAc,KAAKI,IAAgB;EACzC,AAAI,KAAe,CAAC,KAAKH,KACrB,KAAKI,IAAc,GACZ,CAAC,KAAe,KAAKJ,MAC5B,KAAKE,IAAgB;;CAI7B,KAAqB;EACjB,IAAM,IAAM,SAAS,cAAc,SAAS;EAM5C,AALA,EAAI,OAAO,UACX,EAAI,YAAY,KAAK,QAAQ,aAC7B,EAAI,cAAc,KAAK,QAAQ,UAC/B,EAAI,iBAAiB,SAAS,KAAKG,GAAS,EAC5C,KAAK,GAAG,sBAAsB,YAAY,EAAI,EAC9C,KAAKL,KAAU;;CAGnB,KAAuB;EACd,AAGL,KAAKA,QAFL,KAAKA,GAAQ,oBAAoB,SAAS,KAAKK,GAAS,EACxD,KAAKL,GAAQ,QAAQ,EACN"}

package/dist/src/readmore.css

@@ -0,0 +1,7 @@
+.readmore-clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: var(--readmore-lines, 3);
+    line-clamp: var(--readmore-lines, 3);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontfactory/readmore",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "Lightweight plugin to clamp text to N lines with ellipsis and a read more action.",
     "type": "module",
     "scripts": {
@@ -8,7 +8,7 @@
         "build": "vite build",
         "preview": "vite preview",
         "typecheck": "tsc --noEmit",
-        "prepare": "husky",
+        "prepare": "husky && npm run build",
         "release": "semantic-release"
     },
     "engines": {