Allow click date to scroll

This commit is contained in:
the1812 2020-01-21 17:22:03 +08:00
parent 52cb0db920
commit 9a587be3bb
10 changed files with 40 additions and 21 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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -11,7 +11,7 @@
"auto-continue.min.js": "96CD47C367D7397CE1467A69764409BAEFF16E8F535BC8E15523CD0B8A86687E", "auto-continue.min.js": "96CD47C367D7397CE1467A69764409BAEFF16E8F535BC8E15523CD0B8A86687E",
"auto-draw.min.js": "AE72CF2623DF2D15AD4AF82D125FFAF7EF5B1E6B36D9E9AC646AC98AA6AA8698", "auto-draw.min.js": "AE72CF2623DF2D15AD4AF82D125FFAF7EF5B1E6B36D9E9AC646AC98AA6AA8698",
"auto-play.min.js": "DC9938AC15DADDC9D88DCA0C9BE64BE142C37D32CB85E42E23DAB2A7378531E5", "auto-play.min.js": "DC9938AC15DADDC9D88DCA0C9BE64BE142C37D32CB85E42E23DAB2A7378531E5",
"bangumi-timeline.vue.min.js": "64F7BE8C7B54B02E2C6ADB854A2B700D48CD6CA64BE0CE9D67EA5A874DD692C7", "bangumi-timeline.vue.min.js": "469257B7618D7F6637931F11A90AFC2AA96205C26A6374265C1352E54B17F3B7",
"batch-download.min.js": "B7ADE150F26243B9529C2F0E2EC06695ACD27678E07902A8E6EABA767BBE3DD0", "batch-download.min.js": "B7ADE150F26243B9529C2F0E2EC06695ACD27678E07902A8E6EABA767BBE3DD0",
"biliplus-redirect.min.js": "9882D14DAC5C103212A101A5168883C41B4B3B2737FD5F222DC343D0304FF8AF", "biliplus-redirect.min.js": "9882D14DAC5C103212A101A5168883C41B4B3B2737FD5F222DC343D0304FF8AF",
"blackboard.min.js": "8BB9CCDE72302AE7DE39D66F9231EFB82BA27DDA799BA4AAAC06F6DE802661BF", "blackboard.min.js": "8BB9CCDE72302AE7DE39D66F9231EFB82BA27DDA799BA4AAAC06F6DE802661BF",
@ -165,7 +165,7 @@
"settings-tooltip.zh-CN.min.js": "45E62A78438504F561A8746B6BB7E2665FF1E88CC1D5AE3EF433E7EFD018268B", "settings-tooltip.zh-CN.min.js": "45E62A78438504F561A8746B6BB7E2665FF1E88CC1D5AE3EF433E7EFD018268B",
"show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68", "show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68",
"simple-home.vue.min.js": "BB936D1E635E21B72A81F448F86AE2E6773ADABC204BFE4BF78A02BB604E16C0", "simple-home.vue.min.js": "BB936D1E635E21B72A81F448F86AE2E6773ADABC204BFE4BF78A02BB604E16C0",
"simple-home-bangumi-category.vue.min.js": "AB57DC1E835BEF31A582A35675D5BD380D0C10051AC95895B2D6226DAC852617", "simple-home-bangumi-category.vue.min.js": "3CE2077EAA17E33FC3B0003E528658D34F0BBC34259FF5E47E8D2025A11D47AB",
"simple-home-categories.vue.min.js": "DFF18335FC187158B907F996417CEE9D582182D00B4D5D312E10DEACFA31E0BA", "simple-home-categories.vue.min.js": "DFF18335FC187158B907F996417CEE9D582182D00B4D5D312E10DEACFA31E0BA",
"simple-home-feeds.vue.min.js": "BFBE14AEE13D9ACC38BEB0F673ACA8FD2F99944B1189AE77F3BBBB253B248A3A", "simple-home-feeds.vue.min.js": "BFBE14AEE13D9ACC38BEB0F673ACA8FD2F99944B1189AE77F3BBBB253B248A3A",
"simple-home-normal-category.vue.min.js": "F3C1541942DC2C56D495662166FDAE7491F71666625E40E6A7A3465BF7922441", "simple-home-normal-category.vue.min.js": "F3C1541942DC2C56D495662166FDAE7491F71666625E40E6A7A3465BF7922441",

