Contoh begini...
Ketika kita akan memberitahukan salah satu properti HTML5 (Video), kita cukup menuliskan dengan syntax HTML seperti berikut <get-caniuse>video</get-caniuse> Nanti akan muncul ikon kecil di sebelah kanan tulisan video, tinggal klik ikon tersebut maka akan muncul gambar support browser engine plus link info ke 2 web yg gue bicarakan tadi.
Demo & source: codepen.io/tevko/full/OVQeyP - github.com/tevko/getCaniuse
get-caniuse {
display: inline-block;
}
get-caniuse * {
box-sizing: border-box;
}
get-caniuse .caniuse-card {
max-width: 500px;
position: absolute;
border: solid 1px #555;
background-color: #fff;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 15px #000;
}
get-caniuse .caniuse-card p {
margin-top: 0;
}
get-caniuse .caniuse-card .title {
font-weight: bold;
font-size: 21px;
}
get-caniuse .caniuse-card .caniuse-close {
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
font-size: 19px;
}
get-caniuse .caniuse-card .caniuse-supports {
padding: 15px 0;
text-align: center;
}
get-caniuse img {
cursor: pointer;
padding-left: 3px;
vertical-align: middle;
}
get-caniuse .CIU_bs_supported {
width: 75px;
height: 75px;
}
display: inline-block;
}
get-caniuse * {
box-sizing: border-box;
}
get-caniuse .caniuse-card {
max-width: 500px;
position: absolute;
border: solid 1px #555;
background-color: #fff;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 15px #000;
}
get-caniuse .caniuse-card p {
margin-top: 0;
}
get-caniuse .caniuse-card .title {
font-weight: bold;
font-size: 21px;
}
get-caniuse .caniuse-card .caniuse-close {
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
font-size: 19px;
}
get-caniuse .caniuse-card .caniuse-supports {
padding: 15px 0;
text-align: center;
}
get-caniuse img {
cursor: pointer;
padding-left: 3px;
vertical-align: middle;
}
get-caniuse .CIU_bs_supported {
width: 75px;
height: 75px;
}
Silahkan hias-hias sendiri kode css dasar itu.
<script type='text/javascript'>//<![CDATA[
(function(){window.CIU={settings:{elems:'get-caniuse',cIco:'http://www.google.com/s2/favicons?domain=caniuse.com',CIUData:'',dataURL:'https://raw.githubusercontent.com/Fyrd/caniuse/master/data.json',objFormatted:false},init:function(){this.createLinks();},createLinks:function(){var s=this.settings,cElems=document.querySelectorAll(s.elems);Array.apply(null,cElems).forEach(function(elem,idx){elem.addEventListener('click',this.getCIUData.bind(elem,elem.innerHTML,s));var i=new Image();i.src=s.cIco;i.style.width='15px';i.style.display='inline-block';elem.appendChild(i);}.bind(this));},getCIUData:function(string,s,e){if(!this.classList.contains('caniuse-disabled')){s.CIUData===''?CIU.retrieveJSON(string,this):CIU.getClosestMatch(string,this);}},retrieveJSON:function(string,elem){var s=this.settings,request=new XMLHttpRequest();request.open('GET',s.dataURL,true);request.onload=function(){if(request.status>=200&&request.status<400){s.CIUData=JSON.parse(request.responseText).data;this.getClosestMatch(string,elem);}else{this.fallBack(string);}}.bind(this);request.onerror=function(){this.fallBack(string);}.bind(this);request.send();},fallBack:function(string){window.open('http://caniuse.com/#search='+string);},getClosestMatch:function(string,elem){if(elem.querySelector('.caniuse-card')!==null){elem.querySelector('.caniuse-card').style.display='block';elem.classList.add('caniuse-disabled');}else{var s=this.settings,strFormat=string.replace(/-/g,'').toUpperCase(),regexp=new RegExp('\('+strFormat+'\)'),keys=Object.keys(s.CIUData),requestedKey;if(!s.objFormatted){keys.forEach(function(key){var keyFormatted=key.replace(/-/g,'').toUpperCase();s.CIUData[keyFormatted]=s.CIUData[key];delete s.CIUData[key];console.log(key)});s.objFormatted=true;keys=Object.keys(s.CIUData);}
keys.forEach(function(key){if(key.match(regexp)){requestedKey=key;}});requestedKey===undefined&&this.fallBack(string);this.makeCard(s.CIUData[requestedKey],elem,string);}},makeCard:function(obj,elem,string){var getSupportData=function(){var stats=obj.stats,checking=[stats.ie,stats.firefox,stats.chrome,stats.safari,stats.opera,stats.edge],supported='';
stats.ie.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjviH7dfGMceOkk-4xJFkPm0nIghL6wLwGkup373ethgBLM3xTU3CB3h1tTonziWPGXP3R-fEWV2Klr25wK6chG1IQch-DiR4pX31bWaO-M2UEqsftdxzn-cdX6X4PYGLaKYYrBe_BbNR0/s100-c/';
stats.firefox.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQiO8QHFa12chaBq9SsfxfOjPOjWaifGP-Xsz5zkf-jvXEcPUM6MxMKsYctDJBiUvE8bheMWvvZw4TGeeETI9jyCL9udObHhCVVSfUhyphenhyphenL7Qc64hcxSkKbH4dvio9XGuSldR7_KRFIOkWl/s100-c/';
stats.chrome.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt4GpYLtEXjWk0vT7J80ig6dQsP-Os_ZYPcE0i7SU41OMzCXMPP1_hQMlQ-uI3y-E4cZt1_6gwoD6yMNeA66XaQw3yaHjZgSXNwpBdjxVyz-0W7z7GYR15NLbMfJ1jSmk10AR_d0B8FMvx/s100-c/';
stats.safari.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIL4NZ0_V7_Hp5WaDCy_Qz9wkv_wAaOR_8xePv3tSNBnkGX4zrDEsR85O08gv4o3jIHLfvOycPBFyt1vVaeTiyG9YRnWKGmYkNkev-oW7fN0NpUt8UrBn1mgnxDA8lfsQ3qhrpv6LKlmdV/s100-c/';
stats.opera.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHjML1KPF5euR7n0Ajop9fnM5Cg8bWCGIFWDrML0ZI6FkMymb-01L6EN4-eMPh9TiIgODO2GXfADzZVlBuppfJR8CknMldnqW9FeU5bfuJ31rKFGfACn5jyZ-FasivgLerlh6CqOPhK4/s100-c/';
stats.edge.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbffS9P_HGojQ3pg6orVeS4osT_hIiyf6-5ePtKitNyUnpDNGd2TG2IAr92z1INTz4iMXf6_loj25u3j50ZRhMivkqGM4d3MJS8HLlIHGHCSFAe6yhe21Mc37xyN4zf6ZsRDB5zl4t2ew/s100-c/';
checking.forEach(function(check){Object.keys(check).forEach(function(key){if(supported.indexOf('<img class="CIU_bs_supported" src="'+check.name+'">')===-1&&(check[key]==='y'||check[key]==='p'||check[key]==='a x #2'||check[key]==='a #1')){supported+='<img class="CIU_bs_supported" src="'+check.name+'">';}});});return supported;};var card='<div class="caniuse-card">'
+'<p class="title">'
+obj.title
+'</p>'
+'<p class="description">'
+obj.description
+'</p>'
+'<a class="speclink" href="'+obj.spec+'" target="top">W3C Spec</a>'
+'<div class="caniuse-supports">'+getSupportData()+'</div>'
+'<a class="speclink" href="http://caniuse.com/#search='+string+'" target="top">See more on CanIUse.com...</a>'
+'<span class="caniuse-close">X</span>'
+'</div>';elem.innerHTML+=card;elem.classList.add('caniuse-disabled');elem.addEventListener('click',function(e){if(e.target.classList.contains('caniuse-close')){elem.classList.remove('caniuse-disabled');elem.querySelector('.caniuse-card').style.display='none';}});}};})();CIU.init();
//]]></script>
(function(){window.CIU={settings:{elems:'get-caniuse',cIco:'http://www.google.com/s2/favicons?domain=caniuse.com',CIUData:'',dataURL:'https://raw.githubusercontent.com/Fyrd/caniuse/master/data.json',objFormatted:false},init:function(){this.createLinks();},createLinks:function(){var s=this.settings,cElems=document.querySelectorAll(s.elems);Array.apply(null,cElems).forEach(function(elem,idx){elem.addEventListener('click',this.getCIUData.bind(elem,elem.innerHTML,s));var i=new Image();i.src=s.cIco;i.style.width='15px';i.style.display='inline-block';elem.appendChild(i);}.bind(this));},getCIUData:function(string,s,e){if(!this.classList.contains('caniuse-disabled')){s.CIUData===''?CIU.retrieveJSON(string,this):CIU.getClosestMatch(string,this);}},retrieveJSON:function(string,elem){var s=this.settings,request=new XMLHttpRequest();request.open('GET',s.dataURL,true);request.onload=function(){if(request.status>=200&&request.status<400){s.CIUData=JSON.parse(request.responseText).data;this.getClosestMatch(string,elem);}else{this.fallBack(string);}}.bind(this);request.onerror=function(){this.fallBack(string);}.bind(this);request.send();},fallBack:function(string){window.open('http://caniuse.com/#search='+string);},getClosestMatch:function(string,elem){if(elem.querySelector('.caniuse-card')!==null){elem.querySelector('.caniuse-card').style.display='block';elem.classList.add('caniuse-disabled');}else{var s=this.settings,strFormat=string.replace(/-/g,'').toUpperCase(),regexp=new RegExp('\('+strFormat+'\)'),keys=Object.keys(s.CIUData),requestedKey;if(!s.objFormatted){keys.forEach(function(key){var keyFormatted=key.replace(/-/g,'').toUpperCase();s.CIUData[keyFormatted]=s.CIUData[key];delete s.CIUData[key];console.log(key)});s.objFormatted=true;keys=Object.keys(s.CIUData);}
keys.forEach(function(key){if(key.match(regexp)){requestedKey=key;}});requestedKey===undefined&&this.fallBack(string);this.makeCard(s.CIUData[requestedKey],elem,string);}},makeCard:function(obj,elem,string){var getSupportData=function(){var stats=obj.stats,checking=[stats.ie,stats.firefox,stats.chrome,stats.safari,stats.opera,stats.edge],supported='';
stats.ie.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjviH7dfGMceOkk-4xJFkPm0nIghL6wLwGkup373ethgBLM3xTU3CB3h1tTonziWPGXP3R-fEWV2Klr25wK6chG1IQch-DiR4pX31bWaO-M2UEqsftdxzn-cdX6X4PYGLaKYYrBe_BbNR0/s100-c/';
stats.firefox.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQiO8QHFa12chaBq9SsfxfOjPOjWaifGP-Xsz5zkf-jvXEcPUM6MxMKsYctDJBiUvE8bheMWvvZw4TGeeETI9jyCL9udObHhCVVSfUhyphenhyphenL7Qc64hcxSkKbH4dvio9XGuSldR7_KRFIOkWl/s100-c/';
stats.chrome.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt4GpYLtEXjWk0vT7J80ig6dQsP-Os_ZYPcE0i7SU41OMzCXMPP1_hQMlQ-uI3y-E4cZt1_6gwoD6yMNeA66XaQw3yaHjZgSXNwpBdjxVyz-0W7z7GYR15NLbMfJ1jSmk10AR_d0B8FMvx/s100-c/';
stats.safari.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIL4NZ0_V7_Hp5WaDCy_Qz9wkv_wAaOR_8xePv3tSNBnkGX4zrDEsR85O08gv4o3jIHLfvOycPBFyt1vVaeTiyG9YRnWKGmYkNkev-oW7fN0NpUt8UrBn1mgnxDA8lfsQ3qhrpv6LKlmdV/s100-c/';
stats.opera.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHjML1KPF5euR7n0Ajop9fnM5Cg8bWCGIFWDrML0ZI6FkMymb-01L6EN4-eMPh9TiIgODO2GXfADzZVlBuppfJR8CknMldnqW9FeU5bfuJ31rKFGfACn5jyZ-FasivgLerlh6CqOPhK4/s100-c/';
stats.edge.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbffS9P_HGojQ3pg6orVeS4osT_hIiyf6-5ePtKitNyUnpDNGd2TG2IAr92z1INTz4iMXf6_loj25u3j50ZRhMivkqGM4d3MJS8HLlIHGHCSFAe6yhe21Mc37xyN4zf6ZsRDB5zl4t2ew/s100-c/';
checking.forEach(function(check){Object.keys(check).forEach(function(key){if(supported.indexOf('<img class="CIU_bs_supported" src="'+check.name+'">')===-1&&(check[key]==='y'||check[key]==='p'||check[key]==='a x #2'||check[key]==='a #1')){supported+='<img class="CIU_bs_supported" src="'+check.name+'">';}});});return supported;};var card='<div class="caniuse-card">'
+'<p class="title">'
+obj.title
+'</p>'
+'<p class="description">'
+obj.description
+'</p>'
+'<a class="speclink" href="'+obj.spec+'" target="top">W3C Spec</a>'
+'<div class="caniuse-supports">'+getSupportData()+'</div>'
+'<a class="speclink" href="http://caniuse.com/#search='+string+'" target="top">See more on CanIUse.com...</a>'
+'<span class="caniuse-close">X</span>'
+'</div>';elem.innerHTML+=card;elem.classList.add('caniuse-disabled');elem.addEventListener('click',function(e){if(e.target.classList.contains('caniuse-close')){elem.classList.remove('caniuse-disabled');elem.querySelector('.caniuse-card').style.display='none';}});}};})();CIU.init();
//]]></script>
Simpan JavaScript itu sebelum/di atas tag </body> (Recommended) atau tag </head>
Pemakaian ketika akan melakukan postingan, harus pakek syntax
Kalau kepengen link info via wikipedia, you dapat baca get wikipedia headline using jquery wiki.
Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini
Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)
