Skip to content

October 10, 2012

6

Using PhantomJs to download jsFiddle.net code

by Joe Kuan

I think jsFiddle is great but it is generally lack of simple functions like download (and fiddles management) to get the code into HTML file. Here, I have come up a workaround solution using the awesome PhantomJs to pack each part into an HTML file. At the moment, the code only translates the jQuery library selection but that is a proof of concept, it can be done. Save me doing cut & paste manually.

The following is my PhantomJs code, jsFiddle.js:

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

page.open(system.args[1], function(status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {

        var result = page.evaluate(function () {

            // Extract library
            var jQ_ver = document.getElementById('js_lib').value;
            var jQ_url = '';
            switch (parseInt(jQ_ver, 10)) {
            case 112:
                jQ_url = '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>';
                break;
            case 101:
                jQ_url = '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>';
                break;                
            }

            // Extract HTML
            var compHtml = document.getElementById('id_code_html').value;

            // Fiddle the jsFiddle
            var compJS = '<script type="text/javascript">' + 
                document.getElementById('id_code_js').value + '</script>';

            return "<html>" + jQ_url + "\n" + compJS + "\n" + compHtml + "</html>"; 
        });

        if (!system.args[2]) {
            console.log(result);
        } else {
            fs.write(system.args[2], result);
            console.log("Save output to " + system.args[2]);
        }
    }
    phantom.exit();
});

Then I run the script as
phantomjs jsFiddle.js <url> [output file]

You will see some MooTools errors but nothing to worry. It should run fine.

phantomjs-1.7.0-macosx/bin/phantomjs jsFiddle.js http://jsfiddle.net/JoeKuan/RJdy6/ ./fiddleTest.html

This is only a workaround solution for the download functionality. I am sure jsFiddle.net will have the download in the future.

