228 lines
8.1 KiB
JavaScript
228 lines
8.1 KiB
JavaScript
/**
|
|
* AKSRT Archive AJAX Filter
|
|
*/
|
|
(function () {
|
|
"use strict";
|
|
|
|
function initArchiveFilter(root) {
|
|
var scope = root || document;
|
|
var bar = scope.querySelector(".archive-filter-bar--ajax[data-ajax-archive]");
|
|
if (!bar) return;
|
|
|
|
var archiveType = bar.dataset.ajaxArchive || "category";
|
|
var termId = parseInt(bar.dataset.termId, 10) || 0;
|
|
var wrap = scope.querySelector("[data-ajax-wrap]");
|
|
if (!wrap) return;
|
|
|
|
var loading = wrap.querySelector(".archive__ajax-loading");
|
|
var REST_BASE = "/wp-json/aksrt/v1/archive/posts";
|
|
var emptyText = archiveType === "tag" ? "该标签下暂无文章" : "该分类下暂无文章";
|
|
|
|
var state = {
|
|
filter_cat: "",
|
|
filter_tag: "",
|
|
sort: "latest",
|
|
page: 1,
|
|
cf: {}
|
|
};
|
|
|
|
var activeCat = bar.querySelector("[data-filter-cat].is-active");
|
|
if (activeCat) state.filter_cat = activeCat.dataset.filterCat || "";
|
|
var activeTag = bar.querySelector("[data-filter-tag].is-active");
|
|
if (activeTag) state.filter_tag = activeTag.dataset.filterTag || "";
|
|
var activeSort = bar.querySelector("[data-filter-sort].is-active");
|
|
if (activeSort) state.sort = activeSort.dataset.filterSort || "latest";
|
|
bar.querySelectorAll("[data-filter-cf].is-active").forEach(function (el) {
|
|
var dimKey = el.dataset.filterCf || "";
|
|
var dimVal = el.dataset.filterCfVal || "";
|
|
if (dimKey) state.cf[dimKey] = dimVal;
|
|
});
|
|
|
|
function buildUrl() {
|
|
var params = new URLSearchParams();
|
|
params.set("archive_type", archiveType);
|
|
params.set("term_id", String(termId));
|
|
if (state.filter_cat) params.set("filter_cat", state.filter_cat);
|
|
if (state.filter_tag) params.set("filter_tag", state.filter_tag);
|
|
|
|
var sortMap = { oldest: { orderby: "date", order: "ASC" }, popular: { orderby: "comment_count", order: "DESC" } };
|
|
var s = sortMap[state.sort];
|
|
params.set("sort", s ? s.orderby : "date");
|
|
params.set("order", s ? s.order : "DESC");
|
|
params.set("page", String(state.page));
|
|
var cfActive = {};
|
|
var hasCf = false;
|
|
for (var cfK in state.cf) {
|
|
if (state.cf[cfK]) {
|
|
cfActive[cfK] = state.cf[cfK];
|
|
hasCf = true;
|
|
}
|
|
}
|
|
if (hasCf) params.set("custom_filters", JSON.stringify(cfActive));
|
|
return REST_BASE + "?" + params.toString();
|
|
}
|
|
|
|
function updateActiveChips() {
|
|
bar.querySelectorAll("[data-filter-cat]").forEach(function (el) {
|
|
el.classList.toggle("is-active", (el.dataset.filterCat || "") === state.filter_cat);
|
|
});
|
|
bar.querySelectorAll("[data-filter-tag]").forEach(function (el) {
|
|
el.classList.toggle("is-active", (el.dataset.filterTag || "") === state.filter_tag);
|
|
});
|
|
bar.querySelectorAll("[data-filter-sort]").forEach(function (el) {
|
|
el.classList.toggle("is-active", (el.dataset.filterSort || "latest") === state.sort);
|
|
});
|
|
bar.querySelectorAll("[data-filter-cf]").forEach(function (el) {
|
|
var dimKey = el.dataset.filterCf || "";
|
|
var dimVal = el.dataset.filterCfVal || "";
|
|
var isActive = dimKey && (state.cf[dimKey] || "") === dimVal;
|
|
el.classList.toggle("is-active", isActive);
|
|
});
|
|
}
|
|
|
|
function showLoading() {
|
|
if (loading) loading.classList.add("is-loading");
|
|
wrap.classList.add("is-loading");
|
|
}
|
|
|
|
function hideLoading() {
|
|
if (loading) loading.classList.remove("is-loading");
|
|
wrap.classList.remove("is-loading");
|
|
}
|
|
|
|
function rebuildEmptyState() {
|
|
var noResults = document.createElement("div");
|
|
noResults.className = "no-results content-stream__empty";
|
|
noResults.innerHTML = "<p>" + emptyText + "</p>";
|
|
wrap.appendChild(noResults);
|
|
}
|
|
|
|
function fetchPosts(pushState) {
|
|
showLoading();
|
|
fetch(buildUrl(), {
|
|
method: "GET",
|
|
headers: { Accept: "application/json" },
|
|
credentials: "same-origin"
|
|
})
|
|
.then(function (r) {
|
|
if (!r.ok) throw new Error("HTTP " + r.status);
|
|
return r.json();
|
|
})
|
|
.then(function (data) {
|
|
hideLoading();
|
|
if (data.html !== undefined) {
|
|
var children = Array.from(wrap.children);
|
|
children.forEach(function (child) {
|
|
if (child !== loading) wrap.removeChild(child);
|
|
});
|
|
if (data.html) {
|
|
var temp = document.createElement("div");
|
|
temp.innerHTML = data.html;
|
|
while (temp.firstChild) wrap.appendChild(temp.firstChild);
|
|
} else {
|
|
rebuildEmptyState();
|
|
}
|
|
if (window.AksrtFrontend) AksrtFrontend.rehydrate(wrap, "ajax");
|
|
}
|
|
if (pushState !== false) {
|
|
var url = new URL(window.location.href);
|
|
url.searchParams.delete("orderby");
|
|
url.searchParams.delete("order");
|
|
url.searchParams.delete("paged");
|
|
url.searchParams.delete("aksrt_filter_cat");
|
|
url.searchParams.delete("aksrt_filter_tag");
|
|
url.searchParams.forEach(function (v, k) {
|
|
if (k.indexOf("aksrt_cf_") === 0) url.searchParams.delete(k);
|
|
});
|
|
if (state.filter_cat) url.searchParams.set("aksrt_filter_cat", state.filter_cat);
|
|
if (state.filter_tag) url.searchParams.set("aksrt_filter_tag", state.filter_tag);
|
|
for (var cfK2 in state.cf) {
|
|
if (state.cf[cfK2]) url.searchParams.set("aksrt_cf_" + cfK2, state.cf[cfK2]);
|
|
}
|
|
if (state.sort === "oldest") {
|
|
url.searchParams.set("orderby", "date");
|
|
url.searchParams.set("order", "asc");
|
|
} else if (state.sort === "popular") {
|
|
url.searchParams.set("orderby", "comment_count");
|
|
url.searchParams.set("order", "desc");
|
|
}
|
|
if (state.page > 1) url.searchParams.set("paged", String(state.page));
|
|
history.pushState({ aksrtArchive: true, state: Object.assign({}, state) }, "", url.toString());
|
|
}
|
|
})
|
|
.catch(function () {
|
|
hideLoading();
|
|
});
|
|
}
|
|
|
|
bar.addEventListener("click", function (e) {
|
|
var chip = e.target.closest("[data-filter-cat], [data-filter-tag], [data-filter-sort], [data-filter-cf]");
|
|
if (!chip) return;
|
|
e.preventDefault();
|
|
|
|
var changed = false;
|
|
if (chip.dataset.filterCat !== undefined) {
|
|
var newCat = chip.dataset.filterCat;
|
|
if (newCat !== state.filter_cat) {
|
|
state.filter_cat = newCat;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (chip.dataset.filterTag !== undefined) {
|
|
var newTag = chip.dataset.filterTag;
|
|
if (newTag !== state.filter_tag) {
|
|
state.filter_tag = newTag;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (chip.dataset.filterSort !== undefined) {
|
|
var newSort = chip.dataset.filterSort || "latest";
|
|
if (newSort !== state.sort) {
|
|
state.sort = newSort;
|
|
changed = true;
|
|
}
|
|
}
|
|
if (chip.dataset.filterCf !== undefined) {
|
|
var cfKey = chip.dataset.filterCf;
|
|
var cfVal = chip.dataset.filterCfVal || "";
|
|
if ((state.cf[cfKey] || "") !== cfVal) {
|
|
state.cf[cfKey] = cfVal;
|
|
changed = true;
|
|
}
|
|
}
|
|
|
|
if (changed) {
|
|
state.page = 1;
|
|
updateActiveChips();
|
|
fetchPosts(true);
|
|
}
|
|
});
|
|
|
|
wrap.addEventListener("click", function (e) {
|
|
var pageLink = e.target.closest(".pagination a, .nav-links a, a.page-numbers");
|
|
if (!pageLink || !wrap.contains(pageLink)) return;
|
|
var href = pageLink.getAttribute("href");
|
|
if (!href) return;
|
|
|
|
var match = href.match(/[?&]paged=(\d+)/);
|
|
if (match) {
|
|
e.preventDefault();
|
|
state.page = parseInt(match[1], 10) || 1;
|
|
fetchPosts(true);
|
|
}
|
|
});
|
|
|
|
window.addEventListener("popstate", function (e) {
|
|
if (e.state && e.state.aksrtArchive) {
|
|
state = Object.assign(state, e.state.state);
|
|
updateActiveChips();
|
|
fetchPosts(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
window.AksrtFrontend.register("aksrt-archive-filter", function (root) {
|
|
initArchiveFilter(root);
|
|
});
|
|
})();
|