Pada postingan sebelumnya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 1 kita telah selesai membuat desain awal aplikasi, di postingan kali ini kita akan bermain dengan javascript untuk membuat SlidingUpPanel yang kita buat sebelumnya dapat bekerja sesuai apa yang kita inginkan.
Pertama buatlah file javascript baru beri nama sliding-up-panel.js kemudian tuliskan
"use strict";. Mode use strict ini berguna untuk menempatkan program atau fungsi dalam operasi konteks yang strict (ketat). konteks yang ketat ini mencegah tindakan-tindakan tertentu dan melempar lebih banyak exception/pengecualian.Disini kita akan membuat kelas baru dengan nama SlidingUpPanel dan memuat kelas pada event window onload.
"use strict";
class SlidingUpPanel{
constructor(){
}
}
window.addEventListener('load',() => new SlidingUpPanel());
Untuk mengetes apakah kelas yang kita buat bekerja kita akan menulis ke console, menjadi seperti berikut.
"use strict";
class SlidingUpPanel{
constructor(){
console.log('Hello World!')
}
}
window.addEventListener('load',() => new SlidingUpPanel());
Sekarang buka cmd/terminal di dalam folder proyek Anda kemudian ketikan perintah berikut dan buka browser ketikkan url http://locahost:3000.
supervisor index.jsKemudian tekan CTRL + SHIFT + I untuk membuka panel alat pengembang dan melihat hasilnya di bagian console.
Jika Anda melihat tulisan "Hello World!" di console seperti yang terlihat pada gambar diatas, artinya kelas SlidingUpPanel yang kita buat bekerja. Sekarang kita perlu menginisialisasikan variabel yang dibutuhkan didalam fungsi constructor() dan mengganti console.log yang kita buat sebelumnya.
class SlidingUpPanel{
constructor(){
this.slidingPanel = document.querySelector('#sliding-up-panel');
this.panelHeader = document.querySelector('#sliding-up-panel-header');
this.panelBody = document.querySelector('#sliding-up-panel-body');
this.mainContent = document.body.children[0];
this.mainContent.style.marginBottom = `${this.panelHeader.offsetHeight}px`;
this.slidingPanel.style.height = window.innerHeight;
this.slidingPanel.style.top = window.innerHeight - this.panelHeader.offsetHeight;
this.target = null;
this.targetBCR = null;
this.panelBCR = this.slidingPanel.getBoundingClientRect();
this.startY = 0;
this.currentY = 0;
this.screenY = 0;
this.targetY = 0;
this.collapsedY = this.panelBCR.height - this.panelHeader.offsetHeight;
this.expandedY = -this.panelBCR.height + this.panelHeader.offsetHeight;
this.draggingHeader = false;
this.isExpanded = false;
}
}
Sekarang kita akan membuat beberapa fungsi baru untuk mendengarkan event yang kita butuhkan diantaranya adalah :
- Event mousedown
- Event mousemove
- Event mouseup
- Event touchstart
- Event touchmove
- Event touchend
- Event Window Resize
Sekarang buatlah fungsi baru seperti berikut di dalam class SlidingUpPanel.
addEventListeners(){
document.addEventListener('touchstart', this.onStart);
document.addEventListener('touchmove', this.onMove);
document.addEventListener('touchend', this.onEnd);
const self = this;
window.addEventListener('resize',function(e){
self.slidingPanel.style.top = window.innerHeight - self.panelHeader.offsetHeight;
self.expandedY = -window.innerHeight + self.panelHeader.offsetHeight;
self.animateSlidePanelIntoPosition(self.slidingPanel);
e.preventDefault();
});
document.addEventListener('mousedown', this.onStart);
document.addEventListener('mousemove', this.onMove);
document.addEventListener('mouseup', this.onEnd);
}
Sekarang kita buat 3 fungsi yang akan digunakaan yaitu onStart, onMove dan onEnd.onStart (evt) {
if (this.target)
return;
//if current target id is not sliding-up-panel-header, don't execute the next code.
if (evt.target.id != 'sliding-up-panel-header')
return;
//set target to current touched/clicked target
this.target = evt.target;
//set targetBCR to current touched/clicked target Bounding Client Rectangle
this.targetBCR = this.target.getBoundingClientRect();
//set startY to current touched/clicked Y position on page
this.startY = evt.pageY || evt.touches[0].pageY;
//set currentY equal to startY
this.currentY = this.startY;
//set draggingHeader to true
this.draggingHeader = true;
/* because we will change the panel position based on Y axis using translateY
* set property will-change to transform */
this.slidingPanel.style.willChange = 'transform';
evt.preventDefault();
}
onMove(evt){
if (!this.target)
return;
//set currentY to current touched/clicked Y position on page when we drag the header
this.currentY = evt.pageY || evt.touches[0].pageY;
}
onEnd(evt){
if (!this.target)
return;
this.targetY = 0;
//create new variable screenY and set current header panel position to it.
let screenY = this.currentY - this.startY;
/* threshold variable is used to check if user has drag more then 1/4 of panel height size
* you can change this to half or whatever you want the slider to be expanded or not
* when user drag more then threshold */
const threshold = this.panelBCR.height * 0.25;
if (Math.abs(screenY) > threshold) {
/* set targetY to panel bounding client rectangle height subtract by panel header height if screenY is
* positive value and set to negative value of panel bounding client rectangle height add by
* panel header height */
this.targetY = (screenY > 0) ?
(this.panelBCR.height - this.panelHeader.offsetHeight) :
(-this.panelBCR.height + this.panelHeader.offsetHeight);
}
//set draggingHeader to false
this.draggingHeader = false;
}
Setelah semua fungsi telah dibuat sekarang kita akan melakukan bind pada fungsi yang kita buat tadi ke variabel dalam konteks kelas SlidingUpPanel. Tambahkan script berikut ke dalam fungsi constructor.this.onStart = this.onStart.bind(this);Sekarang kita akan masuk ke bagian animasi dimana kita menggerakan sliding panel berdasarkan sumbu y saat kita melakukan drag pada panel header.
this.onMove = this.onMove.bind(this);
this.onEnd = this.onEnd.bind(this);
this.addEventListeners();
Untuk menganimasikan panel disini saya menggunakan requestAnimationFrame agar browser dapat megoptimasikan animasi sehingga animasi menjadi lebih halus saat objek bergerak. buatlah fungsi baru seperti berikut.
update () {
requestAnimationFrame(this.update);
if (!this.target)
return;
if (this.draggingHeader) {
this.screenY = this.currentY - this.startY;
} else {
this.screenY += (this.targetY - this.screenY) / 4;
}
/* create new variable to and set the value to where we want the sliding panel to move based on Y axis.
* if current panel state is expanded then we move it to expandedY add by screenY
* if not then use screenY instead */
let to = (this.isExpanded) ? (this.expandedY + this.screenY) : this.screenY;
this.slidingPanel.style.transform = `translateY(${to}px)`;
// Check if user still dragging the header or not, if true don't execute the next code.
if (this.draggingHeader)
return;
const panel = this.target.parentNode;
const isNearlyAtStart = (!this.isExpanded)?(Math.abs(this.screenY) < Math.abs(panel.offsetHeight/4)):(Math.abs(this.screenY) > Math.abs(panel.offsetHeight/4));
const isNearlyExpanded = (!this.isExpanded)?(Math.abs(this.screenY) > Math.abs(panel.offsetHeight/4)):(Math.abs(this.screenY) < Math.abs(panel.offsetHeight/4));
// If the panel is nearly expanded and current state is not expanded.
if (isNearlyExpanded && !this.isExpanded) {
// Bail if there's no target or it's not attached to a parent anymore.
if (!this.target || !this.target.parentNode)
return;
// set isExpanded to true
this.isExpanded = true;
} else if (isNearlyAtStart) {
// set isExpanded to false
this.isExpanded = false;
}
// animate the panel to the position where we want it based on its state expanded or not.
this.animateSlidePanelIntoPosition(this.target.parentNode);
}
Selanjutnya tambahkan script berikut ke dalam fungsi construct. this.update = this.update.bind(this);Sekarang kita akan membuat fungsi baru untuk menggerakkan panel pada posisinya berdasarkan keadaan panel yang disimpan dalam variabel isExpanded.
requestAnimationFrame(this.update);
animateSlidePanelIntoPosition (target) {
if(!target){
return;
}
// create new function variable to excecute when the transition has ended
const onAnimationComplete = evt => {
const panel = evt.target;
//remove current listener from the panel
panel.removeEventListener('transitionend', onAnimationComplete);
panel.style.transition = '';
};
// create and set panel to current slidingPanel
const panel = this.slidingPanel;
//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)`;
}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)`;
}
// animation has ended, set target to null
this.target = null;
}
Sekarang buka kembali browser Anda kemudian lihat hasilnya di http://localhost:3000, kurang lebih hasilnya akan seperti berikut. Sampai disini Anda telah berhasil membuat SlidingUpPanel Layout, untuk posting selanjutnya kita akan mulai membuat javascript untuk pemutar musiknya. So stay Tuned ;)!! Untuk gambar-gambar yang digunakan dalam tutorial ini dapat di download disini.
