add support inline config

Author: Mavrin

README.md

@@ -13,15 +13,21 @@ $ npm install gitbook-plugin-jsfiddle --save
     "plugins": [ "jsfiddle"],
     "pluginsConfig": {
           "jsfiddle":{
+            "type":"script"
             "tabs":["result","js","css", "html"],
-            "height":500,
-            "widht":500
+            "height": "500px",
+            "widht": "500px",
+            "fontColor": "green"
           }
     }
 }
 ```
+Param `type` can be 'frame' or 'script'.
+Also you can use other params read more https://medium.com/jsfiddle-updates/new-jsfiddle-embeds-93ab7a51ee11#.vt34bxchv
+If you need override setting for certain fiddle,you can just add this param in hash
+`//jsfiddle.net/zalun/NmudS/#fontColor=green&type=frame`
 ### 3. paste jsfiddle embedded code to you book something like
-`[source code](http://jsfiddle.net/zalun/NmudS/)`
+`[source code](//jsfiddle.net/zalun/NmudS/)`
 
-will be rendered like [my book](http://api.taucharts.com/tutorials/1min.html) does
+will be rendered like [my book](https://api.taucharts.com/tutorials/1min.html) does
 

package.json

@@ -2,7 +2,7 @@
   "name": "gitbook-plugin-jsfiddle",
   "description": "JSFiddle Integration into GitBook",
   "main": "index.js",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "author": {
     "name": "Konstantin Krivlenia"
   },

src/replace.js

@@ -25,7 +25,19 @@ var htmlToDom = function (html) {
     return contentDOM
 };
 
-var exctractConfigFromURL = function (href) {
+
+var extractConfigFromURL = function (href) {
+    var match = /(#)(.+)$/ig.exec(href);
+    if (match && match[2]) {
+        return match[2].split('&').reduce(function (params, param) {
+            var splitParam = param.split('=');
+            if (splitParam[0] === 'tabs') {
+                splitParam[1] = splitParam[1].split(',');
+            }
+            params[splitParam[0]] = splitParam[1];
+            return params;
+        }, {});
+    }
     return {};
 };
 var generateAdditionalParams = function (config) {
@@ -55,9 +67,9 @@ var creator = {
         return [
             '<iframe',
             ' width=',
-            '"' + (config.width ? config.width + 'px' : '100%') + '"',
+            '"' + (config.width ? config.width : '100%') + '"',
             ' height=',
-            '"' + (config.height ? config.height + 'px' : '100%') + '"',
+            '"' + (config.height ? config.height : '300px') + '"',
             ' src="' + generateUrl(config) + '"',
             ' allowfullscreen="allowfullscreen" frameborder="0"',
             '>',
@@ -67,9 +79,10 @@ var creator = {
 };
 
 var createEmbedNode = function (href, config) {
-    var type = config.type || 'script';
-
-    return htmlToDom(creator[type](_.defaults({href: href}, config, defautsConfig)))[0];
+    var normalURL = href.replace(/#.+$/, '');
+    var configFromUrl = extractConfigFromURL(href);
+    var mergedConfig = _.defaults({href: normalURL}, configFromUrl, config, defautsConfig);
+    return htmlToDom(creator[mergedConfig.type](mergedConfig))[0];
 };
 
 module.exports = function (rawHtml, config) {

tests/replace.js

@@ -36,8 +36,21 @@ test('replacer', function (assert) {
             tabs: ['js', 'result']
         }),
         `<div>
-          <iframe width="100%" height="100%" src="//jsfiddle.net/zalun/NmudS/embedded/js,result/dark/?bodyColor=red&accentColor=red" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+          <iframe width="100%" height="300px" 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.equal(
+        replace(
+            '<div><a href="https://jsfiddle.net/09bv780j/#tabs=result,css&width=500px&type=script&theme=dark&bodyColor=blue"></a></div>',
+            {
+                bodyColor:'red',
+                type:'frame',
+                accentColor: 'red',
+                tabs:['js']
+            }
+        ),
+        '<div><script async src="https://jsfiddle.net/09bv780j/embed/result,css/dark/?bodyColor=blue&accentColor=red"></script></div>',
+        'support inline config'
+    );
     assert.end();
 });