iegik
2/5/2013 - 5:29 PM

jsFiddle - good service, but... internet connection sometimes goes down, or simply server not respond. So, I create fast alternative for my

jsFiddle - good service, but... internet connection sometimes goes down, or simply server not respond. So, I create fast alternative for my favorite service, where I can play with fiddles locally. It uses localStorage, for savings.

jsFiddle.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<style>
body,html,form{height:100%;width:100%;
  margin:0;
  padding:0;

	background-color: rgba(255,255,255,.5);
	color: #222;
	outline:gray solid 1px;

	font-family: monospace;
  display: table;
}
input{ width: 20%; border: 0; background-color: inherit; outline: gray solid 1px;position:absolute; left:-20%;margin-left:80%;bottom:0;}
input+input{margin-left:40%}
input+input+input{margin-left:60%}
textarea, iframe {
	display: block;
  float: left;
	vertical-align:top;
	margin:0;
	padding:1em;
	font-size:10pt;
	border:0;
  outline:inherit;

  
  width: 100%;
	max-width: -webkit-calc(50% - 2em);
  max-height: -webkit-calc(50% - 1em);
  max-height:50%;
  height: 50%;

	background-color:inherit;
	color:inherit;
}
iframe{padding:0;max-width:50%;}
</style>
</head>
<body>
<form action="http://jsfiddle.net/api/post/jquery/edge/dependencies/more/" method="post">
<input type="submit"/></form>
<script>
(function (variables,template){
  for ( v in variables) {
    e = document.createElement(v<2 && "input" || "textarea");
    e.id = e.name =variables[v];
    e.placeholder = variables[v];
    e.onchange = function(){
      var out = template;      
      for ( v in variables) {
	       this[v] = document.getElementById(variables[v]).value = document.getElementById(variables[v]).value || localStorage.getItem(variables[v]);
        out = out.replace('$'+variables[v], this[v]);
        localStorage.setItem(variables[v],this[v]);
      }
      //console.log([variables,template],out);
      !document.getElementById("out") || (document.getElementById("out").src = "data:text/html,"+out);
    }
    document.forms[0].appendChild(e);
  }
  e.onchange();
  e = document.createElement("iframe");
  e.id = "out";
  document.forms[0].appendChild(e);
})(['title','description','css','html','js'],"<!DOCTYPE html>\
  <html>\
	  <head>\
		  <title>$title</title>\
		  <meta charset=\"utf-8\" />\
      <meta name=\"description\" content=\"%s\"/>\
      <style>$css</style>\
	  </head>\
	  <body>\
      $html\
      <canvas id=\"c\"></canvas>\
		  <script>\
			  var b = document.body;\
			  var c = document.getElementsByTagName('canvas')[0];\
			  var a = c.getContext('2d');\
			  document.body.clientWidth;\
\
        $js\
\
		  <\/script>\
	  </body>\
  </html>");
</script>
</body>
</html>