Skip to content

Commit fba0d3f

Browse files
kishikawakatsumikishikawakatsumi
authored
Merge pull request #190 from SwiftFiddle/refactor
Refactor
2 parents 5ae570a + d605b97 commit fba0d3f

File tree

1 file changed

+109
-137
lines changed

1 file changed

+109
-137
lines changed

‎Public/js/structure_view.js‎

Lines changed: 109 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -28,145 +28,10 @@ export class StructureView {
2828
return;
2929
}
3030
if (data.structure.length > 0) {
31-
const container = document.createElement("div");
32-
33-
const title = document.createElement("div");
34-
title.classList.add("title");
35-
title.innerText = `${data.text}Syntax`;
36-
container.appendChild(title);
37-
38-
switch (data.type) {
39-
case "decl": {
40-
const label = document.createElement("span");
41-
label.classList.add("badge", "text-bg-light");
42-
label.innerText = "DeclSyntax";
43-
title.appendChild(label);
44-
break;
45-
}
46-
case "expr": {
47-
const label = document.createElement("span");
48-
label.classList.add("badge", "text-bg-light");
49-
label.innerText = "ExprSyntax";
50-
title.appendChild(label);
51-
break;
52-
}
53-
case "pattern": {
54-
const label = document.createElement("span");
55-
label.classList.add("badge", "text-bg-light");
56-
label.innerText = "PatternSyntax";
57-
title.appendChild(label);
58-
break;
59-
}
60-
case "type": {
61-
const label = document.createElement("span");
62-
label.classList.add("badge", "text-bg-light");
63-
label.innerText = "TypeSyntax";
64-
title.appendChild(label);
65-
break;
66-
}
67-
default:
68-
break;
69-
}
70-
71-
const dl = document.createElement("dl");
72-
73-
const dt = document.createElement("dt");
74-
const dd = document.createElement("dd");
75-
76-
dt.innerHTML = "Source Range";
77-
const range = data.range;
78-
// prettier-ignore
79-
dd.innerHTML = `Ln ${range.startRow + 1}, Col ${range.startColumn + 1} - Ln ${range.endRow + 1}, Col ${range.endColumn + 1}`;
80-
81-
dl.appendChild(dt);
82-
dl.appendChild(dd);
83-
84-
for (const property of data.structure) {
85-
const dt = document.createElement("dt");
86-
const dd = document.createElement("dd");
87-
88-
const name = property.name;
89-
const value = property.value;
90-
if (value && value.text && value.kind) {
91-
const text = stripHTMLTag(value.text);
92-
const kind = stripHTMLTag(value.kind);
93-
dt.innerHTML = `${name}`;
94-
dd.innerHTML = `${text}<span class="badge rounded-pill">${kind}</span>`;
95-
} else if (value && value.text) {
96-
const text = stripHTMLTag(value.text);
97-
dt.innerHTML = `${name}`;
98-
dd.innerHTML = `${text}`;
99-
}
100-
dl.appendChild(dt);
101-
dl.appendChild(dd);
102-
}
103-
container.appendChild(dl);
104-
105-
this.popover.content = container.innerHTML;
31+
this.popover.content = makeSyntaxPopoverContent(data);
10632
}
10733
if (data.token) {
108-
const container = document.createElement("div");
109-
110-
const title = document.createElement("div");
111-
title.classList.add("title");
112-
title.innerText = "TokenSyntax";
113-
container.appendChild(title);
114-
115-
const dl = document.createElement("dl");
116-
117-
{
118-
const dt = document.createElement("dt");
119-
const dd = document.createElement("dd");
120-
121-
dt.innerHTML = "Source Range";
122-
const range = data.range;
123-
// prettier-ignore
124-
dd.innerHTML = `Ln ${range.startRow + 1}, Col ${range.startColumn + 1} - Ln ${range.endRow + 1}, Col ${range.endColumn + 1}`;
125-
126-
dl.appendChild(dt);
127-
dl.appendChild(dd);
128-
}
129-
130-
{
131-
const dt = document.createElement("dt");
132-
dt.innerHTML = "kind";
133-
dl.appendChild(dt);
134-
135-
const dd = document.createElement("dd");
136-
dd.innerHTML = stripHTMLTag(data.token.kind);
137-
dl.appendChild(dd);
138-
}
139-
{
140-
const dt = document.createElement("dt");
141-
dt.innerHTML = "leadingTrivia";
142-
dl.appendChild(dt);
143-
144-
const dd = document.createElement("dd");
145-
dd.innerHTML = stripHTMLTag(data.token.leadingTrivia);
146-
dl.appendChild(dd);
147-
}
148-
{
149-
const dt = document.createElement("dt");
150-
dt.innerHTML = "text";
151-
dl.appendChild(dt);
152-
153-
const dd = document.createElement("dd");
154-
dd.innerHTML = stripHTMLTag(data.text);
155-
dl.appendChild(dd);
156-
}
157-
{
158-
const dt = document.createElement("dt");
159-
dt.innerHTML = "trailingTrivia";
160-
dl.appendChild(dt);
161-
162-
const dd = document.createElement("dd");
163-
dd.innerHTML = stripHTMLTag(data.token.trailingTrivia);
164-
165-
dl.appendChild(dd);
166-
}
167-
container.appendChild(dl);
168-
169-
this.popover.content = container.innerHTML;
34+
this.popover.content = makeTokenPopoverContent(data);
17035
}
17136

