Add search recommendations

This commit is contained in:
the1812 2019-04-14 14:43:50 +08:00
parent 5149d0dc92
commit 70f7a52efb
6 changed files with 44 additions and 10 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
@font-face{font-family:custom-navbar-font;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format('truetype')}.custom-navbar-iconfont{color:inherit;font-family:custom-navbar-font!important;font-size:24px;font-style:normal}.custom-navbar-icon-logo::before{content:"\\E725"}.custom-navbar{--navbar-height:50px;--navbar-foreground:black;--navbar-background:white;position:absolute;top:0;left:0;height:var(--navbar-height);width:100%;background-color:var(--navbar-background);color:var(--navbar-foreground);z-index:10001}.custom-navbar:not(.fill) .custom-navbar-iconfont{color:var(--theme-color)}.custom-navbar path,.custom-navbar.dark:not(.fill) path{fill:#000}.custom-navbar.dark path{fill:#eee}.custom-navbar.fill path{fill:#fffd}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar.dark:not(.fill){--navbar-background:#222;--navbar-foreground:#eee}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{--navbar-background:var(--theme-color);--navbar-foreground:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar ul{list-style:none}.custom-navbar>ul>li{position:relative;height:100%;display:flex;align-items:center}.custom-navbar>ul>li:not(.disabled){cursor:pointer}.custom-navbar>ul>li:not(.disabled):hover{background:rgba(0,0,0,.1)}.custom-navbar .main-content{font-size:10pt;height:100%;display:flex;align-items:center;padding:0 16px}.custom-navbar .popup{color:#eee;background:#222;position:absolute;top:100%;left:50%;transform:translateX(-50%) scale(0);padding:16px;box-shadow:#0002 0 4px 8px 8px;pointer-events:none;opacity:0;transform-origin:top;transition:.15s cubic-bezier(.18,.89,.38,1.15) .2s}.custom-navbar .popup.no-padding{padding:0}#custom-navbar-home-popup .category-item:hover .popup,.custom-navbar>ul>li:not(.disabled):hover>.popup{transform:translateX(-50%) scale(1);pointer-events:initial;opacity:1}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:300px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:8px 16px;cursor:pointer;position:relative}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item a{display:flex;justify-content:space-between}#custom-navbar-home-popup .category-item .popup{z-index:10002;width:max-content}#custom-navbar-home-popup .category-item .popup a,#upload-actions a{padding:8px 16px;display:flex;justify-content:center;border-bottom:2px solid transparent;font-size:11pt}#custom-navbar-home-popup .category-item .popup a:hover,#upload-actions a:hover{border-bottom:2px solid var(--theme-color)}#custom-navbar-home-popup .category-item span{opacity:.5}.im-list-box{border-radius:0!important}li.nav-item[report-id=playpage_dynamic] .i-frame,li.nav-item[report-id=playpage_dynamic] iframe{display:none!important}#upload-button{padding-left:4px;font-size:12pt;font-weight:700}#upload-actions{width:max-content}.custom-navbar form{height:100%;display:flex;align-items:center;position:relative;--submit-button-size:30px}.custom-navbar form input{border:none;height:60%;background:0 0;border-bottom:2px solid!important;color:var(--navbar-foreground);box-sizing:border-box;width:200px;padding-right:var(--submit-button-size);padding-left:4px}.custom-navbar form input:focus{border-bottom:2px solid!important}.custom-navbar form button[type=submit]{background:0 0;border:none;padding:4px;cursor:pointer;height:var(--submit-button-size);width:var(--submit-button-size);position:absolute;right:0;top:50%;transform:translateY(-50%)}.custom-navbar form input[type=text]::placeholder{color:var(--navbar-foreground)!important;opacity:.8}
@font-face{font-family:custom-navbar-font;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format('truetype')}.custom-navbar-iconfont{color:inherit;font-family:custom-navbar-font!important;font-size:24px;font-style:normal}.custom-navbar-icon-logo::before{content:"\\E725"}.custom-navbar{--navbar-height:50px;--navbar-foreground:black;--navbar-background:white;position:absolute;top:0;left:0;height:var(--navbar-height);width:100%;background-color:var(--navbar-background);color:var(--navbar-foreground);z-index:10001}.custom-navbar:not(.fill) .custom-navbar-iconfont{color:var(--theme-color)}.custom-navbar path{fill:#000}.custom-navbar.dark:not(.fill) path{fill:#eee}.custom-navbar.fill path{fill:#fffd}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar.dark:not(.fill){--navbar-background:#222;--navbar-foreground:#eee}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{--navbar-background:var(--theme-color);--navbar-foreground:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar ul{list-style:none}.custom-navbar>ul>li{position:relative;height:100%;display:flex;align-items:center}.custom-navbar>ul>li:not(.disabled){cursor:pointer}.custom-navbar>ul>li:not(.disabled):hover{background:rgba(0,0,0,.1)}.custom-navbar .main-content{font-size:10pt;height:100%;display:flex;align-items:center;padding:0 16px}.custom-navbar .popup{color:#eee;background:#222;position:absolute;top:100%;left:50%;transform:translateX(-50%) scale(0);padding:16px;box-shadow:#0002 0 4px 8px 8px;pointer-events:none;opacity:0;transform-origin:top;transition:.15s cubic-bezier(.18,.89,.38,1.15) .2s}.custom-navbar .popup.no-padding{padding:0}#custom-navbar-home-popup .category-item:hover .popup,.custom-navbar>ul>li:not(.disabled):hover>.popup{transform:translateX(-50%) scale(1);pointer-events:initial;opacity:1}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:300px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:8px 16px;cursor:pointer;position:relative}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item a{display:flex;justify-content:space-between}#custom-navbar-home-popup .category-item .popup{z-index:10002;width:max-content}#custom-navbar-home-popup .category-item .popup a,#upload-actions a{padding:8px 16px;display:flex;justify-content:center;border-bottom:2px solid transparent;font-size:11pt}#custom-navbar-home-popup .category-item .popup a:hover,#upload-actions a:hover{border-bottom:2px solid var(--theme-color)}#custom-navbar-home-popup .category-item span{opacity:.5}.im-list-box{border-radius:0!important}li.nav-item[report-id=playpage_dynamic] .i-frame,li.nav-item[report-id=playpage_dynamic] iframe{display:none!important}#upload-button{padding-left:4px;font-size:12pt;font-weight:700}#upload-actions{width:max-content}.custom-navbar form{height:100%;display:flex;align-items:center;position:relative;--submit-button-size:30px}.custom-navbar form input{border:none;height:60%;background:0 0;border-bottom:2px solid!important;color:var(--navbar-foreground);box-sizing:border-box;width:250px;padding-right:var(--submit-button-size);padding-left:4px}.custom-navbar form input:focus{border-bottom:2px solid!important}.custom-navbar form button[type=submit]{background:0 0;border:none;padding:4px;cursor:pointer;height:var(--submit-button-size);width:var(--submit-button-size);position:absolute;right:0;top:50%;transform:translateY(-50%)}.custom-navbar form input[type=text]::placeholder{color:var(--navbar-foreground)!important;opacity:.8}

File diff suppressed because one or more lines are too long

View File

@ -219,7 +219,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame
border-bottom: 2px solid var(--navbar-foreground) !important;
color: var(--navbar-foreground);
box-sizing: border-box;
width: 200px;
width: 250px;
padding-right: var(--submit-button-size);
padding-left: 4px;
}

View File

@ -202,9 +202,10 @@ class SearchBox extends NavbarComponent
super();
this.disabled = true;
this.html = /*html*/`
<form autocomplete="off" target="_blank" method="get" action="https://search.bilibili.com/all">
<form id="custom-navbar-search" autocomplete="off" target="_blank" method="get" action="https://search.bilibili.com/all">
<input type="hidden" name="from_source" value="banner_search">
<input type="text" placeholder="搜索" name="keyword">
<a style="display: none" target="_blank" class="recommended-target"></a>
<button type="submit" title="搜索">
<svg style="width:22px;height:22px" viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
@ -212,6 +213,38 @@ class SearchBox extends NavbarComponent
</button>
</form>
`;
this.init();
}
async init()
{
const form = await SpinQuery.select("#custom-navbar-search");
const keyword = form.querySelector("input[name='keyword']");
form.addEventListener("submit", e =>
{
if (keyword.value === "")
{
if (!settings.hideTopSearch)
{
form.querySelector(".recommended-target").click();
}
e.preventDefault();
return false;
}
return true;
});
if (!settings.hideTopSearch)
{
const json = await Ajax.getJson("https://api.bilibili.com/x/web-interface/search/default");
if (json.code === 0)
{
keyword.setAttribute("placeholder", json.data.show_name);
form.querySelector(".recommended-target").setAttribute("href", `https://www.bilibili.com/${json.data.name}`)
}
else
{
console.error("[自定义顶栏] 获取搜索推荐词失败");
}
}
}
}
class Iframe extends NavbarComponent
@ -248,6 +281,7 @@ class Iframe extends NavbarComponent
const components = [
new Logo,
new Category,
new SimpleLink("排行", "https://www.bilibili.com/ranking"),
new SimpleLink("画友", "https://h.bilibili.com"),
new SimpleLink("音频", "https://www.bilibili.com/audio/home/?type=10"),
new Iframe("游戏中心", "https://game.bilibili.com/", {