Pada kesempatan kali ini saya akan membahas tentang bagaimana cara Membuat Custom Element HTML Menggunakan javascript. Biasanya banyak developer yang masih kurang puas akan fitur-fitur dari element yang ada di HTML, sehingga kebanyakan dari mereka lebih senang untuk membuat custom elementnya sendiri. Pada postingan kali ini saya akan mencoba membuat conditional element dimanan nantinya element akan menampilkan child element pada kondisi tertentu.
Sebelum memulai buatlah file baru dan beri nama index.html kemudian copy template berikut.
<html>
<head>
<meta name="author" content="Muhammad Sayuti">
<title>Custom Elements</title>
</head>
<body>
<input type="checkbox" id="checkbox">
<dev-if if="checkbox is checked">
Checkbox is checked
</dev-if>
<script src="index.js"></script>
</body>
</html>
Sekarang buat file javascript baru dan beri nama index.js. Untuk membuat custom element kita akan menggunakan fungsi customElements untuk memberitahu browser tentang adanya tag baru yang kita buat. pada file ini buatlah class baru kemudian extends class tersebut dengan class DOM level 2 yaitu HTMLElement.
class DevIf extends HTMLElement{
constructor(){
// If you define a ctor, always call super() first!
// This is specific to CE and required by the spec.
super();
}
}
Jika Anda membuat suatu class dengan melakukan extends pada class yang ada pada DOM seperti HTMLElement, HTMLSelectElement dan sebagainya, sangat disarankan untuk memanggil super() pada bagian constructor() terlebih dahulu. Pada DOM level 2 kita dapat menggunakan beberapa callback sesuai keperluan yang akan kita gunakan pada custom element yang kita buat. Berikut adalah beberapa callback yang dapat Anda gunakan.
- createdCallback() (Mozilla) : Biasanya callback ini akan dipanggil/dieksekusi saat element Anda teregister/terdaftar di DOM.
- attachedCallback (Mozilla) atau connectedCallback() (Chrome) :
Biasanya callback ini akan dipanggil /dieksekusi saat element Anda dimasukkan ke dalam DOM. - detachedCallback() (Mozilla) atau disconnectedCallback() (Chrome):
Biasanya callback ini akan dipanggil /dieksekusi saat element Anda dihapus dari DOM. - attributeChangedCallback() (Mozilla & Chrome) :
Biasanya callback ini akan dipanggil /dieksekusi saat ada perubahan pada attribute dari element yang Anda buat.
Sekarang tambahkan 2 callback yaitu connectedCallback() dan attributeChangedCallback().
class DevIf extends HTMLElement{
constructor(){
// If you define a constructor, always call super() first!
// This is specific to CE and required by the specification.
super();
}
connectedCallback(){
//get value from if attribute and define new if variable on the current class
this.if = this.getAttribute('if');
}
attributeChangedCallback(name, oldValue, newValue){
if (name !== 'if') {
return;
}
this.if = newValue;
}
}
Pada script diatas saya memberikan value pada variable if dengan mengambil attribute if pada element dan mengubah value if jika terdapat perubahan pada attribute if di fungsi attributeChangedCallback(). Sekarang kita akan membuat getter and setter untuk variabel if, tambahkan script berikut kedalam class.
get if(){
return this.if;
}
set if(_condition){
if(!_condition){
return;
}
}
Selanjutnya kita akan membuat fungsi baru untuk melakukan parsing dan mengecek kondisi yang diberikan pada attribut if, buatlah fungsi baru checkCondition()checkCondition(condition){
let parsed = condition.split(' ');
switch(parsed[1]){
case 'is':
//get element by id provided in first parameter
let el = document.querySelector(`#${parsed[0]}`);
//if element not found, warn the user and stop execution.
if(el == null){
console.warn('cannot find element with id',parsed[0]);
return;
}
// get the element type
let type = this.getElementType(el);
// check default state in our element for current condition
this.checkDefault(el);
// add listener to listen change on our element
this.addListener(el,type);
break;
}
}
Karena disini hanya demo jadi saya hanya akan memberikan 1 kondisi, jika Anda ingin mengembangkannya dan menambahkan kondisi lain Anda dapat mendapatkan source codenya melalui github. Pada script diatas saya melakukan split pada value yang diberikan di attribut if. variabel parsed akan menjadi array dan pada index 0 akan kita gunakan sebagai acuan untuk mencari element berdasarkan id, kemudian pada index 1 merupakan kondisinya, disini hanya ada kondisi "is", kemudian pada index 2 adalah kondisi apa yang akan digunakan. Pada contoh ini saya menggunakan element checkbox sebagai parameter pertama, is untuk parameter kedua dan checked pada parameter ketiga. Disini saya tidak melakukan pengecekan pada parameter ketiga karena jika kita menggunakan checkbox maka yang dicek sudah pasti apakah checkbox tersebut di check atau tidak.Sekarang buat fungsi baru untuk mendapatkan tipe element yang diberikan pada parameter pertama jika element ditemukan.
getElementType(target){
if(target.nodeName === 'input'){
return target.getAttribute('type');
}else{
return target.nodeName.toLowerCase();
}
}
Setelah itu buat fungsi baru untuk menentukan apa yang terjadi pada element berdasarkan kondisi saat ini.checkDefault(target,type){
if(type === 'checkbox'){
if(target.checked || target.hasAttribute('checked')){
this.style.display = 'initial';
}else{
this.style.display = 'none';
}
}
}
Sekarang buat fungsi baru lagi untuk menambahkan listener saat ada perubahan yang terjadi pada element dan memanggil fungsi checkDefault().addListener(target,type){
let self = this;
target.addEventListener('change',function(){
let t = self.getElementType(this);
self.checkDefault(this,t);
});
}
Untuk langkah terakhir kita hanya perlu mendefinisikan element yang akan kita buat dengan menggunakan fungsi customElements() yang ada di window. parameter pertama merupakan nama tag yang kita berikan sedangkan yang kedua adalah class yang baru saja kita buat. Letakkan script berikut di baris paling akhir dalam file javascript Anda.cusomElements.define('dev-if',DevIf);
Sekarang cek hasilnya pada Chrome browser Anda, element yang ada di dalam custom element yang kita buat hanya akan tampil saat checkbox di check. berikut hasil akhirnya.
Mungkin itu saja yang dapat saya jelaskan pada postingan kali ini tentang bagaimana cara Membuat Custom Element HTML Menggunakan Javascript.
Semoga bermanfaat...!!