17237
const tabContainerRect = document
@@ -193,6 +58,113 @@ export class StructureView {
19358
}
19459
}
19560

61+
function makeSyntaxPopoverContent(data) {
62+
const container = document.createElement("div");
63+
64+
const title = document.createElement("div");
65+
title.classList.add("title");
66+
title.innerText = `${data.text}Syntax`;
67+
container.appendChild(title);
68+
69+
const label = document.createElement("span");
70+
label.classList.add("badge", "text-bg-light");
71+
switch (data.type) {
72+
case "decl": {
73+
label.innerText = "DeclSyntax";
74+
break;
75+
}
76+
case "expr": {
77+
label.innerText = "ExprSyntax";
78+
break;
79+
}
80+
case "pattern": {
81+
label.innerText = "PatternSyntax";
82+
break;
83+
}
84+
case "type": {
85+
label.innerText = "TypeSyntax";
86+
break;
87+
}
88+
default:
89+
break;
90+
}
91+
title.appendChild(label);
92+
93+
const dl = document.createElement("dl");
94+
95+
makeSourceRangePopoverContent(data, dl);
96+
97+
for (const property of data.structure) {
98+
makePropertyPopoverContent(property, dl);
99+
}
100+
container.appendChild(dl);
101+
102+
return container.innerHTML;
103+
}
104+
105+
function makeTokenPopoverContent(data) {
106+
const container = document.createElement("div");
107+
108+
const title = document.createElement("div");
109+
title.classList.add("title");
110+
title.innerText = "TokenSyntax";
111+
112+
container.appendChild(title);
113+
114+
const dl = document.createElement("dl");
115+
116+
makeSourceRangePopoverContent(data, dl);
117+
118+
makeDescriptionList("kind", stripHTMLTag(data.token.kind), dl);
119+
makeDescriptionList(
120+
"leadingTrivia",
121+
stripHTMLTag(data.token.leadingTrivia),
122+
dl
123+
);
124+
makeDescriptionList("text", stripHTMLTag(data.text), dl);
125+
makeDescriptionList(
126+
"trailingTrivia",
127+
stripHTMLTag(data.token.trailingTrivia),
128+
dl
129+
);
130+
131+
container.appendChild(dl);
132+
133+
return container.innerHTML;
134+
}
135+
136+
function makeSourceRangePopoverContent(data, list) {
137+
const range = data.range;
138+
// prettier-ignore
139+
const details = `Ln ${range.startRow + 1}, Col ${range.startColumn + 1} - Ln ${range.endRow + 1}, Col ${range.endColumn + 1}`;
140+
makeDescriptionList("Source Range", details, list);
141+
}
142+
143+
function makePropertyPopoverContent(property, list) {
144+
const details = (() => {
145+
const value = property.value;
146+
if (value && value.text && value.kind) {
147+
const text = stripHTMLTag(value.text);
148+
const kind = stripHTMLTag(value.kind);
149+
return `${text}<span class="badge rounded-pill">${kind}</span>`;
150+
} else if (value && value.text) {
151+
return stripHTMLTag(value.text);
152+
}
153+
})();
154+
makeDescriptionList(property.name, details, list);
155+
}
156+
157+
function makeDescriptionList(term, details, list) {
158+
const dt = document.createElement("dt");
159+
dt.innerHTML = term;
160+
161+
const dd = document.createElement("dd");
162+
dd.innerHTML = details;
163+
164+
list.appendChild(dt);
165+
list.appendChild(dd);
166+
}
167+
196168
function stripHTMLTag(text) {
197169
const div = document.createElement("div");
198170
div.innerHTML = text

0 commit comments

Comments
 (0)