diff --git a/README.md b/README.md
index b30ee22..b968979 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,8 @@ Piecon.setProgress(12);
Piecon.setProgress(25);
...
Piecon.reset();
+...
+Piecon.destroy(); // If you care about performance and use `useCache` option, use it instead of `Piecon.reset();`
```
### Options
@@ -26,7 +28,8 @@ Piecon.setOptions({
color: '#ff0084', // Pie chart color
background: '#bbb', // Empty pie chart color
shadow: '#fff', // Outer ring color
- fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
+ fallback: false, // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
+ useCache: false // If you want to keep animation with long-loop, make it true can give you high-performance
});
```
diff --git a/example/loop.html b/example/loop.html
new file mode 100644
index 0000000..1f536df
--- /dev/null
+++ b/example/loop.html
@@ -0,0 +1,22 @@
+
+
+ Piecon / Pie charts in your favicon!
+
+
Piecon
+
A @lipka production
+
(http://lukaslipka.com)",
"main": "./piecon.js",
diff --git a/piecon.js b/piecon.js
index f606706..974886d 100644
--- a/piecon.js
+++ b/piecon.js
@@ -13,6 +13,7 @@
var originalFavicon = null;
var originalTitle = null;
var canvas = null;
+ var dataUrlCache = {};
var options = {};
var defaults = {
color: '#ff0084',
@@ -74,7 +75,7 @@
var getCanvas = function () {
if (!canvas) {
- canvas = document.createElement("canvas");
+ canvas = document.createElement('canvas');
if (isRetina) {
canvas.width = 32;
canvas.height = 32;
@@ -88,8 +89,15 @@
};
var drawFavicon = function(percentage) {
+
+ if (options.useCache) {
+ if (percentage in dataUrlCache) {
+ return setFaviconTag(dataUrlCache[percentage]);
+ }
+ }
+
var canvas = getCanvas();
- var context = canvas.getContext("2d");
+ var context = canvas.getContext('2d');
percentage = percentage || 0;
@@ -120,7 +128,8 @@
context.fill();
}
- setFaviconTag(canvas.toDataURL());
+ dataUrlCache[percentage] = canvas.toDataURL();
+ setFaviconTag(dataUrlCache[percentage]);
}
};
@@ -177,6 +186,11 @@
}
};
+ Piecon.destroy = function(){
+ Piecon.reset();
+ dataUrlCache = {};
+ };
+
Piecon.setOptions(defaults);
if(typeof define === 'function' && define.amd) {
diff --git a/piecon.min.js b/piecon.min.js
index 37e885e..4777ca8 100644
--- a/piecon.min.js
+++ b/piecon.min.js
@@ -1 +1 @@
-!function(){var t={},e=null,i=null,n=null,o=null,a={},r={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},h=window.devicePixelRatio>1,l=function(){var t=navigator.userAgent.toLowerCase();return function(e){return-1!==t.indexOf(e)}}(),c={ie:l("msie"),chrome:l("chrome"),webkit:l("chrome")||l("safari"),safari:l("safari")&&!l("chrome"),mozilla:l("mozilla")&&!l("chrome")&&!l("safari")},f=function(){for(var t=document.getElementsByTagName("link"),e=0,i=t.length;i>e;e++)if("icon"===t[e].getAttribute("rel")||"shortcut icon"===t[e].getAttribute("rel"))return t[e];return!1},u=function(){for(var t=Array.prototype.slice.call(document.getElementsByTagName("link"),0),e=document.getElementsByTagName("head")[0],i=0,n=t.length;n>i;i++)("icon"===t[i].getAttribute("rel")||"shortcut icon"===t[i].getAttribute("rel"))&&e.removeChild(t[i])},d=function(t){u();var e=document.createElement("link");e.type="image/x-icon",e.rel="icon",e.href=t,document.getElementsByTagName("head")[0].appendChild(e)},g=function(){return o||(o=document.createElement("canvas"),h?(o.width=32,o.height=32):(o.width=16,o.height=16)),o},m=function(t){var e=g(),i=e.getContext("2d");t=t||0,i&&(i.clearRect(0,0,e.width,e.height),i.beginPath(),i.moveTo(e.width/2,e.height/2),i.arc(e.width/2,e.height/2,Math.min(e.width/2,e.height/2),0,2*Math.PI,!1),i.fillStyle=a.shadow,i.fill(),i.beginPath(),i.moveTo(e.width/2,e.height/2),i.arc(e.width/2,e.height/2,Math.min(e.width/2,e.height/2)-2,0,2*Math.PI,!1),i.fillStyle=a.background,i.fill(),t>0&&(i.beginPath(),i.moveTo(e.width/2,e.height/2),i.arc(e.width/2,e.height/2,Math.min(e.width/2,e.height/2)-2,-.5*Math.PI,(-.5+2*t/100)*Math.PI,!1),i.lineTo(e.width/2,e.height/2),i.fillStyle=a.color,i.fill()),d(e.toDataURL()))},s=function(t){document.title=t>0?"("+t+"%) "+n:n};t.setOptions=function(t){a={};for(var e in r)a[e]=t.hasOwnProperty(e)?t[e]:r[e];return this},t.setProgress=function(t){if(n||(n=document.title),!i||!e){var o=f();i=e=o?o.getAttribute("href"):"/favicon.ico"}return!isNaN(parseFloat(t))&&isFinite(t)?!g().getContext||c.ie||c.safari||a.fallback===!0?s(t):("force"===a.fallback&&s(t),m(t)):!1},t.reset=function(){n&&(document.title=n),i&&(e=i,d(e))},t.setOptions(r),"function"==typeof define&&define.amd?define(t):"undefined"!=typeof module?module.exports=t:window.Piecon=t}();
\ No newline at end of file
+!function(){var e={},t=null,i=null,n=null,o=null,r={},a={},h={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},l=window.devicePixelRatio>1,c=function(){var e=navigator.userAgent.toLowerCase();return function(t){return-1!==e.indexOf(t)}}(),f={ie:c("msie"),chrome:c("chrome"),webkit:c("chrome")||c("safari"),safari:c("safari")&&!c("chrome"),mozilla:c("mozilla")&&!c("chrome")&&!c("safari")},u=function(){for(var e=document.getElementsByTagName("link"),t=0,i=e.length;i>t;t++)if("icon"===e[t].getAttribute("rel")||"shortcut icon"===e[t].getAttribute("rel"))return e[t];return!1},d=function(){for(var e=Array.prototype.slice.call(document.getElementsByTagName("link"),0),t=document.getElementsByTagName("head")[0],i=0,n=e.length;n>i;i++)("icon"===e[i].getAttribute("rel")||"shortcut icon"===e[i].getAttribute("rel"))&&t.removeChild(e[i])},g=function(e){d();var t=document.createElement("link");t.type="image/x-icon",t.rel="icon",t.href=e,document.getElementsByTagName("head")[0].appendChild(t)},m=function(){return o||(o=document.createElement("canvas"),l?(o.width=32,o.height=32):(o.width=16,o.height=16)),o},s=function(e){if(a.useCache&&e in r)return g(r[e]);var t=m(),i=t.getContext("2d");e=e||0,i&&(i.clearRect(0,0,t.width,t.height),i.beginPath(),i.moveTo(t.width/2,t.height/2),i.arc(t.width/2,t.height/2,Math.min(t.width/2,t.height/2),0,2*Math.PI,!1),i.fillStyle=a.shadow,i.fill(),i.beginPath(),i.moveTo(t.width/2,t.height/2),i.arc(t.width/2,t.height/2,Math.min(t.width/2,t.height/2)-2,0,2*Math.PI,!1),i.fillStyle=a.background,i.fill(),e>0&&(i.beginPath(),i.moveTo(t.width/2,t.height/2),i.arc(t.width/2,t.height/2,Math.min(t.width/2,t.height/2)-2,-.5*Math.PI,(-.5+2*e/100)*Math.PI,!1),i.lineTo(t.width/2,t.height/2),i.fillStyle=a.color,i.fill()),r[e]=t.toDataURL(),g(r[e]))},w=function(e){e>0?document.title="("+e+"%) "+n:document.title=n};e.setOptions=function(e){a={};for(var t in h)a[t]=e.hasOwnProperty(t)?e[t]:h[t];return this},e.setProgress=function(e){if(n||(n=document.title),!i||!t){var o=u();i=t=o?o.getAttribute("href"):"/favicon.ico"}return!isNaN(parseFloat(e))&&isFinite(e)?!m().getContext||f.ie||f.safari||a.fallback===!0?w(e):("force"===a.fallback&&w(e),s(e)):!1},e.reset=function(){n&&(document.title=n),i&&(t=i,g(t))},e.destroy=function(){e.reset(),r={}},e.setOptions(h),"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module?module.exports=e:window.Piecon=e}();
\ No newline at end of file