magicsuggest
Version:
MagicSuggest is a multiple selection auto-suggest input box for Bootstrap 3.
350 lines (334 loc) • 18.3 kB
HTML
<html lang="en-US">
<head>
<title>FavIconX</title>
<link href="faviconx/favicon.png%3Fv=2" rel="shortcut icon" type="image/x-icon">
<link rel='stylesheet' id='syntax-merriweather-css' href='http://fonts.googleapis.com/css?family=Merriweather%3A400%2C300%2C300italic%2C400italic%2C700%2C700italic&ver=4.0' type='text/css' media='all' />
<link rel="stylesheet" type="text/css" href="faviconx/css/style.css">
<script type="text/javascript" src="faviconx/lib/faviconx/faviconx.js"></script>
<link href="faviconx/lib/highlightjs/styles/default.css" rel="stylesheet">
<link rel="stylesheet" text="text/css" href="faviconx/lib/codemirror/codemirror.css">
<link rel="stylesheet" text="text/css" href="faviconx/lib/codemirror/theme/monokai.css">
<link rel="stylesheet" type="text/css" href="faviconx/lib/gh-ribbon/gh-fork-ribbon.css">
</head>
<body>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/nicolasbize/faviconx">View on GitHub</a>
</div>
</div>
<a class="notice" href="magicsuggest.html">Check out my other project, MagicSuggest!</a>
<div class="content">
<div class="header"><div class="subheader">Progress bars out of your tab favicons.</div></div>
<div class="main">
<div class="warning">Warning: if you are on mobile / tablet, you won't see anything as the browser tabs don't display icons next to the titles</div>
<h1>Examples and Usage.</h1>
<p>Use the editors on the right to play around with the library. View the results in the current browser tab.</p>
<div class="section">
<div class="col">
<div class="step-title">Setting a simple value</div>
<div class="step-desc">
Values should be anywhere between 0 and 100.<br/>
Try changing the value to 60 and click RUN.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.setValue(40);</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Using custom styles</div>
<div class="step-desc">
You can change the <code>borderColor</code>, the <code>borderWidth</code>, the <code>fillColor</code> or the <code>shadowColor</code>.<br/>
Try making a green circle. Color names are accepted.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
borderColor: '#333',
borderWidth: 2,
shadowColor: '#CCCCCC',
fillColor: '#B00E0E'
});</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Control the title</div>
<div class="step-desc">
Prevent any changes by setting <code>updateTitle</code> to <span class="inline-code">false</span>, or customize what is displayed using <code>titleRenderer</code>.<br/>
Try to set a value without changing the title.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
updateTitle: true,
titleRenderer: function(v, t){
return '(' + v + '%) ' + t;
}
}).setValue(20);</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Multiple shapes available</div>
<div class="step-desc">
<code>shape</code> can be either a <span class="inline-code">'circle'</span>, a <span class="inline-code">'doughnut'</span> or a <span class="inline-code">'square'</span>.<br/>
Try changing the shape to a square.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
shape: 'doughnut'
}).setValue(65);</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Animate changes</div>
<div class="step-desc">
Turn <code>animated</code> on by setting it to <span class="inline-code">true</span>. Control how fast it should go from its original value to another value using <code>animationSpeed</code> (in ms).<br/>
Try making the animation go a bit faster.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
animated: true,
animationSpeed: 3000
}).setValue(80);</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Gradients</div>
<div class="step-desc">
Set <code>borderColor2</code> and <code>fillColor2</code> to have the icon change colors relative to the current value.<br/>
Try making it evolve from red to green.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
animated: true,
fillColor2: '#1EFF00'
}).setValue(10);</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Callbacks</div>
<div class="step-desc">
Set a <code>callback</code> to control the animation workflow.<br/>
Try going from 0 to 50 and back.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
animated: true,
callback: function(){
alert('Bonjour!');
}
}).setValue(80);</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Reset</div>
<div class="step-desc">
Call <code>reset()</code> to restore the original icon.<br/>
Try going from 0 to 100 then reseting page icon.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.reset();
</textarea>
</div>
<div class="run">RUN</div>
</div>
<div class="section">
<div class="col">
<div class="step-title">Status Icons</div>
<div class="step-desc">
Call <code>complete([fgCol], [bgCol])</code> for success.<br/>
Call <code>fail([fgCol], [bgCol])</code> for failure.<br/>
Try displaying a failure status.
</div>
</div>
<div class="col">
<textarea class="code-js">FavIconX.config({
animated: true,
callback: function(){
FavIconX.complete();
}
}).setValue(100);</textarea>
</div>
<div class="run">RUN</div>
</div>
</div>
<hr>
<div class="main">
<p>FavIconX is written in vanilla javascript (7kb) and does not require any external library to work.</p>
<h1>Installation</h1>
<h3>Using Bower</h3>
<kbd>bower install faviconx</kbd>
<h3>Manual Install</h3>
<p><ul>
<li>Download the <a href="https://github.com/nicolasbize/faviconx/zipball/master">latest version here</a></li>
<li>Place the file <code>faviconx-min.js</code> in your assets folder.</li>
<li>Add <code><script type="text/javascript" src="lib/faviconx-min.js"></script></code> to your page.</a></li>
</ul></p>
</div>
<hr>
<div class="main doc">
<h1>Documentation</h1>
<p>Browser support: Chrome 16+, Firefox 8+, Opera 11+. (Others only update their titles)</p>
<p>Licence: MIT Licence. Use at will.</p>
<p>As soon as the script is loaded in the page, the object <code>FavIconX</code> will exist and be directly available. No need to instantiate anything. You can then alter the favicon by using one of the methods below. Each method is chainable:</p>
<div class="section">
<div class="step-title"><code>FavIconX.config(<span class="inline-code">object</span>)</code></div>
<div class="step-desc">
<div>Configures the FavIconX widget through one or multiple properties. Refreshes the icon as well:</div>
<div class="prop">
<div class="property">shape</div>
<div class="value">any of the following: <span class="inline-code">'circle'</span> (default), <span class="inline-code">'doughnut'</span>, or <span class="inline-code">'square'</span></div>
</div>
<div class="prop">
<div class="property">animated</div>
<div class="value">set to <span class="inline-code">true</span> or <span class="inline-code">false</span> (default) to enable / disable animations</div>
</div>
<div class="prop">
<div class="property">animationSpeed</div>
<div class="value">any number in ms (default <span class="inline-code">2000</span>) that will be taken by the widget to go from value 1 to value 2</div>
</div>
<div class="prop">
<div class="property">borderColor</div>
<div class="value">any html color (default <span class="inline-code">'#3A70B1'</span>) to define the shape border color</div>
</div>
<div class="prop">
<div class="property">borderColor2</div>
<div class="value">any html color (default <span class="inline-code">null</span>) to define the shape border color at max value</div>
</div>
<div class="prop">
<div class="property">fillColor</div>
<div class="value">any html color (default <span class="inline-code">'#3A70B1'</span>) to define the shape fill color</div>
</div>
<div class="prop">
<div class="property">fillColor2</div>
<div class="value">any html color (default <span class="inline-code">null</span>) to define the shape fill color at max value</div>
</div>
<div class="prop">
<div class="property">borderWidth</div>
<div class="value">any number between 0 and 8 (default <span class="inline-code">1</span>) to define the shape border width</div>
</div>
<div class="prop">
<div class="property">shadowColor</div>
<div class="value">any html color (default <span class="inline-code">'rgba(255, 0, 0, 0)'</span>) to define the shape shadow color</div>
</div>
<div class="prop">
<div class="property">updateTitle</div>
<div class="value">set to <span class="inline-code">true</span> (default) or <span class="inline-code">false</span> to enable / disable title modifications</div>
</div>
<div class="prop">
<div class="property">titleRenderer</div>
<div class="value">a function used to configure how the tab title is rendered. <br/>the function has 2 optional arguments, the current value and the title.<br/>defaults to <span class="inline-code">function(v, t){ return '[' + v + '%] - ' + t;</span>
};<span class="inline-code"></div>
</div>
<div class="prop">
<div class="property">callback</div>
<div class="value">a function called at the end of the animation. defaults to <span class="inline-code">null</span></div>
</div>
</div>
</div>
<div class="section">
<div class="step-title"><code>FavIconX.setValue(<span class="inline-code">value</span>, <span class="inline-code">[animated]</span>, <span class="inline-code">[animationSpeed]</span>, <span class="inline-code">[callback]</span>)</code></div>
<div class="step-desc">
<div>Sets the value of the favicon. If animated, the value will progressively get to it with time.</div>
<div class="prop">
<div class="property">value</div>
<div class="value">any number between 0 and 100.</div>
</div>
<div class="prop">
<div class="property">animated</div>
<div class="value">(optional) : will override the associated config property for this call.</div>
</div>
<div class="prop">
<div class="property">animationSpeed</div>
<div class="value">(optional) : will override the associated config property for this call.</div>
</div>
<div class="prop">
<div class="property">callback</div>
<div class="value">(optional) : will override the associated config property for this call.</div>
</div>
</div>
</div>
<div class="section">
<div class="step-title"><code>FavIconX.getValue()</code></div>
<div class="step-desc">
<div>Returns the current value as displayed in the tab.<br/>If the icon is currently being animated, it returns the intermediate value, not the destination value.</div>
</div>
</div>
<div class="section">
<div class="step-title"><code>FavIconX.reset()</code></div>
<div class="step-desc">
<div>Resets the configuration to its default properties and recovers the initial favicon.</div>
</div>
</div>
<div class="section">
<div class="step-title"><code>FavIconX.complete(<span class="inline-code">[foreColor]</span>, <span class="inline-code">[backColor]</span>)</code></div>
<div class="step-desc">
<div>Sets the favicon to a success check icon.</div>
<div class="prop">
<div class="property">foreColor</div>
<div class="value">(optional) : the shape color (defaults to <span class="inline-code">'#FFFFFF'</span>).</div>
</div>
<div class="prop">
<div class="property">backColor</div>
<div class="value">(optional) : the circle color (defaults to <span class="inline-code">'#53C516'</span>).</div>
</div>
</div>
</div>
<div class="section">
<div class="step-title"><code>FavIconX.fail(<span class="inline-code">[foreColor]</span>, <span class="inline-code">[backColor]</span>)</code></div>
<div class="step-desc">
<div>Sets the favicon to a failure cross icon.</div>
<div class="prop">
<div class="property">foreColor</div>
<div class="value">(optional) : the shape color (defaults to <span class="inline-code">'#FFFFFF'</span>).</div>
</div>
<div class="prop">
<div class="property">backColor</div>
<div class="value">(optional) : the circle color (defaults to <span class="inline-code">'#F6491F'</span>).</div>
</div>
</div>
</div>
</div>
<hr>
<div class="main doc">
<h1>Contribute</h1>
<p>Leave comments on my <a href="http://www.nicolasbize.com/blog/faviconx-make-progress-bars-out-of-favicons/">blog</a>.</p>
<p>Report any bugs on <a href="https://github.com/nicolasbize/faviconx">github</a>.</p>
</div>
</div>
<script src="faviconx/lib/codemirror/codemirror.js"></script>
<script src="faviconx/lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="faviconx/lib/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="faviconx/index.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5470193-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>