Skip to content

Commit fc6cb27

Browse files
fatbattkfatbattk
committed
0.1.4
- OOP. - better text sanitization. - github api responses cached.
1 parent 23281e6 commit fc6cb27

File tree

2 files changed

+103
-77
lines changed

2 files changed

+103
-77
lines changed

‎js/jquery.gvg.js‎

Lines changed: 101 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,116 @@
1-
// gitvsgit jquery widget v 0.1.3 (http://git.io/XIauew)
1+
// gitvsgit jquery widget v 0.1.4 (http://git.io/XIauew)
22
// by @fatbattk
33

44
;(function($){
5-
var $gvgs = $('div.gvg');
6-
if($gvgs.length)
7-
{
8-
var gvg_table_class = 'gvg-ring',
9-
footer = 'made with /<a href="http://git.io/XIauew" target="_blank">gitvsgit</a>',
10-
i = 0;
11-
12-
$('head').prepend('<style type="text/css">'
13-
+'div.gvg{background-color:#EEE;border-radius:3px;padding:3px;width:500px;}'
14-
+'table.'+ gvg_table_class +'{border:1px solid #CCC;font:13px Helvetica,arial,sans-serif;width:100%;}'
15-
+'.'+ gvg_table_class +' td{background-color:#FFF;font-size:12px;padding:6px;}'
16-
+'.'+ gvg_table_class +' .hilite td{background-color:#E6F1F6;}'
17-
+'.'+ gvg_table_class +' thead th,.'+ gvg_table_class +' tfoot th{background-color:#FAFAFA;color:#555;}'
18-
+'.'+ gvg_table_class +' thead th{background-image:-moz-linear-gradient(top,#FAFAFA,#EAEAEA);background-image:-webkit-linear-gradient(top,#FAFAFA,#EAEAEA);background-image:-ms-linear-gradient(top,#FAFAFA,#EAEAEA);background-image:linear-gradient(top,#FAFAFA,#EAEAEA);background-repeat:repeat-x;border-bottom:1px solid #D8D8D8;font-size:13px;padding:4px;}'
19-
+'.'+ gvg_table_class +' tfoot th{font-size:10px;padding:2px 4px;text-align:right;}'
20-
+'</style>');
21-
22-
$gvgs.each(function(idx){
23-
var $gvg = $(this),
24-
$repos = $gvg.data('repos');
25-
26-
if($repos.length>7)
27-
{
28-
var repo = $repos.split(','),
29-
repo_count = repo.length,
30-
repo_highlights = [],
31-
gvgaj = [];
32-
33-
if($gvg.data('highlight'))
34-
{
35-
repo_highlights = $gvg.data('highlight').split(',');
5+
$.fn.gvg = function(){
6+
var table_class = 'gvg-ring', // class name of generated table.
7+
header_html = '<thead><tr><th>Repos</th><th>Created</th><th>Updated</th><th>Stars</th><th>Forks</th><th>Open Issues</th></tr></thead>', // html added to table header.
8+
footer_html = '<tfoot><tr><th colspan="6">made with /<a href="//git.io/XIauew" target="_blank">gitvsgit</a></th></tr></tfoot>', // html added to table footer.
9+
api_cache = {}, // cache of api responses.
10+
addCSS = function(){
11+
$('head').prepend('<style type="text/css">'+
12+
'div.gvg{background-color:#eee;border-radius:3px;padding:3px;width:500px;}'+
13+
'table.'+ table_class +'{border:1px solid #ccc;font:13px Helvetica,arial,sans-serif;width:100%;}'+
14+
'.'+ table_class +' td{background-color:#fff;font-size:12px;padding:6px;}'+
15+
'.'+ table_class +' .hilite td{background-color:#e6f1f6;}'+
16+
'.'+ table_class +' thead th,.'+ table_class +' tfoot th{background-color:#fafafa;color:#555;}'+
17+
'.'+ table_class +' thead th{background-image:-moz-linear-gradient(top,#fafafa,#eaeaea);background-image:-webkit-linear-gradient(top,#fafafa,#eaeaea);background-image:-ms-linear-gradient(top,#fafafa,#eaeaea);background-image:linear-gradient(top,#fafafa,#eaeaea);background-repeat:repeat-x;border-bottom:1px solid #d8d8d8;font-size:13px;padding:4px;}'+
18+
'.'+ table_class +' tfoot th{font-size:10px;padding:2px 4px;text-align:right;}'+
19+
'</style>');
20+
},
21+
validRepo = function(str){
22+
if(str.length>3 && str.indexOf('/')!==-1){
23+
return true;
3624
}
37-
38-
for(i=0; i<repo_count; i++)
39-
{
40-
if(repo[i].length>3)
41-
{
42-
gvgaj[i] = $.getJSON('https://api.github.com/repos/'+ repo[i] +'?callback=?');
43-
}
25+
return false;
26+
},
27+
getHilites = function(obj){
28+
if(obj.data('highlight')){
29+
return obj.data('highlight').split(',');
4430
}
31+
return [];
32+
},
33+
doAjax = function(url){
34+
if(typeof api_cache[url]==='undefined'){
35+
api_cache[url] = $.getJSON(url);
36+
}
37+
return api_cache[url];
38+
},
39+
// http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/
40+
htmlEntities = function(str){
41+
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
42+
},
43+
formatDate = function(date){
44+
return new Date(date).toDateString().replace(/[a-z]+ (.*?)/i,'');
45+
},
46+
formatNumber = function(num){
47+
return String(num).replace(/\B(?=(\d{3})+(?!\d))/g,',');
48+
},
49+
buildTableBody = function(arg,hilites,rcount){
50+
var response = arg[0],
51+
table_body = '',
52+
d = {};
4553

46-
$.when.apply(this,gvgaj).done(function(){
47-
var gvgtbl = '<table class="'+ gvg_table_class +'" id="'+ gvg_table_class +'-'+ idx +'" border="0" cellspacing="1" cellpadding="2"><thead><tr><th>Repos</th><th>Created</th><th>Updated</th><th>Stars</th><th>Forks</th><th>Open Issues</th></tr></thead>';
48-
if(footer.length)
49-
{
50-
gvgtbl += '<tfoot><tr><th colspan="6">'+ footer +'</th></tr></tfoot>';
54+
for(var i=0; i<rcount; i++){
55+
if(rcount>1){
56+
response = arg[i][0];
5157
}
52-
gvgtbl += '<tbody>';
58+
if(response){
59+
d = response.data;
5360

54-
var gvga,gvgd;
55-
for(i=0; i<repo_count; i++)
56-
{
57-
if(repo_count>1)
58-
{
59-
gvga = arguments[i][0];
60-
}
61-
else
62-
{
63-
gvga = arguments[0];
64-
}
65-
if(gvga)
66-
{
67-
gvgd = gvga.data;
68-
if(gvga.meta.status===200 || gvga.meta.status===304)
69-
{
70-
gvgtbl += '<tr';
71-
if(repo_highlights.length>0 && $.inArray(gvgd.full_name,repo_highlights)>-1)
72-
{
73-
gvgtbl += ' class="hilite"';
74-
}
75-
gvgtbl += '><td title="'+ gvgd.description +'"><a href="'+ gvgd.html_url +'" target="_blank">'+ gvgd.full_name +'</a></td><td>'+ new Date(gvgd.created_at).toDateString().replace(/[a-z]+ (.*?)/i,'') +'</td><td>'+ new Date(gvgd.updated_at).toDateString().replace(/[a-z]+ (.*?)/i,'') +'</td><td align="right">'+ gvgd.watchers_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',') +'</td><td align="right">'+ gvgd.forks_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',') +'</td><td align="right">'+ gvgd.open_issues_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g,',') +'</td></tr>';
76-
}
77-
else if(gvga.meta.status===403)
78-
{
79-
gvgtbl += '<tr><td colspan="6" align="center">'+ gvgd.message +'</td></tr>';
80-
break;
61+
// success.
62+
if(response.meta.status===200 || response.meta.status===304){
63+
table_body += '<tr';
64+
if(hilites.length>0 && $.inArray(d.full_name,hilites)>-1){
65+
table_body += ' class="hilite"';
8166
}
67+
table_body += '><td title="'+ htmlEntities(d.description) +'"><a href="'+ d.html_url +'" target="_blank">'+ htmlEntities(d.full_name) +'</a></td><td>'+ formatDate(d.created_at) +'</td><td>'+ formatDate(d.updated_at) +'</td><td align="right">'+ formatNumber(d.watchers_count) +'</td><td align="right">'+ formatNumber(d.forks_count) +'</td><td align="right">'+ formatNumber(d.open_issues_count) +'</td></tr>';
68+
}
69+
// fail.
70+
else if(response.meta.status===403){
71+
table_body += '<tr><td colspan="6" align="center">'+ htmlEntities(d.message) +'</td></tr>';
8272
}
8373
}
74+
}
75+
76+
return table_body;
77+
},
78+
addTable = function(obj,id,body){
79+
obj.html('<table class="'+ table_class +'" id="'+ table_class +'-'+ id +'" border="0" cellspacing="1" cellpadding="2">'+ header_html + footer_html +'<tbody>'+ body +'</tbody></table>');
80+
};
81+
82+
addCSS();
83+
// loop each <div.gvg>.
84+
return this.each(function(idx){
85+
var $gvg = $(this), // selected dom.
86+
$repos = $gvg.data('repos'); // csv of repos.
87+
88+
if(!validRepo($repos)){
89+
return;
90+
}
8491

85-
$gvg.html(gvgtbl +'</tbody></table>');
86-
});
92+
var repo = $repos.split(','), // array of repos.
93+
repo_count = repo.length, // number of repo.
94+
repo_highlights = getHilites($gvg), // array of repos that need "hilite" class.
95+
xhr = []; // array of XMLHTTPRequest objects.
96+
97+
// loop each <data-repos=>.
98+
for(var i=0; i<repo_count; i++){
99+
if(validRepo(repo[i])){
100+
// https://developer.github.com/v3/repos/#get
101+
xhr[i] = doAjax('https://api.github.com/repos/'+ repo[i] +'?callback=?');
102+
}
87103
}
104+
105+
// generate table when all ajax call is complete.
106+
$.when.apply(this,xhr).done(function(){
107+
var body = buildTableBody(arguments,repo_highlights,repo_count); // html of table body.
108+
109+
addTable($gvg,idx,body);
110+
});
88111
});
89-
}
112+
};
113+
114+
// self-invoke.
115+
$('div.gvg').gvg();
90116
})(jQuery);

‎js/jquery.gvg.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)