add fontScale
This commit is contained in:
josephsmendoza
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>JSDoc: Source: fontScale.js</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.js</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<article>
|
||||
<pre class="prettyprint source linenums"><code>/** @module fontScale */
|
||||
|
||||
/**
|
||||
* Scale an element's font size to fit inside the given width.
|
||||
* @param {HTMLElement} element
|
||||
* @param {Int} width defaults to `window.innerWidth`
|
||||
* @returns {Promise<Int>} resulting font size in px
|
||||
*/
|
||||
export function fontScale(element,width=innerWidth){
|
||||
return new Promise(function(resolve){
|
||||
let fontSize=0
|
||||
element.style.fontSize=fontSize+'px'
|
||||
width-=element.clientWidth
|
||||
function down(){
|
||||
if(element.clientWidth>=width){
|
||||
fontSize-=1
|
||||
element.style.fontSize=fontSize+'px'
|
||||
requestAnimationFrame(down)
|
||||
}else{
|
||||
resolve(fontSize)
|
||||
}
|
||||
}
|
||||
function up(){
|
||||
if(element.clientWidth<width){
|
||||
fontSize+=10
|
||||
element.style.fontSize=fontSize+'px'
|
||||
requestAnimationFrame(up)
|
||||
}else{
|
||||
requestAnimationFrame(down)
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(up)
|
||||
})
|
||||
}
|
||||
|
||||
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-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 Wed Dec 07 2022 12:03:52 GMT+0000 (Coordinated Universal Time)
|
||||
</footer>
|
||||
|
||||
<script> prettyPrint(); </script>
|
||||
<script src="scripts/linenumber.js"> </script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>JSDoc: Module: fontScale</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">Module: fontScale</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
<header>
|
||||
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div class="container-overview">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source"><ul class="dummy"><li>
|
||||
<a href="fontScale.js.html">fontScale.js</a>, <a href="fontScale.js.html#line1">line 1</a>
|
||||
</li></ul></dd>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h3 class="subsection-title">Methods</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h4 class="name" id=".fontScale"><span class="type-signature">(static) </span>fontScale<span class="signature">(element, width)</span><span class="type-signature"> → {Promise.<Int>}</span></h4>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="description">
|
||||
<p>Scale an element's font size to fit inside the given width.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h5>Parameters:</h5>
|
||||
|
||||
|
||||
<table class="params">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
<th>Name</th>
|
||||
|
||||
|
||||
<th>Type</th>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<th class="last">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
|
||||
<tr>
|
||||
|
||||
<td class="name"><code>element</code></td>
|
||||
|
||||
|
||||
<td class="type">
|
||||
|
||||
|
||||
<span class="param-type">HTMLElement</span>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<td class="description last"></td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
<tr>
|
||||
|
||||
<td class="name"><code>width</code></td>
|
||||
|
||||
|
||||
<td class="type">
|
||||
|
||||
|
||||
<span class="param-type">Int</span>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<td class="description last"><p>defaults to <code>window.innerWidth</code></p></td>
|
||||
</tr>
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<dl class="details">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<dt class="tag-source">Source:</dt>
|
||||
<dd class="tag-source"><ul class="dummy"><li>
|
||||
<a href="fontScale.js.html">fontScale.js</a>, <a href="fontScale.js.html#line9">line 9</a>
|
||||
</li></ul></dd>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</dl>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h5>Returns:</h5>
|
||||
|
||||
|
||||
<div class="param-desc">
|
||||
<p>resulting font size in px</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
Type
|
||||
</dt>
|
||||
<dd>
|
||||
|
||||
<span class="param-type">Promise.<Int></span>
|
||||
|
||||
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><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 Wed Dec 07 2022 12:03:52 GMT+0000 (Coordinated Universal Time)
|
||||
</footer>
|
||||
|
||||
<script> prettyPrint(); </script>
|
||||
<script src="scripts/linenumber.js"> </script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
/** @module fontScale */
|
||||
|
||||
/**
|
||||
* Scale an element's font size to fit inside the given width.
|
||||
* @param {HTMLElement} element
|
||||
* @param {Int} width defaults to `window.innerWidth`
|
||||
* @returns {Promise<Int>} resulting font size in px
|
||||
*/
|
||||
export function fontScale(element,width=innerWidth){
|
||||
return new Promise(function(resolve){
|
||||
let fontSize=0
|
||||
element.style.fontSize=fontSize+'px'
|
||||
width-=element.clientWidth
|
||||
function down(){
|
||||
if(element.clientWidth>=width){
|
||||
fontSize-=1
|
||||
element.style.fontSize=fontSize+'px'
|
||||
requestAnimationFrame(down)
|
||||
}else{
|
||||
resolve(fontSize)
|
||||
}
|
||||
}
|
||||
function up(){
|
||||
if(element.clientWidth<width){
|
||||
fontSize+=10
|
||||
element.style.fontSize=fontSize+'px'
|
||||
requestAnimationFrame(up)
|
||||
}else{
|
||||
requestAnimationFrame(down)
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(up)
|
||||
})
|
||||
}
|
||||
|
||||
export default fontScale
|
||||
Reference in New Issue
Block a user