Add simpleHomeWheelScroll option

This commit is contained in:
the1812 2020-07-15 20:16:47 +08:00
parent c3dc453339
commit 925e7efbcc
12 changed files with 27 additions and 14 deletions

View File

@ -453,6 +453,7 @@ declare global {
customStyles: CustomStyle[],
simpleHomeCategoryOrders: SimpleHomeCategoryOrders,
simpleHomeBangumiLayout: '时间表' | '动态',
simpleHomeWheelScroll: boolean,
keymapJumpSeconds: number,
urlParamsClean: boolean,
collapseLiveSideBar: boolean,
@ -491,6 +492,7 @@ declare global {
watchLaterRedirectPage: boolean,
showCoverBeforePlay: boolean,
customNavbarGlobalFixed: boolean,
volumeOverdrive: boolean,
latestVersionLink: string,
currentVersion: string,
}

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

File diff suppressed because one or more lines are too long

View File

@ -207,7 +207,7 @@
"simple-home.vue.min.js": "1F5CF46DEE65549A30C5F0790578EED0C6B3AD6C5F20D9B88CD745C4B7664ABB",
"simple-home-bangumi-category.vue.min.js": "87DCA2C8295CAD66C9FA01D65437EC2F9DD5E7F4A565B4384ABAB1746A6787EE",
"simple-home-categories.vue.min.js": "C3347E1412E971E81CCCEFF96C90F6CCA9CD8893FE8860CBA98F9562965A02C6",
"simple-home-feeds.vue.min.js": "DF5616626846E62E258BE40BE0AC6A5B39157E3C32C9318A854F3B1FBDD0C8CB",
"simple-home-feeds.vue.min.js": "C1593338AECD2C8E172829E423608177C5CCBF51868E6CBE9BDEB8862D4890DF",
"simple-home-normal-category.vue.min.js": "55B700EF840DBD1E9F5C249739DC24F80B4FEF96082169EC484E944A5189D6E6",
"simplify-home.min.css": "50F0FA046D61ECE5183409CF97C8DBECB4CF64918DF813CD2B39BF9FBD314B42",
"simplify-home.min.js": "F6D7F8E0D45847C3E056711AECE3832785603E7EF85A4B995C028F5CBE539C94",
@ -232,7 +232,7 @@
"touch-player.min.css": "3C0D6F29DF520EB4397C0B996B14B6B2B7AD81145BC62C70B0249402A8AB70A0",
"touch-player.min.js": "0307516FD221386DA37F9C48223BA0E242BF52EF48F46D18A033042351968E94",
"trending-videos.min.js": "1ED73F10D5A7C409CCBF91A97FBB0DE2AA16426F2216DF75F904E8A6389A46E9",
"trending-videos.vue.min.js": "772F8FD556C1DD9E457B7F64F5B8B1753FD92E30426F847688D8E2C4EB49FDFD",
"trending-videos.vue.min.js": "6B53E8C65270907514BB89BEF8919F21D956C3AD167438C3F3520D01A410B2FB",
"tweets.min.css": "9015C1F165C91B9205ABBE4E8A3B5FA83DB1EB4B5CF2442846AF61E44FF178A8",
"url-params-clean.min.js": "E1A9E7A073B584B5B65C952D0DA1EA732CE743E0680BFE945DA9306086F220C8",
"v-checkbox.vue.min.js": "A23C35D5627009A29FD396A024442A19E37DEE70674BF3CE0FA377D781ED2231",

Binary file not shown.

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const a=`<div class=feeds><div class=header><div class=tabs><div class=title>动态</div><div class=tab v-for="tab in tabs":key=tab.type @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div><a class=more href=//t.bilibili.com/ target=_blank><icon type=home icon=activity></icon>全部动态</a></div><div class=contents ref=contents><div class=card-wrapper v-for="card in feedCards":key=card.id><video-card :data=card orientation=vertical></video-card></div><div class=empty v-if="feedCards.length === 0">没有动态哦(´・_・\`)</div></div></div>`;t.applyStyleFromText(`.simple-home .feeds{justify-self:start;display:grid;grid-template-areas:"header header" "contents contents";grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto);row-gap:16px;column-gap:16px}.simple-home .feeds .header,.simple-home .feeds .sub-header{padding:0 8px}.simple-home .feeds .header .tab:nth-child(2),.simple-home .feeds .sub-header .tab:nth-child(2){margin-left:32px}.simple-home .feeds .header .online,.simple-home .feeds .sub-header .online{padding:8px 16px;height:32px;border-radius:16px;background-color:#8882;color:inherit;font-size:12px;display:flex;align-items:center;box-sizing:border-box}.simple-home .feeds .contents{grid-area:contents;display:flex;overflow:auto;--card-width:200px;--card-height:250px;--card-count:4;width:calc((var(--card-width) + 16px) * var(--card-count));padding-bottom:16px;scrollbar-width:none!important;min-height:calc(var(--card-height) + 16px)}@media screen and (max-width:900px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:5}}.simple-home .feeds .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .feeds .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}.simple-home .feeds .contents .empty{display:flex;align-items:center;justify-content:center;width:100%;font-size:16px}`,"simple-home-feeds-style");const i=[{name:"视频",type:"video",url:"https://t.bilibili.com/?tab=8"},{name:"番剧",type:"bangumi",url:"https://t.bilibili.com/?tab=512"}];return{export:Object.assign({template:a},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{online:"--",tabs:i,currentTab:i[0],feedCards:[]}},watch:{currentTab(e){this.updateFeedCards(e)}},methods:{async updateFeedCards(e){const{getVideoFeeds:a}=await t.importAsync("feeds-apis");this.feedCards=await a(e.type)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}}},async mounted(){this.updateFeedCards(this.currentTab);const e=this.$refs.contents;const{enableHorizontalScroll:a}=await t.importAsync("horizontal-scroll");a(e)}})}}})();
(()=>{return(e,t)=>{const a=`<div class=feeds><div class=header><div class=tabs><div class=title>动态</div><div class=tab v-for="tab in tabs":key=tab.type @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div><a class=more href=//t.bilibili.com/ target=_blank><icon type=home icon=activity></icon>全部动态</a></div><div class=contents ref=contents><div class=card-wrapper v-for="card in feedCards":key=card.id><video-card :data=card orientation=vertical></video-card></div><div class=empty v-if="feedCards.length === 0">没有动态哦(´・_・\`)</div></div></div>`;t.applyStyleFromText(`.simple-home .feeds{justify-self:start;display:grid;grid-template-areas:"header header" "contents contents";grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto);row-gap:16px;column-gap:16px}.simple-home .feeds .header,.simple-home .feeds .sub-header{padding:0 8px}.simple-home .feeds .header .tab:nth-child(2),.simple-home .feeds .sub-header .tab:nth-child(2){margin-left:32px}.simple-home .feeds .header .online,.simple-home .feeds .sub-header .online{padding:8px 16px;height:32px;border-radius:16px;background-color:#8882;color:inherit;font-size:12px;display:flex;align-items:center;box-sizing:border-box}.simple-home .feeds .contents{grid-area:contents;display:flex;overflow:auto;--card-width:200px;--card-height:250px;--card-count:4;width:calc((var(--card-width) + 16px) * var(--card-count));padding-bottom:16px;scrollbar-width:none!important;min-height:calc(var(--card-height) + 16px)}@media screen and (max-width:900px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:5}}.simple-home .feeds .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .feeds .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}.simple-home .feeds .contents .empty{display:flex;align-items:center;justify-content:center;width:100%;font-size:16px}`,"simple-home-feeds-style");const i=[{name:"视频",type:"video",url:"https://t.bilibili.com/?tab=8"},{name:"番剧",type:"bangumi",url:"https://t.bilibili.com/?tab=512"}];return{export:Object.assign({template:a},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{online:"--",tabs:i,currentTab:i[0],feedCards:[]}},watch:{currentTab(e){this.updateFeedCards(e)}},methods:{async updateFeedCards(e){const{getVideoFeeds:a}=await t.importAsync("feeds-apis");this.feedCards=await a(e.type)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}}},async mounted(){this.updateFeedCards(this.currentTab);if(!e.simpleHomeWheelScroll){return}const a=this.$refs.contents;const{enableHorizontalScroll:i}=await t.importAsync("horizontal-scroll");i(a)}})}}})();

