-
Notifications
You must be signed in to change notification settings - Fork 23
/
GitHub.ts
124 lines (114 loc) 路 4.24 KB
/
GitHub.ts
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
import {
getIconForFolder,
getIconForOpenFolder,
getIconForFile,
getIconUrl,
DEFAULT_ROOT_OPENED,
DEFAULT_ROOT,
DEFAULT_FILE,
} from '../utils/Icons';
import { isCommit, isRepoRoot, isSingleFile, isRepoTree } from 'github-url-detection';
import { isHistoryForFile } from '../utils/PageDetect';
import { mutate } from 'fastdom';
import { getFileIcon, getFolderIcon } from '../utils/Dev';
import { observe } from 'selector-observer';
export const QUERY_FILE_TABLE_ITEMS = 'div.js-navigation-container>div.js-navigation-item';
export const QUERY_PATH_SEGMENTS = '.repository-content .js-path-segment a';
export const QUERY_PJAX_CONTAINER = 'main';
export const QUERY_LAST_PATH_SEGMENT = '.final-path';
/**
* Show icon for path segments
*/
function showIconsForSegments() {
if (!((!isRepoRoot() && isRepoTree()) || isSingleFile() || isHistoryForFile())) return;
const aSegments = document.querySelectorAll<HTMLAnchorElement>(QUERY_PATH_SEGMENTS);
const firstSegment = aSegments[0];
const finalSegment = document.querySelector(QUERY_LAST_PATH_SEGMENT) as HTMLSpanElement | undefined;
// first segment has always root folder icon
if (firstSegment) {
const spanEl = firstSegment.children[0] as HTMLSpanElement;
spanEl.innerHTML = `<img src="${getIconUrl(DEFAULT_ROOT_OPENED)}" alt="icon" class="vscode-icon"><span> ${
spanEl.innerText
}</span>`;
}
// check if final segment is file or folder
if (finalSegment) {
const iconPath = window.location.href.includes('/blob/')
? getIconForFile(finalSegment.innerText)
: getIconForOpenFolder(finalSegment.innerText);
finalSegment.innerHTML = `<img src="${getIconUrl(iconPath)}" alt="icon" class="vscode-icon"><span> ${
finalSegment.innerText
}</span>`;
}
// segments between first and last are always folders
for (let i = 1; i < aSegments.length; i++) {
const spanEl = aSegments[i];
const aEl = spanEl.firstChild as HTMLAnchorElement;
const iconPath = getIconForOpenFolder(aEl.innerText);
aEl.innerHTML = `<img src="${getIconUrl(iconPath)}" alt="icon" class="vscode-icon"><span> ${aEl.innerText}</span>`;
}
}
/**
* Show icons for repository files
*/
function showRepoTreeIcons(rowEl: Element) {
const iconEl = rowEl.children[0] as HTMLTableCellElement;
const iconSVGEl = iconEl.querySelector<SVGElement>('.octicon');
if (!iconSVGEl) {
// ... (up)
return;
}
/**
* <div role="row">
* <div><svg class={{icon}}/></div>,
* <div><span><a>{{name}}</a></span></div>,
* <div><span><a>{{message}}</a></span></div>,
* <div><span>{time}</span><s/div>,
* </div>
*/
const contentEl = rowEl.children[1] as Element;
const linkToEl = contentEl.firstElementChild.firstElementChild as HTMLAnchorElement;
let iconPath = '';
if (iconSVGEl) {
const iconSVGClassName = iconSVGEl.className.baseVal;
if (iconSVGClassName.includes('octicon-file-text') || iconSVGClassName.includes('octicon-file ')) {
iconPath = getFileIcon(linkToEl.innerText.toLowerCase());
} else if (iconSVGClassName.includes('octicon-file-directory')) {
const name = linkToEl.innerText.toLowerCase();
iconPath = getFolderIcon(name.split('/').shift());
} else if (iconSVGClassName.includes('octicon-file-submodule')) {
iconPath = getIconForFolder('submodules');
} else if (iconSVGClassName.includes('octicon-file-symlink-file')) {
iconPath = DEFAULT_FILE;
} else if (iconSVGClassName.includes('octicon-file-symlink-directory')) {
iconPath = DEFAULT_FILE;
} else {
console.error(`Unknown filetype: "${iconSVGClassName}", please report`);
return;
}
const x = mutate(() => {
iconSVGEl.outerHTML = `<img src="${getIconUrl(
iconPath
)}" class="vscode-icon ${iconSVGClassName}" alt="icon" width="16" height="16">`;
});
}
// else {
// console.error(`Error during parsing: "td.icon > svg.octoicon" doesnt exists for ${i}. row`);
// }
}
function update(e?: any) {
showIconsForSegments();
if (isCommit()) {
// showDiffIcon();
}
}
export function initGithub() {
// Update on fragment update
observe(QUERY_FILE_TABLE_ITEMS, {
add(rowEl) {
showRepoTreeIcons(rowEl);
},
});
update();
document.addEventListener('pjax:end', update); // Update on page change
}