-
Notifications
You must be signed in to change notification settings - Fork 0
/
Dir.js
130 lines (100 loc) · 3.1 KB
/
Dir.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
class Dir {
#name;
#path;
#parent;
#isOpen = false;
#subDirs = [];
#files = [];
constructor(name, path, parent) {
this.#name = name;
this.#path = path;
this.#parent = parent;
}
get name() {
return this.#name;
}
get path() {
return this.#path;
}
get parent() {
return this.#parent;
}
get subDirs() {
return this.#subDirs;
}
get files() {
return this.#files;
}
get isOpen() {
return this.#isOpen;
}
set name(name) {
this.#name = name;
}
toggle() {
this.#isOpen = !this.#isOpen;
return this.render();
}
folderIcon() {
const icon = document.createElement("i");
if (this.isOpen) icon.classList.add("fas", "fa-folder-open");
else icon.classList.add("fas", "fa-folder");
return icon;
}
arrowIcon() {
const icon = document.createElement("i");
if (this.isOpen) icon.classList.add("fas", "fa-angle-down");
else icon.classList.add("fas", "fa-angle-right");
return icon;
}
addSubDir(subDir) {
if (!(subDir instanceof Dir)) throw new Error("Not an instance of Dir");
this.#subDirs.push(subDir);
}
addFile(file) {
if (!(file instanceof File_)) throw new Error("Not an instance of File");
this.#files.push(file);
}
// Returns an 'li' element which contains the current directory
// and an 'ul' which contains the subdirectories and files in the
// current directory if it is open.
render() {
const curDir = document.createElement("li");
if (this.parent) curDir.style.paddingLeft = "1rem";
curDir.append(this.arrowIcon(), " ", this.folderIcon(), " ");
const folderToggler = document.createElement("span");
folderToggler.classList.add("repo-folders");
folderToggler.append(this.name);
folderToggler.addEventListener("click", () => {
// Here 'this' refers to the current 'Dir' object.
const newChild = this.toggle();
curDir.parentElement.replaceChild(newChild, curDir);
});
curDir.appendChild(folderToggler);
if (!this.isOpen) return curDir;
// 'ul' to hold the contents of the current directory.
const contents = document.createElement("ul");
curDir.appendChild(contents);
for (const subDir of this.subDirs) {
contents.appendChild(subDir.render());
}
for (const file of this.files) {
const content = document.createElement("li");
content.style.paddingLeft = "1.85rem";
content.append(file.fileIcon(), " ");
const link = document.createElement("a");
link.classList.add("repo-files");
// Github supports pjax => push_state + ajax. So, we make use of it.
// This gives better user experience because only the parts of the
// page are re-rendered as opposed to the whole page. It keeps track
// of the state to provide functional arrow keys.
link.setAttribute("data-pjax", "#repo-content-pjax-container");
link.setAttribute("data-turbo-frame", "repo-content-turbo-frame");
link.setAttribute("href", file.link);
link.append(file.name);
content.appendChild(link);
contents.appendChild(content);
}
return curDir;
}
}