|
1 | 1 | /**
|
2 | 2 | * Simple module to fetch code snippets via ajax.
|
3 | 3 | * Only supports github hosted code repos.
|
4 |
| - * |
| 4 | + * |
5 | 5 | * Usage:
|
6 | 6 | * var el = document.createElement('p');
|
7 | 7 | * var url = 'https://github.com/checkstyle/checkstyle/tree/checkstyle-8.0/src/it/resources/com/google/checkstyle/test/chapter4formatting/rule4822variabledistance/InputVariableDeclarationUsageDistanceCheck.java'
|
|
11 | 11 | */
|
12 | 12 | (function() {
|
13 | 13 | const contextLines = 3;
|
| 14 | + const nbsp = "\u00a0"; |
14 | 15 |
|
| 16 | + // returns text, not html |
15 | 17 | function formatLineNumber(number) {
|
16 |
| - var prefix = ""; |
| 18 | + let prefix; |
17 | 19 | if (number < 10) {
|
18 |
| - prefix = " "; |
| 20 | + prefix = nbsp.repeat(3); |
19 | 21 | } else if (number < 100) {
|
20 |
| - prefix = " "; |
| 22 | + prefix = nbsp.repeat(2); |
21 | 23 | } else if (number < 1000) {
|
22 |
| - prefix = " "; |
| 24 | + prefix = nbsp; |
23 | 25 | }
|
24 | 26 | return prefix + number;
|
25 | 27 | }
|
26 | 28 |
|
27 |
| - function fetchSnippet(el, url, line, weburl) { |
| 29 | + function fetchSnippet(document, container, url, line, weburl) { |
28 | 30 | var weburl, requestUrl, oReq;
|
29 | 31 |
|
30 | 32 | requestUrl = url.replace(/github.com/, "raw.githubusercontent.com");
|
31 | 33 | requestUrl = requestUrl.replace(/(tree|blob)\//, "");
|
32 | 34 |
|
33 | 35 | oReq = new XMLHttpRequest();
|
34 | 36 | oReq.addEventListener("load", function() {
|
35 |
| - var html, lines, start, deleteCount; |
| 37 | + let lines, start, deleteCount; |
| 38 | + |
| 39 | + // we'll append stuff in the loop below |
| 40 | + container.innerHTML = '<p><a href="' + weburl + '" target="_blank" rel="noopener noreferrer">' + weburl + '</a></p>'; |
36 | 41 |
|
37 |
| - html = '<p><a href="' + weburl + '" target="_blank" rel="noopener noreferrer">' + weburl + '</a></p>'; |
38 | 42 | lines = this.responseText.split(/\r\n|\n/);
|
39 | 43 | start = line - contextLines;
|
40 | 44 | if (start > 0) {
|
41 |
| - lines.splice(0, start); |
| 45 | + lines.splice(0, start); // remove lines before |
42 | 46 | }
|
43 | 47 | deleteCount = lines.length - (2 * contextLines) + 1;
|
44 |
| - lines.splice(2 * contextLines - 1, deleteCount); |
45 |
| - |
46 |
| - lines.forEach(element => { |
| 48 | + lines.splice(2 * contextLines - 1, deleteCount); // delete lines after |
| 49 | + |
| 50 | + // now we have just the lines which will be displayed |
| 51 | + lines.forEach(line => { |
47 | 52 | start++;
|
48 |
| - if (start == line) { |
49 |
| - html += "<code class=\"highlight\">"; |
50 |
| - } else { |
51 |
| - html += "<code>"; |
| 53 | + let lineElt = document.createElement("code"); |
| 54 | + if (start === line) { |
| 55 | + lineElt.classList.add("highlight"); |
52 | 56 | }
|
53 |
| - html += formatLineNumber(start) + " " + element + "</code><br>"; |
| 57 | + // createTextNode escapes special chars |
| 58 | + lineElt.appendChild(document.createTextNode(formatLineNumber(start) + nbsp + line)); |
| 59 | + lineElt.appendChild(document.createElement("br")); |
| 60 | + |
| 61 | + container.appendChild(lineElt); // append to the container |
54 | 62 | });
|
55 |
| - el.innerHTML = html; |
56 | 63 | });
|
57 | 64 | oReq.open("GET", requestUrl);
|
58 | 65 | oReq.send();
|
59 | 66 |
|
60 |
| - el.innerHTML = "<tt>fetching...</tt>"; |
| 67 | + container.innerHTML = "<samp>fetching...</samp>"; |
61 | 68 | }
|
62 | 69 |
|
63 | 70 | window.pmd_code_snippets = {
|
|
0 commit comments