Files
web_huangguo_web/app/static/js/pages/mobileSearch.js
T
fish03andClaude Opus 5.5 bef9f8b4ed Initial commit
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-23 14:43:16 +07:00

231 lines
8.2 KiB
JavaScript

(function () {
var panel = document.querySelector("[data-mobile-search-landing]");
var mobileMedia = window.matchMedia && window.matchMedia("(max-width: 767px)");
if (!panel || !mobileMedia || !mobileMedia.matches) return;
var PLACEHOLDER = "/static/images/placeholder.png?v=2";
var historySection = panel.querySelector("[data-mobile-search-history]");
var historyList = panel.querySelector("[data-mobile-search-history-list]");
var clearButton = panel.querySelector("[data-mobile-search-history-clear]");
var hotSection = panel.querySelector("[data-mobile-search-hot]");
var hotList = panel.querySelector("[data-mobile-search-hot-list]");
var guessSection = panel.querySelector("[data-mobile-search-guess]");
var guessList = panel.querySelector("[data-mobile-search-guess-list]");
var changeButton = panel.querySelector("[data-mobile-search-guess-change]");
var historyDivider = panel.querySelector('[data-mobile-search-divider="history"]');
var hotDivider = panel.querySelector('[data-mobile-search-divider="hot"]');
var hotLikeData = {};
var guessOffset = 0;
function searchKeyword(keyword) {
keyword = String(keyword || "").trim();
if (!keyword) return;
if (window.SearchHistory && typeof window.SearchHistory.add === "function") {
window.SearchHistory.add(keyword);
}
window.location.href = "/search/" + encodeURIComponent(keyword) + "/";
}
function syncDividers() {
var hasHistory = historySection && !historySection.hidden;
var hasHot = hotSection && !hotSection.hidden;
var hasGuess = guessSection && !guessSection.hidden;
if (historyDivider) historyDivider.hidden = !(hasHistory && (hasHot || hasGuess));
if (hotDivider) hotDivider.hidden = !(hasHot && hasGuess);
}
function renderHistory() {
if (!historyList || !historySection) return;
var history = window.SearchHistory && typeof window.SearchHistory.get === "function"
? window.SearchHistory.get()
: [];
historyList.textContent = "";
historySection.hidden = history.length === 0;
history.forEach(function (keyword) {
var button = document.createElement("button");
button.type = "button";
button.className = "mobile-search-history-tag";
button.textContent = keyword;
button.addEventListener("click", function () {
searchKeyword(keyword);
});
historyList.appendChild(button);
});
syncDividers();
}
function formatCount(value) {
var count = Math.max(0, Number(value) || 0);
if (count >= 10000) {
return (count / 10000).toFixed(1).replace(/\.0$/, "") + "w";
}
return String(count);
}
function renderHotSearch() {
if (!hotList || !hotSection) return;
var source = Array.isArray(hotLikeData.hotSearch) ? hotLikeData.hotSearch : [];
var items = source.filter(function (item) {
return item && String(item.keyword || "").trim();
}).slice(0, 6);
hotList.textContent = "";
hotSection.hidden = items.length === 0;
items.forEach(function (item, index) {
var button = document.createElement("button");
var rank = document.createElement("span");
var keyword = document.createElement("span");
var count = document.createElement("span");
var keywordText = String(item.keyword || "").trim();
button.type = "button";
button.className = "mobile-search-hot-item";
rank.className = "mobile-search-hot-rank";
keyword.className = "mobile-search-hot-keyword";
count.className = "mobile-search-hot-count";
rank.textContent = String(index + 1);
keyword.textContent = keywordText;
count.textContent = formatCount(item.count);
button.appendChild(rank);
button.appendChild(keyword);
button.appendChild(count);
button.addEventListener("click", function () {
searchKeyword(keywordText);
});
hotList.appendChild(button);
});
syncDividers();
}
function detailHref(item) {
var slug = String((item && item.slug) || "").trim();
var id = Number(item && item.id);
var key = slug || (id > 0 ? String(id) : "");
return key ? "/detail/" + encodeURIComponent(key) + "/" : "#";
}
function firstCardTag(item) {
var tags = item && Array.isArray(item.tagNames) ? item.tagNames : [];
var themes = item && Array.isArray(item.themeNames) ? item.themeNames : [];
return String(tags[0] || themes[0] || "热门").trim();
}
function setCardCover(image, rawURL, title) {
var cover = String(rawURL || "").trim();
image.className = "mobile-search-guess-image";
image.alt = title;
image.title = title;
image.addEventListener("error", function () {
image.classList.remove("lazy");
image.removeAttribute("data-src");
image.src = PLACEHOLDER;
}, { once: true });
if (cover && typeof window.shouldDecryptImage === "function" && window.shouldDecryptImage(cover)) {
image.classList.add("lazy");
image.src = PLACEHOLDER;
image.setAttribute("data-src", cover);
return;
}
image.src = cover || PLACEHOLDER;
}
function createGuessCard(item) {
var card = document.createElement("a");
var cover = document.createElement("div");
var image = document.createElement("img");
var episode = document.createElement("span");
var copy = document.createElement("div");
var title = document.createElement("div");
var desc = document.createElement("div");
var tagRow = document.createElement("div");
var tag = document.createElement("span");
var titleText = String((item && item.title) || "精彩短剧");
var totalEpisode = Math.max(0, Number(item && item.totalEpisode) || 0);
card.className = "mobile-search-guess-card";
card.href = detailHref(item);
card.setAttribute("aria-label", titleText);
cover.className = "mobile-search-guess-cover";
episode.className = "mobile-search-guess-episode";
copy.className = "mobile-search-guess-copy";
title.className = "mobile-search-guess-title";
desc.className = "mobile-search-guess-desc";
tagRow.className = "mobile-search-guess-tag-row";
tag.className = "mobile-search-guess-tag";
setCardCover(image, (item && (item.cover || item.banner)) || "", titleText);
episode.textContent = totalEpisode ? totalEpisode + "集" : "更新中";
title.textContent = titleText;
desc.textContent = String((item && item.desc) || "精彩内容等你来看");
tag.textContent = firstCardTag(item);
cover.appendChild(image);
cover.appendChild(episode);
tagRow.appendChild(tag);
copy.appendChild(title);
copy.appendChild(desc);
copy.appendChild(tagRow);
card.appendChild(cover);
card.appendChild(copy);
return card;
}
function guessItems() {
var source = Array.isArray(hotLikeData.guessLike) ? hotLikeData.guessLike : [];
return source.filter(function (item) {
return item && (item.id || item.slug);
});
}
function renderGuessLike() {
if (!guessList || !guessSection) return;
var items = guessItems();
var count = Math.min(4, items.length);
guessList.textContent = "";
guessSection.hidden = count === 0;
for (var index = 0; index < count; index += 1) {
guessList.appendChild(createGuessCard(items[(guessOffset + index) % items.length]));
}
if (count && typeof window.initLazyImages === "function") {
window.initLazyImages(guessList);
}
syncDividers();
}
function renderHotLike() {
renderHotSearch();
renderGuessLike();
}
renderHistory();
renderHotLike();
if (clearButton) {
clearButton.addEventListener("click", function () {
if (window.SearchHistory && typeof window.SearchHistory.clear === "function") {
window.SearchHistory.clear();
}
renderHistory();
});
}
if (changeButton) {
changeButton.addEventListener("click", function () {
var items = guessItems();
if (items.length > 4) guessOffset = (guessOffset + 4) % items.length;
renderGuessLike();
});
}
if (window.HttpRequest && typeof window.HttpRequest.get === "function") {
window.HttpRequest.get("/api/playlet/hot-like")
.then(function (response) {
hotLikeData = response && response.data ? response.data : {};
renderHotLike();
})
.catch(function () {
hotLikeData = {};
renderHotLike();
});
}
})();