		/* globals customElements HTMLElement getComputedStyle */

		const template = `
		<div><slot></slot></div>
		<div id="outer"><div id="inner"><slot></slot></div></div>
		<style>
		div {display: inline-block; white-space: nowrap;}
		#inner {display: inline-block; white-space: nowrap;}
		</style>
		@@ -17,3 +17,4 @@ `
		shadowRoot.innerHTML = template
		this.div = shadowRoot.querySelector('div')
		this.inner = shadowRoot.querySelector('#inner')
		this.outer = shadowRoot.querySelector('#outer')
		this.resize = this.resize.bind(this)
		@@ -31,6 +32,7 @@ window.addEventListener('resize', this.resize)
		const currentFontSize = parseInt(
		getComputedStyle(this.div).fontSize,
		getComputedStyle(this.inner).fontSize,
		10
		)
		this.div.style.fontSize = `${(this.clientWidth / this.div.scrollWidth) *
		this.inner.style.fontSize = `${(this.outer.clientWidth /
		this.inner.scrollWidth) *
		currentFontSize}px`
		@@ -37,0 +39,0 @@ })

package.json

		{
		"name": "fit-text-webcomponent",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "A minimal fit-text web-component / custom-element",
		@@ -13,8 +13,9 @@ "keywords": [
		],
		"main": "index.min.js",
		"main": "dist/index.min.js",
		"scripts": {
		"build": "uglifyjs --compress --mangle --output index.min.js -- index.js ",
		"prettier": "prettier --no-semi --single-quote --write index.js",
		"build": "uglifyjs --compress --mangle --output dist/index.min.js -- index.js ",
		"prettier": "prettier --no-semi --single-quote --write index.js && js-beautify -r examples/*.html",
		"dev": "http-server ."
		},
		"repository": "github:lipp/fit-text",
		"author": "Gerhard Preuss",
		@@ -24,2 +25,3 @@ "license": "MIT",
		"http-server": "^0.11.1",
		"js-beautify": "^1.8.6",
		"prettier": "^1.14.3",
		@@ -26,0 +28,0 @@ "uglify-es": "^3.3.9"

example.html

index.min.js

fit-text-webcomponent - npm Package Compare versions

New alerts