Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

. #33

Merged
merged 5 commits into from

4 participants

@powder96

No description provided.

@johannesnagl

Breaks the Tinycon.setBubble() functionality. Always returns "undefined" as string. Please test your code against this commit: df63872

@johannesnagl

ad 378a55b: i used js minifier, so minified output is the same as @tommoor is using. in your code the copyright comments are missing. (try to use http://fmarcia.info/jsmin/test.html with mode aggressive).

@ssokolow

@johannesnagl mishoo/UglifyJS is also good.

It's a Node.js app/library that runs quickly, is generally comparable to Closure for compression effectiveness (sometimes a bit better, sometimes a bit worse) and defaults to preserving the initial copyright comment.

@johannesnagl

@ssokolow thx, i do know uglify works. in my own projects i use yui-compressor as textmate bundle.

in general, i try to use the same syntax/code guidelines/compression tools as the repo owner. i don't think it's useful to compress js with another tool in a pull request, which targets another problem.

so, i would fix the issue in one pull request, and minify the code with the same techniques as the repo owner. and then i would create another issue/pull request with uglify/yui-compressor or what so ever :)

@ssokolow

Fair enough.

I actually prefer to avoid YUI Compressor because not only is it written in Java (which I hate to depend on in a non-Java project) but, according to the Uglify benchmarks, it's measurably less effective than Uglify and Closure.

Of course, I'm the guy who does these, so maybe I'm just obsessed with saving bandwidth:

  • Run all JPEGs through jpegoptim
  • Run all PNGs through optipng -o7 then advpng -z4 and finally pngcrush pngcrush -rem gAMA -rem alla -rem cHRM -rem iCCP -rem sRGB -rem tim
  • Researching efficient ways to minify generated HTML in addition to just making good use of caching and HTTP cache-control headers.
  • Researching ways to minify and to non-manually simplify SVGs.
@ssokolow

@powder96 Thanks. I'll have a look at that when I can spare a moment... and I'll test whether I can trigger a stack overflow with it in Python.

@tommoor
Owner

Hey guys, this looks like a great improvement - is it ready to merge into master?

@tommoor tommoor merged commit b3ecaf3 into tommoor:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 27, 2012
  1. @johannesnagl

    Changed code to allow strings.

    johannesnagl authored Powder96 committed
    should resolve #23
  2. @johannesnagl

    Fixed a bug where setBubble() would return undefined

    johannesnagl authored Powder96 committed
  3. Automatic abbreviation for long numbers

    Powder96 authored
  4. Compressed JS

    Powder96 authored
Commits on Jul 31, 2012
This page is out of date. Refresh to see the latest.
Showing with 37 additions and 26 deletions.
  1. +30 −17 tinycon.js
  2. +7 −9 tinycon.min.js
