Skip to content

Commit c761753

Browse files
DIYgodDIYgod
committed
use scrollHeight to calculate list height
1 parent 70de14f commit c761753

9 files changed

Lines changed: 93 additions & 96 deletions

File tree

‎demo/demo.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const ap2 = new APlayer({
4646
artist: 'Goose house',
4747
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
4848
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
49-
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc",
49+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
5050
theme: '#ebd0c2'
5151
}]
5252
});
@@ -62,7 +62,7 @@ const ap3 = new APlayer({
6262
artist: 'Goose house',
6363
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
6464
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
65-
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc",
65+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
6666
theme: '#ebd0c2'
6767
}]
6868
});
@@ -114,7 +114,7 @@ const ap5 = new APlayer({
114114
mutex: true,
115115
theme: '#e9e9e9',
116116
listFolded: false,
117-
listMaxHeight: '80px',
117+
listMaxHeight: 80,
118118
audio: [{
119119
name: '光るなら',
120120
artist: 'Goose house',

‎docs/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const ap = new APlayer({
108108
volume: 0.7,
109109
mutex: true,
110110
listFolded: false,
111-
listMaxHeight: '90px',
111+
listMaxHeight: 90,
112112
lrcType: 3,
113113
audio: [
114114
{
@@ -396,7 +396,7 @@ APlayer will show a playlist when it has more than one audio, option `listFolded
396396
const ap = new APlayer({
397397
container: document.getElementById('player'),
398398
listFolded: false,
399-
listMaxHeight: '90px',
399+
listMaxHeight: 90,
400400
lrcType: 3,
401401
audio: [
402402
{

‎docs/config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ function aplayer3 () {
163163
volume: 0.7,
164164
mutex: true,
165165
listFolded: false,
166-
listMaxHeight: '90px',
166+
listMaxHeight: 90,
167167
lrcType: 3,
168168
audio: [{
169169
name: '光るなら',
@@ -199,7 +199,7 @@ function aplayer4 () {
199199
artist: 'Goose house',
200200
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
201201
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
202-
lrc: "https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc",
202+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
203203
theme: '#ebd0c2'
204204
}]
205205
});

‎docs/zh-Hans/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const ap = new APlayer({
109109
volume: 0.7,
110110
mutex: true,
111111
listFolded: false,
112-
listMaxHeight: '90px',
112+
listMaxHeight: 90,
113113
lrcType: 3,
114114
audio: [
115115
{
@@ -397,7 +397,7 @@ const ap = new APlayer({
397397
const ap = new APlayer({
398398
container: document.getElementById('player'),
399399
listFolded: false,
400-
listMaxHeight: '90px',
400+
listMaxHeight: 90,
401401
lrcType: 3,
402402
audio: [
403403
{

‎src/css/index.scss‎

Lines changed: 52 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -576,78 +576,71 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
576576
will-change: height;
577577
display: none;
578578
overflow: hidden;
579+
list-style-type: none;
580+
margin: 0;
581+
padding: 0;
582+
overflow-y: auto;
579583

580-
&.aplayer-list-hide {
581-
max-height: 0 !important;
584+
&::-webkit-scrollbar {
585+
width: 5px;
582586
}
583587

584-
ol {
585-
list-style-type: none;
586-
margin: 0;
587-
padding: 0;
588-
overflow-y: auto;
588+
&::-webkit-scrollbar-thumb {
589+
border-radius: 3px;
590+
background-color: #eee;
591+
}
589592

590-
&::-webkit-scrollbar {
591-
width: 5px;
592-
}
593+
&::-webkit-scrollbar-thumb:hover {
594+
background-color: #ccc;
595+
}
593596

594-
&::-webkit-scrollbar-thumb {
595-
border-radius: 3px;
596-
background-color: #eee;
597-
}
597+
li {
598+
position: relative;
599+
height: 32px;
600+
line-height: 32px;
601+
padding: 0 15px;
602+
font-size: 12px;
603+
border-top: 1px solid #e9e9e9;
604+
cursor: pointer;
605+
transition: all 0.2s ease;
606+
overflow: hidden;
607+
margin: 0;
598608

599-
&::-webkit-scrollbar-thumb:hover {
600-
background-color: #ccc;
609+
&:first-child {
610+
border-top: none;
601611
}
602612

603-
li {
604-
position: relative;
605-
height: 32px;
606-
line-height: 32px;
607-
padding: 0 15px;
608-
font-size: 12px;
609-
border-top: 1px solid #e9e9e9;
610-
cursor: pointer;
611-
transition: all 0.2s ease;
612-
overflow: hidden;
613-
margin: 0;
614-
615-
&:first-child {
616-
border-top: none;
617-
}
618-
619-
&:hover {
620-
background: #efefef;
621-
}
622-
623-
&.aplayer-list-light {
624-
background: #e9e9e9;
613+
&:hover {
614+
background: #efefef;
615+
}
625616

626-
.aplayer-list-cur {
627-
display: inline-block;
628-
}
629-
}
617+
&.aplayer-list-light {
618+
background: #e9e9e9;
630619

631620
.aplayer-list-cur {
632-
display: none;
633-
width: 3px;
634-
height: 22px;
635-
position: absolute;
636-
left: 0;
637-
top: 5px;
638-
cursor: pointer;
639-
}
640-
.aplayer-list-index {
641-
color: #666;
642-
margin-right: 12px;
643-
cursor: pointer;
644-
}
645-
.aplayer-list-author {
646-
color: #666;
647-
float: right;
648-
cursor: pointer;
621+
display: inline-block;
649622
}
650623
}
624+
625+
.aplayer-list-cur {
626+
display: none;
627+
width: 3px;
628+
height: 22px;
629+
position: absolute;
630+
left: 0;
631+
top: 5px;
632+
cursor: pointer;
633+
}
634+
.aplayer-list-index {
635+
color: #666;
636+
margin-right: 12px;
637+
cursor: pointer;
638+
}
639+
.aplayer-list-author {
640+
color: #666;
641+
float: right;
642+
cursor: pointer;
643+
}
651644
}
652645
}
653646

‎src/js/list.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ class List {
77
this.player = player;
88
this.index = 0;
99
this.audios = this.player.options.audio;
10+
this.showing = true;
11+
this.player.template.list.style.height = `${Math.min(this.player.template.list.scrollHeight, this.player.options.listMaxHeight)}px`;
1012

1113
this.bindEvents();
1214
}
@@ -32,18 +34,23 @@ class List {
3234
}
3335

3436
show () {
37+
this.showing = true;
38+
this.player.template.list.scrollTop = this.index * 33;
39+
this.player.template.list.style.height = `${Math.min(this.player.template.list.scrollHeight, this.player.options.listMaxHeight)}px`;
3540
this.player.events.trigger('listshow');
36-
this.player.template.list.classList.remove('aplayer-list-hide');
37-
this.player.template.listOl.scrollTop = this.index * 33;
3841
}
3942

4043
hide () {
41-
this.player.events.trigger('listhide');
42-
this.player.template.list.classList.add('aplayer-list-hide');
44+
this.showing = false;
45+
this.player.template.list.style.height = `${Math.min(this.player.template.list.scrollHeight, this.player.options.listMaxHeight)}px`;
46+
setTimeout(() => {
47+
this.player.template.list.style.height = '0px';
48+
this.player.events.trigger('listhide');
49+
}, 0);
4350
}
4451

4552
toggle () {
46-
if (!this.player.template.list.classList.contains('aplayer-list-hide')) {
53+
if (this.showing) {
4754
this.hide();
4855
}
4956
else {
@@ -70,7 +77,7 @@ class List {
7077
const wasSingle = !(this.audios.length > 1);
7178
const wasEmpty = this.audios.length === 0;
7279

73-
this.player.template.listOl.innerHTML += tplListItem({
80+
this.player.template.list.innerHTML += tplListItem({
7481
theme: this.player.options.theme,
7582
audio: audios,
7683
index: this.audios.length + 1
@@ -158,7 +165,7 @@ class List {
158165
}
159166
this.player.container.querySelectorAll('.aplayer-list li')[this.index].classList.add('aplayer-list-light');
160167

161-
smoothScroll(this.index * 33, 500, null, this.player.template.listOl);
168+
smoothScroll(this.index * 33, 500, null, this.player.template.list);
162169

163170
this.player.setAudio(audio);
164171

@@ -180,7 +187,7 @@ class List {
180187
this.audios = [];
181188
this.player.lrc && this.player.lrc.clear();
182189
this.player.audio.src = '';
183-
this.player.template.listOl.innerHTML = '';
190+
this.player.template.list.innerHTML = '';
184191
this.player.template.pic.style.backgroundImage = '';
185192
this.player.theme(this.player.options.theme, this.index, false);
186193
this.player.template.title.innerHTML = 'No audio';

‎src/js/options.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default (options) => {
1414
order: 'list',
1515
volume: 0.7,
1616
listFolded: options.fixed,
17-
listMaxHeight: options.listmaxheight || '250px',
17+
listMaxHeight: options.listmaxheight || 250,
1818
audio: options.music || [],
1919
storageName: 'aplayer-setting'
2020
};
@@ -24,6 +24,8 @@ export default (options) => {
2424
}
2525
}
2626

27+
options.listMaxHeight = parseFloat(options.listMaxHeight);
28+
2729
if (Object.prototype.toString.call(options.audio) !== '[object Array]') {
2830
options.audio = [options.audio];
2931
}

‎src/js/template.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ class Template {
3636
this.button = this.container.querySelector('.aplayer-button');
3737
this.body = this.container.querySelector('.aplayer-body');
3838
this.list = this.container.querySelector('.aplayer-list');
39-
this.listOl = this.container.querySelector('.aplayer-list ol');
4039
this.listCurs = this.container.querySelectorAll('.aplayer-list-cur');
4140
this.played = this.container.querySelector('.aplayer-played');
4241
this.loaded = this.container.querySelector('.aplayer-loaded');

‎src/template/player.art‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -63,25 +63,21 @@
6363
<div class="aplayer-notice"></div>
6464
<div class="aplayer-miniswitcher"><button class="aplayer-icon">{{@ icons.right }}</button></div>
6565
</div>
66-
<div class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}"{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
67-
<ol{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
68-
{{ include './list-item.art' getObject({
69-
theme: options.theme,
70-
audio: options.audio,
71-
index: 1
72-
}) }}
73-
</ol>
74-
</div>
66+
<ol class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}">
67+
{{ include './list-item.art' getObject({
68+
theme: options.theme,
69+
audio: options.audio,
70+
index: 1
71+
}) }}
72+
</ol>
7573
{{ else }}
76-
<div class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}"{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
77-
<ol{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
78-
{{ include './list-item.art' getObject({
79-
theme: options.theme,
80-
audio: options.audio,
81-
index: 1
82-
}) }}
83-
</ol>
84-
</div>
74+
<ol class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}">
75+
{{ include './list-item.art' getObject({
76+
theme: options.theme,
77+
audio: options.audio,
78+
index: 1
79+
}) }}
80+
</ol>
8581
<div class="aplayer-body">
8682
<div class="aplayer-pic" style="{{ if cover }}background-image: url(&quot;{{ cover }}&quot;);{{ /if }}background-color: {{ options.theme }};">
8783
<div class="aplayer-button aplayer-play">{{@ icons.play }}</div>

0 commit comments

Comments
 (0)