@altano/textfit 0.0.4 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.d.ts +45 -42
  2. package/dist/index.js +73 -92
  3. package/package.json +35 -28
package/dist/index.d.ts CHANGED
@@ -1,45 +1,48 @@
1
+ //#region src/index.d.ts
1
2
  /**
2
- * textFit v2.3.1
3
- * Previously known as jQuery.textFit
4
- * 11/2014 by STRML (strml.github.com)
5
- * MIT License
6
- *
7
- * To use: textFit(document.getElementById('target-div'), options);
8
- *
9
- * Will make the *text* content inside a container scale to fit the container
10
- * The container is required to have a set width and height
11
- * Uses binary search to fit text with minimal layout calls.
12
- * Version 2.0 does not use jQuery.
13
- */
14
- export interface Options {
15
- /**
16
- * if true, textFit will not set white-space: no-wrap
17
- */
18
- multiLine?: boolean;
19
- /**
20
- * disable to turn off automatic multi-line sensing
21
- */
22
- detectMultiLine?: boolean;
23
- minFontSize?: number;
24
- maxFontSize?: number;
25
- /**
26
- * if true, textFit will re-process already-fit nodes. Set to 'false' for
27
- * better performance
28
- */
29
- reProcess?: boolean;
30
- /**
31
- * if true, textFit will fit text to element width, regardless of text height
32
- */
33
- widthOnly?: boolean;
34
- /**
35
- * if true, textFit will use flexbox for vertical alignment
36
- */
37
- alignVertWithFlexbox?: boolean;
38
- /**
39
- * Sets the final size to the max multiple of this. Useful when a font
40
- * requires the font size to be a multiple of a number for optimal rendering.
41
- */
42
- sizeMultipleOf?: number;
3
+ * textFit v2.3.1
4
+ * Previously known as jQuery.textFit
5
+ * 11/2014 by STRML (strml.github.com)
6
+ * MIT License
7
+ *
8
+ * To use: textFit(document.getElementById('target-div'), options);
9
+ *
10
+ * Will make the *text* content inside a container scale to fit the container
11
+ * The container is required to have a set width and height
12
+ * Uses binary search to fit text with minimal layout calls.
13
+ * Version 2.0 does not use jQuery.
14
+ */
15
+ interface Options {
16
+ /**
17
+ * if true, textFit will not set white-space: no-wrap
18
+ */
19
+ multiLine?: boolean;
20
+ /**
21
+ * disable to turn off automatic multi-line sensing
22
+ */
23
+ detectMultiLine?: boolean;
24
+ minFontSize?: number;
25
+ maxFontSize?: number;
26
+ /**
27
+ * if true, textFit will re-process already-fit nodes. Set to 'false' for
28
+ * better performance
29
+ */
30
+ reProcess?: boolean;
31
+ /**
32
+ * if true, textFit will fit text to element width, regardless of text height
33
+ */
34
+ widthOnly?: boolean;
35
+ /**
36
+ * if true, textFit will use flexbox for vertical alignment
37
+ */
38
+ alignVertWithFlexbox?: boolean;
39
+ /**
40
+ * Sets the final size to the max multiple of this. Useful when a font
41
+ * requires the font size to be a multiple of a number for optimal rendering.
42
+ */
43
+ sizeMultipleOf?: number;
43
44
  }
44
- export declare function textFit(elements: HTMLElement | HTMLElement[], options?: Options): void;
45
+ declare function textFit(elements: HTMLElement | HTMLElement[], options?: Options): void;
46
+ //#endregion
47
+ export { Options, textFit };
45
48
  //# sourceMappingURL=index.d.ts.map
package/dist/index.js CHANGED
@@ -1,105 +1,86 @@
1
- // src/index.ts
2
- var defaultSettings = {
3
- multiLine: false,
4
- detectMultiLine: true,
5
- minFontSize: 6,
6
- maxFontSize: 80,
7
- reProcess: true,
8
- widthOnly: false,
9
- alignVertWithFlexbox: false,
10
- sizeMultipleOf: 1
1
+ //#region src/index.ts
2
+ const defaultSettings = {
3
+ multiLine: false,
4
+ detectMultiLine: true,
5
+ minFontSize: 6,
6
+ maxFontSize: 80,
7
+ reProcess: true,
8
+ widthOnly: false,
9
+ alignVertWithFlexbox: false,
10
+ sizeMultipleOf: 1
11
11
  };
12
12
  function textFit(elements, options = {}) {
13
- const settings = Object.assign({}, defaultSettings, options);
14
- const els = Array.isArray(elements) ? elements : [elements];
15
- els.forEach((el) => {
16
- processItem(el, settings);
17
- });
13
+ const settings = Object.assign({}, defaultSettings, options);
14
+ (Array.isArray(elements) ? elements : [elements]).forEach((el) => {
15
+ processItem(el, settings);
16
+ });
18
17
  }
18
+ /**
19
+ * The meat. Given an el, make the text inside it fit its parent.
20
+ * @param {DOMElement} el Child el.
21
+ * @param {Object} settings Options for fit.
22
+ */
19
23
  function processItem(el, settings) {
20
- if (!isElement(el) || !settings.reProcess && el.getAttribute("textFitted")) {
21
- return;
22
- }
23
- if (!settings.reProcess) {
24
- el.setAttribute("textFitted", "1");
25
- }
26
- let innerSpan;
27
- let low, mid, high;
28
- const originalHTML = el.innerHTML;
29
- const originalWidth = innerWidth(el);
30
- const originalHeight = innerHeight(el);
31
- if (!originalWidth || !settings.widthOnly && !originalHeight) {
32
- if (!settings.widthOnly)
33
- throw new Error(
34
- "Set a static height and width on the target element " + el.outerHTML + " before using textFit!"
35
- );
36
- else
37
- throw new Error(
38
- "Set a static width on the target element " + el.outerHTML + " before using textFit!"
39
- );
40
- }
41
- if (originalHTML.indexOf("textFitted") === -1) {
42
- innerSpan = document.createElement("span");
43
- innerSpan.className = "textFitted";
44
- innerSpan.style["display"] = "inline-block";
45
- innerSpan.innerHTML = originalHTML;
46
- el.innerHTML = "";
47
- el.appendChild(innerSpan);
48
- } else {
49
- const innerSpanNode = el.querySelector("span.textFitted");
50
- if (innerSpanNode == null) {
51
- throw new Error("Could not find `span.textFitted`");
52
- } else if (!(innerSpanNode instanceof HTMLElement)) {
53
- throw new Error("Element matching `span.textFitted` not a span");
54
- }
55
- innerSpan = innerSpanNode;
56
- if (hasClass(innerSpan, "textFitAlignVert")) {
57
- innerSpan.className = innerSpan.className.replace("textFitAlignVert", "");
58
- innerSpan.style["height"] = "";
59
- el.className.replace("textFitAlignVertFlex", "");
60
- }
61
- }
62
- let multiLine = settings.multiLine;
63
- if (settings.detectMultiLine && !multiLine && innerSpan.getBoundingClientRect().height >= parseInt(window.getComputedStyle(innerSpan).fontSize, 10) * 2) {
64
- multiLine = true;
65
- }
66
- if (!multiLine) {
67
- el.style.whiteSpace = "nowrap";
68
- }
69
- low = settings.minFontSize;
70
- high = settings.maxFontSize;
71
- let size = low;
72
- while (low <= high) {
73
- mid = high + low >> 1;
74
- innerSpan.style.fontSize = mid + "px";
75
- const innerSpanBoundingClientRect = innerSpan.getBoundingClientRect();
76
- if (innerSpanBoundingClientRect.width <= originalWidth && (settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight)) {
77
- size = mid;
78
- low = mid + 1;
79
- } else {
80
- high = mid - 1;
81
- }
82
- }
83
- if (settings.sizeMultipleOf > 1) {
84
- size = size - size % settings.sizeMultipleOf;
85
- }
86
- if (innerSpan.style.fontSize != size + "px")
87
- innerSpan.style.fontSize = size + "px";
24
+ if (!isElement(el) || !settings.reProcess && el.getAttribute("textFitted")) return;
25
+ if (!settings.reProcess) el.setAttribute("textFitted", "1");
26
+ let innerSpan;
27
+ let low, mid, high;
28
+ const originalHTML = el.innerHTML;
29
+ const originalWidth = innerWidth(el);
30
+ const originalHeight = innerHeight(el);
31
+ if (!originalWidth || !settings.widthOnly && !originalHeight) if (!settings.widthOnly) throw new Error("Set a static height and width on the target element " + el.outerHTML + " before using textFit!");
32
+ else throw new Error("Set a static width on the target element " + el.outerHTML + " before using textFit!");
33
+ if (originalHTML.indexOf("textFitted") === -1) {
34
+ innerSpan = document.createElement("span");
35
+ innerSpan.className = "textFitted";
36
+ innerSpan.style["display"] = "inline-block";
37
+ innerSpan.innerHTML = originalHTML;
38
+ el.innerHTML = "";
39
+ el.appendChild(innerSpan);
40
+ } else {
41
+ const innerSpanNode = el.querySelector("span.textFitted");
42
+ if (innerSpanNode == null) throw new Error("Could not find `span.textFitted`");
43
+ else if (!(innerSpanNode instanceof HTMLElement)) throw new Error("Element matching `span.textFitted` not a span");
44
+ innerSpan = innerSpanNode;
45
+ if (hasClass(innerSpan, "textFitAlignVert")) {
46
+ innerSpan.className = innerSpan.className.replace("textFitAlignVert", "");
47
+ innerSpan.style["height"] = "";
48
+ el.className.replace("textFitAlignVertFlex", "");
49
+ }
50
+ }
51
+ let multiLine = settings.multiLine;
52
+ if (settings.detectMultiLine && !multiLine && innerSpan.getBoundingClientRect().height >= parseInt(window.getComputedStyle(innerSpan).fontSize, 10) * 2) multiLine = true;
53
+ if (!multiLine) el.style.whiteSpace = "nowrap";
54
+ low = settings.minFontSize;
55
+ high = settings.maxFontSize;
56
+ let size = low;
57
+ while (low <= high) {
58
+ mid = high + low >> 1;
59
+ innerSpan.style.fontSize = mid + "px";
60
+ const innerSpanBoundingClientRect = innerSpan.getBoundingClientRect();
61
+ if (innerSpanBoundingClientRect.width <= originalWidth && (settings.widthOnly || innerSpanBoundingClientRect.height <= originalHeight)) {
62
+ size = mid;
63
+ low = mid + 1;
64
+ } else high = mid - 1;
65
+ }
66
+ if (settings.sizeMultipleOf > 1) size = size - size % settings.sizeMultipleOf;
67
+ if (innerSpan.style.fontSize != size + "px") innerSpan.style.fontSize = size + "px";
88
68
  }
89
69
  function innerHeight(el) {
90
- const style = window.getComputedStyle(el, null);
91
- return el.getBoundingClientRect().height - parseInt(style.getPropertyValue("padding-top"), 10) - parseInt(style.getPropertyValue("padding-bottom"), 10);
70
+ const style = window.getComputedStyle(el, null);
71
+ return el.getBoundingClientRect().height - parseInt(style.getPropertyValue("padding-top"), 10) - parseInt(style.getPropertyValue("padding-bottom"), 10);
92
72
  }
93
73
  function innerWidth(el) {
94
- const style = window.getComputedStyle(el, null);
95
- return el.getBoundingClientRect().width - parseInt(style.getPropertyValue("padding-left"), 10) - parseInt(style.getPropertyValue("padding-right"), 10);
74
+ const style = window.getComputedStyle(el, null);
75
+ return el.getBoundingClientRect().width - parseInt(style.getPropertyValue("padding-left"), 10) - parseInt(style.getPropertyValue("padding-right"), 10);
96
76
  }
97
77
  function isElement(o) {
98
- return typeof HTMLElement === "object" ? o instanceof HTMLElement : o != null && typeof o === "object" && o !== null && "nodeType" in o && o.nodeType === 1 && "nodeName" in o && typeof o.nodeName === "string";
78
+ return typeof HTMLElement === "object" ? o instanceof HTMLElement : o != null && typeof o === "object" && o !== null && "nodeType" in o && o.nodeType === 1 && "nodeName" in o && typeof o.nodeName === "string";
99
79
  }
100
80
  function hasClass(element, cls) {
101
- return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
81
+ return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
102
82
  }
103
- export {
104
- textFit
105
- };
83
+
84
+ //#endregion
85
+ export { textFit };
86
+ //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,53 +1,60 @@
1
1
  {
2
2
  "name": "@altano/textfit",
3
- "version": "0.0.4",
3
+ "version": "1.0.1",
4
4
  "description": "A fast, jQuery-free text sizing component that quickly fits single and multi-line text to the width (and optionally height) of its container.",
5
- "files": [
6
- "dist/**/*.js",
7
- "dist/**/*.d.ts"
5
+ "keywords": [
6
+ "fit",
7
+ "text",
8
+ "textfit"
8
9
  ],
9
- "type": "module",
10
- "sideEffects": false,
11
- "exports": "./dist/index.js",
12
- "types": "./dist/index.d.ts",
10
+ "homepage": "https://github.com/altano/npm-packages/tree/main/packages/textfit",
13
11
  "repository": {
14
12
  "type": "git",
15
13
  "url": "https://github.com/altano/npm-packages",
16
14
  "directory": "packages/textfit"
17
15
  },
18
- "homepage": "https://github.com/altano/npm-packages/tree/main/packages/textfit",
19
- "keywords": [
20
- "textfit",
21
- "fit",
22
- "text"
23
- ],
24
- "author": "Samuel Reed <samuel.trace.reed@gmail.com> (http://strml.net/)",
16
+ "license": "MIT",
17
+ "author": "Alan Norbauer <altano@gmail.com> (https://alan.norbauer.com/)",
25
18
  "contributors": [
26
- "Alan Norbauer <altano@gmail.com> (https://alan.norbauer.com/)"
19
+ "Samuel Reed <samuel.trace.reed@gmail.com> (http://strml.net/)"
20
+ ],
21
+ "sideEffects": false,
22
+ "type": "module",
23
+ "exports": "./dist/index.js",
24
+ "types": "./dist/index.d.ts",
25
+ "files": [
26
+ "dist/**/*.js",
27
+ "dist/**/*.d.ts"
27
28
  ],
28
- "license": "MIT",
29
29
  "devDependencies": {
30
- "@playwright/test": "1.40.0",
31
- "typescript": "^5.4.2",
32
- "vite": "^5.2.4",
33
- "@altano/tsconfig": "0.0.0"
30
+ "@arethetypeswrong/cli": "^0.18.2",
31
+ "@playwright/test": "1.58.2",
32
+ "@types/node": "^25.5.0",
33
+ "depcheck": "^1.4.7",
34
+ "tsdown": "^0.21.4",
35
+ "typescript": "^5.9.3",
36
+ "vite": "^7.3.1",
37
+ "vitest": "^4.1.0",
38
+ "@altano/build-config": "0.0.1",
39
+ "@altano/tsconfig": "0.0.1"
34
40
  },
35
41
  "publishConfig": {
36
42
  "access": "public"
37
43
  },
38
44
  "scripts": {
39
- "build": "tsup --config build-config/tsup.config.browser.ts",
40
- "build:types": "tsc --project tsconfig.declarations.json",
45
+ "build": "tsdown --config-loader unrun --config ../build-config/tsdown.config.browser.ts",
46
+ "check:exports": "attw --pack . --profile esm-only --quiet",
47
+ "check:types:src": "tsc --noEmit",
48
+ "check:types:test": "tsc --noEmit --project ./tests/tsconfig.json",
49
+ "check:unused-dependencies": "depcheck",
41
50
  "dev": "pnpm run build --watch",
42
51
  "format": "prettier --check src",
43
52
  "format:fix": "prettier --write src",
44
- "lint": "eslint package.json src/**/*.ts*",
53
+ "lint": "eslint",
45
54
  "lint:fix": "TIMING=1 pnpm lint --fix",
46
55
  "lint:timing": "TIMING=1 pnpm lint",
47
- "test:e2e": "playwright test",
56
+ "test:e2e": "NODE_OPTIONS='--no-experimental-strip-types' playwright test",
48
57
  "test:e2e:server": "vite --strictPort --port 8173 ./tests/e2e",
49
- "test:e2e:ui": "playwright test --ui",
50
- "typecheck:src": "tsc --noEmit",
51
- "typecheck:test": "tsc --noEmit --project ./tests/tsconfig.json"
58
+ "test:e2e:ui": "playwright test --ui"
52
59
  }
53
60
  }