feat(nav): deep-align menu_search panel, pill radius, senior media
- Layout-2 remote-box AJAX panel (history/hot/posts) via aksrt_menu_search - Live suggestions for post/topic/product; local history for guests - Publish radius switch (zibll bool pill) mapped to CSS radius class - Senior menu editor: WP media library image picker - Active menu underline + panel CSS; acceptance/contract updates
This commit is contained in:
kate522 committed
1 parent
2a11a889c3
commit
159a12c481
14 files changed
+494
-117
No files matched your search
@@ -1,112 +1,166 @@
|
||||
/**
|
||||
* Enhance layout-2 inline search with AJAX suggestions (aksrt_search_suggestions).
|
||||
* Extends existing panel search without dual systems.
|
||||
* Layout-2 navbar search — zibll remote-box + live suggestions.
|
||||
* Loads aksrt_menu_search panel (history/hot/posts), then suggests on input.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function initInlineSearchSuggest() {
|
||||
var form = document.querySelector('form[data-aksrt-search-form="inline"]');
|
||||
if (!form || !window.aksrtData || !aksrtData.ajaxUrl) return;
|
||||
var HISTORY_KEY = "aksrt-mobile-search-history";
|
||||
|
||||
function ajaxUrl() {
|
||||
return (window.aksrtData && aksrtData.ajaxUrl) || "";
|
||||
}
|
||||
function nonce() {
|
||||
return (window.aksrtData && aksrtData.nonce) || "";
|
||||
}
|
||||
|
||||
function readLocalHistory() {
|
||||
try {
|
||||
var raw = localStorage.getItem(HISTORY_KEY);
|
||||
var list = raw ? JSON.parse(raw) : [];
|
||||
if (!Array.isArray(list)) return [];
|
||||
return list
|
||||
.map(function (it) {
|
||||
if (typeof it === "string") return it;
|
||||
return it && it.keyword ? String(it.keyword) : "";
|
||||
})
|
||||
.filter(Boolean)
|
||||
.slice(0, 10);
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function writeLocalHistory(keywords) {
|
||||
try {
|
||||
var items = (keywords || []).slice(0, 10).map(function (k) {
|
||||
return { keyword: k, type: "post" };
|
||||
});
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(items));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function loadRemote(box) {
|
||||
if (!box || box.getAttribute("data-loaded") === "1") return;
|
||||
var url = box.getAttribute("remote-box") || box.getAttribute("data-url");
|
||||
if (!url) return;
|
||||
box.setAttribute("data-loaded", "1");
|
||||
var sep = url.indexOf("?") >= 0 ? "&" : "?";
|
||||
if (nonce()) {
|
||||
url = url + sep + "nonce=" + encodeURIComponent(nonce());
|
||||
}
|
||||
fetch(url, { credentials: "same-origin" })
|
||||
.then(function (r) {
|
||||
return r.text();
|
||||
})
|
||||
.then(function (html) {
|
||||
if (!html || html === "0") {
|
||||
box.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
box.outerHTML = html;
|
||||
var form = document.querySelector('form[data-aksrt-search-form="inline"]');
|
||||
if (form) enhancePanel(form);
|
||||
})
|
||||
.catch(function () {
|
||||
box.removeAttribute("data-loaded");
|
||||
});
|
||||
}
|
||||
|
||||
function enhancePanel(form) {
|
||||
var group = form.querySelector(".form-group");
|
||||
var panel = form.querySelector(".navbar-inline-search-panel");
|
||||
var input = form.querySelector(".search-input");
|
||||
var group = form.querySelector(".form-group.relative, .form-group");
|
||||
if (!input || !group) return;
|
||||
if (!group || !input) return;
|
||||
|
||||
var panel = group.querySelector(".navbar-inline-search-panel");
|
||||
if (!panel) {
|
||||
panel = document.createElement("div");
|
||||
panel.className = "dropdown-menu hover-show-con navbar-inline-search-panel";
|
||||
group.appendChild(panel);
|
||||
// Merge guest local history into panel list.
|
||||
var histList = form.querySelector(".aksrt-menu-search-history__list");
|
||||
if (histList && !(window.aksrtData && aksrtData.isLoggedIn)) {
|
||||
var local = readLocalHistory();
|
||||
if (local.length) {
|
||||
histList.innerHTML = local
|
||||
.map(function (kw) {
|
||||
return (
|
||||
'<a class="but jb-sm" href="' +
|
||||
(window.location.origin || "") +
|
||||
"/?s=" +
|
||||
encodeURIComponent(kw) +
|
||||
'">' +
|
||||
kw +
|
||||
"</a> "
|
||||
);
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
}
|
||||
|
||||
var clearBtn = form.querySelector("[data-aksrt-clear-menu-history]");
|
||||
if (clearBtn && !clearBtn._bound) {
|
||||
clearBtn._bound = 1;
|
||||
clearBtn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
writeLocalHistory([]);
|
||||
if (histList) {
|
||||
histList.innerHTML =
|
||||
'<span class="muted-3-color em09" data-empty="1">暂无历史</span>';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var suggestMount = form.querySelector("[data-aksrt-menu-suggest]");
|
||||
var timer = null;
|
||||
var searchConfig = (window.aksrtData && aksrtData.search) || {};
|
||||
var suggestionsEnabled = searchConfig.suggestionsEnabled !== false;
|
||||
|
||||
function typeValue() {
|
||||
var t = form.querySelector('input[name="aksrt_search_type"]');
|
||||
return (t && t.value) || searchConfig.defaultType || "post";
|
||||
}
|
||||
|
||||
function renderItems(items) {
|
||||
var html = "";
|
||||
if (items && items.length) {
|
||||
html += '<div class="muted-2-color em09 mb6">' + (searchConfig.suggestTitle || "搜索建议") + "</div>";
|
||||
html += '<div class="navbar-inline-search-suggest">';
|
||||
items.forEach(function (it) {
|
||||
html +=
|
||||
'<a class="navbar-inline-search-suggest__item" href="' +
|
||||
(it.url || "#") +
|
||||
'"><span class="title">' +
|
||||
(it.title || "") +
|
||||
'</span>' +
|
||||
(it.meta ? '<span class="meta muted-2-color em09">' + it.meta + "</span>" : "") +
|
||||
"</a>";
|
||||
});
|
||||
html += "</div>";
|
||||
}
|
||||
// Keep hot keywords block if present as static sibling content was replaced —
|
||||
// re-append hots from data attribute if we stored them.
|
||||
var hots = form.getAttribute("data-hots");
|
||||
if (hots) {
|
||||
try {
|
||||
var arr = JSON.parse(hots);
|
||||
if (arr && arr.length) {
|
||||
html += '<div class="muted-2-color em09 mb6 mt10">热门搜索</div><div class="navbar-inline-search-hots">';
|
||||
arr.forEach(function (kw) {
|
||||
html +=
|
||||
'<a class="but jb-sm" href="' +
|
||||
(window.location.origin || "") +
|
||||
"/?s=" +
|
||||
encodeURIComponent(kw) +
|
||||
'">' +
|
||||
kw +
|
||||
"</a> ";
|
||||
});
|
||||
html += "</div>";
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
panel.innerHTML = html || panel.innerHTML;
|
||||
panel.classList.add("is-open");
|
||||
panel.style.display = "block";
|
||||
panel.style.visibility = "visible";
|
||||
}
|
||||
|
||||
// Persist hot keywords for re-render after suggestions
|
||||
var hotLinks = panel.querySelectorAll(".navbar-inline-search-hots a");
|
||||
if (hotLinks.length) {
|
||||
var kws = [];
|
||||
hotLinks.forEach(function (a) {
|
||||
kws.push((a.textContent || "").trim());
|
||||
});
|
||||
form.setAttribute("data-hots", JSON.stringify(kws));
|
||||
}
|
||||
|
||||
function request(q) {
|
||||
if (!suggestionsEnabled || q.length < 2) {
|
||||
// restore hots-only
|
||||
if (form.getAttribute("data-hots")) {
|
||||
renderItems([]);
|
||||
function requestSuggest(q) {
|
||||
if (!suggestMount || !ajaxUrl() || q.length < 2) {
|
||||
if (suggestMount) {
|
||||
suggestMount.hidden = true;
|
||||
suggestMount.innerHTML = "";
|
||||
}
|
||||
return;
|
||||
}
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", aksrtData.ajaxUrl, true);
|
||||
xhr.open("POST", ajaxUrl(), true);
|
||||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
|
||||
xhr.onload = function () {
|
||||
if (xhr.status < 200 || xhr.status >= 300) return;
|
||||
try {
|
||||
var json = JSON.parse(xhr.responseText);
|
||||
if (json.success && json.data && json.data.items) {
|
||||
renderItems(json.data.items);
|
||||
var items = (json.success && json.data && json.data.items) || [];
|
||||
if (!items.length) {
|
||||
suggestMount.hidden = true;
|
||||
suggestMount.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
var html =
|
||||
'<div class="muted-2-color em09 mb6">' +
|
||||
(searchConfig.suggestTitle || "搜索建议") +
|
||||
"</div><div class=\"navbar-inline-search-suggest\">";
|
||||
items.forEach(function (it) {
|
||||
html +=
|
||||
'<a class="navbar-inline-search-suggest__item" href="' +
|
||||
(it.url || "#") +
|
||||
'"><span class="title">' +
|
||||
(it.title || "") +
|
||||
'</span>' +
|
||||
(it.meta
|
||||
? '<span class="meta muted-2-color em09">' + it.meta + "</span>"
|
||||
: "") +
|
||||
"</a>";
|
||||
});
|
||||
html += "</div>";
|
||||
suggestMount.innerHTML = html;
|
||||
suggestMount.hidden = false;
|
||||
} catch (e) {}
|
||||
};
|
||||
xhr.send(
|
||||
"action=aksrt_search_suggestions&nonce=" +
|
||||
encodeURIComponent(aksrtData.nonce) +
|
||||
encodeURIComponent(nonce()) +
|
||||
"&q=" +
|
||||
encodeURIComponent(q) +
|
||||
"&type=" +
|
||||
@@ -114,27 +168,75 @@
|
||||
);
|
||||
}
|
||||
|
||||
input.addEventListener("input", function () {
|
||||
var q = (input.value || "").trim();
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
request(q);
|
||||
}, 180);
|
||||
if (!input._aksrtMenuSearchBound) {
|
||||
input._aksrtMenuSearchBound = 1;
|
||||
input.addEventListener("input", function () {
|
||||
var q = (input.value || "").trim();
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
requestSuggest(q);
|
||||
}, 180);
|
||||
});
|
||||
input.addEventListener("focus", function () {
|
||||
var remote = form.querySelector("[data-aksrt-menu-search-remote]");
|
||||
if (remote) loadRemote(remote);
|
||||
var p = form.querySelector(".navbar-inline-search-panel");
|
||||
if (p) {
|
||||
p.classList.add("is-open");
|
||||
p.style.display = "block";
|
||||
p.style.visibility = "visible";
|
||||
}
|
||||
});
|
||||
form.addEventListener("submit", function () {
|
||||
var q = (input.value || "").trim();
|
||||
if (!q) return;
|
||||
if (!(window.aksrtData && aksrtData.isLoggedIn)) {
|
||||
var list = readLocalHistory().filter(function (k) {
|
||||
return k !== q;
|
||||
});
|
||||
list.unshift(q);
|
||||
writeLocalHistory(list);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
document.querySelectorAll("[data-aksrt-menu-search-remote]").forEach(function (box) {
|
||||
// Prefetch on idle / first hover of form.
|
||||
var form = box.closest("form");
|
||||
if (form) {
|
||||
form.addEventListener(
|
||||
"mouseenter",
|
||||
function () {
|
||||
loadRemote(box);
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
// Also load when lazyload-action ias would fire — simple viewport/idle.
|
||||
if ("requestIdleCallback" in window) {
|
||||
requestIdleCallback(function () {
|
||||
loadRemote(box);
|
||||
});
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
loadRemote(box);
|
||||
}, 600);
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener("focus", function () {
|
||||
panel.style.display = "block";
|
||||
panel.style.visibility = "visible";
|
||||
});
|
||||
var form = document.querySelector('form[data-aksrt-search-form="inline"]');
|
||||
if (form) enhancePanel(form);
|
||||
}
|
||||
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === "function") {
|
||||
window.AksrtFrontend.register("aksrt-inline-search-suggest", function () {
|
||||
initInlineSearchSuggest();
|
||||
init();
|
||||
});
|
||||
} else if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initInlineSearchSuggest);
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
initInlineSearchSuggest();
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in new issue
Block a user