initial commit

Author: stolinski

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+DS_Store

README.md

@@ -0,0 +1,3 @@
+# Svelte Fit Text
+
+An extremely simple, no dependency fit text library.

index.d.ts

@@ -0,0 +1,4 @@
+export declare const fit: (node: HTMLElement, min_size?: number, max_size?: number) => {
+    destroy: () => void;
+};
+export declare const parent_style = "display: inline-block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;";

index.js

@@ -0,0 +1,39 @@
+export const fit = (node, min_size = 12, max_size = 100) => {
+    const on_resize = () => {
+        if (node.parentElement) {
+            resize_text(node, node.parentElement, min_size, max_size);
+        }
+    };
+    const resize_observer = new ResizeObserver(on_resize);
+    resize_observer.observe(node === null || node === void 0 ? void 0 : node.parentElement);
+    return {
+        destroy() {
+            resize_observer.disconnect();
+        },
+    };
+};
+function is_overflow({ clientWidth, clientHeight, scrollWidth, scrollHeight, }) {
+    return scrollWidth > clientWidth || scrollHeight > clientHeight;
+}
+function resize_text(element, parent, min_size, max_size) {
+    let i = min_size;
+    let overflow = false;
+    let size = min_size;
+    element.style.fontSize = `${size}px`;
+    while (!overflow && i < max_size) {
+        overflow = is_overflow(parent);
+        if (!overflow) {
+            // If not overflowing, increase the font size
+            element.style.fontSize = `${i}px`;
+            i++;
+        }
+    }
+    size = i - 2;
+    // console.log('overflow', i, size, element)
+    element.style.fontSize = `${size}px`;
+}
+export const parent_style = `display: inline-block;
+		width: 100%;
+		height: 100%;
+		overflow-x: auto;
+		overflow-y: hidden;`;

index.ts

@@ -0,0 +1,60 @@
+export const fit = (
+	node: HTMLElement,
+	min_size: number = 12,
+	max_size: number = 100
+): { destroy: () => void } => {
+	const on_resize = (): void => {
+		if (node.parentElement) {
+			resize_text(node, node.parentElement, min_size, max_size)
+		}
+	}
+
+	const resize_observer = new ResizeObserver(on_resize)
+	resize_observer.observe(node?.parentElement as HTMLElement)
+
+	return {
+		destroy(): void {
+			resize_observer.disconnect()
+		},
+	}
+}
+
+function is_overflow({
+	clientWidth,
+	clientHeight,
+	scrollWidth,
+	scrollHeight,
+}: HTMLElement): boolean {
+	return scrollWidth > clientWidth || scrollHeight > clientHeight
+}
+
+function resize_text(
+	element: HTMLElement,
+	parent: HTMLElement,
+	min_size: number,
+	max_size: number
+): void {
+	let i: number = min_size
+	let overflow: boolean = false
+	let size: number = min_size
+	element.style.fontSize = `${size}px`
+
+	while (!overflow && i < max_size) {
+		overflow = is_overflow(parent)
+
+		if (!overflow) {
+			// If not overflowing, increase the font size
+			element.style.fontSize = `${i}px`
+			i++
+		}
+	}
+	size = i - 2
+	// console.log('overflow', i, size, element)
+	element.style.fontSize = `${size}px`
+}
+
+export const parent_style = `display: inline-block;
+		width: 100%;
+		height: 100%;
+		overflow-x: auto;
+		overflow-y: hidden;`

package.json

@@ -0,0 +1,20 @@
+{
+	"author": "Scott Tolinski",
+	"description": "",
+	"devDependencies": {
+		"typescript": "^4.8.2"
+	},
+	"exports": {
+		"default": "./index.js"
+	},
+	"keywords": [],
+	"license": "ISC",
+	"main": "index.js",
+	"name": "@leveluptuts/svelte-fit",
+	"scripts": {
+		"build": "tsc",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"type": "module",
+	"version": "1.0.0"
+}

tsconfig.json

@@ -0,0 +1,40 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Basic Options */
+		// "incremental": true,                         /* Enable incremental compilation */
+		"target": "ES2015",
+		"module": "ES2020",
+
+		"declaration": true /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+
+		/* Strict Type-Checking Options */
+		"strict": true /* Enable all strict type-checking options. */,
+		/* Module Resolution Options */
+		// "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+		// "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+		// "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+		// "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+		// "typeRoots": [],                             /* List of folders to include type definitions from. */
+		// "types": [],                                 /* Type declaration files to be included in compilation. */
+		// "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		// "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+		// "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+		/* Source Map Options */
+		// "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+		// "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+		// "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+		/* Experimental Options */
+		// "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+		// "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+
+		/* Advanced Options */
+		"skipLibCheck": true /* Skip type checking of declaration files. */,
+		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+	}
+}