typetestr - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

dist/typetestr.js

@@ -1,7 +0,47 @@
-var l = Object.defineProperty;
-var o = (s, t, e) => t in s ? l(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var a = (s, t, e) => (o(s, typeof t != "symbol" ? t + "" : t, e), e);
-class u {
+var m = Object.defineProperty;
+var u = (r, t, e) => t in r ? m(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var o = (r, t, e) => (u(r, typeof t != "symbol" ? t + "" : t, e), e);
+class p {
+  constructor(t, e, s) {
+    o(this, "isDrag", !1);
+    let n = document.createElement("div");
+    n.classList.add("tt-range");
+    let a = document.createElement("div");
+    a.classList.add("tt-range__knob");
+    let d = document.createElement("div");
+    d.classList.add("tt-range__filler"), d.style.width = e * 100 + "%", n.addEventListener("mousedown", (l) => {
+      let i = (l.clientX - n.offsetLeft) / n.offsetWidth;
+      d.style.width = i * 100 + "%", this.isDrag = !0, s(i);
+    }), document.addEventListener("mousemove", (l) => {
+      if (this.isDrag) {
+        let i = (l.clientX - n.offsetLeft) / n.offsetWidth;
+        i >= 0 && i <= 1 && (d.style.width = i * 100 + "%", s(i));
+      }
+    }), document.addEventListener("mouseup", () => {
+      this.isDrag = !1;
+    }), n.appendChild(d), d.appendChild(a), t.appendChild(n);
+  }
+}
+class h {
+  // 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 a = window.getComputedStyle(t).fontSize, d = parseFloat(a);
+    let l = document.createElement("div");
+    l.classList.add("tt-element__range"), n.insertBefore(l, t);
+    const i = (d - e) / (s - e);
+    new p(l, i, (c) => {
+      const f = (s - e) * c + e;
+      t.style.fontSize = f + "px";
+    });
+  }
+  wrapElement(t, e) {
+    let s = document.createElement("div");
+    return s.classList.add(e), t.parentNode.insertBefore(s, t), s.appendChild(t), s;
+  }
+}
+class w {
   constructor(t = "typetestr") {
-    a(this, "items", []);
+    o(this, "items", []);
     this.items = this.findAndInit(t);
@@ -21,5 +61,5 @@ }
     let e = [];
-    for (let n = 0; n < t.length; n++) {
-      let r = new c(t[n]);
-      e.push(r);
+    for (let s = 0; s < t.length; s++) {
+      let n = new h(t[s]);
+      e.push(n);
     }
@@ -29,30 +69,4 @@ return e;
 }
-class c {
-  // element:HTMLElement;
-  constructor(t) {
-    let e = this.wrapElement(t, "tt-element");
-    t.classList.add("tt-element__content"), t.setAttribute("contenteditable", "true");
-    const n = window.getComputedStyle(t).fontSize, r = parseFloat(n);
-    let i = document.createElement("div");
-    i.classList.add("tt-element__range"), e.insertBefore(i, t), new m(i, r, (d) => {
-      t.style.fontSize = d;
-    });
-  }
-  wrapElement(t, e) {
-    let n = document.createElement("div");
-    return n.classList.add(e), t.parentNode.insertBefore(n, t), n.appendChild(t), n;
-  }
-}
-class m {
-  constructor(t, e, n) {
-    let r = document.createElement("div");
-    r.classList.add("tt-range");
-    let i = document.createElement("input");
-    i.classList.add("tt-range__input"), i.type = "range", i.min = "12", i.max = "74", i.value = e.toString(), i.oninput = function() {
-      n && n(i.value + "px");
-    }, r.appendChild(i), t.appendChild(r);
-  }
-}
 export {
-  u as default
+  w as default
 };

package.json

 {
   "name": "typetestr",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Control font size by range slider. Useful for font presentation",
@@ -5,0 +5,0 @@ "type": "module",

README.md

 # typetestr (unfinished yet)
 
-![testr illustraition](test.gif)
+![testr illustraition](test.png)
 
-Simple script for change font size div content.
+Simple script for change font size element.
 
@@ -19,3 +19,3 @@ Get `dist/typetestr.js`. Add script as a module. `let tt = new TypeTestr()`. Script adds rage input and makes element contenteditable.
 ```
-`dist/typetestr.css` adds some styles for hover animation.
+Add `dist/typetestr.css` for styling.
 
@@ -26,2 +26,9 @@ ---
 run `npm run dev` for development
-run `npm run build` for comlile js and css
+run `npm run build` for comlile js and css
+
+---
+Tested on:
+
+Safari Version 16.3 (18614.4.6.1.6)
+
+Google Chrome Version 110.0.5481.177 (Official Build) (x86_64)

src/typetestr.ts

@@ -0,1 +1,2 @@
+import TestrItem from "./testr_item";
 export default class TypeTestr {
@@ -26,51 +27,2 @@ items:TestrItem[]=[];
   }
-}
-
-class TestrItem{
-  // element:HTMLElement;
-  constructor(element:HTMLElement) {
-    let wrapper = this.wrapElement(element, "tt-element");
-    element.classList.add("tt-element__content");
-    
-    element.setAttribute("contenteditable", "true")
-
-    const elInitFontSizeStr = window.getComputedStyle(element).fontSize;
-    const elInitFontSize = parseFloat(elInitFontSizeStr); 
-    
-
-    let range_element = document.createElement("div");
-    range_element.classList.add("tt-element__range");
-    wrapper.insertBefore(range_element, element)
-    new TestrRange(range_element, elInitFontSize, (value:string)=>{
-      element.style.fontSize = value;
-    });
-    
-    
-  }
-  wrapElement(elementToWrap:HTMLElement, wrapperClassName:string){
-    let wrapper = document.createElement("div");
-    wrapper.classList.add(wrapperClassName);
-
-    elementToWrap.parentNode!.insertBefore(wrapper, elementToWrap);
-    wrapper.appendChild(elementToWrap);
-    return wrapper;
-  }
-}
-class TestrRange {
-  constructor(range_container:HTMLElement, fontSize:number, call:Function) {
-    let range = document.createElement("div");
-    range.classList.add("tt-range");
-    let input = document.createElement("input");
-    input.classList.add("tt-range__input");
-    input.type = "range";
-    input.min = "12";
-    input.max = "74";
-    input.value = fontSize.toString();
-
-    input.oninput = function(){
-      if (call) call(input.value + "px")
-    }
-    range.appendChild(input);
-    range_container.appendChild(range);
-  }
 }

No alert changes

Improved metrics

Total package byte prevSize

1520988

increased by69.37%

Number of package files

15

increased by36.36%

Lines of code

193

increased by22.93%

Number of lines in readme file

32

increased by28%

No dependency changes