text-slicer 1.3.1-dev.0 → 1.3.1-dev.1

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var c=Object.defineProperty;var o=(t,e,r)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var a=(t,e,r)=>o(t,typeof e!="symbol"?e+"":e,r);module.exports=class{constructor({container:t=".text-slicer",splitMode:e="both",cssVariables:r=!1,dataAttributes:n=!1}={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter",0);var i,s;this.textElement=t instanceof HTMLElement?t:document.querySelector(t),this.originalText=((s=(i=this.textElement)==null?void 0:i.textContent)==null?void 0:s.trim())||"",this.splitMode=e,this.cssVariables=r,this.dataAttributes=n}init(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" ");switch(this.splitMode){case"words":this.renderWords(t,e,!1);break;case"chars":this.renderChars(t,this.originalText);break;case"both":this.renderWords(t,e,!0)}this.textElement.append(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",this.originalText.length.toString()))}renderWords(t,e,r){e.forEach((n,i)=>{const s=this.createSpan("word",n);this.cssVariables&&s.style.setProperty("--word-index",i.toString()),r?[...n].forEach(h=>s.append(this.createCharSpan(h))):s.textContent=n,t.append(s),i<e.length-1&&t.append(this.createSpaceSpan())})}renderChars(t,e){[...e].forEach(r=>t.append(this.createCharSpan(r)))}createCharSpan(t){const e=this.createSpan(t===" "?"whitespace":"char",t);return t!==" "&&this.cssVariables&&e.style.setProperty("--char-index",(this.charIndexCounter++).toString()),e}createSpan(t,e){const r=document.createElement("span");return r.classList.add(t),e&&(r.textContent=e,this.dataAttributes&&r.setAttribute(`data-${t}`,e)),r}createSpaceSpan(){return this.createSpan("whitespace"," ")}clear(){this.textElement&&(this.textElement.innerHTML="")}};
+"use strict";var l=Object.defineProperty;var d=(r,t,e)=>t in r?l(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var a=(r,t,e)=>d(r,typeof t!="symbol"?t+"":t,e);class h{constructor(t={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter");var o;const{container:e=".text-slicer",splitMode:s="both",cssVariables:n=!1,dataAttributes:i=!1}=t;if(this.textElement=typeof e=="string"?document.querySelector(e):e??null,!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((o=this.textElement.textContent)==null?void 0:o.trim())||"",this.splitMode=s,this.cssVariables=n,this.dataAttributes=i,this.charIndexCounter=0}split(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" "),s=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,e):this.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",s.toString()))}splitWords(t,e){e.forEach((s,n)=>{if(this.splitMode==="both"){const i=this.createWordSpan(n,s);s.split("").forEach(o=>{const c=this.createCharSpan(o);i.append(c)}),t.append(i)}else{const i=this.createWordSpan(n);i.append(document.createTextNode(s)),t.append(i)}n<e.length-1&&t.append(h.createSpaceSpan())})}splitChars(t){this.originalText.split("").forEach(e=>{const s=this.createCharSpan(e);t.append(s)})}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add("word"),this.dataAttributes&&s.setAttribute("data-word",e),this.cssVariables&&s.style.setProperty("--word-index",t.toString()),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.dataAttributes&&e.setAttribute("data-char",t),t===" "?e.classList.add("whitespace"):(e.classList.add("char"),this.cssVariables&&e.style.setProperty("--char-index",this.charIndexCounter.toString()),this.charIndexCounter+=1),e}static createSpaceSpan(){const t=document.createElement("span");return t.classList.add("whitespace"),t.textContent=" ",t}clear(){this.textElement&&(this.textElement.innerHTML="")}init(){this.split()}}module.exports=h;

package/dist/index.d.ts

