@@ -42,33 +42,33 @@ <h1 class="mb-4 text-xl font-semibold">{{ dataset_info.repo_id }}</h1>
42
42
< ul >
43
43
< template x-for ="episode in paginatedEpisodes " :key ="episode ">
44
44
< li class ="font-mono text-sm mt-0.5 ">
45
- < a :href ="'episode_' + episode "
45
+ < a :href ="'episode_' + episode "
46
46
:class ="{'underline': true, 'font-bold -ml-1': episode == {{ episode_id }}} "
47
47
x-text ="'Episode ' + episode "> </ a >
48
48
</ li >
49
49
</ template >
50
50
</ ul >
51
-
51
+
52
52
< div class ="flex items-center mt-3 text-xs " x-show ="totalPages > 1 ">
53
- < button @click ="prevPage() "
53
+ < button @click ="prevPage() "
54
54
class ="px-2 py-1 bg-slate-800 rounded mr-2 "
55
55
:class ="{'opacity-50 cursor-not-allowed': page === 1} "
56
56
:disabled ="page === 1 ">
57
57
« Prev
58
58
</ button >
59
59
< span class ="font-mono mr-2 " x-text ="` ${page} / ${totalPages}` "> </ span >
60
- < button @click ="nextPage() "
60
+ < button @click ="nextPage() "
61
61
class ="px-2 py-1 bg-slate-800 rounded "
62
62
:class ="{'opacity-50 cursor-not-allowed': page === totalPages} "
63
63
:disabled ="page === totalPages ">
64
64
Next »
65
65
</ button >
66
66
</ div >
67
67
</ div >
68
-
68
+
69
69
<!-- episodes menu for small screens -->
70
70
< div class ="flex overflow-x-auto md:hidden " x-data ="episodePagination ">
71
- < button @click ="prevPage() "
71
+ < button @click ="prevPage() "
72
72
class ="px-2 bg-slate-800 rounded mr-2 "
73
73
:class ="{'opacity-50 cursor-not-allowed': page === 1} "
74
74
:disabled ="page === 1 "> «</ button >
@@ -83,7 +83,7 @@ <h1 class="mb-4 text-xl font-semibold">{{ dataset_info.repo_id }}</h1>
83
83
</ p >
84
84
</ template >
85
85
</ div >
86
- < button @click ="nextPage() "
86
+ < button @click ="nextPage() "
87
87
class ="px-2 bg-slate-800 rounded ml-2 "
88
88
:class ="{'opacity-50 cursor-not-allowed': page === totalPages} "
89
89
:disabled ="page === totalPages "> » </ button >
@@ -476,7 +476,7 @@ <h1 class="text-xl font-bold mt-4 font-mono">
476
476
episodes : { { episodes } } ,
477
477
pageSize : 100 ,
478
478
page : 1 ,
479
-
479
+
480
480
init ( ) {
481
481
// Find which page contains the current episode_id
482
482
const currentEpisodeId = { { episode_id } } ;
@@ -485,23 +485,23 @@ <h1 class="text-xl font-bold mt-4 font-mono">
485
485
this . page = Math . floor ( episodeIndex / this . pageSize ) + 1 ;
486
486
}
487
487
} ,
488
-
488
+
489
489
get totalPages ( ) {
490
490
return Math . ceil ( this . episodes . length / this . pageSize ) ;
491
491
} ,
492
-
492
+
493
493
get paginatedEpisodes ( ) {
494
494
const start = ( this . page - 1 ) * this . pageSize ;
495
495
const end = start + this . pageSize ;
496
496
return this . episodes . slice ( start , end ) ;
497
497
} ,
498
-
498
+
499
499
nextPage ( ) {
500
500
if ( this . page < this . totalPages ) {
501
501
this . page ++ ;
502
502
}
503
503
} ,
504
-
504
+
505
505
prevPage ( ) {
506
506
if ( this . page > 1 ) {
507
507
this . page -- ;
@@ -515,7 +515,7 @@ <h1 class="text-xl font-bold mt-4 font-mono">
515
515
window . addEventListener ( 'keydown' , ( e ) => {
516
516
// Use the space bar to play and pause, instead of default action (e.g. scrolling)
517
517
const { keyCode, key } = e ;
518
-
518
+
519
519
if ( keyCode === 32 || key === ' ' ) {
520
520
e . preventDefault ( ) ;
521
521
const btnPause = document . querySelector ( '[x-ref="btnPause"]' ) ;
0 commit comments