Интересно, можно ли использовать фильтры для отображения категории в виде документации и в алфавитном порядке.
У нас есть глоссарий, который должен отображать тематический вид в порядке ![]()
В настоящее время вид фильтров отделен от документации:
В итоге я использовал для этого собственный компонент темы:
// Для сортировки по алфавиту (A-Z) нужна вся категория: ядро не умеет сортировать список тем по названию
// (в TopicQuery::SORTABLE_MAPPING нет "title"), поэтому мы исчерпываем пагинированный список
// перед сортировкой. Ограничено — категории документации небольшие; для более крупных списков
// сортируется только загруженное, а MutationObserver ниже поддерживает актуальность.
// ponytail: если ядро когда-нибудь реализует серверную сортировку по названию, этот цикл можно удалить.
const MAX_DOC_PAGES = 12; // ~360 тем при 30 на страницу
let docLoadRun = 0;
async function loadAllDocTopics(api) {
const run = ++docLoadRun;
// `controller:discovery/topics` устарел в текущем Discourse
// (идентификатор устаревания: discourse.discovery-topics-controller). Discovery теперь использует
// отдельный контроллер для каждого фильтра; категории документации всегда представляют собой список
// последних тем, поэтому мы напрямую ищем этот контроллер. Сбой здесь просто означает, что мы отсортируем
// первую страницу, поэтому каждый шаг защищен optional chaining.
const list = api.container.lookup("controller:discovery/latest")?.model;
if (!list?.loadMore) {
return;
}
for (let page = 0; page < MAX_DOC_PAGES; page++) {
if (!list.more_topics_url) {
return;
}
const before = list.topics?.length ?? 0;
await list.loadMore();
// Навигация отменила загрузку, или список перестал расти — в любом случае, останавливаемся.
if (run !== docLoadRun || (list.topics?.length ?? 0) === before) {
return;
}
}
}
// Сортирует список тем документации по алфавиту (A-Z), используя локаль страницы <html lang>.
let docSortObservers = new Map();
function docSortLocale() {
const lang = document.documentElement.lang;
if (!lang) {
return undefined;
}
try {
Intl.getCanonicalLocales(lang); // выбрасывает RangeError при некорректном теге
return lang;
} catch {
return undefined; // откат к локали браузера по умолчанию
}
}
function sortDocTopicList(body, locale) {
const rows = [...body.querySelectorAll(":scope > .topic-list-item")];
if (rows.length < 2) {
return;
}
const sorted = [...rows].sort((a, b) => {
const titleA = a.querySelector(".title")?.textContent.trim() ?? "";
const titleB = b.querySelector(".title")?.textContent.trim() ?? "";
return titleA.localeCompare(titleB, locale);
});
if (sorted.every((row, i) => rows[i] === row)) {
return; // уже отсортировано — предотвращает повторное срабатывание наблюдателя
}
// Вставляем перед тем, что следует за строками, сохраняя маркер "загрузить еще" в конце.
const anchor = rows[rows.length - 1].nextSibling;
// Фиксируем первую видимую строку, чтобы вставки выше не сбивали прокрутку.
const pinned = rows.find((row) => row.getBoundingClientRect().bottom > 0);
const pinnedTop = pinned?.getBoundingClientRect().top;
// Наблюдатель приостановлен, чтобы наши собственные изменения не вызвали повторный вход в функцию.
const observer = docSortObservers.get(body);
observer?.disconnect();
sorted.forEach((row) => body.insertBefore(row, anchor));
observer?.observe(body, { childList: true });
if (pinned) {
window.scrollBy(0, pinned.getBoundingClientRect().top - pinnedTop);
}
}
function sortDocCategoryTopicLists() {
docSortObservers.forEach((observer) => observer.disconnect());
docSortObservers = new Map();
const locale = docSortLocale();
// Контейнер не является flex/grid, поэтому для изменения порядка нужно перемещать DOM-узлы — CSS `order` игнорируется.
document.querySelectorAll(".topic-list.doc-simple-mode .topic-list-body").forEach((body) => {
// try/finally, чтобы список всегда отображался, даже если сортировка вызовет ошибку.
try {
sortDocTopicList(body, locale);
} finally {
body.classList.add("docs-sorted");
}
// Сортируем только после того, как загрузка успокоится — пересортировка во время загрузки блокировала загрузчик.
let settleTimer = null;
const observer = new MutationObserver(() => {
window.clearTimeout(settleTimer);
settleTimer = window.setTimeout(() => {
sortDocTopicList(body, locale);
}, 400);
});
observer.observe(body, { childList: true });
docSortObservers.set(body, observer);
});
}
Я думаю, что код, скорее всего, можно улучшить. Я с радостью принимаю предложения и/или PR.