View File

@ -1 +1 @@
(()=>{return(e,t)=>{const n=`<div class=trendings><div class=header><div class=title>热门</div><div class=page><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div></div><div class=contents ref=contents><div class=card-wrapper v-for="card in trendingCards":key=card.id><video-card :data=card orientation=vertical></video-card></div></div></div>`;t.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{padding:0 8px}.simple-home .trendings .header .page{display:flex;align-items:center}.simple-home .trendings .header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .trendings .header .page>:hover{background-color:#8884}.simple-home .trendings .header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .trendings .header .page .next-page .be-icon{transform:translateX(1px)}.simple-home .trendings .contents{--card-width:200px;--card-height:250px;--card-count:3;margin-top:16px;display:flex;overflow:auto;height:calc(var(--card-height) + 16px);width:calc((var(--card-width) + 16px) * var(--card-count));scrollbar-width:none!important}@media screen and (max-width:1300px) and (min-width:900px){.simple-home .trendings .contents{--card-count:2}}@media screen and (max-width:1100px) and (min-width:900px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:4}}.simple-home .trendings .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .trendings .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}`,"trending-videos-style");return{export:Object.assign({template:n},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{trendingCards:unsafeWindow.__INITIAL_STATE__.recommendList.map(e=>{return{id:e.aid,aid:e.aid,bvid:e.bvid,timestamp:e.ctime*1e3,time:new Date(e.ctime*1e3),description:e.desc,duration:e.duration,durationText:formatDuration(e.duration),coverUrl:e.pic.replace("http:","https:"),title:e.title,coins:formatCount(e.stat.coin),danmakuCount:formatCount(e.stat.danmaku),like:formatCount(e.stat.like),playCount:formatCount(e.stat.view),upName:e.owner.name,upFaceUrl:e.owner.face.replace("http:","https:")}})}},methods:{scroll(e){const t=this.$refs.contents;const n=getComputedStyle(t);const i=parseFloat(n.getPropertyValue("--card-count"));const r=parseFloat(n.getPropertyValue("--card-width"));const a=16;const o=i*(r+a);t.scrollBy(e*o,0)}},async mounted(){const e=this.$refs.contents;const{enableHorizontalScroll:n}=await t.importAsync("horizontal-scroll");n(e)}})}}})();
(()=>{return(e,t)=>{const n=`<div class=trendings><div class=header><div class=title>热门</div><div class=page><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div></div><div class=contents ref=contents><div class=card-wrapper v-for="card in trendingCards":key=card.id><video-card :data=card orientation=vertical></video-card></div></div></div>`;t.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{padding:0 8px}.simple-home .trendings .header .page{display:flex;align-items:center}.simple-home .trendings .header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .trendings .header .page>:hover{background-color:#8884}.simple-home .trendings .header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .trendings .header .page .next-page .be-icon{transform:translateX(1px)}.simple-home .trendings .contents{--card-width:200px;--card-height:250px;--card-count:3;margin-top:16px;display:flex;overflow:auto;height:calc(var(--card-height) + 16px);width:calc((var(--card-width) + 16px) * var(--card-count));scrollbar-width:none!important}@media screen and (max-width:1300px) and (min-width:900px){.simple-home .trendings .contents{--card-count:2}}@media screen and (max-width:1100px) and (min-width:900px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:4}}.simple-home .trendings .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .trendings .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}`,"trending-videos-style");return{export:Object.assign({template:n},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{trendingCards:unsafeWindow.__INITIAL_STATE__.recommendList.map(e=>{return{id:e.aid,aid:e.aid,bvid:e.bvid,timestamp:e.ctime*1e3,time:new Date(e.ctime*1e3),description:e.desc,duration:e.duration,durationText:formatDuration(e.duration),coverUrl:e.pic.replace("http:","https:"),title:e.title,coins:formatCount(e.stat.coin),danmakuCount:formatCount(e.stat.danmaku),like:formatCount(e.stat.like),playCount:formatCount(e.stat.view),upName:e.owner.name,upFaceUrl:e.owner.face.replace("http:","https:")}})}},methods:{scroll(e){const t=this.$refs.contents;const n=getComputedStyle(t);const i=parseFloat(n.getPropertyValue("--card-count"));const r=parseFloat(n.getPropertyValue("--card-width"));const a=16;const o=i*(r+a);t.scrollBy(e*o,0)}},async mounted(){if(!e.simpleHomeWheelScroll){return}const n=this.$refs.contents;const{enableHorizontalScroll:i}=await t.importAsync("horizontal-scroll");i(n)}})}}})();

View File

@ -202,6 +202,7 @@ export const settings = {
customStyles: [],
simpleHomeCategoryOrders: { ...simpleHomeCategoryDefaultOrders },
simpleHomeBangumiLayout: '时间表',
simpleHomeWheelScroll: true,
keymapJumpSeconds: 85,
urlParamsClean: true,
collapseLiveSideBar: true,

View File

@ -106,6 +106,9 @@ export default {
// if (json.code === 0) {
// this.online = json.data.web_online
// }
if (!settings.simpleHomeWheelScroll) {
return
}
const contents = this.$refs.contents as HTMLElement
const { enableHorizontalScroll } = await import('../../../utils/horizontal-scroll')
enableHorizontalScroll(contents)

View File

@ -117,6 +117,9 @@ export default {
}
},
async mounted() {
if (!settings.simpleHomeWheelScroll) {
return
}
const contents = this.$refs.contents as HTMLElement
const { enableHorizontalScroll } = await import('../../../utils/horizontal-scroll')
enableHorizontalScroll(contents)