Skip to content

Commit 6578241

Browse files
clearbluejarclearbluejar
committed
first attempt
1 parent d20130a commit 6578241

File tree

2 files changed

+207
-49
lines changed

2 files changed

+207
-49
lines changed

‎index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@
7373
</div>
7474

7575
<div id="main" class="container hide">
76-
<h2>diff HTML Diff Preview</h2>
77-
<p class="lead">If <ins>File Name</ins> is empty, it will preview <ins>index.html</ins> or <ins>the first file</ins>
76+
<h2>Diff Gist HTML Preview</h2>
77+
<p class="lead">If <ins>File Name</ins> is empty, it will preview the first file</ins>
7878
as default.</p>
7979
<div class="form-inline" role="form">
8080
<div class="form-group">
@@ -96,6 +96,9 @@ <h2>diff HTML Diff Preview</h2>
9696
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
9797
</div>
9898

99+
<div id="gist_details" class="container hide"></div>
100+
<div id="files" class="container hide"></div>
101+
99102
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
100103
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
101104
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>

‎main.js‎

Lines changed: 202 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
(function () {
22
function showMainPage() {
3-
document.getElementById('main').className = 'container'; // remove class 'hide'
3+
document.getElementById('main').className = 'container'; // remove class 'hide'
44
document.getElementById('loading').className += ' hide'; // add class 'hide'
5+
document.getElementById('files').className = 'container'; // remove class 'hide'
6+
document.getElementById('gist_details').className = 'container'; // remove class 'hide'
57
}
68

79
function showError(message) {
@@ -12,6 +14,58 @@
1214
+ '</div>';
1315
}
1416

17+
// https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
18+
function formatBytes(bytes, decimals = 2) {
19+
if (!+bytes) return '0 Bytes'
20+
21+
const k = 1024
22+
const dm = decimals < 0 ? 0 : decimals
23+
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
24+
25+
const i = Math.floor(Math.log(bytes) / Math.log(k))
26+
27+
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
28+
}
29+
30+
function addGistDetails(info) {
31+
var html = `<h4>Gist Details:</h4><ul>`
32+
33+
print_keys = ['url', 'description', 'id']
34+
35+
for (var item in info) {
36+
console.log(item);
37+
if (print_keys.includes(item)) {
38+
let line = `<li>${item} : ${info[item]} </li><br>`;
39+
40+
html += line;
41+
}
42+
43+
}
44+
45+
46+
document.getElementById('gist_details').innerHTML = html;
47+
48+
}
49+
50+
51+
function addFilesToList(info) {
52+
var query = document.getElementById('gist_id').value;
53+
var files = info.files;
54+
var html = `<h4>Files from Gist: <span class="badge">${Object.keys(files).length}</span></h4><ul>`
55+
56+
for (var file in info.files) {
57+
//console.log(file);
58+
var raw_url = files[file]['raw_url']
59+
let line = `<li><a href="?${query}/${file}">${file}</a> (${formatBytes(parseInt(files[file].size / 1024))}) [<a href="${raw_url}">raw_gist</a>] </li><br>`;
60+
html += line;
61+
}
62+
63+
html += '</ul>'
64+
65+
document.getElementById('files').innerHTML = html;
66+
67+
}
68+
1569
function submit() {
1670
var query = document.getElementById('gist_id').value;
1771
var fileName = document.getElementById('file_name').value;
@@ -21,6 +75,129 @@
2175
location.search = query; // page will be refreshed
2276
}
2377

78+
async function fetchUrl(raw_url) {
79+
const response = await fetch(raw_url);
80+
// waits until the request completes...
81+
console.log(response);
82+
return response;
83+
}
84+
85+
function processContent(content, fileName) {
86+
console.log(fileName)
87+
88+
89+
90+
var targetElement = document.getElementById('myDiffElement');
91+
92+
var fileExt = fileName.split('.').pop();
93+
94+
switch (fileExt) {
95+
96+
case 'diff':
97+
// code block
98+
99+
var configuration = {
100+
drawFileList: true,
101+
fileListToggle: true,
102+
fileListStartVisible: true,
103+
fileContentToggle: true,
104+
matching: 'lines',
105+
outputFormat: 'side-by-side',
106+
synchronisedScroll: true,
107+
highlight: true,
108+
renderNothingWhenEmpty: false,
109+
diffStyle: 'char',
110+
fileContentToggle: true,
111+
rawTemplates: { "tag-file-changed": '<span class="d2h-tag d2h-changed d2h-changed-tag">MODIFIED</span>' }
112+
//highlightLanguages: { '856 Meta': 'c' }
113+
};
114+
115+
// use diff2html to show standard diff
116+
var diff2htmlUi = new Diff2HtmlUI(targetElement, content, configuration);
117+
diff2htmlUi.draw();
118+
diff2htmlUi.highlightCode();
119+
120+
break;
121+
case 'md':
122+
// code block
123+
showdown.setOption('moreStyling', true);
124+
showdown.setOption('simpleLineBreaks', true);
125+
showdown.setOption('tables', true);
126+
showdown.setFlavor('github');
127+
128+
//var converter = new showdown.Converter({ extensions: ['mermaid'] });
129+
var converter = new showdown.Converter({ extensions: ['diff'] });
130+
131+
html = converter.makeHtml(content);
132+
133+
var configuration = {
134+
drawFileList: true,
135+
fileListToggle: true,
136+
fileListStartVisible: true,
137+
fileContentToggle: true,
138+
matching: 'lines',
139+
outputFormat: 'side-by-side',
140+
synchronisedScroll: true,
141+
highlight: true,
142+
renderNothingWhenEmpty: false,
143+
diffStyle: 'char',
144+
fileContentToggle: true,
145+
//highlightLanguages: { '856 Meta': 'c' }
146+
};
147+
148+
149+
// use diff2html to show standard diff
150+
var diff2htmlUi = new Diff2HtmlUI(targetElement, html, configuration);
151+
diff2htmlUi.draw();
152+
153+
// force c syntax
154+
const files = diff2htmlUi.targetElement.querySelectorAll('.d2h-file-wrapper');
155+
files.forEach(file => {
156+
const language = file.getAttribute('data-lang');
157+
file.setAttribute('data-lang', 'c')
158+
console.log(language);
159+
});
160+
161+
const elems = diff2htmlUi.targetElement.querySelectorAll('.d2h-ins.d2h-change:not(.d2h-code-side-linenumber)');
162+
elems.forEach(elem => {
163+
164+
elem.className = 'd2h-change'
165+
});
166+
167+
const elems2 = diff2htmlUi.targetElement.querySelectorAll('.d2h-del.d2h-change:not(.d2h-code-side-linenumber)');
168+
elems2.forEach(elem => {
169+
elem.className = 'd2h-change'
170+
});
171+
172+
173+
174+
175+
176+
177+
diff2htmlUi.highlightCode();
178+
179+
break;
180+
case 'html':
181+
// code block
182+
targetElement.innerHTML = content;
183+
184+
break;
185+
default:
186+
// code block
187+
throw new Error('Unsupported file extension <strong>' + fileExt + '</strong>, ');
188+
}
189+
190+
191+
192+
193+
194+
195+
196+
197+
showMainPage();
198+
199+
}
200+
24201
document.getElementById('submit').onclick = submit;
25202
document.onkeypress = function (e) {
26203
if (e.keyCode === 13) submit();
@@ -49,11 +226,16 @@
49226
if (res.status === 200) {
50227
return body;
51228
}
52-
console.log(res, body); // debug
229+
//console.log(res, body); // debug
53230
throw new Error('Gist <strong>' + gistId + '</strong>, ' + body.message.replace(/\(.*\)/, ''));
54231
});
55232
})
56233
.then(function (info) {
234+
235+
236+
addGistDetails(info);
237+
addFilesToList(info);
238+
57239
if (fileName === '') {
58240
for (var file in info.files) {
59241
// index.html or the first file
@@ -67,53 +249,26 @@
67249
throw new Error('File <strong>' + fileName + '</strong> is not exist');
68250
}
69251

70-
// 5. write data
71-
var content = info.files[fileName].content;
72-
showdown.setOption('moreStyling', true);
73-
showdown.setOption('simpleLineBreaks', true);
74-
showdown.setOption('tables', true);
75-
showdown.setFlavor('github');
76-
77-
//var converter = new showdown.Converter({ extensions: ['mermaid'] });
78-
var converter = new showdown.Converter({ extensions: ['diff'] });
79-
80-
html = converter.makeHtml(content);
81-
82-
83-
//document.write(html);
84-
//var targetElement = document.getElementById('myDiffElement');
85-
//targetElement.innerHTML = html
86-
//mermaid.initialize({ startOnLoad: true });
87-
//alert(hljs.listLanguages());
88-
var targetElement = document.getElementById('myDiffElement');
89-
var configuration = {
90-
drawFileList: true,
91-
fileListToggle: false,
92-
fileListStartVisible: true,
93-
fileContentToggle: false,
94-
matching: 'lines',
95-
outputFormat: 'side-by-side',
96-
synchronisedScroll: true,
97-
highlight: true,
98-
renderNothingWhenEmpty: false,
99-
diffStyle: 'char',
100-
fileContentToggle: true,
101-
//highlightLanguages: { '856 Meta': 'c' }
102-
};
103-
var diff2htmlUi = new Diff2HtmlUI(targetElement, html, configuration);
104-
diff2htmlUi.draw();
105-
106-
// force c syntax
107-
const files = diff2htmlUi.targetElement.querySelectorAll('.d2h-file-wrapper');
108-
files.forEach(file => {
109-
const language = file.getAttribute('data-lang');
110-
file.setAttribute('data-lang', 'c')
111-
console.log(language);
112-
});
252+
if (info.files[fileName].truncated) {
253+
fetchUrl(info.files[fileName].raw_url).then(res => {
113254

114-
diff2htmlUi.highlightCode();
255+
// The API call was successful!
256+
if (res.status === 200) {
257+
res.text().then(text => processContent(text, fileName))
258+
}
259+
else {
260+
//console.log(res, body); // debug
261+
throw new Error('Failed to pull full content' + fileName + ' <strong>' + gistId + '</strong>, ' + res.status);
262+
}
115263

116-
showMainPage();
264+
})
265+
266+
267+
}
268+
//response not truncated
269+
else {
270+
processContent(info.files[fileName].content, fileName);
271+
}
117272

118273
})
119274
.catch(function (err) {

0 commit comments

Comments
 (0)