codepens work with demos

Author: justinbmeyer

foo.html

@@ -0,0 +1,9 @@
+<h1>Hi There!</h1>
+
+<script>
+var code = "code";
+</script>
+
+<style>
+    h1 {color: red;}
+</style>

index.js

@@ -26,7 +26,21 @@ function createCodePen(data) {
 }
 
 
-var matches = document.body.matches || document.body.msMatchesSelector;
+var browserMatches = document.body.matches || document.body.msMatchesSelector;
+function matches(selector) {
+    if(this.nodeType === 1) {
+        if(selector.indexOf(",") >= 0 ) {
+            return selector.split(",").some(function(selector){
+                return browserMatches.call(this, selector);
+            }, this);
+        } else {
+            return browserMatches.call(this, selector);
+        }
+    } else {
+        return false;
+    }
+}
+
 
 function findPre(start) {
     while(start) {
@@ -45,15 +59,40 @@ function findPre(start) {
     }
 }
 
+function findSelector(start, selector) {
+    while(start) {
+        if(matches.call(start, selector)) {
+            return start;
+        }
+        if(start.querySelector) {
+            var pre = start.querySelector(selector);
+            if(pre) {
+                return pre;
+            }
+        }
+
+        // needs to be previousSibling for zombie
+        start = start.previousSibling;
+    }
+}
+
+function getStylesFromIframe(iframe) {
+    var styles = iframe.contentDocument.documentElement.querySelectorAll("style");
+    var cssText = "";
+    styles.forEach(function(style){
+        cssText += style.innerHTML;
+    });
+    return cssText;
+}
+
 module.exports = function() {
 
     document.body.addEventListener("click", function(ev){
-
         if(matches.call(ev.target, ".codepen")){
 
-            var preElement = findPre(ev.target);
-
-            if(preElement) {
+            var el = findSelector(ev.target, "pre, .demo_wrapper");
+            if(el && matches.call(el, "pre")) {
+                var preElement = el;
                 var codeElement = preElement.querySelector("code");
                 var language = codeElement.className.match(languageHTML)[1];
                 var text = codeElement.textContent;
@@ -82,8 +121,32 @@ module.exports = function() {
                 } else {
                     console.warn("Unable to create a codepen for this demo");
                 }
+            }
+            if(el && matches.call(el, ".demo_wrapper")) {
+                var htmlCode = el.querySelector("[data-for=html] code");
+                var htmlText = htmlCode ? htmlCode.textContent.trim() : "";
+
+                var jsCode = el.querySelector("[data-for=js] code");
+                var jsText = jsCode ? jsCode.textContent.trim() : "";
+
+                var cssText = getStylesFromIframe( el.querySelector("iframe") );
+
+                var codePen = {
+                    html: htmlText,
+                    js: jsText,
+                    js_module: true,
+                    editors: "1011",
+                    css: cssText.trim()
+                };
+
+                if(window.CREATE_CODE_PEN) {
+                    CREATE_CODE_PEN(codePen);
+                } else {
+                    createCodePen(codePen);
+                }
 
             }
+
         }
     });
 };

test-demo.md

@@ -28,3 +28,6 @@ import {DefineMap} from "can";
 console.log( myCounter.count ) //-> 1
 ```
 <div class='codepen'></div>
+
+<div class='demo_wrapper' data-demo-src='foo.html'></div>
+<div class='codepen'></div>

test.js

@@ -8,7 +8,7 @@ var Browser = require("zombie");
 var connect = require("connect");
 
 var open = function(url, callback, done) {
-	var server = connect().use(connect.static(path.join(__dirname, "temp"))).listen(8081);
+	var server = connect().use(connect.static(path.join(__dirname))).listen(8081);
 	var browser = new Browser();
 	browser.visit("http://localhost:8081/" + url)
 		.then(function() {
@@ -22,7 +22,7 @@ var open = function(url, callback, done) {
 };
 
 describe("bit-docs-html-codepen-link", function() {
-	it("basics works", function(done) {
+	it.only("basics works", function(done) {
 		this.timeout(60000);
 
 		var docMap = Promise.resolve({
@@ -39,15 +39,16 @@ describe("bit-docs-html-codepen-link", function() {
 		generate(docMap, {
 			html: {
 				dependencies: {
-					"bit-docs-html-codepen-link": __dirname
+					"bit-docs-html-codepen-link": __dirname,
+					"bit-docs-tag-demo": "^0.5.3"
 				}
 			},
 			dest: path.join(__dirname, "temp"),
 			parent: "index",
 			forceBuild: true,
 			minifyBuild: false
 		}).then(function() {
-			open("index.html",function(browser, close) {
+			open("temp/index.html",function(browser, close) {
 				var doc = browser.window.document;
                 var createCallData = [];
                 browser.window.CREATE_CODE_PEN = function(data){