add preview feature

Author: Metrakit

features.js

@@ -46,10 +46,12 @@ module.exports = {"aac": function() { return require("caniuse-db/features-json/a
 "css-boxdecorationbreak": function() { return require("caniuse-db/features-json/css-boxdecorationbreak")},
 "css-boxshadow": function() { return require("caniuse-db/features-json/css-boxshadow")},
 "css-canvas": function() { return require("caniuse-db/features-json/css-canvas")},
+"css-case-insensitive": function() { return require("caniuse-db/features-json/css-case-insensitive")},
 "css-clip-path": function() { return require("caniuse-db/features-json/css-clip-path")},
 "css-counters": function() { return require("caniuse-db/features-json/css-counters")},
 "css-crisp-edges": function() { return require("caniuse-db/features-json/css-crisp-edges")},
 "css-cross-fade": function() { return require("caniuse-db/features-json/css-cross-fade")},
+"css-default-pseudo": function() { return require("caniuse-db/features-json/css-default-pseudo")},
 "css-deviceadaptation": function() { return require("caniuse-db/features-json/css-deviceadaptation")},
 "css-element-function": function() { return require("caniuse-db/features-json/css-element-function")},
 "css-exclusions": function() { return require("caniuse-db/features-json/css-exclusions")},
@@ -66,6 +68,7 @@ module.exports = {"aac": function() { return require("caniuse-db/features-json/a
 "css-image-orientation": function() { return require("caniuse-db/features-json/css-image-orientation")},
 "css-image-set": function() { return require("caniuse-db/features-json/css-image-set")},
 "css-in-out-of-range": function() { return require("caniuse-db/features-json/css-in-out-of-range")},
+"css-indeterminate-pseudo": function() { return require("caniuse-db/features-json/css-indeterminate-pseudo")},
 "css-initial-value": function() { return require("caniuse-db/features-json/css-initial-value")},
 "css-letter-spacing": function() { return require("caniuse-db/features-json/css-letter-spacing")},
 "css-line-clamp": function() { return require("caniuse-db/features-json/css-line-clamp")},
@@ -80,6 +83,7 @@ module.exports = {"aac": function() { return require("caniuse-db/features-json/a
 "css-motion-paths": function() { return require("caniuse-db/features-json/css-motion-paths")},
 "css-nth-child-of": function() { return require("caniuse-db/features-json/css-nth-child-of")},
 "css-opacity": function() { return require("caniuse-db/features-json/css-opacity")},
+"css-optional-pseudo": function() { return require("caniuse-db/features-json/css-optional-pseudo")},
 "css-page-break": function() { return require("caniuse-db/features-json/css-page-break")},
 "css-placeholder-shown": function() { return require("caniuse-db/features-json/css-placeholder-shown")},
 "css-placeholder": function() { return require("caniuse-db/features-json/css-placeholder")},
@@ -127,6 +131,7 @@ module.exports = {"aac": function() { return require("caniuse-db/features-json/a
 "devicepixelratio": function() { return require("caniuse-db/features-json/devicepixelratio")},
 "dialog": function() { return require("caniuse-db/features-json/dialog")},
 "dispatchevent": function() { return require("caniuse-db/features-json/dispatchevent")},
+"document-currentscript": function() { return require("caniuse-db/features-json/document-currentscript")},
 "document-execcommand": function() { return require("caniuse-db/features-json/document-execcommand")},
 "documenthead": function() { return require("caniuse-db/features-json/documenthead")},
 "dom-range": function() { return require("caniuse-db/features-json/dom-range")},
@@ -212,6 +217,7 @@ module.exports = {"aac": function() { return require("caniuse-db/features-json/a
 "link-rel-dns-prefetch": function() { return require("caniuse-db/features-json/link-rel-dns-prefetch")},
 "link-rel-preconnect": function() { return require("caniuse-db/features-json/link-rel-preconnect")},
 "link-rel-prefetch": function() { return require("caniuse-db/features-json/link-rel-prefetch")},
+"link-rel-preload": function() { return require("caniuse-db/features-json/link-rel-preload")},
 "link-rel-prerender": function() { return require("caniuse-db/features-json/link-rel-prerender")},
 "matchesselector": function() { return require("caniuse-db/features-json/matchesselector")},
 "matchmedia": function() { return require("caniuse-db/features-json/matchmedia")},
@@ -323,6 +329,7 @@ module.exports = {"aac": function() { return require("caniuse-db/features-json/a
 "web-animation": function() { return require("caniuse-db/features-json/web-animation")},
 "web-bluetooth": function() { return require("caniuse-db/features-json/web-bluetooth")},
 "webgl": function() { return require("caniuse-db/features-json/webgl")},
+"webgl2": function() { return require("caniuse-db/features-json/webgl2")},
 "webm": function() { return require("caniuse-db/features-json/webm")},
 "webp": function() { return require("caniuse-db/features-json/webp")},
 "websockets": function() { return require("caniuse-db/features-json/websockets")},

index.js

@@ -2,12 +2,20 @@
 
 const _       = require('lodash');
 const caniuse = require('./caniuse-api');
+const fs = require('fs');
+const path = require('path');
 
 module.exports = (pluginContext) => {
     const shell = pluginContext.shell;
 
+    let html = '';
+
     const browsers = ['firefox', 'chrome', 'ie', 'edge', 'opera', 'safari'];
 
+    function startup() {
+      html = fs.readFileSync(path.join(__dirname, 'preview.html'), 'utf8');
+    }
+
     function capitalize(word) {
       return word[0].toUpperCase() + word.slice(1);
     }
@@ -72,7 +80,8 @@ module.exports = (pluginContext) => {
                 id: x,
                 payload: 'open',
                 title: x,
-                desc: getDesc(x)
+                desc: getDesc(x),
+                preview: true
             });
           });
         }
@@ -85,5 +94,11 @@ module.exports = (pluginContext) => {
         shell.openExternal(`http://caniuse.com/#search=${id}`);
     }
 
-    return {search, execute};
+    function renderPreview(id, payload, render) {
+      var preview = html.replace('%property%', id);
+      render(preview);
+    }
+
+
+    return {startup, search, execute, renderPreview};
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hain-plugin-caniuse",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "All the power of caniuse.com in a hain plugin",
   "main": "index.js",
   "repository": {

preview.html

@@ -0,0 +1,6 @@
+
+<p class="ciu_embed" data-feature="%property%" data-periods="future_1,current,past_2">   <a href="http://caniuse.com/#feat=%property%">Can I Use %property%?</a> Data on support for the %property% feature across the major browsers from caniuse.com. </p>
+
+<script>
+(function(){for(var e=document.getElementsByClassName("ciu_embed"),t=0;t<e.length;t++){var s=e[t],a=s.getAttribute("data-feature"),n=s.getAttribute("data-periods");if(a){var r="http://caniuse.bitsofco.de/embed/index.html",o='<iframe src="'+r+"?feat="+a+"&periods="+n+'" frameborder="0" width="100%" height="400px"></iframe>';s.innerHTML=o}else s.innerHTML="A feature was not included. Go to <a href='http://caniuse.bitsofco.de/#how-to-use'>http://caniuse.bitsofco.de/#how-to-use</a> to generate an embed."}var i=window.addEventListener?"addEventListener":"attachEvent",d=window[i],l="attachEvent"==i?"onmessage":"message";d(l,function(t){var s=t.data;if("string"==typeof s&&s.indexOf("ciu_embed")>-1)for(var a=s.split(":")[1],n=s.split(":")[2],r=0;r<e.length;r++){var o=e[r];if(o.getAttribute("data-feature")===a){var i=parseInt(n)+20;o.childNodes[0].height=i+"px";break}}},!1)}).call(this);
+</script>