Bilibili-Evolved/min/slideshow-cards.vue.min.js
2021-09-27 09:36:04 +08:00

1 line
9.7 KiB
JavaScript

(()=>(e,i)=>{const r=`<div class=slideshow-cards><div class=error v-if=error></div><template v-if="!error && cards.length >= 7"><a class=slideshow-card target=_blank v-for="card of cardQueue":key=card.id :href="'https://www.bilibili.com/' + card.bvid":title=card.title><dpi-img :src=card.coverUrl :alt=card.title :size="{ height: 300 }"></dpi-img></a><div class=operations><a class=play title=播放 target=_blank :href="'https://www.bilibili.com/' + currentCard.bvid"><icon type=home icon=play-triangle></icon></a><button class=watchlater v-if="currentCard.watchlater !== null":class="{checked: watchlaterList.includes(currentCard.aid)}":title="watchlaterList.includes(currentCard.aid) ? '已添加至稍后再看' : '稍后再看'"@click=toggleWatchlater(currentCard.aid)><icon type=mdi icon=clock-outline></icon></button></div><div class=info><a class=title target=_blank :title=currentCard.title :href="'https://www.bilibili.com/' + currentCard.bvid">{{currentCard.title}}</a><a class=up target=_blank :href="'https://space.bilibili.com/' + currentCard.upID":title=currentCard.upName><dpi-img :size=24 :src=currentCard.upFaceUrl :alt=currentCard.upName class=face></dpi-img>{{currentCard.upName}}</a><div class=stat v-if=showStat><icon type=extended icon=play></icon><div class=number>{{currentCard.playCount | bigNumber}}</div><icon type=extended icon=danmaku></icon><div class=number>{{currentCard.danmakuCount | bigNumber}}</div><icon type=extended icon=like></icon><div class=number>{{currentCard.like | bigNumber}}</div><icon type=extended icon=coin></icon><div class=number>{{currentCard.coins | bigNumber}}</div></div><div class=type v-else><icon type=mdi icon=tag></icon>{{currentCard.type}}</div><div class=description :title=currentCard.description>{{currentCard.description}}</div><div class=buttons><button class=refresh @click=refresh() title=刷新><icon type=mdi icon=refresh></icon></button><button class=previous @click=previousCard() title=上一个><icon type=extended icon=left-arrow></icon></button><button class=next @click=nextCard()>下一个<icon type=extended icon=right-arrow></icon></button></div></div></template><div class=area-header>{{title}}</div></div>`;i.applyStyleFromText(`.slideshow-cards{display:grid;position:relative;grid-template:"header header header header" auto "cards . operations info" var(--card-height)/var(--card-width) 48px auto 320px}.slideshow-cards .error{grid-column:1/4;grid-row:2/3;align-self:stretch;justify-self:stretch}.slideshow-cards .operations{grid-area:operations;display:flex;flex-direction:column;align-self:center;justify-self:start}.slideshow-cards .operations>*{background-color:#ddd;color:inherit;border-radius:50%;border:none;display:flex;height:32px;width:32px;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;margin-right:16px}.slideshow-cards .operations>:hover{background-color:#ccc}body.dark .slideshow-cards .operations>*{background-color:#333}body.dark .slideshow-cards .operations>:hover{background-color:#444}.slideshow-cards .operations>.checked{border:2px solid var(--theme-color)}.slideshow-cards .operations>* .be-icon{font-size:22px}.slideshow-cards .operations>:not(:last-child){margin-bottom:8px}.slideshow-cards .operations .play .be-icon{font-size:16px;transform:translateX(1.5px)}.slideshow-cards .operations .play,body.dark .slideshow-cards .operations .play{color:var(--foreground-color);background-color:var(--theme-color)}.slideshow-cards .operations .play:hover,body.dark .slideshow-cards .operations .play:hover{background-color:var(--theme-color-80)}.slideshow-cards .info{grid-area:info;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}.slideshow-cards .info>*{display:flex;align-items:center}.slideshow-cards .info>:not(:last-child){margin-bottom:6px}.slideshow-cards .info .title{color:inherit!important;font-size:12pt;font-weight:700;text-align:right;flex-shrink:0;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;max-height:3em}.slideshow-cards .info .up{font-size:10pt;color:inherit!important}.slideshow-cards .info .up .face{border-radius:50%;width:24px;height:24px;margin-right:8px}.slideshow-cards .info .stat,.slideshow-cards .info .type{opacity:.75;align-items:center}.slideshow-cards .info .stat .be-icon,.slideshow-cards .info .type .be-icon{margin:0 4px 0 16px;font-size:12pt}.slideshow-cards .info .description{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:6;-webkit-box-orient:vertical;line-height:1.5;max-height:9em;flex-grow:1;flex-shrink:1;white-space:pre-wrap;text-align:right;opacity:.75}.slideshow-cards .info .buttons .be-icon{font-weight:400}.slideshow-cards .info .buttons>button{outline:0!important;cursor:pointer}.slideshow-cards .info .buttons .refresh{background-color:#ddd;color:inherit;border-radius:50%;border:none;display:flex;height:32px;width:32px;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px;cursor:pointer}.slideshow-cards .info .buttons .refresh:hover{background-color:#ccc}body.dark .slideshow-cards .info .buttons .refresh{background-color:#333}body.dark .slideshow-cards .info .buttons .refresh:hover{background-color:#444}.slideshow-cards .info .buttons .refresh.checked{border:2px solid var(--theme-color)}.slideshow-cards .info .buttons .refresh .be-icon{transition-duration:.5s;transform:scale(.9)}.slideshow-cards .info .buttons .refresh:hover .be-icon{transform:scale(.9) rotate(360deg)}.slideshow-cards .info .buttons .previous{background-color:#ddd;color:inherit;border-radius:50%;border:none;display:flex;height:32px;width:32px;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px;cursor:pointer}.slideshow-cards .info .buttons .previous:hover{background-color:#ccc}body.dark .slideshow-cards .info .buttons .previous{background-color:#333}body.dark .slideshow-cards .info .buttons .previous:hover{background-color:#444}.slideshow-cards .info .buttons .previous.checked{border:2px solid var(--theme-color)}.slideshow-cards .info .buttons .previous .be-icon{transform:translateX(-1px)}.slideshow-cards .info .buttons .next{display:flex;align-items:center;padding:4px 6px 4px 12px;background-color:var(--theme-color);border:none;color:var(--foreground-color)!important;height:32px;box-sizing:border-box;line-height:normal;font-size:11pt;font-weight:700;border-radius:16px}.slideshow-cards .info .buttons .next:hover{background-color:var(--theme-color-80)}.slideshow-cards .slideshow-card{grid-area:cards;cursor:pointer;align-self:stretch;justify-self:stretch;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#8882;border-radius:16px}.slideshow-cards .slideshow-card:not(:first-child){transform-origin:right}.slideshow-cards .slideshow-card:not(:nth-child(2)){pointer-events:none;transform:translateX(39px) scale(.45);opacity:0}.slideshow-cards .slideshow-card img{border-radius:16px;width:100%;height:100%;object-fit:cover}.slideshow-cards .slideshow-card:nth-child(1){z-index:7}.slideshow-cards .slideshow-card:nth-child(2){z-index:6;pointer-events:initial}.slideshow-cards .slideshow-card:nth-child(3){z-index:5}.slideshow-cards .slideshow-card:nth-child(4){z-index:4}.slideshow-cards .slideshow-card:nth-child(5){z-index:3}.slideshow-cards .slideshow-card:nth-child(6){z-index:2}.slideshow-cards .slideshow-card:nth-child(7){z-index:1}.slideshow-cards .slideshow-card:first-child{transform:translateX(-10%) scale(1.1);opacity:0}.slideshow-cards .slideshow-card:nth-child(3){transform:translateX(20px) scale(.9);opacity:.5}.slideshow-cards .slideshow-card:nth-child(4){transform:translateX(30px) scale(.75);opacity:.25}.slideshow-cards .slideshow-card:nth-child(5){transform:translateX(35px) scale(.65);opacity:.125}.slideshow-cards .slideshow-card:nth-child(6){transform:translateX(37.5px) scale(.5);opacity:.0625}@media screen and (max-width:1600px){.slideshow-cards .info .description{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:4;-webkit-box-orient:vertical;line-height:1.5;max-height:6em}}@media screen and (max-width:1400px){.slideshow-cards .info .description{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.5;max-height:4.5em}}@media screen and (max-width:1200px){.slideshow-cards .info .description{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;max-height:3em}}@media screen and (max-width:1050px){.slideshow-cards .info .description{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:1.5;max-height:1.5em}}@media screen and (max-width:950px){.slideshow-cards .info .title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:1.5;max-height:1.5em}}`,"slideshow-cards-style");return{export:Object.assign({template:r},{components:{Icon:()=>i.importAsync("icon.vue"),DpiImg:()=>i.importAsync("dpi-img.vue")},filters:{bigNumber(e){return formatCount(e)}},props:["cards","error","title","showStat"],data(){return{cardQueue:[]}},methods:{...Vuex.mapActions(["toggleWatchlater"]),regenerateQueue(){if(this.cards.length<7){return}const e=[...this.cards];e.unshift(e.pop());this.cardQueue=e},previousCard(){this.cardQueue.unshift(this.cardQueue.pop())},nextCard(){this.cardQueue.push(this.cardQueue.shift())},refresh(){this.$emit("refresh")}},watch:{cards(){this.regenerateQueue()}},computed:{...Vuex.mapState(["watchlaterList"]),currentCard(){return this.cardQueue[1]}},mounted(){this.regenerateQueue()}})}})();