Binary file not shown.

View File

@ -1 +1 @@
(()=>{return(i,e)=>{const a=`<div class=bangumi-category :class="{'rank-loading': rank.loading, 'timeline-loading': timeline.loading}"><bangumi-timeline class=timeline :type=timelineType @load="timeline.loading = false"@error="timeline.error = true"></bangumi-timeline><rank-list :videos=rank.videos view-mode=bangumi></rank-list><div class="timeline loading"></div><div class="rank loading"></div></div>`;e.applyStyleFromText(`.simple-home .bangumi-category{display:grid;--rank-width:350px;--rank-height:calc(var(--rank-width) / 16 * 10);grid-template:"timeline rank" 1fr/1fr var(--rank-width);grid-row-gap:24px;row-gap:24px;grid-column-gap:32px;column-gap:32px;position:relative}@media screen and (min-width:1800px){.simple-home .bangumi-category{--rank-width:365px}}@media screen and (min-width:1500px){.simple-home .bangumi-category{--rank-width:365px}}@media screen and (min-width:1200px){.simple-home .bangumi-category{--rank-width:365px}}@media screen and (min-width:1700px){.simple-home .bangumi-category{--rank-width:380px}}@media screen and (min-width:1400px){.simple-home .bangumi-category{--rank-width:380px}}@media screen and (min-width:1100px){.simple-home .bangumi-category{--rank-width:380px}}@media screen and (min-width:1600px){.simple-home .bangumi-category{--rank-width:395px}}@media screen and (min-width:1300px){.simple-home .bangumi-category{--rank-width:395px}}@media screen and (min-width:1000px){.simple-home .bangumi-category{--rank-width:395px}}.simple-home .bangumi-category,.simple-home .bangumi-category *,.simple-home .bangumi-category ::after,.simple-home .bangumi-category ::before{transition:.2s ease-out}.simple-home .bangumi-category .loading{opacity:0;pointer-events:none;border-radius:16px;position:absolute}.simple-home .bangumi-category .timeline{grid-area:timeline}.simple-home .bangumi-category.timeline-loading .timeline.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.simple-home .bangumi-category.timeline-loading .timeline:not(.loading){opacity:0;pointer-events:none}.simple-home .bangumi-category .rank{height:700px;grid-area:rank}.simple-home .bangumi-category.rank-loading .rank.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.simple-home .bangumi-category.rank-loading .rank:not(.loading){opacity:0;pointer-events:none}`,"simple-home-bangumi-category-style");return{export:Object.assign({template:a},{components:{BangumiTimeline:()=>e.importAsync("bangumi-timeline.vue"),RankList:()=>e.importAsync("rank-list.vue")},props:["rid"],data(){return{timeline:{error:false,loading:true},rank:{error:false,loading:true,videos:[]}}},computed:{timelineType(){return this.rid===13?"global":"chinese"}},watch:{rid(){this.loadRankList()}},methods:{async loadRankList(){const{RegionCodes:i}=await e.importAsync("category-regions");const a=this.rid===i.bangumi?`https://api.bilibili.com/pgc/web/rank/list?season_type=1&day=3`:`https://api.bilibili.com/pgc/web/rank/list?season_type=4&day=3`;try{const i=await Ajax.getJson(a);if(i.code!==0){throw new Error(i.message)}const e=i.result.list.map(i=>{return{id:i.season_id,href:i.url,coverUrl:i.new_ep.cover.replace("http:","https:"),title:i.title,points:i.pts,epTitle:i.new_ep.index_show,playCount:i.stat.view,danmakuCount:i.stat.danmaku,watchlater:null}});this.rank.videos=e.slice(0,10)}catch(i){logError(i);this.rank.error=true}finally{this.rank.loading=false}}},mounted(){this.loadRankList()}})}}})(); (()=>{return(i,e)=>{const a=`<div class=bangumi-category :class="{'rank-loading': rank.loading, 'timeline-loading': timeline.loading}"><bangumi-timeline class=timeline :type=timelineType @load="timeline.loading = false"@error="timeline.error = true"></bangumi-timeline><rank-list :videos=rank.videos view-mode=bangumi></rank-list><div class="timeline loading"></div><div class="rank loading"></div></div>`;e.applyStyleFromText(`.simple-home .bangumi-category{display:grid;--total-height:1010px;--rank-width:350px;--rank-height:calc(var(--rank-width) / 16 * 10);grid-template:"timeline rank" 1fr/1fr var(--rank-width);grid-row-gap:24px;row-gap:24px;grid-column-gap:32px;column-gap:32px;position:relative}@media screen and (min-width:1800px){.simple-home .bangumi-category{--rank-width:365px}}@media screen and (min-width:1500px){.simple-home .bangumi-category{--rank-width:365px}}@media screen and (min-width:1200px){.simple-home .bangumi-category{--rank-width:365px}}@media screen and (min-width:1700px){.simple-home .bangumi-category{--rank-width:380px}}@media screen and (min-width:1400px){.simple-home .bangumi-category{--rank-width:380px}}@media screen and (min-width:1100px){.simple-home .bangumi-category{--rank-width:380px}}@media screen and (min-width:1600px){.simple-home .bangumi-category{--rank-width:395px}}@media screen and (min-width:1300px){.simple-home .bangumi-category{--rank-width:395px}}@media screen and (min-width:1000px){.simple-home .bangumi-category{--rank-width:395px}}.simple-home .bangumi-category,.simple-home .bangumi-category *,.simple-home .bangumi-category ::after,.simple-home .bangumi-category ::before{transition:.2s ease-out}.simple-home .bangumi-category .loading{opacity:0;pointer-events:none;border-radius:16px;position:absolute}.simple-home .bangumi-category .timeline{grid-area:timeline}.simple-home .bangumi-category.timeline-loading .timeline.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.simple-home .bangumi-category.timeline-loading .timeline:not(.loading){opacity:0;pointer-events:none}.simple-home .bangumi-category .rank{height:var(--total-height);grid-area:rank}.simple-home .bangumi-category.rank-loading .rank.loading{position:static;animation:.64s ease-in-out infinite alternate category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.simple-home .bangumi-category.rank-loading .rank:not(.loading){opacity:0;pointer-events:none}`,"simple-home-bangumi-category-style");return{export:Object.assign({template:a},{components:{BangumiTimeline:()=>e.importAsync("bangumi-timeline.vue"),RankList:()=>e.importAsync("rank-list.vue")},props:["rid"],data(){return{timeline:{error:false,loading:true},rank:{error:false,loading:true,videos:[]}}},computed:{timelineType(){return this.rid===13?"global":"chinese"}},watch:{rid(){this.loadRankList()}},methods:{async loadRankList(){const{RegionCodes:i}=await e.importAsync("category-regions");const a=this.rid===i.bangumi?`https://api.bilibili.com/pgc/web/rank/list?season_type=1&day=3`:`https://api.bilibili.com/pgc/web/rank/list?season_type=4&day=3`;try{const i=await Ajax.getJson(a);if(i.code!==0){throw new Error(i.message)}const e=i.result.list.map(i=>{return{id:i.season_id,href:i.url,coverUrl:i.new_ep.cover.replace("http:","https:"),title:i.title,points:i.pts,epTitle:i.new_ep.index_show,playCount:i.stat.view,danmakuCount:i.stat.danmaku,watchlater:null}});this.rank.videos=e.slice(0,10)}catch(i){logError(i);this.rank.error=true}finally{this.rank.loading=false}}},mounted(){this.loadRankList()}})}}})();

