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;
height: 100%;
padding: 0 16px;
display: flex;
align-items: center;
}
@ -75,40 +74,62 @@
{
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
{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%) scale(0);
padding: 16px;
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
{
color: inherit;
}
#custom-navbar-home-popup
{
max-height: 50vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100px;
width: 300px;
}
#custom-navbar-home-popup .category-item
{
font-size: 12pt;
padding: 4px 0;
display: flex;
justify-content: space-between;
padding: 8px 16px;
cursor: pointer;
}
#custom-navbar-home-popup .category-item:hover
{
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;
}

View File

@ -2,8 +2,8 @@
<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">
<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>
</li>
</ul>

View File

@ -18,7 +18,7 @@ class NavbarComponent
this.popupHtml = ``;
this.flex = `0 0 auto`;
this.disabled = false;
this.showPopup = false;
this.href = ``;
}
}
class Blank extends NavbarComponent
@ -35,19 +35,31 @@ class Logo extends NavbarComponent
constructor()
{
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()
{
super();
this.html = /*html*/`<a href="https://www.bilibili.com/">主站</a>`;
this.html = `主站`;
this.popupHtml = /*html*/`
<ul id="custom-navbar-home-popup">
<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>
</ul>
`;
@ -71,22 +83,27 @@ class Home extends NavbarComponent
const regionCount = json.data.region_count;
await SpinQuery.select("#custom-navbar-home-popup");
return {
动画: regionCount[1],
番剧: regionCount[13],
国创: regionCount[167],
音乐: regionCount[3],
舞蹈: regionCount[129],
游戏: regionCount[4],
生活: regionCount[160],
鬼畜: regionCount[119],
时尚: regionCount[155],
广告: regionCount[165],
娱乐: regionCount[5],
影视: regionCount[181],
科技: regionCount[36],
数码: regionCount[188],
放映厅: regionCount[177] + regionCount[23],
动画: { count: regionCount[1], link: `https://www.bilibili.com/v/douga/` },
番剧: { count: regionCount[13], link: `https://www.bilibili.com/anime/` },
国创: { count: regionCount[167], link: `https://www.bilibili.com/guochuang/` },
音乐: { count: regionCount[3], link: `https://www.bilibili.com/v/music/` },
舞蹈: { count: regionCount[129], link: `https://www.bilibili.com/v/dance/` },
游戏: { count: regionCount[4], link: `https://www.bilibili.com/v/game/` },
科技: { count: regionCount[36], link: `https://www.bilibili.com/v/technology/` },
数码: { count: regionCount[188], link: `https://www.bilibili.com/v/digital/` },
生活: { count: regionCount[160], link: `https://www.bilibili.com/v/life/` },
鬼畜: { count: regionCount[119], link: `https://www.bilibili.com/v/kichiku/` },
时尚: { count: regionCount[155], link: `https://www.bilibili.com/v/fashion/` },
广告: { count: regionCount[165], link: `https://www.bilibili.com/v/ad/ad/` },
娱乐: { count: regionCount[5], link: `https://www.bilibili.com/v/ent/` },
影视: { count: regionCount[181], link: `https://www.bilibili.com/v/cinephile/` },
放映厅: { count: regionCount[177] + regionCount[23], link: `https://www.bilibili.com/cinema/` },
// 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 = [
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 Vue({
@ -117,11 +138,5 @@ class Home extends NavbarComponent
data: {
components,
},
methods: {
togglePopup(component)
{
component.showPopup = !component.showPopup;
}
}
});
})();