Advertisements
6 Comments Post a comment
  1. sezar
    Nov 13 2012

    i can’t do
    jsFiddle.js http://jsfiddle.net/RbBA3/ ./fiddleTest.html
    seed: Parse error

    Reply
  2. sezar
    Nov 13 2012

    it’s work super thanxxxx

    Reply
  3. Feb 13 2013

    appending /show to the jsfiddle URL it will work better http://stackoverflow.com/questions/9851878/is-there-a-download-function-in-jsfiddle

    Reply
  4. Facundo Victor
    Jan 16 2015

    Thanks!

    I reconstructed it with support for additional libraries, included title, description and resources support.

    var system = require(‘system’);
    var page = require(‘webpage’).create();
    var fs = require(‘fs’);

    page.open(system.args[1], function(status) {
    if (status !== ‘success’) {
    console.log(‘Unable to access network’);
    } else {
    var result = page.evaluate(function () {

    // Extract library
    var lib_selected = document.getElementById(‘js_lib’).value;
    var jQ_url = ”;
    switch (parseInt(lib_selected, 10)) {
    case 112:
    jQ_url = ”;
    break;
    case 101:
    jQ_url = ”;
    break;
    case 49:
    jQ_url = ”;
    break;
    case 83:
    jQ_url = ”;
    break;
    case 147:
    jQ_url = ”;
    break;
    }

    // Extract HTML
    var compHtml = document.getElementById(‘id_code_html’).value;

    // Extract CSS
    var compCSS = ” + document.getElementById(‘id_code_css’).value + ”;

    // Fiddle the jsFiddle
    var compJS = ” +
    document.getElementById(‘id_code_js’).value + ”;

    // Comentarios descriptivos del fiddle
    var compTitulo = ‘‘;
    var compDesc = ‘‘;
    var compDescRes = ‘<!– Recursos: \n';

    var selected_resources = document.getElementById("js_lib").getSelected();
    for(var i=0;i ‘

    // Fiddles External Resources
    var compResources = ”;
    for(var i=0;i < resources.length;i++){
    compResources += ' \n’;
    }

    var resultado = “”+document.getElementById(‘id_title’).value+”” + “\n” +
    compTitulo + “\n” +
    compDesc + “\n” +
    compDescRes + “\n” +
    compResources + “\n” +
    compCSS + “\n” +
    ” \n” +
    compHtml + “\n” +
    jQ_url + “\n” +
    compJS + “\n ” +
    “”;

    return resultado;
    });
    if (!system.args[2]) {
    console.log(result);
    } else {
    fs.write(system.args[2], result);
    console.log(“Save output to ” + system.args[2]);
    }
    }
    phantom.exit();
    });

    To use it just save ths script as “jsFiddle.js” and do:

    phantomjs jsFiddle.js [output file]

    And finally, i constructed a single script to download all jsFiddles from a user (Using the jsFiddle API).

    var system = require(‘system’);
    var page = require(‘webpage’).create();
    var fs = require(‘fs’);
    var usuario = system.args[1];
    var url = “http://jsfiddle.net/api/user/”+usuario+”/demo/list.json?callback=Api&sort=framework&start=0&limit=50000”;

    var recuperar_fiddle = function(lista,i){
    if (i > 0){
    var url_fiddle = lista[i].url;
    var id_fiddle = url_fiddle.substring(21 + usuario.length,url_fiddle.length – 1);
    if (id_fiddle == “/”){
    id_fiddle = url_fiddle.substring(20,url_fiddle.length – 1);
    }
    console.log(“nro = “+i+” | id = “+id_fiddle+” | url = “+url_fiddle);

    page.open(url_fiddle, function(status) {
    if (status !== ‘success’) {
    console.log(‘Unable to access network’);
    } else {
    console.log(“evaluando nro = “+i+” | id = “+id_fiddle+” | url = “+url_fiddle);
    var result = page.evaluate(function () {

    // Extract library
    var lib_selected = document.getElementById(‘js_lib’).value;
    var jQ_url = ”;
    switch (parseInt(lib_selected, 10)) {
    case 112:
    jQ_url = ”;
    break;
    case 101:
    jQ_url = ”;
    break;
    case 49:
    jQ_url = ”;
    break;
    case 83:
    jQ_url = ”;
    break;
    case 147:
    jQ_url = ”;
    break;
    }

    // Extract HTML
    var compHtml = document.getElementById(‘id_code_html’).value;

    // Extract CSS
    var compCSS = ” + document.getElementById(‘id_code_css’).value + ”;

    // Fiddle the jsFiddle
    var compJS = ” +
    document.getElementById(‘id_code_js’).value + ”;

    // Comentarios descriptivos del fiddle
    var compTitulo = ‘‘;
    var compDesc = ‘‘;
    var compDescRes = ‘<!– Recursos: \n';

    var selected_resources = document.getElementById("js_lib").getSelected();
    for(var i=0;i ‘

    // Fiddles External Resources
    var compResources = ”;
    for(var i=0;i < resources.length;i++){
    compResources += ' \n’;
    }

    var resultado = “”+document.getElementById(‘id_title’).value+”” + “\n” +
    compTitulo + “\n” +
    compDesc + “\n” +
    compDescRes + “\n” +
    compResources + “\n” +
    compCSS + “\n” +
    ” \n” +
    compHtml + “\n” +
    jQ_url + “\n” +
    compJS + “\n ” +
    “”;

    return resultado;
    });
    fs.write(“”+id_fiddle+”.html”, result);
    console.log(“File “+id_fiddle+”.html saved.”);
    }
    setTimeout(function(){
    recuperar_fiddle(lista,i – 1);
    },100);
    });
    }else{
    console.log(“Cantidad de fiddles = “+lista.length);
    phantom.exit();
    }
    };

    page.open(url, function (status) {
    var jsonSource = page.plainText.substring(4,page.plainText.length – 3);
    var resultObject = JSON.parse(jsonSource);
    var lista = resultObject.list;
    var cantidad = lista.length;
    setTimeout(function(){
    recuperar_fiddle(lista,cantidad – 1);
    },100);
    });

    To use it just save ths script as “downloadAllFiddles.js” and do:

    phantomjs downloadAllFiddles.js

    It’ll download all backups in the currrent directory, the jsFiddles scripts will be named as:

    .html

    Reply
  5. Facundo Victor
    Jan 16 2015

    Thanks for your script! And i’m sorry for previous comment!

    I reconstructed it with support for additional libraries, included title, description and resources support. Now on github –> https://github.com/turi111111/jsFiddleDownloader

    Regards!

    Reply
    • Joe Kuan
      Jan 22 2015

      Thanks for all your contribution. It’s good to know this comes to useful for some people.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: