Setelah sebelumnya di postingan Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 3 kita telah membuat pemutar musiknya, maka pada postingan terahir di dalam topik ini kita akan memperbaiki beberapa element serta sedikit memberi efek untuk mempercantik tampilan antarmuka.
Pertama-tama kita akan mengedit pada bagian panel header dimana content dari panel header akan kita bagi menjadi 2, yaitu panel header saat posisi SlidingUpPanel terbuka dan panel header saat posisi SlidingUpPanel tertutup atau berada dibagian dibawah layar.
Ubah bagian sliding-up-panel-header menjadi seperti berikut
Sekarang tambahkan css berikut kedalam file sliding-up-panel.css.
#sliding-up-panel-header.expanded .panel-header-content__expanded{
transition:opacity 300ms;
opacity:1;
}
#sliding-up-panel-header .panel-header-content__expanded{
position: absolute;
transition: opacity 300ms;
opacity:0;
text-align: left;
padding:20px;
pointer-events: none;
}
#sliding-up-panel-header .panel-header-content__collapsed{
pointer-events: none;
}
#sliding-up-panel-header.expanded .panel-header-content__collapsed{
display: none;
}
Sekarang kita akan memperbaiki beberapa bug yang mungkin telah Anda lihat saat kita mendrag panel header lebih dari tinggi layar maka panel header akan overflow dan tidak nampak dilayar, untuk mengatasinya kita perlu menambahkan statement if saat user mendrag header dengan mengecek apakah posisi sumbu y saat ini kurang dari ukuran saat SlidingUpPanel pada posisi terbuka dan apakah posisi sumbu y saat ini lebih dari 0. Tambahkan 2 baris statement if berikut pada fungsi update di file sliding-up-panel.js tepat sebelum
this.slidingPanel.style.transform = `translateY(${to}px)`;//prevent the header to overflow the screen height when dragging
if(to < this.expandedY) to = this.expandedY;
if(to > 0) to = 0;
Selanjutnya masih di file yang sama, ubah fungsi animateSlidingPanelIntoPosition menjadi seperti berikut.
animateSlidePanelIntoPosition (target) {
if(!target){
return;
}
// create new function variable to excecute when the transition has ended
const onAnimationComplete = evt => {
const panel = evt.target;
panel.removeEventListener('transitionend', onAnimationComplete);
panel.style.transition = '';
};
// create and set panel to current slidingPanel
const panel = target;
//check if current state is expanded
if(this.isExpanded){
//add event listener when the transition has ended.
panel.addEventListener('transitionend', onAnimationComplete);
//set the panel transition to transform with duration 200 miliseconds
panel.style.transition = `transform 200ms`;
//set the panel transform to position when it's in expanded state
panel.style.transform = `translateY(${this.expandedY}px)`;
//add class expanded to panel header
this.panelHeader.setAttribute('class','expanded');
}else{
//add event listener when the transition has ended.
panel.addEventListener('transitionend', onAnimationComplete);
//set the panel transition to transform with duration 200 miliseconds
panel.style.transition = `transform 200ms`;
//set the panel transform to position when it's not in expanded state
panel.style.transform = `translateY(0px)`;
//remove class attribute from panel header
this.panelHeader.removeAttribute('class')
}
// user has finish dragging the header, set target to null
if(!this.draggingHeader)
this.target = null;
}
Selanjutnya kita akan menampilkan preloader saat playlist masih kosong dan menyembunyikannya saat playlist telah terisi. Disini kita juga akan memberikan sedikit efek fade in dan slide.
Tambahkan tag div dengan nama class preloader tepat setelah tag audio.
Sekarang ubah css
.playlist ul li serta tambahkan .playlist.loading ul li dan .preloader dalam file player.css menjadi seperti berikut..preloader{
position: absolute;
width:46px;
height:46px;
top:calc(50% - 23px);
left:calc(50% - 23px);
background-image: url(../assets/img/ajax-loader.gif);
}
.playlist ul li{
display: block;
border-bottom: 1px solid black;
transform: translate3d(0,0,0);
opacity:1;
}
.playlist.loading ul li{
transform: translate3d(100%,0,0);
opacity:0;
}
Selanjutnya buat variabel baru pada fungsi construct untuk menyimpan element preloader dan ubah fungsi loadPlaylistMetadata dan getPlaylist pada file player.js menjadi seperti berikut.this.preloader = document.querySelector('.preloader');
getPlaylist(){
var self = this;
var xhr = new XMLHttpRequest();
xhr.onload = function(e){
e.preventDefault();
if(xhr.status == 200 || xhr.status == 409){
var data = JSON.parse(xhr.response.match(/\[.*\]/ig, "")[0]);
data.forEach(function(item,index){
self.loadPlaylistMetadata(item,index,data.length);
});
self.songs = Array.from(document.querySelectorAll('.song a'))
}else{
console.log('cant get playlist, error with status code ' + xhr.status);
}
}
xhr.open('get', '\songlist', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
}
loadPlaylistMetadata(path,index,length){
var self = this;
// create new li element for the playlist item and set the attribute
var li = document.createElement('li');
li.setAttribute('class','song');
li.setAttribute('data-index',index);
// create new link element and set the href attribute to the file path
var a = document.createElement('a');
a.setAttribute('href',path);
// create new image element
var img = document.createElement('img');
img.className = 'cover';
img.style.cssFloat = 'left';
//create new container for title and artist metadata
var meta = document.createElement('div');
meta.className = 'metatag playlist';
//create new span element to set title from the file metadata
var title = document.createElement('span');
title.className = 'title';
title.style.whiteSpace = 'nowrap';
//create new span element to set artist name from the file metadata
var artist = document.createElement('span');
artist.className = 'artist';
//insert link/anchor element to li element
li.appendChild(a);
//insert img element to link/anchor element
a.appendChild(img);
//insert meta container to the link/anchor element
a.appendChild(meta);
/* create new p element and insert title and artist to it then append it to meta container,
* this element is necessary if we want the title or artist to
* be marqueed if the width is more than container width.*/
var p = document.createElement('p').appendChild(title);
meta.appendChild(p);
p = document.createElement('p').appendChild(artist);
meta.appendChild(p);
// listen to link click event
a.onclick = function(e){
e.preventDefault();
self.player.setAttribute('src',path);
self.songChanged(self.currentSong,li.getAttribute('data-index'));
self.currentSong = parseInt(li.getAttribute('data-index'));
self.playPauseBtn[0].children[0].click();
};
//append li element to playlist
this.playlist.children[0].appendChild(li);
// read meta data from the file using jsmediatags
jsmediatags.read(path, {
onSuccess: function(tag) {
var url = path;
var filename = url.split('/');
filename = filename[filename.length-1];
if(tag.tags.picture != undefined){
var base64String = "";
for (var i = 0; i < tag.tags.picture.data.length; i++) {
base64String += String.fromCharCode(tag.tags.picture.data[i]);
}
img.setAttribute('src',"data:"+ tag.tags.picture.format +";base64," + window.btoa(base64String));
}else{
img.setAttribute('src',"assets/img/albumart_mp_unknown.png");
}
// if the artist name in metadata is undefined or null, set it to unknown.
artist.innerHTML = tag.tags.artist || 'unknown';
// if the title in metadata is undefined or null, use filename instead.
title.innerHTML = tag.tags.title || filename;
// setup marquee animation
self.setupMarqueeAnimation(titles[i],artists[i]);
if(index == length - 1){
//hide the preloader
self.preloader.style.display = 'none';
//get all li element in playlist
let list = self.playlist.querySelectorAll('li');
list.forEach(function(item,index){
//add transition with diffrent delay for each item in list depend on item index/position in the list
item.style.transition = `transform 300ms ease-in ${index*0.2}s, opacity 300ms ease-in ${index*0.2}s`;
});
//change playlist class name, this will remove loading class
self.playlist.setAttribute('class','playlist');
}
},
onError: function(error) {
console.log(error);
}
});
}
Terakhir tambahkan class loading pada playlist di dalam file index.html menjadi seperti berikut. Untuk file preloader Anda dapat menggunakan gambar berikut dan menyimpannya di folder assets > img.
Mungkin sampai disini saja pada postingan terakhir dalam topik Membuat SlidingUpPanel Dengan HTML,CSS Dan Javscript ini, jika terdapat pertanyaan dapat menggunakan kotak komentar dibawah.