@@ -1,24 +1,25 @@
-type SplitMode = 'words' | 'chars' | 'both';
-type TextSlicerOptions = {
+export type SplitMode = 'words' | 'chars' | 'both';
+export interface TextSlicerOptions {
     container?: HTMLElement | string;
     splitMode?: SplitMode;
     cssVariables?: boolean;
     dataAttributes?: boolean;
-};
-export default class TextSlicer {
+}
+declare class TextSlicer {
     private readonly textElement;
-    private readonly originalText;
+    private originalText;
     private readonly splitMode;
     private readonly cssVariables;
     private readonly dataAttributes;
     private charIndexCounter;
-    constructor({ container, splitMode, cssVariables, dataAttributes, }?: TextSlicerOptions);
-    init(): void;
-    private renderWords;
-    private renderChars;
+    constructor(options?: TextSlicerOptions);
+    split(): void;
+    private splitWords;
+    private splitChars;
+    private createWordSpan;
     private createCharSpan;
-    private createSpan;
-    private createSpaceSpan;
+    private static createSpaceSpan;
     private clear;
+    init(): void;
 }
-export {};
+export default TextSlicer;

package/dist/index.es.js

@@ -1,57 +1,65 @@
-var o = Object.defineProperty;
-var l = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var a = (n, t, e) => l(n, typeof t != "symbol" ? t + "" : t, e);
-class p {
-  constructor({ container: t = ".text-slicer", splitMode: e = "both", cssVariables: r = !1, dataAttributes: i = !1 } = {}) {
+var l = Object.defineProperty;
+var d = (r, t, e) => t in r ? l(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var a = (r, t, e) => d(r, typeof t != "symbol" ? t + "" : t, e);
+class h {
+  constructor(t = {}) {
     a(this, "textElement");
     a(this, "originalText");
     a(this, "splitMode");
     a(this, "cssVariables");
     a(this, "dataAttributes");
-    a(this, "charIndexCounter", 0);
-    var h, s;
-    this.textElement = t instanceof HTMLElement ? t : document.querySelector(t), this.originalText = ((s = (h = this.textElement) == null ? void 0 : h.textContent) == null ? void 0 : s.trim()) || "", this.splitMode = e, this.cssVariables = r, this.dataAttributes = i;
+    a(this, "charIndexCounter");
+    var o;
+    const { container: e = ".text-slicer", splitMode: s = "both", cssVariables: n = !1, dataAttributes: i = !1 } = t;
+    if (this.textElement = typeof e == "string" ? document.querySelector(e) : e ?? null, !this.textElement) return this.originalText = "", this.splitMode = "both", this.cssVariables = !1, this.dataAttributes = !1, void (this.charIndexCounter = 0);
+    this.originalText = ((o = this.textElement.textContent) == null ? void 0 : o.trim()) || "", this.splitMode = s, this.cssVariables = n, this.dataAttributes = i, this.charIndexCounter = 0;
   }
-  init() {
+  split() {
     if (!this.textElement) return;
     this.clear(), this.charIndexCounter = 0;
-    const t = document.createDocumentFragment(), e = this.originalText.split(" ");
-    switch (this.splitMode) {
-      case "words":
-        this.renderWords(t, e, !1);
-        break;
-      case "chars":
-        this.renderChars(t, this.originalText);
-        break;
-      case "both":
-        this.renderWords(t, e, !0);
-    }
-    this.textElement.append(t), this.cssVariables && (this.textElement.style.setProperty("--word-total", e.length.toString()), this.textElement.style.setProperty("--char-total", this.originalText.length.toString()));
-  }
-  renderWords(t, e, r) {
-    e.forEach((i, h) => {
-      const s = this.createSpan("word", i);
-      this.cssVariables && s.style.setProperty("--word-index", h.toString()), r ? [...i].forEach((c) => s.append(this.createCharSpan(c))) : s.textContent = i, t.append(s), h < e.length - 1 && t.append(this.createSpaceSpan());
+    const t = document.createDocumentFragment(), e = this.originalText.split(" "), s = this.originalText.length;
+    this.splitMode === "words" || this.splitMode === "both" ? this.splitWords(t, e) : this.splitMode === "chars" && this.splitChars(t), this.textElement.appendChild(t), this.cssVariables && (this.textElement.style.setProperty("--word-total", e.length.toString()), this.textElement.style.setProperty("--char-total", s.toString()));
+  }
+  splitWords(t, e) {
+    e.forEach((s, n) => {
+      if (this.splitMode === "both") {
+        const i = this.createWordSpan(n, s);
+        s.split("").forEach((o) => {
+          const c = this.createCharSpan(o);
+          i.append(c);
+        }), t.append(i);
+      } else {
+        const i = this.createWordSpan(n);
+        i.append(document.createTextNode(s)), t.append(i);
+      }
+      n < e.length - 1 && t.append(h.createSpaceSpan());
     });
   }
-  renderChars(t, e) {
-    [...e].forEach((r) => t.append(this.createCharSpan(r)));
+  splitChars(t) {
+    this.originalText.split("").forEach((e) => {
+      const s = this.createCharSpan(e);
+      t.append(s);
+    });
   }
-  createCharSpan(t) {
-    const e = this.createSpan(t === " " ? "whitespace" : "char", t);
-    return t !== " " && this.cssVariables && e.style.setProperty("--char-index", (this.charIndexCounter++).toString()), e;
+  createWordSpan(t, e = "") {
+    const s = document.createElement("span");
+    return s.classList.add("word"), this.dataAttributes && s.setAttribute("data-word", e), this.cssVariables && s.style.setProperty("--word-index", t.toString()), s;
   }
-  createSpan(t, e) {
-    const r = document.createElement("span");
-    return r.classList.add(t), e && (r.textContent = e, this.dataAttributes && r.setAttribute(`data-${t}`, e)), r;
+  createCharSpan(t) {
+    const e = document.createElement("span");
+    return e.textContent = t, this.dataAttributes && e.setAttribute("data-char", t), t === " " ? e.classList.add("whitespace") : (e.classList.add("char"), this.cssVariables && e.style.setProperty("--char-index", this.charIndexCounter.toString()), this.charIndexCounter += 1), e;
   }
-  createSpaceSpan() {
-    return this.createSpan("whitespace", " ");
+  static createSpaceSpan() {
+    const t = document.createElement("span");
+    return t.classList.add("whitespace"), t.textContent = " ", t;
   }
   clear() {
     this.textElement && (this.textElement.innerHTML = "");
   }
+  init() {
+    this.split();
+  }
 }
 export {
-  p as default
+  h as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?module.exports=e():typeof define=="function"&&define.amd?define(e):(t=typeof globalThis<"u"?globalThis:t||self).TextSlicer=e()})(this,function(){"use strict";var c=Object.defineProperty;var h=(t,e,s)=>e in t?c(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var a=(t,e,s)=>h(t,typeof e!="symbol"?e+"":e,s);return class{constructor({container:t=".text-slicer",splitMode:e="both",cssVariables:s=!1,dataAttributes:n=!1}={}){a(this,"textElement");a(this,"originalText");a(this,"splitMode");a(this,"cssVariables");a(this,"dataAttributes");a(this,"charIndexCounter",0);var i,r;this.textElement=t instanceof HTMLElement?t:document.querySelector(t),this.originalText=((r=(i=this.textElement)==null?void 0:i.textContent)==null?void 0:r.trim())||"",this.splitMode=e,this.cssVariables=s,this.dataAttributes=n}init(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" ");switch(this.splitMode){case"words":this.renderWords(t,e,!1);break;case"chars":this.renderChars(t,this.originalText);break;case"both":this.renderWords(t,e,!0)}this.textElement.append(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",this.originalText.length.toString()))}renderWords(t,e,s){e.forEach((n,i)=>{const r=this.createSpan("word",n);this.cssVariables&&r.style.setProperty("--word-index",i.toString()),s?[...n].forEach(o=>r.append(this.createCharSpan(o))):r.textContent=n,t.append(r),i<e.length-1&&t.append(this.createSpaceSpan())})}renderChars(t,e){[...e].forEach(s=>t.append(this.createCharSpan(s)))}createCharSpan(t){const e=this.createSpan(t===" "?"whitespace":"char",t);return t!==" "&&this.cssVariables&&e.style.setProperty("--char-index",(this.charIndexCounter++).toString()),e}createSpan(t,e){const s=document.createElement("span");return s.classList.add(t),e&&(s.textContent=e,this.dataAttributes&&s.setAttribute(`data-${t}`,e)),s}createSpaceSpan(){return this.createSpan("whitespace"," ")}clear(){this.textElement&&(this.textElement.innerHTML="")}}});
+(function(i,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(i=typeof globalThis<"u"?globalThis:i||self).TextSlicer=r()})(this,function(){"use strict";var l=Object.defineProperty;var d=(i,r,t)=>r in i?l(i,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[r]=t;var n=(i,r,t)=>d(i,typeof r!="symbol"?r+"":r,t);class i{constructor(t={}){n(this,"textElement");n(this,"originalText");n(this,"splitMode");n(this,"cssVariables");n(this,"dataAttributes");n(this,"charIndexCounter");var h;const{container:e=".text-slicer",splitMode:s="both",cssVariables:o=!1,dataAttributes:a=!1}=t;if(this.textElement=typeof e=="string"?document.querySelector(e):e??null,!this.textElement)return this.originalText="",this.splitMode="both",this.cssVariables=!1,this.dataAttributes=!1,void(this.charIndexCounter=0);this.originalText=((h=this.textElement.textContent)==null?void 0:h.trim())||"",this.splitMode=s,this.cssVariables=o,this.dataAttributes=a,this.charIndexCounter=0}split(){if(!this.textElement)return;this.clear(),this.charIndexCounter=0;const t=document.createDocumentFragment(),e=this.originalText.split(" "),s=this.originalText.length;this.splitMode==="words"||this.splitMode==="both"?this.splitWords(t,e):this.splitMode==="chars"&&this.splitChars(t),this.textElement.appendChild(t),this.cssVariables&&(this.textElement.style.setProperty("--word-total",e.length.toString()),this.textElement.style.setProperty("--char-total",s.toString()))}splitWords(t,e){e.forEach((s,o)=>{if(this.splitMode==="both"){const a=this.createWordSpan(o,s);s.split("").forEach(h=>{const c=this.createCharSpan(h);a.append(c)}),t.append(a)}else{const a=this.createWordSpan(o);a.append(document.createTextNode(s)),t.append(a)}o<e.length-1&&t.append(i.createSpaceSpan())})}splitChars(t){this.originalText.split("").forEach(e=>{const s=this.createCharSpan(e);t.append(s)})}createWordSpan(t,e=""){const s=document.createElement("span");return s.classList.add("word"),this.dataAttributes&&s.setAttribute("data-word",e),this.cssVariables&&s.style.setProperty("--word-index",t.toString()),s}createCharSpan(t){const e=document.createElement("span");return e.textContent=t,this.dataAttributes&&e.setAttribute("data-char",t),t===" "?e.classList.add("whitespace"):(e.classList.add("char"),this.cssVariables&&e.style.setProperty("--char-index",this.charIndexCounter.toString()),this.charIndexCounter+=1),e}static createSpaceSpan(){const t=document.createElement("span");return t.classList.add("whitespace"),t.textContent=" ",t}clear(){this.textElement&&(this.textElement.innerHTML="")}init(){this.split()}}return i});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-slicer",
-  "version": "1.3.1-dev.0",
+  "version": "1.3.1-dev.1",
   "description": "TextSlicer is designed to split text within an HTML element into separate words and/or characters, wrapping each word and/or character in separate span elements.",
   "author": "ux-ui.pro",
   "license": "MIT",