1.3.0

ireade · Oct 24, 2019 · 0784be0 · 0784be0
1 parent 3fd8a12
commit 0784be0
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 17 deletions.
diff --git 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
@@ -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
diff --git a/public/embed/script.js b/public/embed/script.js
diff --git 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 `<p class="ciu_embed" data-feature="${featureID}" data-periods="${periods}" data-accessible-colours="${accessibleColours}">
+		return `<p class="ciu_embed" data-feature="${featureID}" data-periods="${periods}" data-accessible-colours="${accessibleColours}" data-image-base="${imageBase}">
 			<a href="http://caniuse.com/#feat=${featureID}">
 				<picture>
 					<source type="image/webp" srcset="${imageBase}.webp">

diff --git 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 = '<iframe src="'+url+'?feat='+feature+'&periods='+periods+'&accessible-colours='+accessibleColours+'" frameborder="0" width="100%" height="400px"></iframe>';
+        var iframe = '<iframe src="'+url+'?feat='+feature+'&periods='+periods+'&accessible-colours='+accessibleColours+'&image-base='+imageBase+'" frameborder="0" width="100%" height="400px"></iframe>';
 
         embed.innerHTML = iframe;
 

diff --git 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 = '<a href="http://caniuse.com/#feat='+featureID+'">Can I Use '+featureID+'?</a> Data on support for the '+featureID+' feature across the major browsers from caniuse.com. (Embed Loading)';
+var defaultMessage;
 
+if (featureID && periods && imageBase) {
+  defaultMessage = '<picture>'+
+    '<source type="image/webp" srcset="' + imageBase + '.webp">' +
+    '<source type="image/png" srcset="' + imageBase + '.png">' +
+    '<source type="image/jpeg" srcset="' + imageBase + '.jpg">' +
+    '<img src="' + imageBase + '.png" alt="Data on support for the ' + featureID + ' feature across the major browsers from caniuse.com">' +
+  '</picture>';
+} else if (featureID && periods)  {
+  defaultMessage = '<a href="http://caniuse.com/#feat='+featureID+'">Can I Use '+featureID+'?</a> 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