342 lines
11 KiB
JavaScript
342 lines
11 KiB
JavaScript
(function () {
|
|
var root = document.documentElement;
|
|
var body = document.body;
|
|
var storageKey = "ghost-thred-theme";
|
|
|
|
function setTheme(theme) {
|
|
body.classList.toggle("theme-dark", theme === "dark");
|
|
localStorage.setItem(storageKey, theme);
|
|
}
|
|
|
|
var savedTheme = localStorage.getItem(storageKey);
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
}
|
|
|
|
document.querySelectorAll("[data-theme-toggle]").forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
setTheme(body.classList.contains("theme-dark") ? "light" : "dark");
|
|
});
|
|
});
|
|
|
|
function syncAccordion(section, open) {
|
|
var button = section.querySelector("[data-accordion]");
|
|
var content = section.querySelector("[data-accordion-content]");
|
|
|
|
section.classList.toggle("is-open", open);
|
|
|
|
if (button) {
|
|
button.setAttribute("aria-expanded", open ? "true" : "false");
|
|
}
|
|
|
|
if (!content) {
|
|
return;
|
|
}
|
|
|
|
if (open) {
|
|
content.style.height = content.scrollHeight + "px";
|
|
window.setTimeout(function () {
|
|
if (section.classList.contains("is-open")) {
|
|
content.style.height = "auto";
|
|
}
|
|
}, 260);
|
|
} else {
|
|
content.style.height = content.scrollHeight + "px";
|
|
window.requestAnimationFrame(function () {
|
|
content.style.height = "0px";
|
|
});
|
|
}
|
|
}
|
|
|
|
function initializeAccordion(section, open) {
|
|
var content = section.querySelector("[data-accordion-content]");
|
|
if (!content) {
|
|
return;
|
|
}
|
|
|
|
section.classList.toggle("is-open", open);
|
|
content.style.overflow = "hidden";
|
|
content.style.height = open ? "auto" : "0px";
|
|
|
|
var button = section.querySelector("[data-accordion]");
|
|
if (button) {
|
|
button.setAttribute("aria-expanded", open ? "true" : "false");
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll("[data-accordion-content]").forEach(function (content) {
|
|
var section = content.parentElement;
|
|
if (!section) {
|
|
return;
|
|
}
|
|
|
|
var isCategorySection = section.hasAttribute("data-sidebar-categories");
|
|
var shouldOpen = isCategorySection ? window.innerWidth >= 1024 : section.classList.contains("is-open");
|
|
|
|
initializeAccordion(section, shouldOpen);
|
|
});
|
|
|
|
document.querySelectorAll("[data-accordion]").forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
var section = button.parentElement;
|
|
syncAccordion(section, !section.classList.contains("is-open"));
|
|
});
|
|
});
|
|
|
|
function syncResponsiveAccordions() {
|
|
document.querySelectorAll("[data-sidebar-categories]").forEach(function (section) {
|
|
syncAccordion(section, window.innerWidth >= 1024);
|
|
});
|
|
}
|
|
|
|
window.addEventListener("resize", syncResponsiveAccordions);
|
|
|
|
var leftSidebarToggle = document.querySelector("[data-left-sidebar-toggle]");
|
|
var leftSidebarBackdrop = document.querySelector("[data-left-sidebar-backdrop]");
|
|
var tabletMedia = window.matchMedia("(max-width: 1023px)");
|
|
|
|
function syncLeftSidebarState() {
|
|
var isOverlay = tabletMedia.matches;
|
|
var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
|
|
|
|
if (leftSidebarToggle) {
|
|
leftSidebarToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
|
|
}
|
|
|
|
if (leftSidebarBackdrop) {
|
|
leftSidebarBackdrop.hidden = !isOverlay || !isOpen;
|
|
}
|
|
}
|
|
|
|
function openLeftSidebar() {
|
|
if (tabletMedia.matches) {
|
|
body.classList.add("left-sidebar-open");
|
|
} else {
|
|
body.classList.remove("left-sidebar-collapsed");
|
|
}
|
|
syncLeftSidebarState();
|
|
}
|
|
|
|
function closeLeftSidebar() {
|
|
if (tabletMedia.matches) {
|
|
body.classList.remove("left-sidebar-open");
|
|
} else {
|
|
body.classList.add("left-sidebar-collapsed");
|
|
}
|
|
syncLeftSidebarState();
|
|
}
|
|
|
|
if (leftSidebarToggle) {
|
|
leftSidebarToggle.addEventListener("click", function () {
|
|
var isOverlay = tabletMedia.matches;
|
|
var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
|
|
|
|
if (isOpen) {
|
|
closeLeftSidebar();
|
|
} else {
|
|
openLeftSidebar();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (leftSidebarBackdrop) {
|
|
leftSidebarBackdrop.addEventListener("click", function () {
|
|
closeLeftSidebar();
|
|
});
|
|
}
|
|
|
|
if (tabletMedia.addEventListener) {
|
|
tabletMedia.addEventListener("change", syncLeftSidebarState);
|
|
} else if (tabletMedia.addListener) {
|
|
tabletMedia.addListener(syncLeftSidebarState);
|
|
}
|
|
|
|
syncLeftSidebarState();
|
|
|
|
var tabRoot = document.querySelector("[data-tabs]");
|
|
if (tabRoot) {
|
|
var triggers = tabRoot.querySelectorAll("[data-tab-trigger]");
|
|
var panels = tabRoot.querySelectorAll("[data-tab-panel]");
|
|
|
|
triggers.forEach(function (trigger) {
|
|
trigger.addEventListener("click", function () {
|
|
var target = trigger.getAttribute("data-tab-trigger");
|
|
|
|
triggers.forEach(function (item) {
|
|
item.classList.toggle("is-active", item === trigger);
|
|
});
|
|
|
|
panels.forEach(function (panel) {
|
|
panel.classList.toggle("is-active", panel.getAttribute("data-tab-panel") === target);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
var searchModal = document.querySelector("[data-search-modal]");
|
|
var searchInput = document.querySelector("[data-search-input]");
|
|
var searchResults = document.querySelector("[data-search-results]");
|
|
|
|
function getSearchItems() {
|
|
var items = [];
|
|
|
|
document.querySelectorAll(".post-card h2 a, .recommended-list a, .category-chip, .author-list__item").forEach(function (link) {
|
|
items.push({
|
|
title: (link.textContent || "").trim(),
|
|
url: link.getAttribute("href") || "#"
|
|
});
|
|
});
|
|
|
|
return items.filter(function (item, index, array) {
|
|
return item.title && array.findIndex(function (candidate) {
|
|
return candidate.title === item.title && candidate.url === item.url;
|
|
}) === index;
|
|
});
|
|
}
|
|
|
|
function renderSearchResults(keyword) {
|
|
var normalized = keyword.trim().toLowerCase();
|
|
if (!normalized) {
|
|
searchResults.innerHTML = '<p class="search-modal__hint">현재 페이지에 표시되는 게시물, 태그 및 작성자를 필터링하려면 입력을 시작하세요.</p>';
|
|
return;
|
|
}
|
|
|
|
var items = getSearchItems().filter(function (item) {
|
|
return item.title.toLowerCase().indexOf(normalized) !== -1;
|
|
});
|
|
|
|
if (!items.length) {
|
|
searchResults.innerHTML = '<p class="search-empty">현재 보기에 일치하는 항목이 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
searchResults.innerHTML = items.map(function (item) {
|
|
return '<a class="search-result" href="' + item.url + '">' + item.title + "</a>";
|
|
}).join("");
|
|
}
|
|
|
|
function toggleSearch(open) {
|
|
if (!searchModal) {
|
|
return;
|
|
}
|
|
|
|
searchModal.hidden = !open;
|
|
body.style.overflow = open ? "hidden" : "";
|
|
|
|
if (open && searchInput) {
|
|
window.setTimeout(function () {
|
|
searchInput.focus();
|
|
}, 10);
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll("[data-search-open]").forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
toggleSearch(true);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll("[data-search-close]").forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
toggleSearch(false);
|
|
});
|
|
});
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener("input", function (event) {
|
|
renderSearchResults(event.target.value);
|
|
});
|
|
}
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.key === "/" && !/input|textarea/i.test(document.activeElement.tagName)) {
|
|
event.preventDefault();
|
|
toggleSearch(true);
|
|
}
|
|
|
|
if (event.key === "Escape") {
|
|
toggleSearch(false);
|
|
}
|
|
});
|
|
|
|
function updateLoadMoreState(pagination, nextUrl, loading) {
|
|
var trigger = pagination.querySelector("[data-load-more-trigger]");
|
|
if (!trigger) {
|
|
return;
|
|
}
|
|
|
|
if (!nextUrl) {
|
|
pagination.remove();
|
|
return;
|
|
}
|
|
|
|
pagination.dataset.nextUrl = nextUrl;
|
|
trigger.disabled = !!loading;
|
|
trigger.textContent = loading ? "Loading..." : "Load More";
|
|
pagination.classList.toggle("is-loading", !!loading);
|
|
}
|
|
|
|
function initializeLoadMore(root) {
|
|
var pagination = root.querySelector("[data-load-more-pagination]");
|
|
var list = root.querySelector("[data-load-more-list]");
|
|
|
|
if (!pagination || !list || pagination.dataset.bound === "true") {
|
|
return;
|
|
}
|
|
|
|
var trigger = pagination.querySelector("[data-load-more-trigger]");
|
|
if (!trigger) {
|
|
return;
|
|
}
|
|
|
|
pagination.dataset.bound = "true";
|
|
|
|
trigger.addEventListener("click", function () {
|
|
var nextUrl = pagination.dataset.nextUrl;
|
|
|
|
if (!nextUrl || pagination.classList.contains("is-loading")) {
|
|
return;
|
|
}
|
|
|
|
updateLoadMoreState(pagination, nextUrl, true);
|
|
|
|
fetch(nextUrl, {
|
|
headers: {
|
|
"X-Requested-With": "XMLHttpRequest"
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error("Failed to load more posts");
|
|
}
|
|
|
|
return response.text();
|
|
})
|
|
.then(function (html) {
|
|
var parser = new DOMParser();
|
|
var documentFragment = parser.parseFromString(html, "text/html");
|
|
var nextRoot = documentFragment.querySelector("[data-load-more-root]");
|
|
var nextList = nextRoot ? nextRoot.querySelector("[data-load-more-list]") : null;
|
|
var nextPagination = nextRoot ? nextRoot.querySelector("[data-load-more-pagination]") : null;
|
|
|
|
if (!nextList) {
|
|
throw new Error("Post list not found");
|
|
}
|
|
|
|
Array.prototype.forEach.call(nextList.children, function (item) {
|
|
list.appendChild(item.cloneNode(true));
|
|
});
|
|
|
|
updateLoadMoreState(pagination, nextPagination ? nextPagination.dataset.nextUrl : "", false);
|
|
})
|
|
.catch(function () {
|
|
updateLoadMoreState(pagination, pagination.dataset.nextUrl, false);
|
|
});
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll("[data-load-more-root]").forEach(function (rootNode) {
|
|
initializeLoadMore(rootNode);
|
|
});
|
|
})();
|