Skip to content

Commit 899250b

Browse files
kishikawakatsumikishikawakatsumi
authored
Merge pull request #188 from SwiftFiddle/refactor
Refactor
2 parents 8f165da + a461d94 commit 899250b

File tree

5 files changed

+107
-100
lines changed

5 files changed

+107
-100
lines changed

‎Public/css/common.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ body {
3838
overflow: auto;
3939
}
4040

41-
#syntax-map {
41+
#syntax-container {
4242
font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace;
4343
font-size: 11pt;
4444
line-height: 1.5;

‎Public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
<div id="structure" class="" role="document"></div>
105105
</div>
106106
<div id="syntax-tab-pane" class="tab-pane" role="tabpanel" aria-labelledby="syntax-tab" tabindex="0">
107-
<div id="syntax-map" class="" role="document"></div>
107+
<div id="syntax-container" class="" role="document"></div>
108108
</div>
109109
<div id="statistics-tab-pane" class="tab-pane" role="tabpanel" aria-labelledby="statistics-tab"
110110
tabindex="0">

‎Public/js/app.js‎

Lines changed: 9 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import { Tooltip } from "bootstrap";
44
import { TreeView } from "./tree_view.js";
5-
import { StatisticsView } from "./statistics.js";
5+
import { SyntaxView } from "./syntax_view.js";
6+
import { StatisticsView } from "./statistics_view.js";
67
import { Popover } from "./popover.js";
78
import { WebSocketClient } from "./websocket.js";
89
import { debounce } from "./debounce.js";
@@ -52,7 +53,9 @@ export class App {
5253
this.treeViewContainer = document.getElementById("structure");
5354
this.popover = new Popover();
5455

55-
this.syntaxMapContainer = document.getElementById("syntax-map");
56+
this.syntaxView = new SyntaxView(
57+
document.getElementById("syntax-container")
58+
);
5659
this.statisticsView = new StatisticsView(
5760
document.getElementById("statistics-container")
5861
);
@@ -163,28 +166,24 @@ export class App {
163166
);
164167

165168
this.updateStructure(structureData);
166-
167-
this.syntaxMapContainer.innerHTML = data.syntaxHTML;
168-
this.updateSyntaxMap();
169+
this.updateSyntaxMap(data.syntaxHTML);
169170

170171
const statistics = structureData
171172
.filter((node) => node.token === undefined)
172173
.reduce((acc, item) => {
173174
const existingItem = acc.find((a) => a.text === item.text);
174-
175175
if (existingItem) {
176176
existingItem.ranges.push(item.range);
177177
} else {
178178
acc.push({ text: item.text, ranges: [item.range] });
179179
}
180-
181180
return acc;
182181
}, []);
183182
this.updateStatistics(statistics);
184183

185184
document.getElementById("structure").style.maxHeight =
186185
this.contentMaxHeight;
187-
document.getElementById("syntax-map").style.maxHeight =
186+
document.getElementById("syntax-container").style.maxHeight =
188187
this.contentMaxHeight;
189188
document.getElementById("statistics-container").style.maxHeight =
190189
this.contentMaxHeight;
@@ -402,77 +401,8 @@ export class App {
402401
};
403402
}
404403

