Static data urls for images
in
3 posts,
2 voices
Junk Blocker
Scriptwright
  |
Thanks for a very useful script, elzr. Could you please convert it to use embedded static data urls for images ( e.g. 'background-image', 'url(data:image/gif;base64,base64_encoded_image_data_goes_here')' ) so that multiple trips to your site for images are not needed? It will save on everybody's bandwidth and our privacy. Thanks
|
dSorrow
Scriptwright
 |
+1 to embedded images, also `elzr.com` is down at the time of this post. |
Junk Blocker
Scriptwright
 |
Well, I modified it right after posting this but was hoping the author would implement this. Since it's been a year and a half with no action on that front, I am posting the version I made.
// ==UserScript==
// @name Backbars on social link-sites
// @namespace http://elzr.com/posts/backbars-on-social-link-sites/
// @description Turn the headlines and comments of social link-sites (reddit, delicious, digg...) into ambient histograms.
// @include http://www.reddit.com*
// @include http://digg.com*
// @include http://delicious.com*
// @include http://news.ycombinator.com*
// @include http://news.usethesource.com*
// @include http://stackoverflow.com*
// @include http://www.metafilter.com*
// @include http://hackerne.ws*
// @include http://news.ycombinator.org*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @author Eli Parra elzr.com
// ==/UserScript==
//tools
jQuery.fn.reduce = function(fn, ini) {
var total = ini;
this.each(function() { total = fn.call(this, total); });
return total;
};
jQuery.log = function(msg) {
console.log(msg);
return msg;
};
$(function() {
// http://elzr.com/images/else/backbar-de-thin-long.gif
var de_thin = 'url(data:image/gif;base64,R0lGODlhIAoUAIAAAN7e3gAAACH5BAAAAAAALAAAAAAgChQAAAL/hI+py+0Po5y02ouz3rz7D4bi' +
'SJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmM' +
'TqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpK' +
'Wmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d' +
'7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJ' +
'FCtavIgxo8aNMhw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSL' +
'jioAADs=)';
// http://elzr.com/images/else/backbar-eee-long.gif
var eee = 'url(data:image/gif;base64,R0lGODlhIArIAIAAAO7u7gAAACH5BAAAAAAALAAAAAAgCsgAAAL/hI+py+0Po5y02ouz3rz7D4bi' +
'SJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmM' +
'TqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpK' +
'Wmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d' +
'7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJ' +
'FCtavIgxo8aN/xw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSL' +
'Gj2KNKnSpUybOn0KNarUqVSrWr2KNavWrVy7ev0KNqzYsWTLmj2LNq3atWzbun0LN67cuXTr2r2L' +
'N6/evXz7+v0LOLDgwYQLGz6MOLHixYwbO34MObLkyZQrW76MObPmzZw7e/4MOrTo0aRLmz6NOrXq' +
'1axbu34NO7bs2bRr276NO7fu3bx7+/4NPLjw4cSLGz+OPLny5cybO38OPbr06dSrW7+OPbv27dy7' +
'e/8OPrz48eTLmz+PPr369ezbu38PP778+fTr27+PP7/+/fz7+///D2CAAg5IYIEGHohgggouyGCD' +
'Dj4IYYQSTkhhhRZeiGGGGm7IYYcefghiiCKOSGKJJp6IYooqrshiiy6+CGOMMs5IY4023ohjjjru' +
'yGOPPv4IZJBCDklkkUYeiWSSSi7JZJNOPglllFJOSWWVVl6JZZZabslll15+CWaYYo5JZplmnolm' +
'mmquyWabbr4JZ5xyzklnnXbeiWeeeu7JZ59+/glooIIOSmihhh6KaKKKLspoo44+Cmmkkk5KaaWW' +
'Xopppppuymmnnn4Kaqiijkpqqaaeimqqqq7KaquuvgprrLLOSmuttt6Ka6667sprr77+Cmywwg5L' +
'bLHGHotsssr/Lstss84+C2200k5LbbXWXottttpuy2233n4Lbrjijktuueaei2666q7Lbrvuvgtv' +
'vPLOS2+99t6Lb7767stvv/7+C3DAAg9McMEGH4xwwgovzHDDDj8MccQST0xxxRZfjHHGGm/Mccce' +
'fwxyyCKPTHLJJp+Mcsoqr8xyyy6/DHPMMs9Mc80234xzzjrvzHPPPv8MdNBCD0100UYfjXTSSi/N' +
'dNNOPw111FJPTXXVVl+NddZab811115/DXbYYo9Ndtlmn4122mqvzXbbbr8Nd9xyz0133XbfjXfe' +
'eu/Nd99+/w144IIPTnjhhh+OeOKKL854444/Dnnkkk9OeeWWhF+Oeeaab855555/Dnrooo9Oeumm' +
'n4566qqvznrrrr8Oe+yyz0577bbfjnvuuu/Oe+++/w588MIPT3zxxh+PfPLKL898884/D3300k9P' +
'ffXWX4999tpvz3333n8Pfvjij09++eafj3766q/Pfvvuvw9//PLPT3/99t+Pf/76789//+8WAAA7)';
// http://elzr.com/images/else/backbar-e-thin-top3x-long.gif
var e_thin_top3x = 'url(data:image/gif;base64,R0lGODlhIAoXAIABAO7u7v///yH5BAEAAAEALAAAAAAgChcAAAL/jI+py+0Po5y02ouz3rz7D4bi' +
'SJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmM' +
'TqvX7Lb7DY/L5/S6/Y7P6/f8vv8P6AEwSFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpK' +
'Wmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d' +
'7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJ' +
'FCtavIgxo8aNvxw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSL' +
'Gj2KNKnSpUybOn0KNarUqVSrWr2KNavWrVy7ev0KNqzYsWTLmj2LNq3atWzbun0LN67cuXTr2r2L' +
'N6/evXz7+v0LOLDgwYQLGz6MOLHixYwbO34MObLkyZQrW76MObPmzZw7e/4MOrTo0aRLmz6NOrXq' +
'1axbu34NO7bs2bRr276NO7fu3bx7+/4NPLhwkAUAADs=)';
// http://elzr.com/images/else/backbar-004D73-long.gif
var zero_zero_4d73 = 'url(data:image/gif;base64,R0lGODlhIArIAIAAAABNcwAAACH5BAAAAAAALAAAAAAgCsgAAAL/hI+py+0Po5y02ouz3rz7D4bi' +
'SJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmM' +
'TqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpK' +
'Wmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d' +
'7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJ' +
'FCtavIgxo8aN/xw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSL' +
'Gj2KNKnSpUybOn0KNarUqVSrWr2KNavWrVy7ev0KNqzYsWTLmj2LNq3atWzbun0LN67cuXTr2r2L' +
'N6/evXz7+v0LOLDgwYQLGz6MOLHixYwbO34MObLkyZQrW76MObPmzZw7e/4MOrTo0aRLmz6NOrXq' +
'1axbu34NO7bs2bRr276NO7fu3bx7+/4NPLjw4cSLGz+OPLny5cybO38OPbr06dSrW7+OPbv27dy7' +
'e/8OPrz48eTLmz+PPr369ezbu38PP778+fTr27+PP7/+/fz7+///D2CAAg5IYIEGHohgggouyGCD' +
'Dj4IYYQSTkhhhRZeiGGGGm7IYYcefghiiCKOSGKJJp6IYooqrshiiy6+CGOMMs5IY4023ohjjjru' +
'yGOPPv4IZJBCDklkkUYeiWSSSi7JZJNOPglllFJOSWWVVl6JZZZabslll15+CWaYYo5JZplmnolm' +
'mmquyWabbr4JZ5xyzklnnXbeiWeeeu7JZ59+/glooIIOSmihhh6KaKKKLspoo44+Cmmkkk5KaaWW' +
'Xopppppuymmnnn4Kaqiijkpqqaaeimqqqq7KaquuvgprrLLOSmuttt6Ka6667sprr77+Cmywwg5L' +
'bLHGHotsssr/Lstss84+C2200k5LbbXWXottttpuy2233n4Lbrjijktuueaei2666q7Lbrvuvgtv' +
'vPLOS2+99t6Lb7767stvv/7+C3DAAg9McMEGH4xwwgovzHDDDj8MccQST0xxxRZfjHHGGm/Mccce' +
'fwxyyCKPTHLJJp+Mcsoqr8xyyy6/DHPMMs9Mc80234xzzjrvzHPPPv8MdNBCD0100UYfjXTSSi/N' +
'dNNOPw111FJPTXXVVl+NddZab811115/DXbYYo9Ndtlmn4122mqvzXbbbr8Nd9xyz0133XbfjXfe' +
'eu/Nd99+/w144IIPTnjhhh+OeOKKL854444/Dnnkkk9OeeWWhF+Oeeaab855555/Dnrooo9Oeumm' +
'n4566qqvznrrrr8Oe+yyz0577bbfjnvuuu/Oe+++/w588MIPT3zxxh+PfPLKL898884/D3300k9P' +
'ffXWX4999tpvz3333n8Pfvjij09++eafj3766q/Pfvvuvw9//PLPT3/99t+Pf/76789//+8WAAA7)';
// http://elzr.com/images/else/backbar-e0eaf1-thin-long.gif
var e0eaf1_thin = 'url(data:image/gif;base64,R0lGODlhIAoVAIAAAD5tjuDq8SH5BAAAAAAALAAAAAAgChUAAAL/jI+py+0Po5y02ouz3rz7D4bi' +
'SJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmM' +
'TqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpK' +
'Wmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d' +
'7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJ' +
'FCtavIgxo8aNgxw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSL' +
'jgKANKnSpUybOn0KNarUqVSrWr2KNavWrVy7ev0KNqzYsWTLmj2LNq3atWzbun0LN67cuXTr2r2L' +
'N6/evXz7+v0LOLDgwYQLGz6MOLHixYwbqy0AADs=)';
function padding(pad) {return function(){ $(this).css('padding', pad||'2px 3px'); }};
function bkg(color) {
if (!color || color == 'eee') {
return function() {$(this).css('background-image', eee);};
} else if (color == 'e-thin-top3px') {
return function(){$(this).css('background-image', e_thin_top3x); };
} else if (color == '004D73') {
return function(){$(this).css('background-image', zero_zero_4d73);};
} else if (color == 'de-thin') {
return function(){$(this).css('background-image', de_thin);};
} else if (color == 'e0eaf1-thin') {
return function(){$(this).css('background-image', e0eaf1_thin);};
} else {
return function(){
$(this).css('background-image','url(http://elzr.com/images/else/backbar-'+color+'-long.gif)')
$.log('backbar color ' + color);
};
}
};
//action
function backbar(root, items, scores, fn) {
var root = $(root), items = items ? root.find(items) : root, scores = scores ? root.find(scores) : items, allSame = true;
//$.log(items.length+'s'+scores.length)
if((items.length <= 1) || (items.length != scores.length)) return;
//items = items.slice(0,200); scores = scores.slice(0,200); //for performance reasons, only 200 backbars will be drawn
scores = scores.map(function(){ return parseFloat($(this).text())||0 });
var top = $(scores).reduce(function(top) {if(allSame) {allSame=scores[0]==this}; return Math.max(top,this)}, 0);
if(allSame) return;
var widest = items.reduce(function(widest) {
$(this).css('background-image', de_thin);
fn && fn.call(this); //hitching a ride in the loop to execute before width is measured
return Math.max(widest,$(this).innerWidth())
}, 0);
items.each(function(i) {
$(this).css('background-repeat', 'no-repeat'). css('background-position', Math.ceil(-2592+scores[i]*widest/top)+'px 0');
});
}
var work = function(ctx) {
var context = ctx || document;
var here = window.location+'', reuse;
if(here.match(/^http:\/\/www\.reddit\.com\/.*/)) { //Reddit
backbar('.link', 'p.title', '.score:eq(1)', padding('0 0 0 5px')); //headline titles
backbar('.link .flat-list', 'li:eq(0)', false, bkg()); //headline comment totals
backbar('.comment', 'p.tagline:eq(0)', '.score:eq(1)', padding()); //comment author
} else if(here.match(/^http:\/\/digg\.com\/.*/)) { //Digg
backbar('.main > .news-summary', 'h3', '.digg-count', padding()); //headline titles
backbar('.main .related-stories:eq(0) .news-summary', 'h3 a:first', '.digg-count', (reuse = function() { //keyword-related headline titles
$(this).css('padding', '2px 3px').css('margin-left','-3px').css('display', 'block').parent().siblings('ul').css('margin-top','3px'); }));
backbar('.main .related-stories:eq(1) .news-summary', 'h3 a:first', '.digg-count', reuse); //source-related headline titles
backbar('.main > .news-summary .news-details a.comments', false, false, bkg('e-thin-top3px')); //headline comment totals
backbar('.comment .l0', '.c-body', '.c-diggs-count:eq(0) em', function() { //comment body
bkg('de-thin').call(this); padding('0 0 0 3px').call(this); });
backbar('.sidebar #topten-list .news-summary', 'h3', '.digg-count', padding('3px')); //top10 headline titles
backbar('.sidebar #story-list .news-summary', 'h3', '.digg-count', padding('3px')); //transitivity-related headline titles
} else if(here.match(/^http:\/\/news\.(ycombinator|usethesource)\.((com)|(org))\/.*/) || here.match(/^http:\/\/hackerne\.ws\/.*/)) { //Hacker News and Use The Source
if(here.match(/leaders$/)) {
backbar('tr:empty + tr table tr:has(td)', 'td:last', false); //headline titles
} else if(here.match(/item\?.*$/)) {
backbar('br + table tr table tr:has(td)', 'td.default div:first', '.comhead span:first', function() {$(this).css('padding','2px 3px').parent().css('width','100%')}); //comment titles
} else {
backbar('tr:empty + tr table tr:has(td)', 'td.title:eq(1)', 'td.subtext span:first', padding()); //headline titles
backbar('tr:empty + tr table tr:has(td)', 'td.subtext a:last', false, function() { $(this).css('padding-left','3px').parent().css('padding-top','3px')}); //headline comment totals
}
} else if(here.match(/^http:\/\/delicious\.com\/.*/)) { //Delicious
backbar('.bookmark .data:has(div.savers)', 'h4', '.delNavCount', padding('2px 5px')); //headline titles
backbar('#top-tags .m', false, 'em'); //tag counts
backbar('#user-tags .m', false, 'em'); //tag counts
backbar('#related-tags .m', false, 'em'); //tag counts
} else if(here.match(/^http:\/\/stackoverflow\.com\/.*/)) { //Stack Overflow
function massage(items, className) {
$(items).each(function(){
$(this).after('<span style="display:none" class="'+className+'">'+ $(this).text().replace(/(\d+)k/,'$1000').replace(/\.(\d)0/,'$1').replace(/[\,\×]/,'') +'</span>')
});
}
massage('.question-summary .views .mini-counts', 'viewscore');
backbar('body', '.question-summary .summary', '.question-summary .viewscore', padding('2px 5px')); //question titles
backbar('#answers-table', '.answer-link a', '.answer-votes', function() {$(this).css('display','block').css('padding','2px 5px')}); //answers table
backbar('body', 'div.post-text', 'td.votecell span.vote-count-post', function() { //comment titles
bkg('de-thin').call(this); padding('0 0 0 3px').call(this);});
$('.comments').each(function(i) { //nested comment posts
backbar('.comments:eq('+i+')', '.comment-actions + .comment-text', '.comment-score span', bkg('e-thin-top3px'))
});
massage('#user-list .reputation-score', 'reputationscore');
backbar('#user-list', '.user-details', '.reputationscore', padding('0 0 0 3px')); //user karma in table of users
massage('#questions .views', 'viewscorenested');
backbar('#questions', '.summary h3', '.viewscorenested', padding('3px 5px')); //question titles with nested scores
massage('.user-list .reputation-score', 'reputationscore');
backbar('body', '.user-list', '.reputationscore'); //user karma
if($('.item-multiplier').length>0) {
//set the ground
$('.post-tag + .item-multiplier').each(function() {$(this).prev().before('<div class="backbar-tag"></div>')});
$('.backbar-tag + .post-tag').each(function() {$(this).prev().append($(this))});
$('.backbar-tag + .item-multiplier').each(function() {$(this).prev().append($(this))});
$('.backbar-tag + br').remove();
$('.backbar-tag .post-tag:normal').css('background-color','inherit').css('border','0').css('color','#3e6d8e');
$('.backbar-tag').css('margin-right','5px');
massage('.item-multiplier', 'itemmultiplier');
backbar('#mainbar', 'td:has(.itemmultiplier) + td', '.itemmultiplier', padding('0 0 0 5px')); //badges (column to the right)
backbar('body', '.backbar-tag', '.backbar-tag .itemmultiplier', bkg('e0eaf1-thin')); //tags
}
} else if(here.match(/^http:\/\/www\.metafilter\.com\/.*/)) { //MetaFilter
backbar('#page .smallcopy:has(span a), #page .smallcopy:contains([)', false, 'span a, a:eq(2)', function(){
bkg('004D73').call(this);
$(this).css('display','block').css('width','100%').css('margin-top', '2px').css('padding','2px 3px')});
$('div.copy br + .smallcopy a + a + a').remove(); //OK, sorry, but this link is trivial yet totally messes up the following. For some reason, nth-child doesn't work inside GreaseMonkey
backbar('div.copy br + .smallcopy', false, 'a + a', function(){
bkg('004D73').call(this);
$(this).css('display','block').css('width','100%').css('margin-top', '2px').css('padding','2px 3px')});
}
};
// AutoPagerize/Pagerization support
function addFilter(filter, i) {
i = i || 4;
if (window.AutoPagerize && window.AutoPagerize.addFilter) {
window.AutoPagerize.addFilter(filter);
} else if (i > 1) {
setTimeout(arguments.callee, 1000, filter, i - 1);
}
}
work();
addFilter(work);
});
|
