Improve custom navbar

This commit is contained in:
the1812 2019-04-06 17:04:28 +08:00
parent d3ce747492
commit d69066a85e
8 changed files with 83 additions and 47 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;position:fixed;top:0;left:0;height:var(--navbar-height);width:100vw;background:#fff;color:#000;z-index:10001}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#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>li{position:relative;height:100%;padding:0 16px;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 .popup{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding:16px;box-shadow:#0002 0 4px 8px 8px}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:100px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:4px 0;display:flex;justify-content:space-between;cursor:pointer}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item>span{opacity:.5} @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;position:fixed;top:0;left:0;height:var(--navbar-height);width:100vw;background:#fff;color:#000;z-index:10001}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#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>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{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)}.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}#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 span{opacity:.5}

View File

@ -1 +1 @@
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"><div class=content v-on:click=togglePopup(component) v-html=component.html></div><div class=popup v-if=component.popupHtml v-show=component.showPopup v-html=component.popupHtml></div></ul></div> <div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"><a class=main-content v-bind:href=component.href v-html=component.html></a><div class=popup v-if=component.popupHtml v-html=component.popupHtml></div></ul></div>

View File

@ -1 +1 @@
(()=>{return(t,e)=>{if(isIframe()){return}const s=["/www.bilibili.com"];if(!s.some(t=>document.URL.includes(t))){return}class o{constructor(){this.html=``;this.popupHtml=``;this.flex=`0 0 auto`;this.disabled=false;this.showPopup=false}}class n extends o{constructor(){super();this.flex="1 0 auto";this.disabled=true}}class i extends o{constructor(){super();this.html=`<a href="https://www.bilibili.com/"><i class="custom-navbar-iconfont custom-navbar-icon-logo"></i></a>`}}class a extends o{constructor(){super();this.html=`<a href="https://www.bilibili.com/">主站</a>`;this.popupHtml=`\n <ul id="custom-navbar-home-popup">\n <li class="category-item" v-for="item of info">\n {{item[0]}}<span>{{item[1]}}</span>\n </li>\n </ul>\n `;this.getOnlineInfo().then(t=>{new Vue({el:"#custom-navbar-home-popup",data:{info:Object.entries(t)}})})}async getOnlineInfo(){const t=await Ajax.getJson("https://api.bilibili.com/x/web-interface/online");if(parseInt(t.code)!==0){throw new Error(`[自定义顶栏] 分区投稿信息获取失败: ${t.message}`)}const e=t.data.region_count;await SpinQuery.select("#custom-navbar-home-popup");return{"动画":e[1],"番剧":e[13],"国创":e[167],"音乐":e[3],"舞蹈":e[129],"游戏":e[4],"生活":e[160],"鬼畜":e[119],"时尚":e[155],"广告":e[165],"娱乐":e[5],"影视":e[181],"科技":e[36],"数码":e[188],"放映厅":e[177]+e[23]}}}(async()=>{const s=await e.importAsync("customNavbarHtml");document.body.insertAdjacentHTML("beforeend",s);const o=document.querySelector(".custom-navbar");for(const[e,s]of Object.entries(t.customNavbarSettings)){if(s===true){o.classList.add(e)}}if(t.useDarkStyle){o.classList.add("dark")}const c=[new i,new a,new n];new Vue({el:o,data:{components:c},methods:{togglePopup(t){t.showPopup=!t.showPopup}}})})()}})(); (()=>{return(i,t)=>{if(isIframe()){return}const n=["/www.bilibili.com"];if(!n.some(i=>document.URL.includes(i))){return}class o{constructor(){this.html=``;this.popupHtml=``;this.flex=`0 0 auto`;this.disabled=false;this.href=``}}class l extends o{constructor(){super();this.flex="1 0 auto";this.disabled=true}}class s extends o{constructor(){super();this.href=`https://www.bilibili.com/`;this.html=`<i class="custom-navbar-iconfont custom-navbar-icon-logo"></i>`}}class c extends o{constructor(i,t){super();this.html=i;this.href=t}}class e extends o{constructor(){super();this.html=`主站`;this.popupHtml=`\n <ul id="custom-navbar-home-popup">\n <li class="category-item" v-for="item of info">\n <a v-bind:href="item[1].link">\n {{item[0]}}<span>{{item[1].count}}</span>\n </a>\n </li>\n </ul>\n `;this.getOnlineInfo().then(i=>{new Vue({el:"#custom-navbar-home-popup",data:{info:Object.entries(i)}})})}async getOnlineInfo(){const i=await Ajax.getJson("https://api.bilibili.com/x/web-interface/online");if(parseInt(i.code)!==0){throw new Error(`[自定义顶栏] 分区投稿信息获取失败: ${i.message}`)}const t=i.data.region_count;await SpinQuery.select("#custom-navbar-home-popup");return{"动画":{count:t[1],link:`https://www.bilibili.com/v/douga/`},"番剧":{count:t[13],link:`https://www.bilibili.com/anime/`},"国创":{count:t[167],link:`https://www.bilibili.com/guochuang/`},"音乐":{count:t[3],link:`https://www.bilibili.com/v/music/`},"舞蹈":{count:t[129],link:`https://www.bilibili.com/v/dance/`},"游戏":{count:t[4],link:`https://www.bilibili.com/v/game/`},"科技":{count:t[36],link:`https://www.bilibili.com/v/technology/`},"数码":{count:t[188],link:`https://www.bilibili.com/v/digital/`},"生活":{count:t[160],link:`https://www.bilibili.com/v/life/`},"鬼畜":{count:t[119],link:`https://www.bilibili.com/v/kichiku/`},"时尚":{count:t[155],link:`https://www.bilibili.com/v/fashion/`},"广告":{count:t[165],link:`https://www.bilibili.com/v/ad/ad/`},"娱乐":{count:t[5],link:`https://www.bilibili.com/v/ent/`},"影视":{count:t[181],link:`https://www.bilibili.com/v/cinephile/`},"放映厅":{count:t[177]+t[23],link:`https://www.bilibili.com/cinema/`},"专栏":{count:``,link:`https://www.bilibili.com/read/home`},"直播":{count:``,link:`https://live.bilibili.com`},"小黑屋":{count:``,link:`https://www.bilibili.com/blackroom/`},"话题":{count:``,link:`https://www.bilibili.com/blackboard/topic_list.html`},"活动":{count:``,link:`https://www.bilibili.com/blackboard/x/act_list`}}}}(async()=>{const n=await t.importAsync("customNavbarHtml");document.body.insertAdjacentHTML("beforeend",n);const o=document.querySelector(".custom-navbar");for(const[t,n]of Object.entries(i.customNavbarSettings)){if(n===true){o.classList.add(t)}}if(i.useDarkStyle){o.classList.add("dark")}const w=[new s,new e,new c("画友","https://h.bilibili.com"),new c("音频","https://www.bilibili.com/audio/home/?type=10"),new c("会员购","https://show.bilibili.com/platform/home.html?msource=pc_web"),new c("漫画","https://manga.bilibili.com"),new l];new Vue({el:o,data:{components:w}})})()}})();