405-
updateSyntaxMap() {
406-
const popover = this.popover;
407-
const tabContainerRect = document
408-
.querySelector(".tab-content")
409-
.getBoundingClientRect();
410-
411-
let mouseoverCancel = undefined;
412-
$(this.syntaxMapContainer)
413-
.find("span")
414-
.each(function () {
415-
$(this).mouseover(function (event) {
416-
event.preventDefault();
417-
event.stopPropagation();
418-
419-
if (mouseoverCancel) {
420-
cancelAnimationFrame(mouseoverCancel);
421-
}
422-
mouseoverCancel = requestAnimationFrame(() => {
423-
const contents = [];
424-
425-
$(this)
426-
.parents("span")
427-
.each(function (index, element) {
428-
createDOMRectElement(element.getBoundingClientRect());
429-
contents.push([element.dataset.title, element.dataset.content]);
430-
if (index > 0) {
431-
return false;
432-
}
433-
});
434-
435-
let element = event.target;
436-
element.style.backgroundColor = "rgba(81, 101, 255, 0.5)";
437-
438-
contents.reverse();
439-
contents.push([element.dataset.title, element.dataset.content]);
440-
441-
const dl = `<dl>${contents
442-
.map((content) => {
443-
return `<dt>${content[0]}</dt><dd>${content[1]}</dd>`;
444-
})
445-
.join("")}</dl>`;
446-
popover.content = dl;
447-
448-
popover.show(element, {
449-
lowerLimit: tabContainerRect.top + tabContainerRect.height,
450-
offsetX: 40,
451-
});
452-
});
453-
});
454-
455-
let mouseoutCancel = undefined;
456-
$(this).mouseout(function (event) {
457-
event.preventDefault();
458-
event.stopPropagation();
459-
460-
if (mouseoutCancel) {
461-
cancelAnimationFrame(mouseoutCancel);
462-
}
463-
mouseoutCancel = requestAnimationFrame(() => {
464-
let element = event.target;
465-
element.style.backgroundColor = "";
466-
467-
let rectElements = document.getElementsByClassName("dom-rect");
468-
for (let i = 0, l = rectElements.length; l > i; i++) {
469-
rectElements[0].parentNode.removeChild(rectElements[0]);
470-
}
471-
472-
popover.hide();
473-
});
474-
});
475-
});
404+
updateSyntaxMap(syntaxHTML) {
405+
this.syntaxView.update(syntaxHTML);
476406
}
477407

478408
updateStatistics(statistics) {
@@ -523,25 +453,6 @@ function hideLoading() {
523453
document.getElementById("run-button-spinner").classList.add("d-none");
524454
}
525455

526-
function createDOMRectElement(domRect) {
527-
let rectElements = document.getElementsByClassName("dom-rect");
528-
for (let i = 0, l = rectElements.length; l > i; i++) {
529-
rectElements[0].parentNode.removeChild(rectElements[0]);
530-
}
531-
532-
let rectElement = document.createElement("div");
533-
rectElement.className = "dom-rect";
534-
rectElement.style.left = domRect.x - 1 + "px";
535-
rectElement.style.top = domRect.y - 1 + "px";
536-
rectElement.style.width = domRect.width + "px";
537-
rectElement.style.height = domRect.height + "px";
538-
rectElement.style.pointerEvents = "none";
539-
rectElement.style.position = "absolute";
540-
rectElement.style.border = "1px solid rgb(81, 101, 255)";
541-
rectElement.style.backgroundColor = "rgba(81, 101, 255, 0.25)";
542-
document.body.appendChild(rectElement);
543-
}
544-
545456
function stripHTMLTag(text) {
546457
const div = document.createElement("div");
547458
div.innerHTML = text

‎Public/js/statistics.js‎ renamed to ‎Public/js/statistics_view.js‎

File renamed without changes.

‎Public/js/syntax_view.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
"use strict";
2+
3+
import { Popover } from "./popover.js";
4+
5+
export class SyntaxView {
6+
constructor(container) {
7+
this.container = container;
8+
this.popover = new Popover();
9+
10+
this.onmouseover = () => {};
11+
this.onmouseout = () => {};
12+
}
13+
14+
update(syntaxHTML) {
15+
this.container.innerHTML = syntaxHTML;
16+
17+
const popover = this.popover;
18+
19+
const tabContainerRect = document
20+
.querySelector(".tab-content")
21+
.getBoundingClientRect();
22+
23+
$(this.container)
24+
.find("span")
25+
.each(function () {
26+
$(this).mouseover(function (event) {
27+
event.preventDefault();
28+
event.stopPropagation();
29+
30+
const contents = [];
31+
32+
$(this)
33+
.parents("span")
34+
.each(function (index, element) {
35+
createDOMRectElement(element.getBoundingClientRect());
36+
contents.push([element.dataset.title, element.dataset.content]);
37+
if (index > 0) {
38+
return false;
39+
}
40+
});
41+
42+
let element = event.target;
43+
element.style.backgroundColor = "rgba(81, 101, 255, 0.5)";
44+
45+
contents.reverse();
46+
contents.push([element.dataset.title, element.dataset.content]);
47+
48+
const dl = `<dl>${contents
49+
.map((content) => {
50+
return `<dt>${content[0]}</dt><dd>${content[1]}</dd>`;
51+
})
52+
.join("")}</dl>`;
53+
popover.content = dl;
54+
55+
popover.show(element, {
56+
lowerLimit: tabContainerRect.top + tabContainerRect.height,
57+
offsetX: 40,
58+
});
59+
});
60+
61+
$(this).mouseout(function (event) {
62+
event.preventDefault();
63+
event.stopPropagation();
64+
65+
let element = event.target;
66+
element.style.backgroundColor = "";
67+
68+
let rectElements = document.getElementsByClassName("dom-rect");
69+
for (let i = 0, l = rectElements.length; l > i; i++) {
70+
rectElements[0].parentNode.removeChild(rectElements[0]);
71+
}
72+
73+
popover.hide();
74+
});
75+
});
76+
}
77+
}
78+
79+
function createDOMRectElement(domRect) {
80+
let rectElements = document.getElementsByClassName("dom-rect");
81+
for (let i = 0, l = rectElements.length; l > i; i++) {
82+
rectElements[0].parentNode.removeChild(rectElements[0]);
83+
}
84+
85+
let rectElement = document.createElement("div");
86+
rectElement.className = "dom-rect";
87+
rectElement.style.left = domRect.x - 1 + "px";
88+
rectElement.style.top = domRect.y - 1 + "px";
89+
rectElement.style.width = domRect.width + "px";
90+
rectElement.style.height = domRect.height + "px";
91+
rectElement.style.pointerEvents = "none";
92+
rectElement.style.position = "absolute";
93+
rectElement.style.border = "1px solid rgb(81, 101, 255)";
94+
rectElement.style.backgroundColor = "rgba(81, 101, 255, 0.25)";
95+
document.body.appendChild(rectElement);
96+
}

0 commit comments

Comments
 (0)