Add notify count

This commit is contained in:
the1812 2019-04-18 18:28:54 +08:00
parent 49e4107aa0
commit def23cc93e
8 changed files with 91 additions and 20 deletions

File diff suppressed because one or more lines are too long

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 @@
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"v-on:pointerover=requestPopup(component)><a class=main-content v-if=component.href v-bind:href=component.href v-html=component.html></a><div class=main-content v-else v-html=component.html></div><div class=popup v-if=component.popupHtml v-bind:class="{'no-padding': component.noPadding}"><div v-if=component.requestedPopup v-html=component.popupHtml></div></div></ul></div>
<div class=custom-navbar><ul><li v-for="component of components"v-bind:data-name=component.name v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"v-on:pointerover=requestPopup(component)><a class=main-content v-if=component.href v-bind:href=component.href v-html=component.html></a><div class=main-content v-else v-html=component.html></div><div class=notify-count></div><div class=popup v-if=component.popupHtml v-bind:class="{'no-padding': component.noPadding}"><div v-if=component.requestedPopup v-html=component.popupHtml></div></div></ul></div>

File diff suppressed because one or more lines are too long

View File

@ -58,6 +58,7 @@
{
color: black;
background: white;
transition: all .2s ease-out .2s;
}
.custom-navbar.dark .popup
{
@ -521,7 +522,28 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
{
opacity: 1;
}
.custom-navbar .notify-count
{
position: absolute;
left: 50%;
top: 0;
background-color: var(--theme-color);
padding: 0 8px;
display: flex;
justify-content: center;
font-size: 11px;
transform: translateX(-50%);
border-radius: 0 0 8px 8px;
opacity: 0;
}
.custom-navbar.fill .notify-count
{
background-color: rgba(0,0,0,0.3);
}
.custom-navbar .notify-count:not(:empty)
{
opacity: 1;
}
@media screen and (max-width: 1400px)

View File

@ -1,9 +1,11 @@
<div class="custom-navbar">
<ul>
<li v-for="component of components" v-bind:class="{disabled: component.disabled}"
v-bind:style="{flex: component.flex}" v-on:pointerover="requestPopup(component)">
<li v-for="component of components" v-bind:data-name="component.name"
v-bind:class="{disabled: component.disabled}" v-bind:style="{flex: component.flex}"
v-on:pointerover="requestPopup(component)">
<a class="main-content" v-if="component.href" v-bind:href="component.href" v-html="component.html"></a>
<div class="main-content" v-else v-html="component.html"></div>
<div class="notify-count"></div>
<div class="popup" v-if="component.popupHtml" v-bind:class="{'no-padding': component.noPadding}">
<div v-if="component.requestedPopup" v-html="component.popupHtml"></div>
</div>

View File

@ -23,6 +23,11 @@ class NavbarComponent
this.requestedPopup = false;
this.onPopup = null;
this.href = ``;
this.notifyCount = 0;
}
get name()
{
return this.html;
}
}
class Blank extends NavbarComponent
@ -33,6 +38,10 @@ class Blank extends NavbarComponent
this.flex = "1 0 auto";
this.disabled = true;
}
get name()
{
return "空白";
}
}
class Logo extends NavbarComponent
{
@ -42,6 +51,10 @@ class Logo extends NavbarComponent
this.href = `https://www.bilibili.com/`;
this.html = /*html*/`<i class="custom-navbar-iconfont custom-navbar-icon-logo"></i>`;
}
get name()
{
return "Logo";
}
}
class SimpleLink extends NavbarComponent
{
@ -73,6 +86,10 @@ class Upload extends NavbarComponent
</ul>
`;
}
get name()
{
return "投稿";
}
}
class Category extends NavbarComponent
{
@ -321,6 +338,10 @@ class UserInfo extends NavbarComponent
face.style.backgroundImage = `url('https://static.hdslb.com/images/akari.jpg')`;
}
}
get name()
{
return "用户信息";
}
}
class SearchBox extends NavbarComponent
{
@ -380,6 +401,10 @@ class SearchBox extends NavbarComponent
}
}
}
get name()
{
return "搜索";
}
}
class Iframe extends NavbarComponent
{
@ -395,6 +420,33 @@ class Iframe extends NavbarComponent
this.requestedPopup = lazy ? false : true;
}
}
class Activities extends Iframe
{
constructor()
{
super("动态", "https://t.bilibili.com/", {
src: `https://t.bilibili.com/pages/nav/index`,
width: `380px`,
height: `422px`,
lazy: true,
});
this.getNotifyCount();
}
async getNotifyCount()
{
const notifyElement = await SpinQuery.select(".custom-navbar li[data-name='动态'] .notify-count");
const updateNumber = document.cookie.replace(new RegExp(`(?:(?:^|.*;\\s*)bp_t_offset_${userInfo.mid}\\s*\\=\\s*([^;]*).*$)|^.*$`), "$1");
const json = await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_num?rsp_type=1&uid=${userInfo.mid}&update_num_dy_id=${updateNumber}&type_list=8,512,64`);
if (json.code === 0 && json.data.update_num !== 0)
{
notifyElement.innerHTML = json.data.update_num;
this.onPopup = () =>
{
notifyElement.innerHTML = '';
};
}
}
}
class VideoList extends NavbarComponent
{
constructor({ mainUrl, name, apiUrl, listName, listMap })
@ -570,12 +622,7 @@ class HistoryList extends VideoList
height: `210px`,
lazy: false,
}),
new Iframe("动态", "https://t.bilibili.com/", {
src: `https://t.bilibili.com/pages/nav/index`,
width: `380px`,
height: `422px`,
lazy: true,
}),
new Activities,
new WatchlaterList,
new FavoritesList,
new HistoryList,