92 lines
3.0 KiB
HTML
92 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSDoc: Source: fontScale.mjs</title>
|
|
|
|
<script src="scripts/prettify/prettify.js"> </script>
|
|
<script src="scripts/prettify/lang-css.js"> </script>
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="main">
|
|
|
|
<h1 class="page-title">Source: fontScale.mjs</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
<article>
|
|
<pre class="prettyprint source linenums"><code>/** @module fontScale */
|
|
|
|
/**
|
|
* Scale an element's font size so that it doesn't overflow the viewport.
|
|
* Note that some css may be required for this to work,
|
|
* for example setting `display: flex;` on the parent element,
|
|
* and this function relies on the element being visible.
|
|
* If you want to keep your element invisible until font scaling finishes,
|
|
* use `opacity: 0;`
|
|
* @param {HTMLElement} element the element to be scaled
|
|
* @param {Number} maxHeight maximum font size (which is equivalent to pixel hight)
|
|
* @returns {Number} the resulting font size
|
|
*/
|
|
export function fontScale(element,maxHeight=innerHeight){
|
|
return new Promise(function(resolve){
|
|
function scaleup(){
|
|
let size=parseInt(getComputedStyle(element).fontSize)
|
|
let bounds=element.getBoundingClientRect()
|
|
if(bounds.right<innerWidth && size<maxHeight){
|
|
element.style.fontSize=size+1+'px'
|
|
setTimeout(scaleup)
|
|
}else{
|
|
setTimeout(scaledown)
|
|
}
|
|
|
|
}
|
|
function scaledown(){
|
|
let size=parseInt(getComputedStyle(element).fontSize)
|
|
let bounds=element.getBoundingClientRect()
|
|
if(bounds.right>innerWidth || size>maxHeight){
|
|
element.style.fontSize=size-1+'px'
|
|
setTimeout(scaledown)
|
|
}else{
|
|
resolve(size)
|
|
}
|
|
}
|
|
setTimeout(scaleup)
|
|
})
|
|
}
|
|
|
|
export default fontScale</code></pre>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav>
|
|
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-AssetLoader.html">AssetLoader</a></li><li><a href="module-CSSRandom.html">CSSRandom</a></li><li><a href="module-FileReaderAsync.html">FileReaderAsync</a></li><li><a href="module-FormDataDeep.html">FormDataDeep</a></li><li><a href="module-fontScale.html">fontScale</a></li></ul><h3>Classes</h3><ul><li><a href="module-FileReaderAsync.FileReaderAsync.html">FileReaderAsync</a></li><li><a href="module-FormDataDeep.FormDataDeep.html">FormDataDeep</a></li></ul>
|
|
</nav>
|
|
|
|
<br class="clear">
|
|
|
|
<footer>
|
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Thu Dec 08 2022 17:50:32 GMT+0000 (Coordinated Universal Time)
|
|
</footer>
|
|
|
|
<script> prettyPrint(); </script>
|
|
<script src="scripts/linenumber.js"> </script>
|
|
</body>
|
|
</html>
|