Prefill

- Written by

Last modified January 18, 2018

What is prefill? { prefilled }

Inspired by developments that evolve from the best, the idea to adapt the form to pre-compile the code-box editors, HTML, CSS, JavaScript on CodePlay Editors Playground.

MDN uses a form that lets you send a Code with a click to CodePen/JsFiddle Code Box Editors and prefill on the fly. In this regard, I also developed a version adapted to a CodePlay Code Editors presentation "Prefilled" preview.

Here are some examples:

<!-- Prefilled encoding! inside a CodeMirror:
echo htmlentities($string, ENT_NOQUOTES); this required if the code => the_content(); -->

<!-- with -->
&lt;div>
  &lt;p>Div example HTML Content&lt;/p>
&lt;/div>

<!-- without -->
<div>
  <p>Div example HTML Content</p>
</div>


<!-- or use [shortcode] -->
$(function() {
$(".codeplay").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, undefined, 2)
  .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="Prefilled Data Play" class="codeplay-button">' +
'</form>';

    el.append(form);

  });
});

<div class="module">xyz </div>
.module {
  .padding: 1rem;
}
.module::after {
  content: "+ test";
  color: darkorange;
}
var string = "test string";
console.log(string);

function test() {
  return 'test';
}

Prefilled => HTML + CSS + JS, to CodePlay Box Editors:

{"title": "Prefilled by webbeloz on `Prefill Article`"}
<div>
  <p>Hello, World!</p>
  <p>Prefilled Post on `Prefill Article @webbeloz`</p>
</div>
* {
  box-sizing: border-box;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size: 0.9rem;
  color: #444;
  text-align: center;
}
//JS
var factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n-1)
};
//console.log(factorial(4))

New on #2k18: [ on the fly + pure JavaScript ]

Before activating compiling SASS / Compass & more... some functional checks:

All* in one...

{"title": "Prefilled on `Prefill Article`"}
<div>
  <p>Hello, World!</p>
  <p>Prefilled #WordPress (post) on `Prefill Article @webbeloz`</p>
</div>
* {
  box-sizing: border-box;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size: 0.9rem;
  color: #444;
  text-align: center;
}
/*JS*/
/*var factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n-1)
};*/
/*console.log(factorial(4));*/

Result [ on the fly ]

iframe [ width + height = autoResizing ]

@webbeloz

 5
ร—

Time expired..
- default (90 days)
- edit to (∞ days)
- Spamm Check

Leave a Comment

* Required: Name, eMail, Comment Emoji? : if(name) => start.eMail if(eMail) => start.Comment + Emoji (On/Off) ? a=* b=* c=31 (a + b = c) => Post a Comment enjoy(: tnx_wblz
OFF
ON
Check Url & "Not Allowed"
No Text /HTML