Skip to content

Commit 00023fa

Browse files
irofirof
authored
Merge pull request #1032 from dddjava/refacotr/glossary-js
refactor: 用語集のjsを分割
2 parents feaa69f + b68db8f commit 00023fa

3 files changed

Lines changed: 111 additions & 95 deletions

File tree

‎jig-core/src/main/resources/templates/assets/glossary.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
function updateArticleVisibility(controls) {
2+
const showEmptyDescription = controls.showEmptyDescription.checked;
3+
const kindVisibilityMap = {
4+
"パッケージ": controls.showPackage.checked,
5+
"クラス": controls.showClass.checked,
6+
"メソッド": controls.showMethod.checked,
7+
"フィールド": controls.showField.checked,
8+
};
9+
10+
const searchKeyword = controls.searchInput.value.toLowerCase();
11+
const termArticles = document.getElementsByClassName("term");
12+
13+
Array.from(termArticles).forEach(term => {
14+
const kindText = term.getElementsByClassName("kind")[0]?.textContent || "";
15+
16+
// 種類で絞り込む
17+
if (!kindVisibilityMap[kindText]) {
18+
term.classList.add("hidden");
19+
return;
20+
}
21+
22+
// 以降の判定で使用する説明文を取得
23+
const description = term.getElementsByClassName("description")[0]?.textContent?.toLowerCase() || "";
24+
25+
// 説明文有無での判定
26+
if (!showEmptyDescription && !description) {
27+
term.classList.add("hidden");
28+
return;
29+
}
30+
// 検索キーワードでの判定（タイトルと説明文）
31+
const title = term.getElementsByClassName("term-title")[0]?.textContent?.toLowerCase() || "";
32+
if (searchKeyword && !title.includes(searchKeyword) && !description.includes(searchKeyword)) {
33+
term.classList.add("hidden");
34+
return;
35+
}
36+
37+
// すべての条件をパスした場合に表示
38+
term.classList.remove("hidden");
39+
});
40+
41+
// 表示が変わるのでnavも更新する
42+
updateLetterNavigationVisibility(controls);
43+
}
44+
45+
function updateLetterNavigationVisibility(controls) {
46+
const letterNavigations = Array.from(document.getElementsByClassName("letter-navigation"));
47+
const showNavigation = controls.showLetterNavigation.checked;
48+
if (!showNavigation) {
49+
letterNavigations.forEach(nav => nav.classList.add("invisible"));
50+
return;
51+
}
52+
53+
letterNavigations.forEach((nav, index) => {
54+
// 1件目は無視
55+
if (index === 0) {
56+
nav.classList.remove("invisible");
57+
return;
58+
}
59+
60+
let visibleCount = 0;
61+
let sibling = nav.previousElementSibling;
62+
while (sibling) {
63+
// 表示しているものだけ対象にする
64+
if (!sibling.classList.contains("invisible")) {
65+
// letter-navigationはカウント対象外
66+
if (sibling.classList.contains("letter-navigation")) break;
67+
visibleCount++;
68+
// これ以上カウントする意味がないので抜ける
69+
if (visibleCount >= 10) break;
70+
}
71+
sibling = sibling.previousElementSibling;
72+
}
73+
74+
// 10個以上表示するものがあったら表示する
75+
if (visibleCount >= 10) {
76+
nav.classList.remove("invisible");
77+
} else {
78+
nav.classList.add("invisible");
79+
}
80+
});
81+
}
82+
83+
document.addEventListener("DOMContentLoaded", function () {
84+
if (!document.body.classList.contains("glossary")) return;
85+
86+
const controls = {
87+
searchInput: document.getElementById("search-input"),
88+
showEmptyDescription: document.getElementById("show-empty-description"),
89+
showPackage: document.getElementById("show-package"),
90+
showClass: document.getElementById("show-class"),
91+
showMethod: document.getElementById("show-method"),
92+
showField: document.getElementById("show-field"),
93+
showLetterNavigation: document.getElementById("show-letter-navigation"),
94+
};
95+
96+
const updateArticles = () => updateArticleVisibility(controls);
97+
const updateNav = () => updateLetterNavigationVisibility(controls);
98+
99+
controls.searchInput.addEventListener("input", updateArticles);
100+
controls.showEmptyDescription.addEventListener("change", updateArticles);
101+
controls.showPackage.addEventListener("change", updateArticles);
102+
controls.showClass.addEventListener("change", updateArticles);
103+
controls.showMethod.addEventListener("change", updateArticles);
104+
controls.showField.addEventListener("change", updateArticles);
105+
controls.showLetterNavigation.addEventListener("change", updateNav);
106+
107+
updateNav();
108+
});

‎jig-core/src/main/resources/templates/assets/jig.js‎

Lines changed: 1 addition & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -98,89 +98,6 @@ window.addEventListener("popstate", function (event) {
9898
}
9999
});
100100

