Fiddle-ify!

Converts code blocks into JSFiddles with the click of a button
目前为 2014-08-04 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name           Fiddle-ify!
// @author         Cameron Bernhardt (AstroCB)
// @version        0.1.0
// @namespace      http://github.com/CameronBernhardt
// @description    Converts code blocks into JSFiddles with the click of a button
// @include        http://stackoverflow.com/*
// ==/UserScript==

var tags = document.getElementsByClassName("post-taglist")[0].children;
var tagged = false;
var index = 0;
var html, css, javascript; //store contents of selected 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(tagged){ //only display button if tagged HTML, CSS, or JavaScript (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++;
      }
    });
    var blocks = document.getElementsByClassName("default prettyprint prettyprinted");
    for(var j = 0; j < blocks.length; j++){
      blocks[j].addEventListener("click", function(){ //listen for clicks on code blocks
        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 fiddleWin = window.open("//jsfiddle.net"); //load Fiddle

  fiddleWin.document.onload = function(){
    var textboxes = fiddleWin.document.getElementsByTagName("textarea");

    //these are dependent on JSFiddle's layout: may need to change if design changes (currently no other way to reference them)
    var htmlWin = textboxes[2];
    var jsWin = textboxes[4];
    var cssWin = textboxes[6];

    htmlWin.innerHTML = htmlText;
    cssWin.innerHTML = cssText;
    jsWin.innerHTML = jsText;
}
欢迎访问Greasy Fork镜像
