Bilibili-Evolved/min/trending-videos.vue.min.js
2021-09-11 16:03:19 +08:00

1 line
3.5 KiB
JavaScript

(()=>(e,t)=>{const n=`<div class=trendings><div class=header><div class=title>{{ trendingTitle }}</div><div class=page><div v-if=personalized class=refresh @click=refreshCards><icon type=mdi icon=refresh></icon></div><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 edge-gradient"ref=contents @scroll=checkScrollPosition :class="{ 'is-bottom': isBottom }"><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 .header .page .refresh .be-icon{transition-duration:.5s;transform:scale(.9)}.simple-home .trendings .header .page .refresh:hover .be-icon{transform:scale(.9) rotate(360deg)}.simple-home .trendings .contents{--card-width:200px;--card-height:250px;--card-count:4;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:3}}@media screen and (max-width:1100px) and (min-width:900px){.simple-home .trendings .contents{--card-count:5}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:5}}@media screen and (min-width:1850px){.simple-home .trendings .contents{--card-count:6}}.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(){const t=getUID()&&e.simpleHomePersonalized;return{personalized:t,isBottom:false,trendingTitle:t?"推荐":"热门",trendingCards:[]}},methods:{async refreshCards(){const{getTrendingVideos:e}=await t.importAsync("trending-videos");this.trendingCards=await e()},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 s=16;const o=i*(r+s);t.scrollBy(e*o,0)},checkScrollPosition:_.debounce((function e(t){const n=t.target;this.isBottom=n.scrollWidth-n.scrollLeft===n.clientWidth}),200)},async created(){await this.refreshCards()},async mounted(){let e;addSettingsListener("simpleHomeWheelScroll",(async n=>{if(n){const n=this.$refs.contents;const{enableHorizontalScroll:i}=await t.importAsync("horizontal-scroll");e=i(n)}else{e&&e()}}),true);const n=this.$refs.contents;await SpinQuery.condition((()=>n),(()=>n.childElementCount>0));t.applyImportantStyleFromText(`\n .simple-home.snap .trendings .contents {\n scroll-snap-type: x mandatory;\n }\n`,"trending-videos-snap-fix")}})}})();