View File

@ -3,7 +3,7 @@
<div class="area-header">时间表</div> <div class="area-header">时间表</div>
<div class="bangumi-timeline"> <div class="bangumi-timeline">
<div class="timeline-day" v-for="t of timeline" :key="t.date"> <div class="timeline-day" v-for="t of timeline" :key="t.date">
<div class="date-container" :class="{today: t.isToday}"> <div class="date-container" :class="{today: t.isToday}" @click="moveTimeline">
<div class="icon" :class="['day-of-week-' + t.dayOfWeek]"></div> <div class="icon" :class="['day-of-week-' + t.dayOfWeek]"></div>
<div class="date">{{t.date}}</div> <div class="date">{{t.date}}</div>
<div class="day-of-week">{{t.dayOfWeekText}}</div> <div class="day-of-week">{{t.dayOfWeekText}}</div>
@ -111,6 +111,23 @@ export default {
} }
// console.log(this.recentTime) // console.log(this.recentTime)
}, },
moveTimeline(e: MouseEvent) {
const dateElement = e.currentTarget as HTMLElement
const dayElement = dateElement.parentElement!
const timelineElement = dayElement.parentElement!
const style = getComputedStyle(timelineElement)
const width =
parseInt(style.getPropertyValue('--column-width').match(/(.+)px/)![1]) +
parseInt(style.getPropertyValue('--column-gap').match(/(.+)px/)![1])
const offset = dayElement.offsetLeft - timelineElement.scrollLeft
if (offset < width) {
timelineElement.scrollLeft -= width
} else if (offset >= width * 2) {
timelineElement.scrollLeft += width
}
console.log(e, dateElement, dayElement, timelineElement)
console.log(width, width * 2, dayElement.offsetLeft, timelineElement.scrollLeft, offset)
},
async updateTimeline() { async updateTimeline() {
try { try {
const json = await Ajax.getJsonWithCredentials(this.apiUrl) const json = await Ajax.getJsonWithCredentials(this.apiUrl)
@ -179,10 +196,10 @@ export default {
// timeline.style.setProperty('--column-width', `${width}px`) // timeline.style.setProperty('--column-width', `${width}px`)
timeline.scrollLeft = 5 * (oldWidth + gap) // 7 timeline.scrollLeft = 5 * (oldWidth + gap) // 7
// console.log(width, count, gap, 5 * (width + gap)) // console.log(width, count, gap, 5 * (width + gap))
const recentBangumi = timeline.querySelector( // const recentBangumi = timeline.querySelector(
'.time.recent' // '.time.recent'
) as HTMLElement // ) as HTMLElement
recentBangumi.scrollIntoView() // recentBangumi.scrollIntoView()
} catch (error) { } catch (error) {
logError(error) logError(error)
this.$emit('error') this.$emit('error')
@ -225,7 +242,7 @@ export default {
.timeline-day { .timeline-day {
scroll-snap-align: start; scroll-snap-align: start;
width: var(--column-width); width: var(--column-width);
max-height: 668px; max-height: calc(var(--total-height) - 32px);
overflow: auto; overflow: auto;
flex: 0 0 auto; flex: 0 0 auto;
padding-bottom: 16px; padding-bottom: 16px;
@ -241,6 +258,7 @@ export default {
column-gap: 8px; column-gap: 8px;
height: 60px; height: 60px;
padding-bottom: 12px; padding-bottom: 12px;
cursor: pointer;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;

View File

@ -96,6 +96,7 @@ export default {
<style lang="scss"> <style lang="scss">
.simple-home .bangumi-category { .simple-home .bangumi-category {
display: grid; display: grid;
--total-height: 1010px;
--rank-width: 350px; --rank-width: 350px;
--rank-height: calc(var(--rank-width) / 16 * 10); --rank-height: calc(var(--rank-width) / 16 * 10);
grid-template: 'timeline rank' 1fr / 1fr var(--rank-width); grid-template: 'timeline rank' 1fr / 1fr var(--rank-width);
@ -129,7 +130,7 @@ export default {
position: absolute; position: absolute;
} }
.rank { .rank {
height: 700px; height: var(--total-height);
} }
// .timeline { // .timeline {
// justify-self: center; // justify-self: center;