View File

@ -63,7 +63,6 @@
{ {
position: relative; position: relative;
height: 100%; height: 100%;
padding: 0 16px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -75,40 +74,62 @@
{ {
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }
.custom-navbar .main-content
{
font-size: 10pt;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
}
.custom-navbar .popup .custom-navbar .popup
{ {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%) scale(0);
padding: 16px; padding: 16px;
box-shadow: #0002 0 4px 8px 8px; box-shadow: #0002 0 4px 8px 8px;
pointer-events: none;
opacity: 0;
transform-origin: top;
transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15);
}
.custom-navbar>ul>li:not(.disabled):hover .popup
{
transform: translateX(-50%) scale(1);
pointer-events: initial;
opacity: 1;
} }
.custom-navbar a .custom-navbar a
{ {
color: inherit; color: inherit;
} }
#custom-navbar-home-popup #custom-navbar-home-popup
{ {
max-height: 50vh; max-height: 50vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
width: 100px; width: 300px;
} }
#custom-navbar-home-popup .category-item #custom-navbar-home-popup .category-item
{ {
font-size: 12pt; font-size: 12pt;
padding: 4px 0; padding: 8px 16px;
display: flex;
justify-content: space-between;
cursor: pointer; cursor: pointer;
} }
#custom-navbar-home-popup .category-item:hover #custom-navbar-home-popup .category-item:hover
{ {
background-color: #0001; background-color: #0001;
} }
#custom-navbar-home-popup .category-item>span #custom-navbar-home-popup .category-item a
{
display: flex;
justify-content: space-between;
}
#custom-navbar-home-popup .category-item span
{ {
opacity: 0.5; opacity: 0.5;
} }

View File

@ -2,8 +2,8 @@
<ul> <ul>
<li v-for="component of components" v-bind:class="{disabled: component.disabled}" <li v-for="component of components" v-bind:class="{disabled: component.disabled}"
v-bind:style="{flex: component.flex}"> v-bind:style="{flex: component.flex}">
<div class="content" v-on:click="togglePopup(component)" v-html="component.html"></div> <a class="main-content" v-bind:href="component.href" v-html="component.html"></a>
<div class="popup" v-if="component.popupHtml" v-show="component.showPopup" v-html="component.popupHtml"> <div class="popup" v-if="component.popupHtml" v-html="component.popupHtml">
</div> </div>
</li> </li>
</ul> </ul>

View File

@ -18,7 +18,7 @@ class NavbarComponent
this.popupHtml = ``; this.popupHtml = ``;
this.flex = `0 0 auto`; this.flex = `0 0 auto`;
this.disabled = false; this.disabled = false;
this.showPopup = false; this.href = ``;
} }
} }
class Blank extends NavbarComponent class Blank extends NavbarComponent
@ -35,19 +35,31 @@ class Logo extends NavbarComponent
constructor() constructor()
{ {
super(); super();
this.html = /*html*/`<a href="https://www.bilibili.com/"><i class="custom-navbar-iconfont custom-navbar-icon-logo"></i></a>`; this.href = `https://www.bilibili.com/`;
this.html = /*html*/`<i class="custom-navbar-iconfont custom-navbar-icon-logo"></i>`;
} }
} }
class Home extends NavbarComponent class SimpleLink extends NavbarComponent
{
constructor(name, link)
{
super();
this.html = name;
this.href = link;
}
}
class Category extends NavbarComponent
{ {
constructor() constructor()
{ {
super(); super();
this.html = /*html*/`<a href="https://www.bilibili.com/">主站</a>`; this.html = `主站`;
this.popupHtml = /*html*/` this.popupHtml = /*html*/`
<ul id="custom-navbar-home-popup"> <ul id="custom-navbar-home-popup">
<li class="category-item" v-for="item of info"> <li class="category-item" v-for="item of info">
{{item[0]}}<span>{{item[1]}}</span> <a v-bind:href="item[1].link">
{{item[0]}}<span>{{item[1].count}}</span>
</a>
</li> </li>
</ul> </ul>
`; `;
@ -71,22 +83,27 @@ class Home extends NavbarComponent
const regionCount = json.data.region_count; const regionCount = json.data.region_count;
await SpinQuery.select("#custom-navbar-home-popup"); await SpinQuery.select("#custom-navbar-home-popup");
return { return {
动画: regionCount[1], 动画: { count: regionCount[1], link: `https://www.bilibili.com/v/douga/` },
番剧: regionCount[13], 番剧: { count: regionCount[13], link: `https://www.bilibili.com/anime/` },
国创: regionCount[167], 国创: { count: regionCount[167], link: `https://www.bilibili.com/guochuang/` },
音乐: regionCount[3], 音乐: { count: regionCount[3], link: `https://www.bilibili.com/v/music/` },
舞蹈: regionCount[129], 舞蹈: { count: regionCount[129], link: `https://www.bilibili.com/v/dance/` },
游戏: regionCount[4], 游戏: { count: regionCount[4], link: `https://www.bilibili.com/v/game/` },
生活: regionCount[160], 科技: { count: regionCount[36], link: `https://www.bilibili.com/v/technology/` },
鬼畜: regionCount[119], 数码: { count: regionCount[188], link: `https://www.bilibili.com/v/digital/` },
时尚: regionCount[155], 生活: { count: regionCount[160], link: `https://www.bilibili.com/v/life/` },
广告: regionCount[165], 鬼畜: { count: regionCount[119], link: `https://www.bilibili.com/v/kichiku/` },
娱乐: regionCount[5], 时尚: { count: regionCount[155], link: `https://www.bilibili.com/v/fashion/` },
影视: regionCount[181], 广告: { count: regionCount[165], link: `https://www.bilibili.com/v/ad/ad/` },
科技: regionCount[36], 娱乐: { count: regionCount[5], link: `https://www.bilibili.com/v/ent/` },
数码: regionCount[188], 影视: { count: regionCount[181], link: `https://www.bilibili.com/v/cinephile/` },
放映厅: regionCount[177] + regionCount[23], 放映厅: { count: regionCount[177] + regionCount[23], link: `https://www.bilibili.com/cinema/` },
// TODO: regionCount[11]? // TODO: regionCount[11]?
专栏: { count: ``, link: `https://www.bilibili.com/read/home` },
直播: { count: ``, link: `https://live.bilibili.com` },
小黑屋: { count: ``, link: `https://www.bilibili.com/blackroom/` },
话题: { count: ``, link: `https://www.bilibili.com/blackboard/topic_list.html` },
活动: { count: ``, link: `https://www.bilibili.com/blackboard/x/act_list` },
}; };
} }
} }
@ -109,7 +126,11 @@ class Home extends NavbarComponent
} }
const components = [ const components = [
new Logo, new Logo,
new Home, new Category,
new SimpleLink("画友", "https://h.bilibili.com"),
new SimpleLink("音频", "https://www.bilibili.com/audio/home/?type=10"),
new SimpleLink("会员购", "https://show.bilibili.com/platform/home.html?msource=pc_web"),
new SimpleLink("漫画", "https://manga.bilibili.com"),
new Blank, new Blank,
]; ];
new Vue({ new Vue({
@ -117,11 +138,5 @@ class Home extends NavbarComponent
data: { data: {
components, components,
}, },
methods: {
togglePopup(component)
{
component.showPopup = !component.showPopup;
}
}
}); });
})(); })();