use book assets instead hook

When gitbook changes page it add _=timestamp in request script. It breaks inserting jsfiddle frame

Author: Mavrin

index.js

@@ -1,10 +1,16 @@
-var replace = require('./src/replace');
+//var replace = require('./src/replace');
 module.exports = {
+    book: {
+        assets: "./src",
+        js: [
+            "plugin.js"
+        ]
+    }/*,
     hooks: {
         'page': function (page) {
             var config = this.getConfig('pluginsConfig') || {};
             page.sections[0].content = replace(page.sections[0].content, config.jsfiddle);
             return page;
         }
-    }
+    }*/
 };

package.json

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

src/plugin.js

@@ -0,0 +1,103 @@
+require(["gitbook", "jquery"], function (gitbook, $) {
+    var matcher = /\/\/jsfiddle.net\/.+/;
+    var localConfig = {
+        jsfiddle: {
+            type: 'script',
+            tabs: ['js', 'html', 'css', 'result'],
+            theme: 'light'
+        }
+    };
+    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) {
+        var params = '/';
+        if (config.theme) {
+            params += config.theme + '/';
+        }
+        var colors = Object.keys(config).reduce(function (colors, key) {
+
+            if (['href', 'type', 'theme', 'tabs', 'width', 'height'].indexOf(key) !== -1) {
+                return colors;
+            }
+
+            colors += key + '=' + config[key] + '&';
+            return colors;
+        }, '');
+
+        colors = colors.replace(/&$/, '');
+        if (colors) {
+            return params + '?' + colors;
+        }
+        return params;
+    };
+
+    var generateUrl = function (config) {
+        var additionalParam = generateAdditionalParams(config);
+        console.log(additionalParam);
+        var type = config.type == 'frame' ? 'embedded' : 'embed';
+        return config.href + type + '/' + config.tabs.join(',') + additionalParam;
+    };
+
+    var creator = {
+        script: function (config) {
+            var script = document.createElement('script');
+            script.src = generateUrl(config);
+            script.async = true;
+            return script;
+        },
+        frame: function (config) {
+            return $([
+                '<iframe',
+                ' width=',
+                '"' + (config.width ? config.width : '100%') + '"',
+                ' height=',
+                '"' + (config.height ? config.height : '300') + '"',
+                ' src="' + generateUrl(config) + '"',
+                ' allowfullscreen="allowfullscreen" frameborder="0"',
+                '>',
+                '</iframe>'
+            ].join(''))[0];
+        }
+    };
+
+    var createEmbedNode = function (href, config) {
+        var normalURL = href.replace(/#.+$/, '');
+        var configFromUrl = extractConfigFromURL(href);
+        var mergedConfig = $.extend({href: normalURL}, config, configFromUrl);
+        return creator[mergedConfig.type](mergedConfig);
+    };
+
+    function embedAllLink(config) {
+        localConfig.jsfiddle = $.extend(localConfig.jsfiddle || {}, config.jsfiddle);
+
+        $(".book-body a").each(function (index, link) {
+            if (link.href && matcher.test(link.href)) {
+                link.parentNode.insertBefore(createEmbedNode(link.href, localConfig.jsfiddle), link.nextSibling);
+                link.parentNode.removeChild(link);
+            }
+        });
+    }
+
+    gitbook.events.bind("start", function (e, config) {
+        matcher = /(http|https):\/\/jsfiddle.net\/.+/;
+        embedAllLink(config);
+    });
+
+    gitbook.events.bind("page.change", function () {
+        if (matcher) {
+            embedAllLink(localConfig);
+        }
+    });
+});

src/replace.js

@@ -4,7 +4,7 @@ var domutils = require('domutils');
 var matcher = /\/\/jsfiddle.net\/.+/;
 var _ = require('lodash');
 
-var defautsConfig = {
+var defaultsConfig = {
     type: 'script',
     tabs: ['js', 'html', 'css', 'result'],
     theme: 'light'
@@ -84,7 +84,7 @@ var creator = {
 var createEmbedNode = function (href, config) {
     var normalURL = href.replace(/#.+$/, '');
     var configFromUrl = extractConfigFromURL(href);
-    var mergedConfig = _.defaults({href: normalURL}, configFromUrl, config, defautsConfig);
+    var mergedConfig = _.defaults({href: normalURL}, configFromUrl, config, defaultsConfig);
     return htmlToDom(creator[mergedConfig.type](mergedConfig))[0];
 };