Prefill Play

On

/* Original @chris coyier / codepen
** Suuper trick!
** adapted => wordpress => single-post => Php json_decode + if(isset($_POST[...
** 4 CodePlay @webbeloz 
*/
* {
  box-sizing: border-box;
}
html {
  background: #fefefe;
}
body {
  max-width: 800px;
  margin: 0 auto;
  background: #fefefe;
  padding: 2rem;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  line-height: 1.4;
}
h1, h2, h3, h4 {
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  line-height: 1.2;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
pre {
  background: #023542;
  color: #dedede;
  position: relative;
}
pre code {
  display: block;
  padding: 1rem;
  overflow: auto;
}
pre[data-type] {
  margin-top: 2.65rem;
}
pre[data-type]::before {
  content: attr(data-type);
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  left: 0;
  color: black;
  text-transform: uppercase;
}
figure {
  background: #ccc;
  margin: 0;
  padding: 1rem;
}
figcaption form {
  display: inline-block;
}
.code-svg {
  position: absolute;
  bottom: 5px;
  right: 8px;
}

$(function() {
$(".code-fill").each(function() {
  
  var el = $(this),
	  type = el.data("type"),
	  codeInside = el.find("code"),
        isCodeInside = codeInside.length,
        HTML = "",
        CSS = "",
        JS = "";
      
    if (type == "html") {
      if (codeInside) {
        HTML = codeInside.html();
      } else {
        HTML = el.html();
      }
    } else if (type == "css") {
      if (codeInside) {
        CSS = codeInside.html();
      } else {
        CSS = el.html();
      }
    } else if (type == "js") {
      if (codeInside) {
        JS = codeInside.html();
      } else {
        JS = el.html();
      }
    }

var data = {
      title              : "",
      description        : "",
      html               : HTML,
      html_pre_processor : "none",
      css                : CSS,
      css_pre_processor  : "none",
      css_starter        : "neither",
      css_prefix_free    : false,
      js                 : JS,
      js_pre_processor   : "none",
      js_modernizr       : false,
      js_library         : "",
      html_classes       : "",
      css_external       : "",
      js_external        : ""
    };
  
  var JSONstring = 
      JSON.stringify(data)
      // Quotes will screw up the JSON
  	.replace(/"/g, '"').replace(/'/g, "'");
  
  var form =
	  '<form action="http://codeplay.it/playground/7iEbi?+" method="POST" target="_blank">' + 
      '<input type="hidden" name="data" value=\'' + JSONstring + '\'>' + 
	  '<input type="image" src="http://codeplay.it/assets/play/img/svg/right.svg" width="40" height="40" value="Go!" class="code-svg">' +
      '</form>';
  el.append(form);
  });  
});