101-
function updateArticleVisibility() {
102-
const showEmptyDescription = document.getElementById("show-empty-description").checked;
103-
const kindVisibilityMap = {
104-
"パッケージ": document.getElementById("show-package").checked,
105-
"クラス": document.getElementById("show-class").checked,
106-
"メソッド": document.getElementById("show-method").checked,
107-
"フィールド": document.getElementById("show-field").checked,
108-
};
109-
110-
const searchKeyword = document.getElementById("search-input").value.toLowerCase();
111-
const termArticles = document.getElementsByClassName("term");
112-
113-
Array.from(termArticles).forEach(term => {
114-
const kindText = term.getElementsByClassName("kind")[0]?.textContent || "";
115-
116-
// 種類で絞り込む
117-
if (!kindVisibilityMap[kindText]) {
118-
term.classList.add("hidden");
119-
return;
120-
}
121-
122-
// 以降の判定で使用する説明文を取得
123-
const description = term.getElementsByClassName("description")[0]?.textContent?.toLowerCase() || "";
124-
125-
// 説明文有無での判定
126-
if (!showEmptyDescription && !description) {
127-
term.classList.add("hidden");
128-
return;
129-
}
130-
// 検索キーワードでの判定（タイトルと説明文）
131-
const title = term.getElementsByClassName("term-title")[0]?.textContent?.toLowerCase() || "";
132-
if (searchKeyword && !title.includes(searchKeyword) && !description.includes(searchKeyword)) {
133-
term.classList.add("hidden");
134-
return;
135-
}
136-
137-
// すべての条件をパスした場合に表示
138-
term.classList.remove("hidden");
139-
});
140-
141-
// 表示が変わるのでnavも更新する
142-
updateLetterNavigationVisibility();
143-
}
144-
145-
function updateLetterNavigationVisibility() {
146-
const letterNavigations = Array.from(document.getElementsByClassName("letter-navigation"));
147-
const showNavigation = document.getElementById("show-letter-navigation").checked;
148-
if (!showNavigation) {
149-
letterNavigations.forEach(nav => nav.classList.add("invisible"));
150-
return;
151-
}
152-
153-
letterNavigations.forEach((nav, index) => {
154-
// 1件目は無視
155-
if (index === 0) {
156-
nav.classList.remove("invisible");
157-
return;
158-
}
159-
160-
let visibleCount = 0;
161-
let sibling = nav.previousElementSibling;
162-
while (sibling) {
163-
// 表示しているものだけ対象にする
164-
if (!sibling.classList.contains("invisible")) {
165-
// letter-navigationはカウント対象外
166-
if (sibling.classList.contains("letter-navigation")) break;
167-
visibleCount++;
168-
// これ以上カウントする意味がないので抜ける
169-
if (visibleCount >= 10) break;
170-
}
171-
sibling = sibling.previousElementSibling;
172-
}
173-
174-
// 10個以上表示するものがあったら表示する
175-
if (visibleCount >= 10) {
176-
nav.classList.remove("invisible");
177-
} else {
178-
nav.classList.add("invisible");
179-
}
180-
});
181-
}
182-
183-
184101
function setupSortableTables() {
185102
document.querySelectorAll("table.sortable").forEach(table => {
186103
const headers = table.querySelectorAll("thead th");
@@ -281,17 +198,7 @@ function zoomFamilyTables(baseTable, baseRow) {
281198
// ページ読み込み時のイベント
282199
// リスナーの登録はそのページだけでやる
283200
document.addEventListener("DOMContentLoaded", function () {
284-
if (document.body.classList.contains("glossary")) {
285-
document.getElementById("search-input").addEventListener("input", updateArticleVisibility);
286-
document.getElementById("show-empty-description").addEventListener("change", updateArticleVisibility);
287-
document.getElementById("show-package").addEventListener("change", updateArticleVisibility);
288-
document.getElementById("show-class").addEventListener("change", updateArticleVisibility);
289-
document.getElementById("show-method").addEventListener("change", updateArticleVisibility);
290-
document.getElementById("show-field").addEventListener("change", updateArticleVisibility);
291-
document.getElementById("show-letter-navigation").addEventListener("change", updateLetterNavigationVisibility);
292-
293-
updateLetterNavigationVisibility();
294-
} else if (document.body.classList.contains("insight")) {
201+
if (document.body.classList.contains("insight")) {
295202
setupSortableTables();
296203
setupZoomIcons();
297204
document.getElementById("cancel-zoom").addEventListener("click", cancelZoom);

‎jig-core/src/main/resources/templates/glossary.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,6 @@ <h2 th:text="${term.title()}" class="term-title">名称A</h2>
6565
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
6666
<script src="./assets/jig.js"></script>
6767
</th:block>
68+
<script src="./assets/glossary.js"></script>
6869
</body>
69-
</html>
70+
</html>

0 commit comments

Comments
 (0)