Create a Prepopulated with Codepen

Informasi keren bagi kalian blogger penggemar playground for the front end side of the web! Berita datang dari CodePen dimana sekarang kita dapat membuat Prepopulated Pen. Fitur baru CodePen yang memungkinkan kita untuk dengan mudah dan dinamis membuat pen baru dengan kode yang diinginkan sebagai titik awal. Singkat cerita, kita dapat melakukan penulisan kode pada area postingan dan seketika itu dapat terlihat hasil generate dari kode tersebut dengan terhubung ke playgorund codepen! Begitu kira-kira ;))

Untuk dapat merasakan fitur itu, ada beberapa langkah aturan main yang mesti di lakukan. Perhatikan demo...pencet tombol CodePen di bagian bawah?

<div>
  <p>An Anonymous Pen HTML</p>
</div>

div {
  background: #323232;
  height: auto;
  padding: 10px;
}

p {
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

Berikut skema penulisan.

<pre class="codepen-able" data-type="html"><code>
--------- KODE HTML HERE ---------
</code></pre>

<pre class="codepen-able" data-type="css"><code>
--------- KODE CSS HERE ---------
</code></pre>

<pre class="codepen-able" data-type="js"><code>
--------- SCRIPT ADD HERE ---------
</code></pre>

<form action="http://codepen.io/pen/define" method="POST" target="_blank">
<input id="data-input" type="hidden" name="data" value="" />
<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create Pen" class="codepen-mover-button" />
</form>JavaScript yg musti di add.

<script type='text/javascript'>
//<![CDATA[
// Replace Quotes and Set Object as String Function
var setDataString = function (data){
  var string = JSON.stringify(data);
  string = string.replace(/"/g, "&quot;");
  string = string.replace(/'/g, "&apos;");
  return string;
};
// Codepen Object
var data = {
  title              : "",
  description        : "",
  html               : "",
  html_pre_processor : "none",
  css                : "",
  css_pre_processor  : "scss",
  css_starter        : "neither",
  css_prefix_free    : false,
  js                 : "",
  js_pre_processor   : "none",
  js_modernizr       : false,
  js_library         : "",
  html_classes       : "",
  css_external       : "",
  js_external        : ""
};
// Get All Pre Tags
var preElement = document.getElementsByClassName('codepen-able');
// Loop Through Pre Tags
for (var i = 0, len = preElement.length; i < len; i++){
  // data-type on pre tag.
  // we can use the data-type returned to populate codepen object.
   var type = preElement[i].getAttribute('data-type');
  // CodeInside Code Tags
 var codeInside = preElement[i].firstChild.innerHTML;
        // Set Content inside set the data value
        if (codeInside.length > 0){
          // Normally you access a property like this object.property
          // But when the property name is from a variable
          // You need [] Brackets instead of the .
          // data[type] = codeInside
          // ======================
          // data.html = codeInside
          // data.css = codeInside
          // data.js = codeInside
          data[type] = codeInside;
        }
}
// Replace Quotes and Set Object as String
var dataString = setDataString(data);
// Get Input and Append Data String
var data_input = document.getElementById('data-input');
data_input.value = dataString;
//]]>
</script>

Hal-hal yang harus diperhatikan!

• Bumbu di atas hanya berlaku untuk satu kali pemanggilan penulisan kode.
• Pada bagian <pre class="codepen-able" data-type="html"><code> harus dilakukan phrase terlebih dahulu.
• Customize JavaScript sesuai dengan kebutuhan pada sesi var data
• Letakan JavaScript coba dulu sebelum tagging </body> kalau tidak jalan sebelum tagging </head>

Jika sobat ingin menuliskan sekaligus beberapa penulisan kode, maka pada kasus ini berlaku aturan dari brandonbrule :D

Planing HTML<section class="codepen-group">
<pre class="codepen-able" data-type="html"><code>
--------- KODE HTML HERE ---------
</code>
</pre>

<pre class="codepen-able" data-type="css"><code>
--------- KODE CSS HERE ---------
</code></pre>

<pre class="codepen-able" data-type="js"><code>
--------- SCRIPT ADD HERE ---------
</code></pre>
</section>Script yg harus di add.

<script src='http://brandonbrule.github.io/itsa/js/itsa.js'></script>
<script>
//<![CDATA[
// PostToCodepen

var PostToCodepen = (function () {
  var codepen_group = document.getElementsByClassName('codepen-group')
  var codepens;
  var codepen;
  var type;
  var codeElement;
  var codeInside;
  var JSONstring;
  
  // Create the Codepen Button For Each Group
  var createForm = function (container){
    var form = document.createElement('form');
    var data_input = document.createElement('input');
    var data_submit = document.createElement('input');
    var frag = document.createDocumentFragment();
    
    //form
    form.setAttribute('action', 'http://codepen.io/pen/define');
    form.setAttribute('method', 'POST');
    form.setAttribute('target', '_blank');
    
    // data input
    data_input.setAttribute('type', 'hidden');
    data_input.setAttribute('name', 'data');
    data_input.setAttribute('value', JSONstring);
    form.appendChild(data_input);
    
    // Submit Button
    data_submit.setAttribute('type','image');
    data_submit.setAttribute('src','http://s.cdpn.io/3/cp-arrow-right.svg');
    data_submit.setAttribute('width','40');
    data_submit.setAttribute('height','40');
    data_submit.setAttribute('value','Create Pen');
    data_submit.setAttribute('class','codepen-mover-button');
    form.appendChild(data_submit);
    
    frag.appendChild(form);
    container.appendChild(frag);
  };
  
  // Replace Quotes and Return object as string.
  var setDataString = function (data){
    var string = JSON.stringify(data);
    string = string.replace(/"/g, "&quot;");
    string = string.replace(/'/g, "&apos;");
    return string;
  };
  
  // Initializer
  var please = function () {

    // For each codegroup
    for ( i = 0, len = codepen_group.length; i < len; i++ ){      
      
      // This data gets submitted to codepen to get processed into a pen
      // We populate css, js, and html properties with the content inside the pre tags
      // With the data-type attribute
      var data = {
        title              : "",
        description        : "",
        html               : "",
        html_pre_processor : "none",
        css                : "",
        css_pre_processor  : "scss",
        css_starter        : "neither",
        css_prefix_free    : false,
        js                 : "",
        js_pre_processor   : "none",
        js_modernizr       : false,
        js_library         : "",
        html_classes       : "",
        css_external       : "",
        js_external        : "http://brandonbrule.github.io/itsa/js/itsa.js"
      };
      
      // The pre elements inside each of the groups
      codepens = codepen_group[i].getElementsByClassName('codepen-able');
      
      for (var j = 0, lenth = codepens.length; j < lenth; j++){
        
        // Pre Tag
        codepen = codepens[j];
        
        // Get type to add to data object (js, css, html)
        type = codepen.getAttribute('data-type');
        
        // The codeinside each element
        codeElement = codepen.firstChild;
        codeInside = codeElement.innerHTML;

        // Set Data if there's content
        if (codeInside.length > 0){
          data[type] = codeInside;
        }

      }
  
      // Turn Data into Safe String
      JSONstring = setDataString(data);
      
      // Create Submit to Codepen Button
      // Append Button to each group
      createForm(codepen_group[i]);
    }
  };
 
  return {
    please: please
  };
})();

// Start It All
PostToCodepen.please();
//]]>
</script>

Semua itu masih dalam perkembangan. Tidak kesabaran, silahkan pasang pada blog kalian :) Untuk lebih jelas silahkan kunjungi...

Source:
codepen.io/brandonbrule/blog/creating-a-prepoluated-pen

Happy codepen \m/