1080 lines
37 KiB
JavaScript
1080 lines
37 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);
|
|
} else {
|
|
setTheme("dark");
|
|
}
|
|
|
|
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();
|
|
|
|
function initializeHomeHero() {
|
|
document.querySelectorAll("[data-home-hero]").forEach(function (heroSection) {
|
|
var heroImage = heroSection.querySelector("[data-home-hero-image]");
|
|
|
|
if (!heroImage) {
|
|
return;
|
|
}
|
|
|
|
function markHeroLoaded() {
|
|
heroSection.classList.add("is-loaded");
|
|
}
|
|
|
|
if (heroImage.complete && heroImage.naturalWidth > 0) {
|
|
markHeroLoaded();
|
|
return;
|
|
}
|
|
|
|
heroImage.addEventListener("load", markHeroLoaded, { once: true });
|
|
heroImage.addEventListener("error", markHeroLoaded, { once: true });
|
|
});
|
|
}
|
|
|
|
initializeHomeHero();
|
|
|
|
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]");
|
|
var searchResetButtons = document.querySelectorAll("[data-search-reset]");
|
|
|
|
function escapeSearchHtml(value) {
|
|
return String(value || "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function getSearchItems() {
|
|
var sourceItems = document.querySelectorAll("[data-search-source] [data-search-item]");
|
|
var items = [];
|
|
|
|
sourceItems.forEach(function (itemNode) {
|
|
var title = (itemNode.dataset.searchTitle || "").trim();
|
|
var url = (itemNode.dataset.searchUrl || "").trim();
|
|
|
|
if (!title || !url) {
|
|
return;
|
|
}
|
|
|
|
items.push({
|
|
type: itemNode.dataset.searchType || "post",
|
|
title: title,
|
|
url: url,
|
|
excerpt: (itemNode.dataset.searchExcerpt || "").trim(),
|
|
image: (itemNode.dataset.searchImage || "").trim()
|
|
});
|
|
});
|
|
|
|
return items.filter(function (item, index, array) {
|
|
return array.findIndex(function (candidate) {
|
|
return candidate.type === item.type && candidate.title === item.title && candidate.url === item.url;
|
|
}) === index;
|
|
});
|
|
}
|
|
|
|
function renderSearchSection(heading, items, renderer) {
|
|
if (!items.length) {
|
|
return "";
|
|
}
|
|
|
|
return [
|
|
'<section class="search-result-group">',
|
|
'<h3 class="search-result-group__title">' + heading + "</h3>",
|
|
'<div class="search-result-group__items">',
|
|
items.map(renderer).join(""),
|
|
"</div>",
|
|
"</section>"
|
|
].join("");
|
|
}
|
|
|
|
function renderSearchResults(keyword) {
|
|
var normalized = keyword.trim().toLowerCase();
|
|
if (!normalized) {
|
|
searchResults.innerHTML = '<p class="search-modal__hint">검색어를 입력하면 Authors, Tags, Posts를 함께 보여줍니다.</p>';
|
|
return;
|
|
}
|
|
|
|
var matchedItems = getSearchItems().filter(function (item) {
|
|
var title = item.title.toLowerCase();
|
|
var excerpt = item.excerpt.toLowerCase();
|
|
return title.indexOf(normalized) !== -1 || excerpt.indexOf(normalized) !== -1;
|
|
});
|
|
|
|
if (!matchedItems.length) {
|
|
searchResults.innerHTML = '<p class="search-empty">일치하는 항목이 없습니다.</p>';
|
|
return;
|
|
}
|
|
|
|
var authorItems = matchedItems.filter(function (item) {
|
|
return item.type === "author";
|
|
});
|
|
var tagItems = matchedItems.filter(function (item) {
|
|
return item.type === "tag";
|
|
});
|
|
var postItems = matchedItems.filter(function (item) {
|
|
return item.type === "post";
|
|
});
|
|
|
|
var resultMarkup = "";
|
|
|
|
resultMarkup += renderSearchSection("Authors", authorItems, function (item) {
|
|
var imageMarkup = item.image
|
|
? '<img class="search-author__avatar" src="' + escapeSearchHtml(item.image) + '" alt="' + escapeSearchHtml(item.title) + '">'
|
|
: '<span class="search-author__avatar search-author__avatar--fallback">@</span>';
|
|
|
|
return [
|
|
'<a class="search-result search-result--author" href="' + escapeSearchHtml(item.url) + '">',
|
|
imageMarkup,
|
|
'<span class="search-result__title">' + escapeSearchHtml(item.title) + "</span>",
|
|
"</a>"
|
|
].join("");
|
|
});
|
|
|
|
resultMarkup += renderSearchSection("Tags", tagItems, function (item) {
|
|
return [
|
|
'<a class="search-result search-result--tag" href="' + escapeSearchHtml(item.url) + '">',
|
|
'<span class="search-result__prefix">#</span>',
|
|
'<span class="search-result__title">' + escapeSearchHtml(item.title) + "</span>",
|
|
"</a>"
|
|
].join("");
|
|
});
|
|
|
|
resultMarkup += renderSearchSection("Posts", postItems, function (item) {
|
|
var excerptMarkup = item.excerpt
|
|
? '<p class="search-result__excerpt">' + escapeSearchHtml(item.excerpt) + "</p>"
|
|
: "";
|
|
|
|
return [
|
|
'<a class="search-result search-result--post" href="' + escapeSearchHtml(item.url) + '">',
|
|
'<h4 class="search-result__title">' + escapeSearchHtml(item.title) + "</h4>",
|
|
excerptMarkup,
|
|
"</a>"
|
|
].join("");
|
|
});
|
|
|
|
searchResults.innerHTML = resultMarkup;
|
|
}
|
|
|
|
function clearSearchInput() {
|
|
if (!searchInput) {
|
|
return;
|
|
}
|
|
|
|
searchInput.value = "";
|
|
renderSearchResults("");
|
|
searchInput.focus();
|
|
}
|
|
|
|
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);
|
|
});
|
|
});
|
|
|
|
searchResetButtons.forEach(function (button) {
|
|
button.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
clearSearchInput();
|
|
});
|
|
});
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
var userMenuToggle = document.querySelector("[data-user-menu-toggle]");
|
|
var userMenu = document.querySelector("[data-user-menu]");
|
|
var userThemeToggle = document.querySelector("[data-user-theme-toggle]");
|
|
var userMenuStateToggle = document.querySelector("[data-user-menu-state-toggle]");
|
|
var userThemeTrack = document.querySelector("[data-user-theme-track]");
|
|
var userThemeThumb = document.querySelector("[data-user-theme-thumb]");
|
|
var userMenuTrack = document.querySelector("[data-user-menu-track]");
|
|
var userMenuThumb = document.querySelector("[data-user-menu-thumb]");
|
|
var memberNameDisplays = document.querySelectorAll("[data-member-name-display]");
|
|
var memberAvatarImages = document.querySelectorAll("[data-member-avatar-image]");
|
|
var memberAvatarBackgrounds = document.querySelectorAll("[data-member-avatar-background]");
|
|
var memberAvatarInitials = document.querySelectorAll("[data-member-avatar-initial]");
|
|
var memberPortalLinks = document.querySelectorAll("a[href^='#/portal/']");
|
|
var memberRefreshInterval = null;
|
|
|
|
function getMemberDisplayName(member) {
|
|
if (!member) {
|
|
return "Anonymous";
|
|
}
|
|
|
|
var name = (member.name || "").trim();
|
|
return name || "Member";
|
|
}
|
|
|
|
function getMemberInitial(member, seed) {
|
|
var fallbackSeed = (seed || "").trim();
|
|
var source = "";
|
|
|
|
if (member) {
|
|
source = ((member.name || "").trim() || (member.email || "").trim());
|
|
}
|
|
|
|
source = source || fallbackSeed || "M";
|
|
return source.charAt(0).toUpperCase();
|
|
}
|
|
|
|
function applyMemberUi(member) {
|
|
if (!memberNameDisplays.length && !memberAvatarImages.length && !memberAvatarBackgrounds.length && !memberAvatarInitials.length) {
|
|
return;
|
|
}
|
|
|
|
var displayName = getMemberDisplayName(member);
|
|
var avatarImage = (member && member.avatar_image ? member.avatar_image : "").trim();
|
|
var hasAvatarImage = !!avatarImage;
|
|
|
|
memberNameDisplays.forEach(function (element) {
|
|
element.textContent = displayName;
|
|
});
|
|
|
|
memberAvatarImages.forEach(function (element) {
|
|
if (hasAvatarImage) {
|
|
element.src = avatarImage;
|
|
element.alt = displayName;
|
|
element.classList.remove("hidden");
|
|
|
|
if (!element.dataset.errorBound) {
|
|
element.addEventListener("error", function () {
|
|
element.classList.add("hidden");
|
|
});
|
|
element.dataset.errorBound = "true";
|
|
}
|
|
} else {
|
|
element.classList.add("hidden");
|
|
}
|
|
});
|
|
|
|
memberAvatarBackgrounds.forEach(function (element) {
|
|
element.style.backgroundColor = "transparent";
|
|
});
|
|
|
|
memberAvatarInitials.forEach(function (element) {
|
|
var seed = element.dataset.memberAvatarSeed || "";
|
|
element.textContent = getMemberInitial(member, seed);
|
|
});
|
|
}
|
|
|
|
function initializeMemberAvatarFromSeed() {
|
|
memberAvatarInitials.forEach(function (element) {
|
|
var seed = element.dataset.memberAvatarSeed || "";
|
|
element.textContent = getMemberInitial(null, seed);
|
|
});
|
|
|
|
memberAvatarBackgrounds.forEach(function (element) {
|
|
element.style.backgroundColor = "transparent";
|
|
});
|
|
}
|
|
|
|
function getMemberFromPayload(payload) {
|
|
if (!payload) {
|
|
return null;
|
|
}
|
|
|
|
if (payload.member) {
|
|
return payload.member;
|
|
}
|
|
|
|
if (Array.isArray(payload.members) && payload.members.length) {
|
|
return payload.members[0];
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function refreshMemberUi() {
|
|
if (!memberNameDisplays.length && !memberAvatarImages.length && !memberAvatarBackgrounds.length && !memberAvatarInitials.length) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
return window
|
|
.fetch("/members/api/member/?_=" + Date.now(), {
|
|
method: "GET",
|
|
credentials: "include",
|
|
cache: "no-store",
|
|
headers: {
|
|
Accept: "application/json"
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch member");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then(function (payload) {
|
|
var member = getMemberFromPayload(payload);
|
|
|
|
if (member) {
|
|
applyMemberUi(member);
|
|
}
|
|
})
|
|
.catch(function () {});
|
|
}
|
|
|
|
function scheduleMemberUiRefreshLoop() {
|
|
var attempts = 0;
|
|
var maxAttempts = 20;
|
|
|
|
if (memberRefreshInterval) {
|
|
window.clearInterval(memberRefreshInterval);
|
|
memberRefreshInterval = null;
|
|
}
|
|
|
|
refreshMemberUi();
|
|
|
|
memberRefreshInterval = window.setInterval(function () {
|
|
attempts += 1;
|
|
refreshMemberUi();
|
|
|
|
if (attempts >= maxAttempts) {
|
|
window.clearInterval(memberRefreshInterval);
|
|
memberRefreshInterval = null;
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function syncUserMenuToggles() {
|
|
var isDark = body.classList.contains("theme-dark");
|
|
var menuOpen = tabletMedia.matches ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
|
|
|
|
if (userThemeTrack) {
|
|
userThemeTrack.classList.toggle("bg-accent", isDark);
|
|
userThemeTrack.classList.toggle("bg-brd", !isDark);
|
|
userThemeTrack.style.backgroundColor = isDark ? "var(--accent)" : "var(--border)";
|
|
}
|
|
if (userThemeThumb) {
|
|
userThemeThumb.classList.toggle("translate-x-3.5", isDark);
|
|
userThemeThumb.classList.toggle("translate-x-0", !isDark);
|
|
}
|
|
|
|
if (userMenuTrack) {
|
|
userMenuTrack.classList.toggle("bg-accent", menuOpen);
|
|
userMenuTrack.classList.toggle("bg-brd", !menuOpen);
|
|
userMenuTrack.style.backgroundColor = menuOpen ? "var(--accent)" : "var(--border)";
|
|
}
|
|
if (userMenuThumb) {
|
|
userMenuThumb.classList.toggle("translate-x-3.5", menuOpen);
|
|
userMenuThumb.classList.toggle("translate-x-0", !menuOpen);
|
|
}
|
|
}
|
|
|
|
function setUserMenu(open) {
|
|
if (!userMenu) {
|
|
return;
|
|
}
|
|
|
|
userMenu.classList.toggle("translate-y-0", open);
|
|
userMenu.classList.toggle("opacity-100", open);
|
|
userMenu.classList.toggle("visible", open);
|
|
userMenu.classList.toggle("scale-100", open);
|
|
userMenu.classList.toggle("pointer-events-auto", open);
|
|
userMenu.classList.toggle("-translate-y-4", !open);
|
|
userMenu.classList.toggle("opacity-0", !open);
|
|
userMenu.classList.toggle("invisible", !open);
|
|
userMenu.classList.toggle("scale-95", !open);
|
|
userMenu.classList.toggle("pointer-events-none", !open);
|
|
}
|
|
|
|
if (userMenuToggle && userMenu) {
|
|
userMenuToggle.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
setUserMenu(userMenu.classList.contains("invisible"));
|
|
syncUserMenuToggles();
|
|
refreshMemberUi();
|
|
});
|
|
|
|
document.addEventListener("click", function (event) {
|
|
if (!event.target.closest("[data-user-menu]") && !event.target.closest("[data-user-menu-toggle]")) {
|
|
setUserMenu(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (userThemeToggle) {
|
|
userThemeToggle.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
setTheme(body.classList.contains("theme-dark") ? "light" : "dark");
|
|
syncUserMenuToggles();
|
|
});
|
|
}
|
|
|
|
if (userMenuStateToggle) {
|
|
userMenuStateToggle.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
var isOverlay = tabletMedia.matches;
|
|
var isOpen = isOverlay ? body.classList.contains("left-sidebar-open") : !body.classList.contains("left-sidebar-collapsed");
|
|
if (isOpen) {
|
|
closeLeftSidebar();
|
|
} else {
|
|
openLeftSidebar();
|
|
}
|
|
syncUserMenuToggles();
|
|
});
|
|
}
|
|
|
|
initializeMemberAvatarFromSeed();
|
|
syncUserMenuToggles();
|
|
refreshMemberUi();
|
|
|
|
memberPortalLinks.forEach(function (link) {
|
|
link.addEventListener("click", function () {
|
|
scheduleMemberUiRefreshLoop();
|
|
});
|
|
});
|
|
|
|
document.addEventListener("visibilitychange", function () {
|
|
if (document.visibilityState === "visible") {
|
|
refreshMemberUi();
|
|
}
|
|
});
|
|
|
|
window.addEventListener("focus", function () {
|
|
refreshMemberUi();
|
|
});
|
|
|
|
var recommendationsPortalTrigger = document.querySelector("[data-portal='recommendations']");
|
|
var recommendationsPortalTitle = recommendationsPortalTrigger ? recommendationsPortalTrigger.getAttribute("data-portal-title") : "";
|
|
var recommendationsPortalDescription = recommendationsPortalTrigger ? recommendationsPortalTrigger.getAttribute("data-portal-description") : "";
|
|
|
|
function getPortalDocuments() {
|
|
var docs = [document];
|
|
|
|
document.querySelectorAll("iframe").forEach(function (frame) {
|
|
try {
|
|
if (frame.contentDocument) {
|
|
docs.push(frame.contentDocument);
|
|
}
|
|
} catch (error) {}
|
|
});
|
|
|
|
return docs;
|
|
}
|
|
|
|
function applyRecommendationsPortalCopy() {
|
|
if (!recommendationsPortalTitle && !recommendationsPortalDescription) {
|
|
return false;
|
|
}
|
|
|
|
var hasPatched = false;
|
|
|
|
getPortalDocuments().forEach(function (docRoot) {
|
|
var portalTitle = docRoot.querySelector(".gh-portal-main-title");
|
|
var portalDescription = docRoot.querySelector(".gh-portal-recommendations-description");
|
|
|
|
if (portalTitle && recommendationsPortalTitle) {
|
|
portalTitle.textContent = recommendationsPortalTitle;
|
|
hasPatched = true;
|
|
}
|
|
|
|
if (portalDescription && recommendationsPortalDescription) {
|
|
portalDescription.textContent = recommendationsPortalDescription;
|
|
hasPatched = true;
|
|
}
|
|
});
|
|
|
|
return hasPatched;
|
|
}
|
|
|
|
if (recommendationsPortalTrigger && (recommendationsPortalTitle || recommendationsPortalDescription)) {
|
|
recommendationsPortalTrigger.addEventListener("click", function () {
|
|
applyRecommendationsPortalCopy();
|
|
var attempts = 0;
|
|
var maxAttempts = 20;
|
|
var retryTimer = window.setInterval(function () {
|
|
attempts += 1;
|
|
var done = applyRecommendationsPortalCopy();
|
|
if (done || attempts >= maxAttempts) {
|
|
window.clearInterval(retryTimer);
|
|
}
|
|
}, 100);
|
|
});
|
|
}
|
|
|
|
function copyTextToClipboard(text) {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
return navigator.clipboard.writeText(text);
|
|
}
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
var textArea = document.createElement("textarea");
|
|
textArea.value = text;
|
|
textArea.setAttribute("readonly", "readonly");
|
|
textArea.style.position = "fixed";
|
|
textArea.style.opacity = "0";
|
|
textArea.style.pointerEvents = "none";
|
|
|
|
document.body.appendChild(textArea);
|
|
textArea.focus();
|
|
textArea.select();
|
|
|
|
try {
|
|
var copied = document.execCommand("copy");
|
|
document.body.removeChild(textArea);
|
|
|
|
if (!copied) {
|
|
reject(new Error("Copy command was rejected"));
|
|
return;
|
|
}
|
|
|
|
resolve();
|
|
} catch (error) {
|
|
document.body.removeChild(textArea);
|
|
reject(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setShareButtonFeedback(button, label) {
|
|
if (!button) {
|
|
return;
|
|
}
|
|
|
|
var originalLabel = button.dataset.shareOriginalLabel || button.getAttribute("aria-label") || "Share this post";
|
|
button.dataset.shareOriginalLabel = originalLabel;
|
|
button.setAttribute("aria-label", label);
|
|
|
|
if (button.dataset.shareFeedbackTimer) {
|
|
window.clearTimeout(Number(button.dataset.shareFeedbackTimer));
|
|
}
|
|
|
|
button.dataset.shareFeedbackTimer = String(window.setTimeout(function () {
|
|
button.setAttribute("aria-label", originalLabel);
|
|
delete button.dataset.shareFeedbackTimer;
|
|
}, 1600));
|
|
}
|
|
|
|
var shareModal = document.querySelector("[data-share-modal]");
|
|
var shareModalDialog = shareModal ? shareModal.querySelector(".share-modal__dialog") : null;
|
|
var shareModalTitle = shareModal ? shareModal.querySelector("[data-share-modal-title]") : null;
|
|
var shareModalDescription = shareModal ? shareModal.querySelector("[data-share-modal-description]") : null;
|
|
var shareModalImage = shareModal ? shareModal.querySelector("[data-share-modal-image]") : null;
|
|
var shareModalCopyButton = shareModal ? shareModal.querySelector("[data-share-copy-button]") : null;
|
|
var shareModalCopyLabel = shareModal ? shareModal.querySelector("[data-share-copy-label]") : null;
|
|
var activeShareMetadata = null;
|
|
|
|
function buildShareHrefMap(metadata) {
|
|
var encodedUrl = encodeURIComponent(metadata.url || "");
|
|
var encodedTitle = encodeURIComponent(metadata.title || "");
|
|
|
|
return {
|
|
x: "https://twitter.com/intent/tweet?text=" + encodedTitle + "&url=" + encodedUrl
|
|
};
|
|
}
|
|
|
|
function renderShareModal(metadata) {
|
|
if (!shareModal) {
|
|
return;
|
|
}
|
|
|
|
activeShareMetadata = metadata;
|
|
var hrefMap = buildShareHrefMap(metadata);
|
|
|
|
if (shareModalTitle) {
|
|
shareModalTitle.textContent = metadata.title || document.title || "Post";
|
|
}
|
|
|
|
if (shareModalDescription) {
|
|
shareModalDescription.textContent = metadata.description || "이 글을 공유해보세요.";
|
|
}
|
|
|
|
if (shareModalImage) {
|
|
if (metadata.image) {
|
|
shareModalImage.src = metadata.image;
|
|
shareModalImage.alt = metadata.title || "Post image";
|
|
shareModalImage.classList.remove("hidden");
|
|
} else {
|
|
shareModalImage.removeAttribute("src");
|
|
shareModalImage.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
Object.keys(hrefMap).forEach(function (key) {
|
|
var link = shareModal.querySelector("[data-share-link='" + key + "']");
|
|
if (!link) {
|
|
return;
|
|
}
|
|
|
|
link.href = hrefMap[key];
|
|
});
|
|
|
|
if (shareModalCopyLabel) {
|
|
shareModalCopyLabel.textContent = "주소 복사";
|
|
}
|
|
}
|
|
|
|
function openShareModal(metadata) {
|
|
if (!shareModal || !metadata || !metadata.url) {
|
|
return;
|
|
}
|
|
|
|
renderShareModal(metadata);
|
|
shareModal.hidden = false;
|
|
body.classList.add("share-modal-open");
|
|
|
|
window.requestAnimationFrame(function () {
|
|
shareModal.classList.add("is-open");
|
|
});
|
|
}
|
|
|
|
function closeShareModal() {
|
|
if (!shareModal || shareModal.hidden) {
|
|
return;
|
|
}
|
|
|
|
shareModal.classList.remove("is-open");
|
|
body.classList.remove("share-modal-open");
|
|
|
|
window.setTimeout(function () {
|
|
if (!shareModal.classList.contains("is-open")) {
|
|
shareModal.hidden = true;
|
|
}
|
|
}, 180);
|
|
}
|
|
|
|
function getShareMetadata(button) {
|
|
return {
|
|
url: (button.dataset.shareUrl || window.location.href || "").trim(),
|
|
title: (button.dataset.shareTitle || document.title || "").trim(),
|
|
description: (button.dataset.shareDescription || "").trim(),
|
|
image: (button.dataset.shareImage || "").trim()
|
|
};
|
|
}
|
|
|
|
function initializeShareButtons() {
|
|
document.querySelectorAll("[data-post-share-toggle]").forEach(function (button) {
|
|
if (button.dataset.shareBound === "true") {
|
|
return;
|
|
}
|
|
|
|
button.dataset.shareBound = "true";
|
|
|
|
button.addEventListener("click", function (event) {
|
|
event.preventDefault();
|
|
openShareModal(getShareMetadata(button));
|
|
});
|
|
});
|
|
}
|
|
|
|
if (shareModal) {
|
|
shareModal.querySelectorAll("[data-share-modal-close]").forEach(function (button) {
|
|
button.addEventListener("click", closeShareModal);
|
|
});
|
|
|
|
shareModal.addEventListener("click", function (event) {
|
|
if (shareModalDialog && !shareModalDialog.contains(event.target)) {
|
|
closeShareModal();
|
|
}
|
|
});
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.key === "Escape" && !shareModal.hidden) {
|
|
closeShareModal();
|
|
}
|
|
});
|
|
|
|
if (shareModalCopyButton) {
|
|
shareModalCopyButton.addEventListener("click", function () {
|
|
if (!activeShareMetadata || !activeShareMetadata.url) {
|
|
return;
|
|
}
|
|
|
|
copyTextToClipboard(activeShareMetadata.url)
|
|
.then(function () {
|
|
setShareButtonFeedback(shareModalCopyButton, "복사 완료");
|
|
shareModalCopyButton.classList.add("is-success");
|
|
window.setTimeout(function () {
|
|
shareModalCopyButton.classList.remove("is-success");
|
|
}, 1400);
|
|
if (shareModalCopyLabel) {
|
|
shareModalCopyLabel.textContent = "복사 완료";
|
|
window.setTimeout(function () {
|
|
if (shareModalCopyLabel) {
|
|
shareModalCopyLabel.textContent = "주소 복사";
|
|
}
|
|
}, 1400);
|
|
}
|
|
})
|
|
.catch(function () {});
|
|
});
|
|
}
|
|
}
|
|
|
|
initializeShareButtons();
|
|
|
|
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));
|
|
});
|
|
|
|
initializeShareButtons();
|
|
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);
|
|
});
|
|
|
|
function initializeCategoryPriority() {
|
|
document.querySelectorAll("[data-category-priority-list]").forEach(function (list) {
|
|
var items = Array.prototype.slice.call(list.querySelectorAll("[data-category-priority-item]"));
|
|
var priorityOrder = (list.dataset.categoryPriorityOrder || "")
|
|
.split(",")
|
|
.map(function (slug) {
|
|
return slug.trim();
|
|
})
|
|
.filter(Boolean);
|
|
var limit = Number(list.dataset.categoryPriorityLimit || items.length);
|
|
|
|
if (!items.length) {
|
|
return;
|
|
}
|
|
|
|
items.sort(function (leftItem, rightItem) {
|
|
var leftSlug = leftItem.dataset.categorySlug || "";
|
|
var rightSlug = rightItem.dataset.categorySlug || "";
|
|
var leftIndex = priorityOrder.indexOf(leftSlug);
|
|
var rightIndex = priorityOrder.indexOf(rightSlug);
|
|
var leftPinned = leftIndex !== -1;
|
|
var rightPinned = rightIndex !== -1;
|
|
|
|
if (leftPinned && rightPinned) {
|
|
return leftIndex - rightIndex;
|
|
}
|
|
|
|
if (leftPinned) {
|
|
return -1;
|
|
}
|
|
|
|
if (rightPinned) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
});
|
|
|
|
items.forEach(function (item, index) {
|
|
list.appendChild(item);
|
|
item.hidden = index >= limit;
|
|
});
|
|
});
|
|
}
|
|
|
|
initializeCategoryPriority();
|
|
|
|
document.querySelectorAll("[data-featured-slider]").forEach(function (sliderRoot) {
|
|
var track = sliderRoot.querySelector("[data-featured-track]");
|
|
var prev = sliderRoot.querySelector("[data-featured-prev]");
|
|
var next = sliderRoot.querySelector("[data-featured-next]");
|
|
|
|
if (!track || !prev || !next) {
|
|
return;
|
|
}
|
|
|
|
function getStep() {
|
|
var firstCard = track.querySelector(".featured-slider__item");
|
|
if (!firstCard) {
|
|
return 320;
|
|
}
|
|
var gap = 20;
|
|
return firstCard.getBoundingClientRect().width + gap;
|
|
}
|
|
|
|
function syncButtons() {
|
|
var maxLeft = Math.max(0, track.scrollWidth - track.clientWidth - 2);
|
|
prev.disabled = track.scrollLeft <= 1;
|
|
next.disabled = track.scrollLeft >= maxLeft;
|
|
}
|
|
|
|
prev.addEventListener("click", function () {
|
|
track.scrollBy({ left: -getStep(), behavior: "smooth" });
|
|
});
|
|
|
|
next.addEventListener("click", function () {
|
|
track.scrollBy({ left: getStep(), behavior: "smooth" });
|
|
});
|
|
|
|
track.addEventListener("scroll", syncButtons, { passive: true });
|
|
window.addEventListener("resize", syncButtons);
|
|
syncButtons();
|
|
});
|
|
})();
|