Fiddle-based gist forking demo with images

Demonstrate that without any server-side code, you can generate new gists and provide a fork-me link to save deltas author(s): Jason Kridner

by DiegoTc

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css">
<script src="https://oauth.io/auth/download/latest/oauth.js"></script>
<div id="editor"><h1><span style="color: inherit; font-family: inherit; font-size: 38.5px;">Self-forkable JSFiddle with image on gist.github.com</span></h1><h1><img...

CSS

#editor {overflow:scroll; min-height:350px;}

JavaScript

var s = function s() {
    OAuth.initialize('t4Qxz2lcwB10Qgz_iXZwNjsZ1w4');

    $('#connect').click(function() {
        OAuth.popup('github', function(err, result) {
            console.log(err);
            auth = result;
        });
    });
    
    $.getScript('http://mindmup.github.io/bootstrap-wysiwyg/external/jquery.hotkeys.js', loadWysiwyg);

    function loadWysiwyg() {
        $.getScript('http://mindmup.github.io/bootstrap-wysiwyg/bootstrap-wysiwyg.js', enableEdit);
    }
    
    function enableEdit() {
        $('#editor').wysiwyg();
    }

    s.testData = {
        "description": "Demo of self-replicating JSFiddle on gist.github.com with an image",
    "public": true,
    "files": {
        "fiddle.css": {
            "content": '#editor {overflow:scroll; min-height:350px;}'
        },
        "fiddle.manifest": {
            "content":
            "name: Fiddle-based gist forking demo with images\n\
description: Demonstrate that without any server-side code, you can generate new gists and provide a fork-me link to save deltas\n\
authors:\n\
  - Jason Kridner\n\
resources:\n\
  - http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css\n\
  - http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css\n\
  - https://oauth.io/auth/download/latest/oauth.js"
            }
        }
    };

    s.testData.files["fiddle.js"] = {
        "content": "var s = " + s.toString() + "; s();" 
    };
    
    dofork = function() {
        var url = "https://api.github.com/gists";
        s.testData.files["fiddle.html"] = {
            "content": '<div id="editor">' + $('#editor').cleanHtml() + '</div>\n\
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">\n\
    <input type="file" data-role="magic-overlay" data-edit="insertImage" />\n\
</div>\n\
<a onclick="s.dofork();" href="#">dofork</a> <a id="url"></a>\n\
<div id="connect"><button>Connect with Github</button></div>'
   ...