add support frame

Author: Mavrin

.travis.yml

@@ -0,0 +1,4 @@
+sudo: false
+language: node_js
+node_js:
+    - "stable"

README.md

@@ -1,3 +1,5 @@
+[![Build Status](https://travis-ci.org/Mavrin/gitbook-plugin-jsfiddle.svg)](https://travis-ci.org/Mavrin/gitbook-plugin-jsfiddle)
+
 JSFiddle integration for GitBook
 ==============
 

src/replace.js

@@ -1,88 +1,3 @@
-/*require(["gitbook", "jquery"], function (gitbook, $) {
- var matcher;
- var localConfig = {jsfiddle:{}};
-
- function getQuery(querystring) {
- var query = {};
-
- var pairs = querystring.split('&'),
- length = pairs.length,
- keyval = [],
- i = 0;
-
- for (; i < length; i++) {
- keyval = pairs[i].split('=', 2);
- try {
- keyval[0] = decodeURIComponent(keyval[0]); // key
- keyval[1] = decodeURIComponent(keyval[1]); // value
- } catch (e) {
- }
-
- if (query[keyval[0]] === undefined) {
- query[keyval[0]] = keyval[1];
- } else {
- query[keyval[0]] += ',' + keyval[1];
- }
- }
-
- return query;
- }
-
- // <iframe width="100%" height="300" src="http://jsfiddle.net/taucharts/hmvwg1mn/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
- function embed(link, config) {
- var iframe = document.createElement('iframe'),
- url = link.href.replace(/\?.+/, '') + 'embedded/' + config.tabs.join(',') + '/';
-
- iframe.src = url;
- var $frame = $(iframe);
- $frame.attr('allowfullscreen', 'allowfullscreen');
- $frame.attr('frameborder', 0);
- iframe._src = url; // support for google slide embed
- iframe.className = link.className; // inherit all the classes from the link
- iframe.id = link.id; // also inherit, giving more style control to the user
- iframe.style.border = '1px solid #aaa';
-
- var query = getQuery(link.search);
- var widht = query.width || config.width || '100%';
- var height = query.height || config.height || '100%';
- $frame.attr('width', widht);
- $frame.attr('height', height);
- link.parentNode.replaceChild(iframe, link);
-
- var onmessage = function (event) {
- event || (event = window.event);
- // * 1 to coerse to number, and + 2 to compensate for border
- iframe.style.height = (event.data.height * 1 + 2) + 'px';
- };
-
- if (window.addEventListener) {
- window.addEventListener('message', onmessage, false);
- } else {
- window.attachEvent('onmessage', onmessage);
- }
- }
-
- function embedAllLink(config) {
- localConfig.jsfiddle = config.jsfiddle || {};
- localConfig.tabs = config.tabs || ['result'];
- $(".book-body a").each(function (index, link) {
- if (link.href && matcher.test(link.href)) {
- embed(link, localConfig.jsfiddle);
- }
- });
- }
-
- gitbook.events.bind("start", function (e, config) {
- matcher = /(http|https):\/\/jsfiddle.net\/.+/;
- embedAllLink(config);
- });
-
- gitbook.events.bind("page.change", function () {
- if (matcher) {
- embedAllLink(localConfig);
- }
- });
- });*/
 var htmlparser = require('htmlparser2');
 var DomHandler = require('domhandler');
 var domutils = require('domutils');
@@ -118,20 +33,36 @@ var generateAdditionalParams = function (config) {
     if (config.theme) {
         params += config.theme + '/';
     }
-    var colors = _.chain(config).omit('href', 'type', 'theme', 'tabs').reduce(function (colors, value, color) {
+    var colors = _.chain(config).omit('href', 'type', 'theme', 'tabs', 'width', 'height').reduce(function (colors, value, color) {
         colors += color + '=' + value + '&';
         return colors;
     }, '');
+    colors = colors.replace(/&$/, '');
     return params + '?' + colors;
 };
 
+var generateUrl = function (config) {
+    var additionalParam = generateAdditionalParams(config);
+    var type = config.type == 'frame' ? 'embedded' : 'embed';
+    return config.href + type + '/' + config.tabs.join(',') + additionalParam;
+};
+
 var creator = {
     script: function (config) {
-        var additionalParam = generateAdditionalParams(config);
-        return '<script async src="' + config.href + 'embed/' + config.tabs.join(',') + additionalParam + '" ></script>';
+        return '<script async src="' + generateUrl(config) + '" ></script>';
     },
     frame: function (config) {
-
+        return [
+            '<iframe',
+            ' width=',
+            '"' + (config.width ? config.width + 'px' : '100%') + '"',
+            ' height=',
+            '"' + (config.height ? config.height + 'px' : '100%') + '"',
+            ' src="' + generateUrl(config) + '"',
+            ' allowfullscreen="allowfullscreen" frameborder="0"',
+            '>',
+            '</iframe>'
+        ].join('');
     }
 };
 

tests/replace.js

@@ -1,23 +1,43 @@
 var test = require('tape');
 var replace = require('./../src/replace');
-/*
-<script
-async
-src="//jsfiddle.net/zalun/NmudS/embed/?fontColor=red&bodyColor=red&accentColor=red&menuColor=red"
-    ></script>*/
-test('scanner', function (assert) {
+
+test('replacer', function (assert) {
     var str = '<div> <a href="//jsfiddle.net/zalun/NmudS/">Yellow</a> </div>';
 
     assert.equal(
         replace(str, {
-            type:'frame',
-            theme:"dark",
-            bodyColor:"red",
-            tabs:['js']
+            type: 'script',
+            theme: "dark",
+            bodyColor: "red",
+            accentColor: "red",
+            tabs: ['js']
+        }),
+        `<div>
+          <script async src="//jsfiddle.net/zalun/NmudS/embed/js/dark/?bodyColor=red&accentColor=red"></script>
+        </div>`.replace(/\s+/g, ' ')
+        , 'replace on script with params and dark theme');
+    assert.equal(
+        replace(str, {
+            type: 'script',
+            bodyColor: "red",
+            accentColor: "red",
+            tabs: ['js']
+        }),
+        `<div>
+          <script async src="//jsfiddle.net/zalun/NmudS/embed/js/light/?bodyColor=red&accentColor=red"></script>
+        </div>`.replace(/\s+/g, ' ')
+        , 'replace on script with params and without theme');
+    assert.equal(
+        replace(str, {
+            type: 'frame',
+            theme: "dark",
+            bodyColor: "red",
+            accentColor: "red",
+            tabs: ['js', 'result']
         }),
         `<div>
-          <script async src="//jsfiddle.net/zalun/NmudS/embed/js,css,html,result/dark/"></script>
-        </div>`.replace(/\s+/g,' ')
-        , 'replaced');
+          <iframe width="100%" height="100%" src="//jsfiddle.net/zalun/NmudS/embedded/js,result/dark/?bodyColor=red&accentColor=red" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+        </div>`.replace(/\s+/g, ' ')
+        , 'replace on frame with params and dark theme');
     assert.end();
 });