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;
} <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><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, """);
string = string.replace(/'/g, "'");
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> - 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>
Planing HTML
--------- KODE HTML HERE ---------
</code>
</pre>
--------- KODE CSS HERE ---------
</code></pre>
--------- SCRIPT ADD HERE ---------
</code></pre>
<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, """);
string = string.replace(/'/g, "'");
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> codepen.io/brandonbrule/blog/creating-a-prepoluated-pen
Happy codepen \m/
Tidak ada komentar:
Posting Komentar