pbar
Version:
Tiny progress bar widget in css and js es5
138 lines (97 loc) • 4.33 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../../">
<title data-ice="title">src/pbar.js | API Document</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
</head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<a data-ice="repoURL" href="https://github.com/StoneCypher/pbar" class="repo-url-github">Repository</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/pbar.js~pbar.html">pbar</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><h1 data-ice="title">src/pbar.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">
'use strict';
/********
*
* Progress Bar
*
*/
class pbar {
constructor(opts) {
opts = opts || {};
let defaults = {
color : '#40B3CC',
background : 'transparent',
border : '0 solid transparent',
height : '4px',
position : opts.target? 'absolute' : 'fixed',
target : document.body,
transition : '0.35s',
value : '50%'
};
this.opts = {};
Object.keys(defaults).map(key => this.opts[key] = opts[key] || defaults[key]);
if (typeof this.opts.target === 'string') { this.opts.target = document.getElementById(this.opts.target); }
this.frame = document.createElement('div');
this.bar = document.createElement('div'); this.frame.appendChild(this.bar);
var frameStyles = {left: '0', right: '0', top: '0', position: this.opts.position};
Object.keys(frameStyles).map(k => this.fs(k, frameStyles[k]));
this.bs('height', '100%');
['height', 'border', 'color', 'background', 'transition', 'value'].map(s => this[s] = this.opts[s]);
this.opts.target.appendChild(this.frame);
}
fs(style, val) { this.frame.style[style] = val; }
bs(style, val) { this.bar.style[style] = val; }
get color() { return this.opts.color; }
set color(c) { this.opts.color = c; this.bs('backgroundColor', c); }
get background() { return this.opts.background; }
set background(b) { this.opts.background = b; this.fs('backgroundColor', b); }
get border() { return this.opts.border; }
set border(b) { this.opts.border = b; this.fs('border', b); }
get height() { return this.opts.height; }
set height(h) { this.opts.height = h; this.fs('height', h); }
get value() { return this.opts.value; }
set value(v) { this.opts.value = v; this.bs('width', v); }
get position() { return this.opts.position; }
// no position setter
get target() { return this.opts.target; }
// no target setter
get transition() { return this.opts.height; }
set transition(t) { this.opts.transition = t; this.bs('transition', `width ${t}`); }
};
export {pbar};
</code></pre>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.6)</span></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>