Initial addition of piecon 0.2

2026-08-09 04:46:00 +10:00 · 2013-03-28 07:54:44 +01:00
parent 619c19bc65
commit dfce9cd80f
3 changed files with 224 additions and 0 deletions
@@ -0,0 +1,193 @@
+//
+// piecon.js
+//
+// https://github.com/lipka/piecon
+//
+// Copyright (c) 2012 Lukas Lipka <lukaslipka@gmail.com>. All rights reserved.
+//
+
+(function(){
+    var Piecon = {};
+
+    var currentFavicon = null;
+    var originalFavicon = null;
+    var originalTitle = null;
+    var canvas = null;
+    var options = {};
+    var defaults = {
+        color: '#ff0084',
+        background: '#bbb',
+        shadow: '#fff',
+        fallback: false
+    };
+
+    var isRetina = window.devicePixelRatio > 1;
+
+    var ua = (function () {
+        var agent = navigator.userAgent.toLowerCase();
+        return function (browser) {
+            return agent.indexOf(browser) !== -1;
+        };
+    }());
+
+    var browser = {
+        ie: ua('msie'),
+        chrome: ua('chrome'),
+        webkit: ua('chrome') || ua('safari'),
+        safari: ua('safari') && !ua('chrome'),
+        mozilla: ua('mozilla') && !ua('chrome') && !ua('safari')
+    };
+
+    var getFaviconTag = function() {
+        var links = document.getElementsByTagName('link');
+
+        for (var i = 0, l = links.length; i < l; i++) {
+            if (links[i].getAttribute('rel') === 'icon' || links[i].getAttribute('rel') === 'shortcut icon') {
+                return links[i];
+            }
+        }
+
+        return false;
+    };
+
+    var removeFaviconTag = function() {
+        var links = document.getElementsByTagName('link');
+        var head = document.getElementsByTagName('head')[0];
+
+        for (var i = 0, l = links.length; i < l; i++) {
+            if (links[i].getAttribute('rel') === 'icon' || links[i].getAttribute('rel') === 'shortcut icon') {
+                head.removeChild(links[i]);
+            }
+        }
+    };
+
+    var setFaviconTag = function(url) {
+        removeFaviconTag();
+
+        var link = document.createElement('link');
+        link.type = 'image/x-icon';
+        link.rel = 'icon';
+        link.href = url;
+
+        document.getElementsByTagName('head')[0].appendChild(link);
+    };
+
+    var getCanvas = function () {
+        if (!canvas) {
+            canvas = document.createElement("canvas");
+            if (isRetina) {
+                canvas.width = 32;
+                canvas.height = 32;
+            } else {
+                canvas.width = 16;
+                canvas.height = 16;
+            }
+        }
+
+        return canvas;
+    };
+
+    var drawFavicon = function(percentage) {
+        var canvas = getCanvas();
+        var context = canvas.getContext("2d");
+        var percentage = percentage || 0;
+        var src = currentFavicon;
+
+        var faviconImage = new Image();
+        faviconImage.onload = function() {
+            if (context) {
+                context.clearRect(0, 0, canvas.width, canvas.height);
+
+                // Draw shadow
+                context.beginPath();
+                context.moveTo(canvas.width / 2, canvas.height / 2);
+                context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2), 0, Math.PI * 2, false);
+                context.fillStyle = options.shadow;
+                context.fill();
+
+                // Draw background
+                context.beginPath();
+                context.moveTo(canvas.width / 2, canvas.height / 2);
+                context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, 0, Math.PI * 2, false);
+                context.fillStyle = options.background;
+                context.fill();
+
+                // Draw pie
+                if (percentage > 0) {
+                    context.beginPath();
+                    context.moveTo(canvas.width / 2, canvas.height / 2);
+                    context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) - 2, (-0.5) * Math.PI, (-0.5 + 2 * percentage / 100) * Math.PI, false);
+                    context.lineTo(canvas.width / 2, canvas.height / 2);
+                    context.fillStyle = options.color;
+                    context.fill();
+                }
+
+                setFaviconTag(canvas.toDataURL());
+            }
+        };
+
+        // allow cross origin resource requests if the image is not a data:uri
+        // as detailed here: https://github.com/mrdoob/three.js/issues/1305
+        if (!src.match(/^data/)) {
+            faviconImage.crossOrigin = 'anonymous';
+        }
+
+        faviconImage.src = src;
+    };
+
+    var updateTitle = function(percentage) {
+        if (percentage > 0) {
+            document.title = '(' + percentage + '%) ' + originalTitle;
+        } else {
+            document.title = originalTitle;
+        }
+    };
+
+    Piecon.setOptions = function(custom) {
+        options = {};
+
+        for (var key in defaults){
+            options[key] = custom.hasOwnProperty(key) ? custom[key] : defaults[key];
+        }
+
+        return this;
+    };
+
+    Piecon.setProgress = function(percentage) {
+        if (!originalTitle) {
+            originalTitle = document.title;
+        }
+
+        if (!originalFavicon || !currentFavicon) {
+            var tag = getFaviconTag();
+            originalFavicon = currentFavicon = tag ? tag.getAttribute('href') : '/favicon.ico';
+        }
+
+        if (!isNaN(parseFloat(percentage)) && isFinite(percentage)) {
+            if (!getCanvas().getContext || browser.ie || browser.safari || options.fallback === true) {
+                // Fallback to updating the browser title if unsupported
+                return updateTitle(percentage);
+            } else if (options.fallback === 'force') {
+                updateTitle(percentage);
+            }
+
+            return drawFavicon(percentage);
+        }
+
+        return false;
+    };
+
+    Piecon.reset = function() {
+        if (originalTitle) {
+            document.title = originalTitle;
+        }
+
+        if (originalFavicon) {
+            currentFavicon = originalFavicon;
+            setFaviconTag(currentFavicon);
+        }
+    };
+
+    Piecon.setOptions(defaults);
+    window.Piecon = Piecon;
+})();
@@ -0,0 +1,5 @@
+(function(){var h={},k=null,m=null,e=null,f=null,g={},n={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},r=1<window.devicePixelRatio,d=function(){var c=navigator.userAgent.toLowerCase();return function(a){return-1!==c.indexOf(a)}}(),s=d("msie");d("chrome");d("chrome")||d("safari");var t=d("safari")&&!d("chrome");d("mozilla")&&!d("chrome")&&d("safari");var p=function(c){for(var a=document.getElementsByTagName("link"),b=document.getElementsByTagName("head")[0],l=0,d=a.length;l<d;l++)("icon"===
+a[l].getAttribute("rel")||"shortcut icon"===a[l].getAttribute("rel"))&&b.removeChild(a[l]);a=document.createElement("link");a.type="image/x-icon";a.rel="icon";a.href=c;document.getElementsByTagName("head")[0].appendChild(a)},q=function(){f||(f=document.createElement("canvas"),r?(f.width=32,f.height=32):(f.width=16,f.height=16));return f},u=function(c){var a=q(),b=a.getContext("2d");c=c||0;var d=k,e=new Image;e.onload=function(){b&&(b.clearRect(0,0,a.width,a.height),b.beginPath(),b.moveTo(a.width/
+2,a.height/2),b.arc(a.width/2,a.height/2,Math.min(a.width/2,a.height/2),0,2*Math.PI,!1),b.fillStyle=g.shadow,b.fill(),b.beginPath(),b.moveTo(a.width/2,a.height/2),b.arc(a.width/2,a.height/2,Math.min(a.width/2,a.height/2)-2,0,2*Math.PI,!1),b.fillStyle=g.background,b.fill(),0<c&&(b.beginPath(),b.moveTo(a.width/2,a.height/2),b.arc(a.width/2,a.height/2,Math.min(a.width/2,a.height/2)-2,-0.5*Math.PI,(-0.5+2*c/100)*Math.PI,!1),b.lineTo(a.width/2,a.height/2),b.fillStyle=g.color,b.fill()),p(a.toDataURL()))};
+d.match(/^data/)||(e.crossOrigin="anonymous");e.src=d};h.setOptions=function(c){g={};for(var a in n)g[a]=c.hasOwnProperty(a)?c[a]:n[a];return this};h.setProgress=function(c){e||(e=document.title);if(!m||!k){var a;a:{a=document.getElementsByTagName("link");for(var b=0,d=a.length;b<d;b++)if("icon"===a[b].getAttribute("rel")||"shortcut icon"===a[b].getAttribute("rel")){a=a[b];break a}a=!1}m=k=a?a.getAttribute("href"):"/favicon.ico"}if(!isNaN(parseFloat(c))&&isFinite(c)){if(!q().getContext||s||t||!0===
+g.fallback){document.title=0<c?"("+c+"%) "+e:e;return}"force"===g.fallback&&(document.title=0<c?"("+c+"%) "+e:e);return u(c)}return!1};h.reset=function(){e&&(document.title=e);m&&(k=m,p(k))};h.setOptions(n);window.Piecon=h})();
@@ -0,0 +1,26 @@
+{
+    "name": "piecon",
+    "filename": "piecon.min.js",
+    "version": "0.2",
+    "description": "A tiny javascript library for dynamically generating progress pie charts in your favicons.",
+    "homepage": "https://github.com/lipka/piecon",
+    "keywords": [
+       "favicon",
+       "piecon",
+       "progress",
+       "chart"
+   ],
+   "maintainers": [
+       {
+           "name": "Lukas Lipka",
+           "web": "http://lipka.github.com/"
+       }
+   ],
+   "repositories": [
+       {
+           "type": "github",
+           "url": "https://github.com/lipka/piecon"
+       }
+   ]
+
+}