View
47 tinycon.js
@@ -102,16 +102,15 @@
if (window.console) window.console.log(message);
};
- var drawFavicon = function(num, colour) {
+ var drawFavicon = function(label, colour) {
// fallback to updating the browser title if unsupported
if (!getCanvas().getContext || browser.ie || browser.safari || options.fallback === 'force') {
- return updateTitle(num);
+ return updateTitle(label);
}
var context = getCanvas().getContext("2d");
var colour = colour || '#000000';
- var num = num || 0;
var src = getCurrentFavicon();
faviconImage = new Image();
@@ -124,7 +123,7 @@
context.drawImage(faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, 16, 16);
// draw bubble over the top
- if (num > 0) drawBubble(context, num, colour);
+ if ((label + '').length > 0) drawBubble(context, label, colour);
// refresh tag in page
refreshFavicon();
@@ -139,21 +138,34 @@
faviconImage.src = src;
};
- var updateTitle = function(num) {
+ var updateTitle = function(label) {
if (options.fallback) {
- if (num > 0) {
- document.title = '('+num+') ' + originalTitle;
+ if ((label + '').length > 0) {
+ document.title = '(' + label + ') ' + originalTitle;
} else {
document.title = originalTitle;
}
}
};
- var drawBubble = function(context, num, colour) {
+ var drawBubble = function(context, label, colour) {
+ // automatic abbreviation for long (>2 digits) numbers
+ if(typeof label == 'number' && label > 99) {
+ var metricPrefixes = [
+ ['G', 1000000000],
+ ['M', 1000000],
+ ['k', 1000]
+ ];
+ for(var i = 0; i < metricPrefixes.length; ++i)
+ if(label >= metricPrefixes[i][1]) {
+ label = round(label / metricPrefixes[i][1]) + metricPrefixes[i][0];
+ break;
+ }
+ }
// bubble needs to be larger for double digits
- var len = (num+"").length-1;
+ var len = (label + '').length-1;
var width = options.width + (6*len);
var w = 16-width;
var h = 16-options.height;
@@ -186,13 +198,13 @@
context.lineTo(15,16);
context.stroke();
- // number
+ // label
context.fillStyle = options.colour;
context.textAlign = "right";
context.textBaseline = "top";
// unfortunately webkit/mozilla are a pixel different in text positioning
- context.fillText(num, 15, browser.mozilla ? 7 : 6);
+ context.fillText(label, 15, browser.mozilla ? 7 : 6);
};
var refreshFavicon = function(){
@@ -202,6 +214,10 @@
setFaviconTag(getCanvas().toDataURL());
};
+ var round = function (value, precision) {
+ var number = new Number(value);
+ return number.toFixed(precision);
+ };
// public methods
Tinycon.setOptions = function(custom){
@@ -219,12 +235,9 @@
return this;
};
- Tinycon.setBubble = function(num, colour){
-
- // validate
- if(isNaN(parseFloat(num)) || !isFinite(num)) return log('Bubble must be a number');
-
- drawFavicon(num, colour);
+ Tinycon.setBubble = function(label, colour) {
+ label = label || '';
+ drawFavicon(label, colour);
return this;
};
View
16 tinycon.min.js
@@ -1,9 +1,7 @@
-/*
- * Tinycon - A small library for manipulating the Favicon
- * Tom Moor, http://tommoor.com
- * Copyright (c) 2012 Tom Moor
- * MIT Licensed
- * @version 0.2.6
-*/
-
-(function(){var Tinycon={};var currentFavicon=null;var originalFavicon=null;var originalTitle=document.title;var faviconImage=null;var canvas=null;var options={};var defaults={width:7,height:9,font:'10px arial',colour:'#ffffff',background:'#F03D25',fallback:true};var ua=(function(){var agent=navigator.userAgent.toLowerCase();return function(browser){return agent.indexOf(browser)!==-1}}());var browser={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,len=links.length;i<len;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,len=links.length;i<len;i++){var exists=(typeof(links[i])!=='undefined');if(exists&&links[i].getAttribute('rel')==='icon'){head.removeChild(links[i])}}};var getCurrentFavicon=function(){if(!originalFavicon||!currentFavicon){var tag=getFaviconTag();originalFavicon=currentFavicon=tag?tag.getAttribute('href'):'/favicon.ico'}return currentFavicon};var getCanvas=function(){if(!canvas){canvas=document.createElement("canvas");canvas.width=16;canvas.height=16}return canvas};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 log=function(message){if(window.console)window.console.log(message)};var drawFavicon=function(num,colour){if(!getCanvas().getContext||browser.safari||options.fallback==='force'){return updateTitle(num)}var context=getCanvas().getContext("2d");var colour=colour||'#000000';var num=num||0;var src=getCurrentFavicon();faviconImage=new Image();faviconImage.onload=function(){context.clearRect(0,0,16,16);context.drawImage(faviconImage,0,0,faviconImage.width,faviconImage.height,0,0,16,16);if(num>0)drawBubble(context,num,colour);refreshFavicon()};if(!src.match(/^data/)){faviconImage.crossOrigin='anonymous'}faviconImage.src=src};var updateTitle=function(num){if(options.fallback){if(num>0){document.title='('+num+') '+originalTitle}else{document.title=originalTitle}}};var drawBubble=function(context,num,colour){var len=(num+"").length-1;var width=options.width+(6*len);var w=16-width;var h=16-options.height;context.font=(browser.webkit?'bold ':'')+options.font;context.fillStyle=options.background;context.strokeStyle=options.background;context.lineWidth=1;context.fillRect(w,h,width-1,options.height);context.beginPath();context.moveTo(w-0.5,h+1);context.lineTo(w-0.5,15);context.stroke();context.beginPath();context.moveTo(15.5,h+1);context.lineTo(15.5,15);context.stroke();context.beginPath();context.strokeStyle="rgba(0,0,0,0.3)";context.moveTo(w,16);context.lineTo(15,16);context.stroke();context.fillStyle=options.colour;context.textAlign="right";context.textBaseline="top";context.fillText(num,15,browser.mozilla?7:6)};var refreshFavicon=function(){if(!getCanvas().getContext)return;setFaviconTag(getCanvas().toDataURL())};Tinycon.setOptions=function(custom){options={};for(var key in defaults){options[key]=custom.hasOwnProperty(key)?custom[key]:defaults[key]}return this};Tinycon.setImage=function(url){currentFavicon=url;refreshFavicon();return this};Tinycon.setBubble=function(num,colour){if(isNaN(parseFloat(num))||!isFinite(num))return log('Bubble must be a number');drawFavicon(num,colour);return this};Tinycon.reset=function(){Tinycon.setImage(originalFavicon)};Tinycon.setOptions(defaults);window.Tinycon=Tinycon})();
+/*!
+ Tinycon - A small library for manipulating the Favicon
+ Tom Moor, http://tommoor.com
+ Copyright (c) 2012 Tom Moor
+ MIT Licensed
+ @version 0.2.6
+*/(function(){var Tinycon={};var currentFavicon=null;var originalFavicon=null;var originalTitle=document.title;var faviconImage=null;var canvas=null;var options={};var defaults={width:7,height:9,font:'10px arial',colour:'#ffffff',background:'#F03D25',fallback:true};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,len=links.length;i<len;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,len=links.length;i<len;i++){var exists=(typeof(links[i])!=='undefined');if(exists&&links[i].getAttribute('rel')==='icon'){head.removeChild(links[i]);}}};var getCurrentFavicon=function(){if(!originalFavicon||!currentFavicon){var tag=getFaviconTag();originalFavicon=currentFavicon=tag?tag.getAttribute('href'):'/favicon.ico';}return currentFavicon;};var getCanvas=function(){if(!canvas){canvas=document.createElement("canvas");canvas.width=16;canvas.height=16;}return canvas;};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 log=function(message){if(window.console)window.console.log(message);};var drawFavicon=function(label,colour){if(!getCanvas().getContext||browser.ie||browser.safari||options.fallback==='force'){return updateTitle(label);}var context=getCanvas().getContext("2d");var colour=colour||'#000000';var src=getCurrentFavicon();faviconImage=new Image();faviconImage.onload=function(){context.clearRect(0,0,16,16);context.drawImage(faviconImage,0,0,faviconImage.width,faviconImage.height,0,0,16,16);if((label+'').length>0)drawBubble(context,label,colour);refreshFavicon();};if(!src.match(/^data/)){faviconImage.crossOrigin='anonymous';}faviconImage.src=src;};var updateTitle=function(label){if(options.fallback){if((label+'').length>0){document.title='('+label+') '+originalTitle;}else{document.title=originalTitle;}}};var drawBubble=function(context,label,colour){if(typeof label=='number'&&label>99){var metricPrefixes=[['G',1000000000],['M',1000000],['k',1000]];for(var i=0;i<metricPrefixes.length;++i)if(label>=metricPrefixes[i][1]){label=round(label/metricPrefixes[i][1])+metricPrefixes[i][0];break;}}var len=(label+'').length-1;var width=options.width+(6*len);var w=16-width;var h=16-options.height;context.font=(browser.webkit?'bold ':'')+options.font;context.fillStyle=options.background;context.strokeStyle=options.background;context.lineWidth=1;context.fillRect(w,h,width-1,options.height);context.beginPath();context.moveTo(w-0.5,h+1);context.lineTo(w-0.5,15);context.stroke();context.beginPath();context.moveTo(15.5,h+1);context.lineTo(15.5,15);context.stroke();context.beginPath();context.strokeStyle="rgba(0,0,0,0.3)";context.moveTo(w,16);context.lineTo(15,16);context.stroke();context.fillStyle=options.colour;context.textAlign="right";context.textBaseline="top";context.fillText(label,15,browser.mozilla?7:6);};var refreshFavicon=function(){if(!getCanvas().getContext)return;setFaviconTag(getCanvas().toDataURL());};var round=function(value,precision){var number=new Number(value);return number.toFixed(precision);};Tinycon.setOptions=function(custom){options={};for(var key in defaults){options[key]=custom.hasOwnProperty(key)?custom[key]:defaults[key];}return this;};Tinycon.setImage=function(url){currentFavicon=url;refreshFavicon();return this;};Tinycon.setBubble=function(label,colour){label=label||'';drawFavicon(label,colour);return this;};Tinycon.reset=function(){Tinycon.setImage(originalFavicon);};Tinycon.setOptions(defaults);window.Tinycon=Tinycon;})();
Something went wrong with that request. Please try again.