diff --git a/gulpfile.js b/gulpfile.js index ebcb055..81a0c77 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -48,3 +48,5 @@ gulp.task('watch', function() { }); gulp.task('default', ['script', 'sass', 'minify-html', 'watch']); + +gulp.task('full', ['connect', 'script', 'sass', 'minify-html', 'watch']); diff --git a/package.json b/package.json index 3312ec9..b718168 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "caniuse-embed", - "version": "1.2.2", + "version": "1.3.0", "description": "The embed for caniuse", "main": "caniuse-embed.js", "scripts": { diff --git a/public/caniuse-embed.min.js b/public/caniuse-embed.min.js index 8e73a26..dad8e98 100644 --- a/public/caniuse-embed.min.js +++ b/public/caniuse-embed.min.js @@ -1 +1 @@ -!function(){document.addEventListener("DOMContentLoaded",function(){for(var e=document.getElementsByClassName("ciu_embed"),t=0;t';a.innerHTML=o}else a.innerHTML="A feature was not included. Go to https://caniuse.bitsofco.de/#how-to-use to generate an embed."}var d=window.addEventListener?"addEventListener":"attachEvent";(0,window[d])("attachEvent"==d?"onmessage":"message",function(t){var a=t.data;if("string"==typeof a&&a.indexOf("ciu_embed")>-1)for(var i=a.split(":")[1],n=a.split(":")[2],s=0;s';a.innerHTML=d}else a.innerHTML="A feature was not included. Go to https://caniuse.bitsofco.de/#how-to-use to generate an embed."}var c=window.addEventListener?"addEventListener":"attachEvent";(0,window[c])("attachEvent"==c?"onmessage":"message",function(t){var a=t.data;if("string"==typeof a&&a.indexOf("ciu_embed")>-1)for(var i=a.split(":")[1],n=a.split(":")[2],s=0;s-1&&(e=e.split("-")[1]),e}function loadJSON(e,t,s){var r=new XMLHttpRequest;r.onreadystatechange=function(){r.readyState===XMLHttpRequest.DONE&&(200===r.status?t&&t(JSON.parse(r.responseText)):s&&s(r))},r.open("GET",e,!0),r.send()}var caniuseDataUrl="https://raw.githubusercontent.com/Fyrd/caniuse/master/fulldata-json/data-2.0.json",featureID=location.href.split("?feat=")[1],featureID=featureID?featureID.split("&periods=")[0]:null,periods=location.href.split("&periods=")[1],periods=periods?periods.split("&accessible-colours=")[0]:null,periods=periods?periods.split(","):null,accessibleColours=location.href.split("&accessible-colours=")[1],accessibleColours=accessibleColours||!1,browsers=["ie","edge","firefox","chrome","safari","ios_saf","op_mini","and_chr","android","samsung"];document.getElementById("defaultMessage").innerHTML=featureID&&periods?'Can I Use '+featureID+"? Data on support for the "+featureID+" feature across the major browsers from caniuse.com. (Embed Loading)":"Error: Feature and/or Periods not Specified";for(var i=periods.length-1;i>-1;i--){for(var tableCells="",j=0;j';var row=document.createElement("tr");row.className="statistics "+periods[i],row.innerHTML=tableCells,document.getElementById("tableBody").appendChild(row)}loadJSON(caniuseDataUrl,function(e){var t=e.data[featureID];if(t){var s=t.usage_perc_y,r=t.usage_perc_a,a=s+r,a=a.toFixed(2),o=t.description;o=o.replace(//g,">"),document.getElementById("featureTitle").innerHTML=t.title,document.getElementById("featureDescription").innerHTML=o,document.getElementById("featureLink").href="http://caniuse.com/#feat="+featureID,document.getElementById("note").innerHTML='Global: '+s+'% + '+r+"% = "+a+"%";for(var i={},l=0;l-1?(n=parseInt(g.split("_")[1]),i[c][g]=e.agents[c].version_list[d-n]?e.agents[c].version_list[d-n].version:null):g.indexOf("future")>-1&&(n=parseInt(g.split("_")[1]),i[c][g]=e.agents[c].version_list[d+n]?e.agents[c].version_list[d+n].version:null)}}for(var p={},l=0;l-1&&(E=L[B]);void 0!=v[c][g]&&(E.className+=" "+v[c][g]);var M=getShortenedBrowserVersion(i[c][g]),_=""+M+''+p[c][g]+"%";void 0!=i[c][g]?E.innerHTML=_:E.innerHTML="",void 0!=v[c][g]&&v[c][g].indexOf("x")>-1&&(h=!0),void 0!=v[c][g]&&v[c][g].indexOf("u")>-1&&(y=!0),void 0!=v[c][g]&&v[c][g].indexOf("d")>-1&&(I=!0)}document.getElementById("legendX").style.display=h?"inline-block":"none",document.getElementById("legendU").style.display=y?"inline-block":"none",document.getElementById("legendD").style.display=I?"inline-block":"none"}else document.getElementById("featureTitle").innerHTML="Uh Oh!",document.getElementById("featureDescription").innerHTML="The feature '"+featureID+"' was not recognized. ",document.getElementById("featureMain").innerHTML="";document.getElementById("defaultMessage").style.display="none",document.getElementsByClassName("feature")[0].style.display="block";var D=document.getElementsByClassName("feature")[0].scrollHeight,T="ciu_embed:"+featureID+":"+D;parent.postMessage(T,"*"),window.onresize=function(e){D=document.getElementsByClassName("feature")[0].scrollHeight;var t="ciu_embed:"+featureID+":"+D;parent.postMessage(t,"*")}},function(e){document.getElementById("defaultMessage").innerHTML="Error Getting JSON File: "+e.response,console.error(e)}),"true"==accessibleColours&&document.body.classList.add("accessible-colours"),document.getElementById("accessibleColoursToggle").addEventListener("click",function(){document.body.classList.toggle("accessible-colours")}); \ No newline at end of file +function getShortenedBrowserVersion(e){return e&&e.indexOf("-")>-1&&(e=e.split("-")[1]),e}function loadJSON(e,t,s){var a=new XMLHttpRequest;a.onreadystatechange=function(){a.readyState===XMLHttpRequest.DONE&&(200===a.status?t&&t(JSON.parse(a.responseText)):s&&s(a))},a.open("GET",e,!0),a.send()}var caniuseDataUrl="https://raw.githubusercontent.com/Fyrd/caniuse/master/fulldata-json/data-2.0.json",featureID,periods,accessibleColours,imageBase;window.location.search.split("?")[1].split("&").forEach(function(e){var t=e.split("=")[0],s=e.split("=")[1];switch(t){case"feat":featureID=s;break;case"periods":periods=s.split(",");break;case"accessible-colours":accessibleColours=s;break;case"image-base":"none"!==s&&(imageBase=s)}});var browsers=["ie","edge","firefox","chrome","safari","ios_saf","op_mini","and_chr","android","samsung"],defaultMessage;defaultMessage=featureID&&periods&&imageBase?'Data on support for the '+featureID+' feature across the major browsers from caniuse.com':featureID&&periods?'Can I Use '+featureID+"? Data on support for the "+featureID+" feature across the major browsers from caniuse.com. (Embed Loading)":"Error: Feature and/or Periods not Specified",document.getElementById("defaultMessage").innerHTML=defaultMessage;for(var i=periods.length-1;i>-1;i--){for(var tableCells="",j=0;j';var row=document.createElement("tr");row.className="statistics "+periods[i],row.innerHTML=tableCells,document.getElementById("tableBody").appendChild(row)}loadJSON(caniuseDataUrl,function(e){var t=e.data[featureID];if(t){var s=t.usage_perc_y,a=t.usage_perc_a,r=s+a,r=r.toFixed(2),o=t.description;o=o.replace(//g,">"),document.getElementById("featureTitle").innerHTML=t.title,document.getElementById("featureDescription").innerHTML=o,document.getElementById("featureLink").href="http://caniuse.com/#feat="+featureID,document.getElementById("note").innerHTML='Global: '+s+'% + '+a+"% = "+r+"%";for(var i={},l=0;l-1?(n=parseInt(f.split("_")[1]),i[c][f]=e.agents[c].version_list[d-n]?e.agents[c].version_list[d-n].version:null):f.indexOf("future")>-1&&(n=parseInt(f.split("_")[1]),i[c][f]=e.agents[c].version_list[d+n]?e.agents[c].version_list[d+n].version:null)}}for(var m={},l=0;l-1&&(E=B[M]);void 0!=v[c][f]&&(E.className+=" "+v[c][f]);var L=getShortenedBrowserVersion(i[c][f]),D=""+L+''+m[c][f]+"%";void 0!=i[c][f]?E.innerHTML=D:E.innerHTML="",void 0!=v[c][f]&&v[c][f].indexOf("x")>-1&&(h=!0),void 0!=v[c][f]&&v[c][f].indexOf("u")>-1&&(y=!0),void 0!=v[c][f]&&v[c][f].indexOf("d")>-1&&(w=!0)}document.getElementById("legendX").style.display=h?"inline-block":"none",document.getElementById("legendU").style.display=y?"inline-block":"none",document.getElementById("legendD").style.display=w?"inline-block":"none"}else document.getElementById("featureTitle").innerHTML="Uh Oh!",document.getElementById("featureDescription").innerHTML="The feature '"+featureID+"' was not recognized. ",document.getElementById("featureMain").innerHTML="";document.getElementById("defaultMessage").style.display="none",document.getElementsByClassName("feature")[0].style.display="block";var _=document.getElementsByClassName("feature")[0].scrollHeight,T="ciu_embed:"+featureID+":"+_;parent.postMessage(T,"*"),window.onresize=function(e){_=document.getElementsByClassName("feature")[0].scrollHeight;var t="ciu_embed:"+featureID+":"+_;parent.postMessage(t,"*")}},function(e){document.getElementById("defaultMessage").innerHTML="Error Getting JSON File: "+e.response,console.error(e)}),"true"==accessibleColours&&document.body.classList.add("accessible-colours"),document.getElementById("accessibleColoursToggle").addEventListener("click",function(){document.body.classList.toggle("accessible-colours")}); \ No newline at end of file diff --git a/public/website/index.js b/public/website/index.js index 2f5829f..992b305 100644 --- a/public/website/index.js +++ b/public/website/index.js @@ -75,7 +75,7 @@ function generatePreview(featureID, periods, accessibleColours, screenshot) { if (screenshot) { const imageBase = screenshot.secure_url.split(".png")[0]; - return `

+ return `

diff --git a/src/caniuse-embed.js b/src/caniuse-embed.js index 32aa344..fa0ee93 100644 --- a/src/caniuse-embed.js +++ b/src/caniuse-embed.js @@ -9,13 +9,14 @@ var feature = embed.getAttribute('data-feature'); var periods = embed.getAttribute('data-periods'); var accessibleColours = embed.getAttribute('data-accessible-colours') || 'false'; + var imageBase = embed.getAttribute('data-image-base') || 'none'; if (feature) { var url = 'https://caniuse.bitsofco.de/embed/index.html'; //var url = 'http://localhost:8000/embed/index.html' - var iframe = ''; + var iframe = ''; embed.innerHTML = iframe; diff --git a/src/embed/script.js b/src/embed/script.js index c2a00e6..44fd056 100644 --- a/src/embed/script.js +++ b/src/embed/script.js @@ -3,26 +3,51 @@ var caniuseDataUrl = 'https://raw.githubusercontent.com/Fyrd/caniuse/master/fulldata-json/data-2.0.json'; -var featureID = location.href.split('?feat=')[1], - featureID = featureID ? featureID.split('&periods=')[0] : null; - -var periods = location.href.split('&periods=')[1], - periods = periods ? periods.split("&accessible-colours=")[0] : null, - periods = periods ? periods.split(",") : null; - -var accessibleColours = location.href.split('&accessible-colours=')[1], - accessibleColours = accessibleColours ? accessibleColours : false; +var featureID; +var periods; +var accessibleColours; +var imageBase; + +window.location.search.split("?")[1].split("&").forEach(function(param) { + var key = param.split("=")[0]; + var value = param.split("=")[1]; + + switch(key) { + case "feat": + featureID = value; + break; + case "periods": + periods = value.split(","); + break; + case "accessible-colours": + accessibleColours = value; + break; + case "image-base": + if (value !== 'none') imageBase = value; + break; + } +}); var browsers = ['ie', 'edge', 'firefox', 'chrome', 'safari', 'ios_saf', 'op_mini', 'and_chr', 'android', 'samsung']; -if ( featureID && periods ) { - document.getElementById('defaultMessage').innerHTML = 'Can I Use '+featureID+'? Data on support for the '+featureID+' feature across the major browsers from caniuse.com. (Embed Loading)'; +var defaultMessage; +if (featureID && periods && imageBase) { + defaultMessage = ''+ + '' + + '' + + '' + + 'Data on support for the ' + featureID + ' feature across the major browsers from caniuse.com' + + ''; +} else if (featureID && periods) { + defaultMessage = 'Can I Use '+featureID+'? Data on support for the '+featureID+' feature across the major browsers from caniuse.com. (Embed Loading)'; } else { - document.getElementById('defaultMessage').innerHTML = 'Error: Feature and/or Periods not Specified'; + defaultMessage = 'Error: Feature and/or Periods not Specified'; } +document.getElementById('defaultMessage').innerHTML = defaultMessage; + // ADD TABLE ROWS FOR EACH PERIOD