Fiddle-ify!

Converts code blocks on Stack Overflow into JSFiddles with a few clicks

Versione datata 09/08/2014. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name           Fiddle-ify!
// @author         Cameron Bernhardt (AstroCB)
// @version        0.2.0
// @namespace      http://github.com/CameronBernhardt
// @description    Converts code blocks on Stack Overflow into JSFiddles with a few clicks
// @include        http://stackoverflow.com/*
// ==/UserScript==

var tags = document.getElementsByClassName("post-taglist")[0].children;
var tagged = false, jQuery = false;
var index = 0;
var html, css, javascript; //store contents of selected code blocks
var blocks = document.getElementsByClassName("default prettyprint prettyprinted"); //get code blocks

for (var i = 0; i < tags.length; i++) {
    var tagName = tags[i].innerHTML;
    if (tagName === "html" || tagName === "css" || tagName === "javascript") { //check if tagged HTML, CSS, or JavaScript
        tagged = true;
    }

    if(tagName === "jQuery"){
      jQuery = true;
    }
}

if (tagged && blocks) { //only display button if tagged HTML, CSS, or JavaScript and has code blocks
  //(TODO: add jQuery support (toggle menu in Fiddle))
    var question = document.getElementsByClassName("vt")[0];
    question.innerHTML += "<br/><button id='fiddleify'>Fiddle-ify!</button>"; //inject "Fiddle-ify" button

    document.getElementById("fiddleify").addEventListener("click", function () { //listen for "enter" keypresses for skipping
        alert("Click a code block for HTML or press enter to skip.");
        document.addEventListener("keyup", function (e) {
            if (e.which === 37) {
                e.preventDefault();
                assign(null, index);
                index++;
            }
        });

        for (var j = 0; j < blocks.length; j++) {
            blocks[j].addEventListener("click", function () { //listen for clicks on code blocks
                if(index === 0){
                  this.style.backgroundColor = "orange";
                }else if(index == 1){
                  this.style.backgroundColor = "blue";
                }else if(index == 2){
                  this.style.backgroundColor = "yellow";
                }
                assign(this.children[0].children, index);
                index++;
            });
        }
    });
}

function assign(element, num) {
    //TODO: add visual cue that code block has been selected
    switch (num) { //instructions for each click: HTML -> CSS -> JavaScript (runs for both "enter" keypresses and block clicks)
        case 0:
            html = element;
            alert("Click a code block for CSS or press enter to skip.");
            break;
        case 1:
            css = element;
            alert("Click a code block for JavaScript or press enter to skip.");
            break;
        case 2:
            javascript = element;
            run();
            break;
        default:
            console.log("Finished");
    }
}

function run() { //unwrap text from code blocks (each word is in its own span)
    confirm("Loading JSFiddle...");
    var htmlText = "",
        cssText = "",
        jsText = "";
    for (var x = 0; x < html.length; x++) {
        htmlText += html[x].innerHTML;
    }

    for (var y = 0; y < css.length; y++) {
        cssText += css[y].innerHTML;
    }

    for (var z = 0; z < javascript.length; z++) {
        jsText += javascript[z].innerHTML;
    }

    var post = new XMLHttpRequest(); //create POST request for Fiddle
    var url = "//jsfiddle.net/api/post/";

    if(jQuery){ //determine whether to use jQuery
      url += "jquery/2.1.0";
    }else{
      url += "library/pure";
    }

    var data = {
      "html": html,
      "css": css,
      "js": javascript,
    }

    post.open("post", url, true);

    post.send(data);

    console.log(post);

  }