typetestr - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/typetestr.js

@@ -1,40 +0,90 @@
-var f = Object.defineProperty;
-var h = (d, t, e) => t in d ? f(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e;
-var o = (d, t, e) => (h(d, typeof t != "symbol" ? t + "" : t, e), e);
-class u {
-  constructor(t, e, s) {
+var p = Object.defineProperty;
+var f = (r, t, e) => t in r ? p(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var o = (r, t, e) => (f(r, typeof t != "symbol" ? t + "" : t, e), e);
+class c {
+  constructor(t, e, s, i) {
+    o(this, "known_human_names", {
+      wght: "Weight",
+      wdth: "Width",
+      ital: "Italic",
+      slnt: "Slant",
+      opsz: "Optical Size",
+      size: "Size"
+    });
+    this.name = t, this.min = e, this.max = s, this.value = i;
+  }
+  set_percent(t) {
+    this.value = (this.max - this.min) * t + this.min;
+  }
+  get_percent() {
+    return (this.value - this.min) / (this.max - this.min);
+  }
+  get_human_name() {
+    return this.known_human_names[this.name] || this.name;
+  }
+}
+class m {
+  constructor(t, e, s, i) {
     o(this, "isDrag", !1);
-    let n = document.createElement("div");
-    n.classList.add("tt-range");
-    let l = document.createElement("div");
-    l.classList.add("tt-range__knob");
-    let a = document.createElement("div");
-    a.classList.add("tt-range__filler"), a.style.width = e * 100 + "%", n.addEventListener("pointerdown", (i) => {
-      n.setPointerCapture(i.pointerId);
-      let r = (i.clientX - n.offsetLeft) / n.offsetWidth;
-      a.style.width = r * 100 + "%", this.isDrag = !0, s(r);
-    }), n.addEventListener("pointermove", (i) => {
-      if (this.isDrag) {
-        let r = (i.clientX - n.offsetLeft) / n.offsetWidth;
-        r >= 0 && r <= 1 && (a.style.width = r * 100 + "%", s(r));
+    o(this, "range");
+    o(this, "knob");
+    o(this, "filler");
+    this.call = i;
+    const h = document.createElement("div");
+    h.classList.add("tt-range__container");
+    const d = document.createElement("div");
+    d.classList.add("tt-range__title"), d.textContent = s, this.range = document.createElement("div"), this.range.classList.add("tt-range"), this.range.tabIndex = 0, this.knob = document.createElement("div"), this.knob.classList.add("tt-range__knob"), this.filler = document.createElement("div"), this.filler.classList.add("tt-range__filler"), this.set_percent(e), this.range.style.touchAction = "none", this.range.addEventListener("keydown", (n) => {
+      if (n.key == "ArrowLeft" || n.key == "ArrowRight") {
+        let a = parseFloat(this.knob.style.left) / 100;
+        const l = n.shiftKey ? 0.1 : 0.01;
+        n.key == "ArrowLeft" && (a -= l), n.key == "ArrowRight" && (a += l), a < 0 && (a = 0), a > 1 && (a = 1), this.set_percent(a), this.call(a);
       }
-    }), n.addEventListener("pointerup", (i) => {
-      n.releasePointerCapture(i.pointerId), this.isDrag = !1;
-    }), n.appendChild(a), a.appendChild(l), t.appendChild(n);
+    }), this.range.addEventListener("pointerdown", (n) => {
+      this.range.setPointerCapture(n.pointerId), this.set_width(n.offsetX), this.isDrag = !0;
+    }), this.range.addEventListener("pointermove", (n) => {
+      this.isDrag && this.set_width(n.offsetX);
+    }), this.range.addEventListener("pointerup", (n) => {
+      this.range.releasePointerCapture(n.pointerId), this.isDrag = !1;
+    }), this.range.addEventListener("wheel", (n) => {
+      const a = n.shiftKey ? -n.deltaX / 100 : -n.deltaX / 1e3;
+      let l = parseFloat(this.knob.style.left) / 100 + a;
+      l < 0 && (l = 0), l > 1 && (l = 1), this.set_percent(l), this.call(l), n.preventDefault();
+    }), this.range.appendChild(this.filler), this.filler.appendChild(this.knob), h.appendChild(d), h.appendChild(this.range), t.appendChild(h);
   }
+  set_width(t) {
+    const e = parseFloat(window.getComputedStyle(this.range).paddingLeft), s = parseFloat(window.getComputedStyle(this.range).paddingRight);
+    let i = (t - e) / (this.range.offsetWidth - s - s);
+    i >= 0 && i <= 1 && (this.set_percent(i), this.call(i));
+  }
+  set_percent(t) {
+    t < 0 && (t = 0);
+    const e = 100 - t * 100 + "%";
+    this.filler.style.background = "linear-gradient(to left, #c0c0c0 " + e + ", blue " + e + ")", this.knob.style.left = t * 100 + "%";
+  }
 }
-class m {
-  // element:HTMLElement;
-  constructor(t, e = 12, s = 144) {
-    let n = this.wrapElement(t, "tt-element");
-    t.classList.add("tt-element__content"), t.setAttribute("contenteditable", "true");
-    const l = window.getComputedStyle(t).fontSize, a = parseFloat(l);
-    let i = document.createElement("div");
-    i.classList.add("tt-element__range"), n.insertBefore(i, t);
-    const r = (a - e) / (s - e);
-    new u(i, r, (c) => {
-      const p = (s - e) * c + e;
-      t.style.fontSize = p + "px";
-    });
+class g {
+  constructor(t) {
+    o(this, "feats", []);
+    this.element = t;
+    let e = this.wrapElement(t, "tt-element");
+    if (this.element.classList.add("tt-element__content"), this.element.setAttribute("contenteditable", "true"), this.element.dataset.typetestr) {
+      const i = this.element.dataset.typetestr.split(",");
+      for (const h of i) {
+        const d = h.split(":"), n = new c(d[0].trim(), parseFloat(d[1] || "1"), parseFloat(d[2] || "1000"), parseFloat(d[3] || "20"));
+        this.feats.push(n);
+      }
+    } else
+      this.feats.push(new c("size", 16, 100, 16));
+    let s = document.createElement("div");
+    s.classList.add("tt-element__range-list"), e.insertBefore(s, this.element);
+    for (let i of this.feats)
+      new m(s, i.get_percent(), i.get_human_name(), (h) => this.update(i, h)), this.update(i);
   }
+  update(t, e = null) {
+    e && t.set_percent(e);
+    let s = [];
+    for (const i of this.feats)
+      i.name == "size" ? this.element.style.fontSize = i.value + "px" : s.push(`"${i.name}" ${i.value}`);
+    this.element.style.fontVariationSettings = s.join(", ");
+  }
   wrapElement(t, e) {
@@ -45,3 +95,3 @@ let s = document.createElement("div");
 }
-class w {
+class _ {
   constructor(t = "typetestr") {
@@ -51,5 +101,2 @@ o(this, "items", []);
   }
-  init(t = "typetestr") {
-    this.items = [], this.items = this.findAndInit(t);
-  }
   findAndInit(t) {
@@ -65,4 +112,4 @@ let e = this.find(t);
     for (let s = 0; s < t.length; s++) {
-      let n = new m(t[s]);
-      e.push(n);
+      let i = new g(t[s]);
+      e.push(i);
     }
@@ -73,3 +120,3 @@ return e;
 export {
-  w as default
+  _ as default
 };

package.json

 {
   "name": "typetestr",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Control font size by range slider. Useful for font presentation",
@@ -10,6 +10,6 @@ "type": "module",
     ".": {
-      "import": "./dist/typetestr.js",
-      "require": "./dist/typetestr.js"
+      "import": "./dist/typetestr.js"
     }
   },
+  "style": "/dist/typetestr.css",
   "keywords": [
@@ -16,0 +16,0 @@ "font",

README.md

@@ -1,6 +0,6 @@
-# typetestr (unfinished yet)
+# typetestr 
 
 ![testr illustraition](test.png)
 
-Simple script for change font size element.
+Font size and variable setting slider for font preview. Mouse wheel and keyboard interaction include.
 
@@ -21,2 +21,7 @@ Get `dist/typetestr.js`. Add script as a module. `let tt = new TypeTestr()`. Script adds rage input and makes element contenteditable.
 
+Use dataset for customization, for example
+```html
+<p class="typetestr" data-typetestr="size:16:100:40, wght:200:1000:300, wdth:75:125:100">text</p>
+```
+
 ---
@@ -32,3 +37,2 @@ Write with vitejs, typescript (es6 module)
 Safari Version 16.3 (18614.4.6.1.6)
-
 Google Chrome Version 110.0.5481.177 (Official Build) (x86_64)

No alert changes

Improved metrics

Total package byte prevSize

7566

increased by66.47%

Lines of code

123

increased by66.22%

Number of lines in readme file

36

increased by12.5%

No dependency changes