Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
231 lines
8.2 KiB
JavaScript
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();
|
|
});
|
|
}
|
|
})();
|