git add stuff
This commit is contained in:
Alan
56
simpla/design/js/piecon/README.md
Normal file
56
simpla/design/js/piecon/README.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# Piecon
|
||||
|
||||
Pie charts in your favicon!
|
||||
|
||||
A tiny javascript library for dynamically generating progress pie charts in your favicons.
|
||||
|
||||
<p align="center"><img src="https://github.com/lipka/piecon/blob/master/example/screenshot.png?raw=true"></p>
|
||||
|
||||
See the [live demo here](http://lipka.github.com/piecon/).
|
||||
|
||||
## Documentation
|
||||
|
||||
### Basic usage
|
||||
|
||||
```javascript
|
||||
Piecon.setProgress(12);
|
||||
Piecon.setProgress(25);
|
||||
...
|
||||
Piecon.reset();
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
```javascript
|
||||
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')
|
||||
});
|
||||
```
|
||||
|
||||
### Browser Support
|
||||
|
||||
Piecon has been tested to work completely in the following browsers (older versions may be supported, but haven't been tested):
|
||||
|
||||
* Chrome 15+
|
||||
* Firefox 9+
|
||||
* Opera 11+
|
||||
|
||||
Currently the library falls back to title updates for the following browsers:
|
||||
|
||||
* Internet Explorer 9
|
||||
* Safari 5+
|
||||
|
||||
## License
|
||||
|
||||
Licensed under the [MIT license](http://en.wikipedia.org/wiki/MIT_License).
|
||||
|
||||
## Credits
|
||||
|
||||
Piecon was inspired by [Tinycon](https://github.com/tommoor/tinycon).
|
||||
|
||||
## An Lipka project
|
||||
|
||||
Made by yours truly - [@lipka](https://github.com/lipka).
|
||||
BIN
simpla/design/js/piecon/example/favicon.ico
Normal file
BIN
simpla/design/js/piecon/example/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
21
simpla/design/js/piecon/example/index.html
Normal file
21
simpla/design/js/piecon/example/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<title>Piecon / Pie charts in your favicon!</title>
|
||||
<script src="piecon.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
var count = 0;
|
||||
Piecon.setOptions({fallback: 'force'});
|
||||
var i = setInterval(function(){
|
||||
if (++count > 100) { Piecon.reset(); clearInterval(i); return false; }
|
||||
Piecon.setProgress(count);
|
||||
}, 250);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1>Piecon</h1>
|
||||
<p>A <a href="https://github.com/lipka">@lipka</a> production</p>
|
||||
</div>
|
||||
</body>
|
||||
188
simpla/design/js/piecon/example/piecon.js
Normal file
188
simpla/design/js/piecon/example/piecon.js
Normal file
@@ -0,0 +1,188 @@
|
||||
//
|
||||
// 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 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') || '').match(/\bicon\b/)) {
|
||||
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 (typeof(links[i]) !== 'undefined' && links[i].getAttribute('rel') === '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");
|
||||
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() {
|
||||
context.clearRect(0, 0, 16, 16);
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
if (context) {
|
||||
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 (options.fallback) {
|
||||
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;
|
||||
})();
|
||||
BIN
simpla/design/js/piecon/example/screenshot.png
Normal file
BIN
simpla/design/js/piecon/example/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
188
simpla/design/js/piecon/piecon.js
Normal file
188
simpla/design/js/piecon/piecon.js
Normal file
@@ -0,0 +1,188 @@
|
||||
//
|
||||
// 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 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') || '').match(/\bicon\b/)) {
|
||||
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 (typeof(links[i]) !== 'undefined' && links[i].getAttribute('rel') === '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");
|
||||
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() {
|
||||
context.clearRect(0, 0, 16, 16);
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
if (context) {
|
||||
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 (options.fallback) {
|
||||
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;
|
||||
})();
|
||||
5
simpla/design/js/piecon/piecon.min.js
vendored
Normal file
5
simpla/design/js/piecon/piecon.min.js
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
(function(){var i={},j=null,k=null,h=null,g=null,f={},l={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},e,p=navigator.userAgent.toLowerCase();e=function(c){return-1!==p.indexOf(c)};var q=e("msie");e("chrome");e("chrome")||e("safari");var r=e("safari")&&!e("chrome");e("mozilla")&&!e("chrome")&&e("safari");var m=function(c){for(var a=document.getElementsByTagName("link"),e=document.getElementsByTagName("head")[0],f=0,h=a.length;f<h;f++)"undefined"!==typeof a[f]&&"icon"===a[f].getAttribute("rel")&&
|
||||
e.removeChild(a[f]);a=document.createElement("link");a.type="image/x-icon";a.rel="icon";a.href=c;document.getElementsByTagName("head")[0].appendChild(a)},n=function(){g||(g=document.createElement("canvas"),g.width=16,g.height=16);return g},o=function(c){f.fallback&&(document.title=0<c?"("+c+"%) "+h:h)};i.setOptions=function(c){f={};for(var a in l)f[a]=c.hasOwnProperty(a)?c[a]:l[a];return this};i.setProgress=function(c){h||(h=document.title);if(!k||!j){var a;a:{a=document.getElementsByTagName("link");
|
||||
for(var e=0,i=a.length;e<i;e++)if((a[e].getAttribute("rel")||"").match(/\bicon\b/)){a=a[e];break a}a=!1}k=j=a?a.getAttribute("href"):"/favicon.ico"}if(!isNaN(parseFloat(c))&&isFinite(c)){if(!n().getContext||q||r||!0==f.fallback)return o(c);"force"===f.fallback&&o(c);var g=c,b=n(),d=b.getContext("2d"),g=g||0,c=j;a=new Image;a.onload=function(){d.clearRect(0,0,16,16);d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2),0,Math.PI*2,false);d.fillStyle=
|
||||
f.shadow;d.fill();d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,0,Math.PI*2,false);d.fillStyle=f.background;d.fill();if(g>0){d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,-0.5*Math.PI,(-0.5+2*g/100)*Math.PI,false);d.lineTo(b.width/2,b.height/2);d.fillStyle=f.color;d.fill()}d&&m(b.toDataURL())};c.match(/^data/)||(a.crossOrigin="anonymous");a.src=c}else return!1};i.reset=function(){h&&
|
||||
(document.title=h);k&&(j=k,m(j))};i.setOptions(l);window.Piecon=i})();
|
||||
Reference in New Issue
Block a user