-
-
Notifications
You must be signed in to change notification settings - Fork 295
/
main.js
159 lines (138 loc) · 4.3 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
window.addEventListener('load', () => {
initDT(); // Initialize the DatatTable and window.columnNames variables
addDarkmodeWidget();
const repo = getRepoFromUrl();
if (repo) {
document.getElementById('q').value = repo;
fetchData();
}
});
document.getElementById('form').addEventListener('submit', e => {
e.preventDefault();
fetchData();
});
function addDarkmodeWidget() {
new Darkmode( { label: '🌓' } ).showWidget();
}
function fetchData() {
const repo = document.getElementById('q').value.replaceAll(' ','');
const re = /[-_\w]+\/[-_.\w]+/;
const urlRepo = getRepoFromUrl();
if (!urlRepo || urlRepo !== repo) {
window.history.pushState('', '', `#${repo}`);
}
if (re.test(repo)) {
fetchAndShow(repo);
} else {
showMsg(
'Invalid GitHub repository! Format is <username>/<repo>',
'danger'
);
}
}
function updateDT(data) {
// Remove any alerts, if any:
if ($('.alert')) $('.alert').remove();
// Format dataset and redraw DataTable. Use second index for key name
const forks = [];
for (let fork of data) {
fork.repoLink = `<a href="https://github.com/${fork.full_name}">Link</a>`;
fork.ownerName = `<img src="${fork.owner.avatar_url || 'https://avatars.githubusercontent.com/u/0?v=4'}&s=48" width="24" height="24" class="mr-2 rounded-circle" />${fork.owner ? fork.owner.login : '<strike><em>Unknown</em></strike>'}`;
forks.push(fork);
}
const dataSet = forks.map(fork =>
window.columnNamesMap.map(colNM => fork[colNM[1]])
);
window.forkTable
.clear()
.rows.add(dataSet)
.draw();
}
function initDT() {
// Create ordered Object with column name and mapped display name
window.columnNamesMap = [
// [ 'Repository', 'full_name' ],
['Link', 'repoLink'], // custom key
['Owner', 'ownerName'], // custom key
['Name', 'name'],
['Branch', 'default_branch'],
['Stars', 'stargazers_count'],
['Forks', 'forks'],
['Open Issues', 'open_issues_count'],
['Size', 'size'],
['Last Push', 'pushed_at'],
];
// Sort by stars:
const sortColName = 'Stars';
const sortColumnIdx = window.columnNamesMap
.map(pair => pair[0])
.indexOf(sortColName);
// Use first index for readable column name
// we use moment's fromNow() if we are rendering for `pushed_at`; better solution welcome
window.forkTable = $('#forkTable').DataTable({
columns: window.columnNamesMap.map(colNM => {
return {
title: colNM[0],
render:
colNM[1] === 'pushed_at'
? (data, type, _row) => {
if (type === 'display') {
return moment(data).fromNow();
}
return data;
}
: null,
};
}),
order: [[sortColumnIdx, 'desc']],
// paging: false,
searchBuilder:{
// all options at default
}
});
let table = window.forkTable;
new $.fn.dataTable.SearchBuilder(table, {});
table.searchBuilder.container().prependTo(table.table().container());
}
function fetchAndShow(repo) {
repo = repo.replace('https://github.com/', '');
repo = repo.replace('http://github.com/', '');
repo = repo.replace(/\.git$/, '');
fetch(
`https://api.github.com/repos/${repo}/forks?sort=stargazers&per_page=100`
)
.then(response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => {
updateDT(data);
})
.catch(error => {
const msg =
error.toString().indexOf('Forbidden') >= 0
? 'Error: API Rate Limit Exceeded'
: error;
showMsg(`${msg}. Additional info in console`, 'danger');
console.error(error);
});
}
function showMsg(msg, type) {
let alert_type = 'alert-info';
if (type === 'danger') {
alert_type = 'alert-danger';
}
document.getElementById('footer').innerHTML = '';
document.getElementById('data-body').innerHTML = `
<div class="alert ${alert_type} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
${msg}
</div>
`;
}
function getRepoFromUrl() {
const urlRepo = location.hash && location.hash.slice(1);
return urlRepo && decodeURIComponent(urlRepo);
}