<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kevingimbel/pen/vksnj?limit=all&page=22&q=editor" />
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 1rem;
font-family: "Arial", Helvetica, sans-serif;
line-height: 1.3;
color: #000;
background: #ddd;
}
a {
text-decoration: none;
color: #3498db;
}
a:hover {
color: #c0392b;
}
.wrapper {
width: 100%;
max-width: 40em;
margin: 1.5em auto;
padding: 2.5em;
}
.description {
margin: 0 0 1.5em 0;
}
.template__generator {
background: #fff;
padding: 1.5em;
box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.4);
}
.template__generator textarea {
width: 100%;
}
.template__generator label {
font-size: .75em;
}
hr {
margin: .5em 0;
background: #ddd;
border: none;
height: 1px;
width: 100%;
}
.button {
padding: .25em .5em;
background: #2ecc71;
border-radius: 3px;
color: #fff;
border-bottom: 0.15em solid #208f4f;
position: relative;
}
.button:hover {
top: 2px;
color: #fff;
}
.button:active {
top: 4px;
border-bottom: none;
}
.result {
background: #fff;
padding: 1em;
}
.result img {
max-width: 5em !important;
}
table {
width: 100%;
}
thead {
background: #ddd;
}
/*
CSS for Media and Flag Object. Needed for previews
*/
.media:before, .media:after {
display: table;
content: '';
*zoom: 1;
}
.media:after {
clear: both;
}
.flag {
display: table;
width: 100%;
}
.flag .flag__body,
.flag .flag__image {
display: table-cell;
vertical-align: middle;
}
.flag .flag__body.flag--top,
.flag .flag__image.flag--top {
vertical-align: top;
}
.flag .flag__body.flag--bottom,
.flag .flag__image.flag--bottom {
vertical-align: bottom;
}
.flag .flag__image {
padding-right: 1em;
}
.flag .flag__image > img {
display: block;
max-width: none;
}
.flag .flag__image .flag--rev {
padding-right: 0;
padding-left: 1em;
}
.flag .flag__body {
width: 100%;
}
/*
Media
*/
.media {
width: 100%;
}
.media .media__image {
float: left;
margin-right: 1em;
}
.media .media__image img {
display: block;
}
.media .media__image.image--rev {
float: right;
margin-right: 0;
margin-left: 1em;
}
</style></head><body>
<div class="wrapper">
<div class="template__generator">
<div class="description">
<h1>Simple Template Generator</h1>
<p>A very basic template generator for <a href="https://codepen.io/kevingimbel/pen/zEndc?editors=010">Media and Flag</a> Objects. For the sake of being lazy and learning JavaScript.</p>
</div>
<div class="options">
<label for="options">Object</label>
<select name='options' id="templateSelect">
<option value='flag'>Flag</option>
<option value='media'>Media</option>
</select>
</div>
<label for="editor">Text Content</label>
<textarea name="editor" id="editor" cols="30" rows="10"></textarea>
<label for="image">Image URL</label>
<input type="text" id="imgSrc" name="image"/>
<label for="modifier">Modifier Class</label>
<input type="text" id="modifier" name="modifier"/>
<hr>
Available Modifier classes:<br>
<table>
<thead>
<td>Flag</td>
<td>Media</td>
</thead>
<tr>
<td>flag--top</td>
<td>image--rev</td>
</tr>
<tr>
<td>flag--bottom</td>
</tr>
</table>
<hr>
<a href="" class="button" id="preview">Preview</a>
<a href="" class="button" id="compile">Compile</a>
<div class="result" id="result">
<div class="flag">
<div class="flag__image">
<img src="http://i.kevingimbel.me/cp/sonic_screwdriver.jpg" alt="" />
</div>
<div class="flag__body">
People assume that time is a strict progression of cause to effect, but actually from a non-linear, non-subjective viewpoint - it's more like a big ball of wibbly wobbly... time-y wimey... stuff.
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >var d = document,
compile = d.querySelector('#compile'),
preview = d.querySelector('#preview'),
editor = d.querySelector('#editor'),
img = d.querySelector('#imgSrc'),
modifier = d.querySelector('#modifier'),
outputBox = d.querySelector('#result'),
select = d.querySelector('#templateSelect'),
isFlag = true,
firstCompile = true,
templateFlag =
'<div class="flag">\n' +
'<div class="flag__image">\n' +
'<img src="{imgUrl}" />\n'+
'</div>\n' +
'<div class="flag__body {modifier}">\n' +
'{text}\n' +
'</div>\n' +
'</div>\n',
templateMedia =
'<div class="media">\n' +
'<div class="media__image {modifier}">\n' +
'<img src="{imgUrl}" />\n'+
'</div>\n' +
'<div class="media__body">\n' +
'{text}\n' +
'</div>\n' +
'</div>\n';
select.addEventListener('change', function(e) {
if(this.options[this.selectedIndex].value === "flag") {
isFlag = true;
} else {
isFlag = false;
}
});
preview.addEventListener('click', function(e) {
e.preventDefault();
if(isFlag) {
template = templateFlag;
} else {
template = templateMedia;
}
var img = imgSrc.value,
text = editor.value,
mod = modifier.value
data = [];
if(!mod) {
mod = '';
}
data.push({
imgUrl: img,
text: text,
modifier: mod
});
// going through the data object
for(var i = 0; i < data.length; i++) {if (window.CP.shouldStopExecution(1)){break;}
// asigning the var obj to the current dataset
var obj = data[i];
// replacing the template stuff e.g. {title}
var output = template.replace(/\{(.*?)\}/g, function(match, property) {
// returning the matching property
return obj[property];
});
// inserting every output into the output area
outputBox.innerHTML = output;
}
window.CP.exitedLoop(1);
// making sure the field is cleared if we want to compile stuff afterwards
// this variable name is horrible. I should think of something else.
firstCompile = true;
});
var compileToHTML = function compileToHTML(e) {
e.preventDefault();
if(firstCompile) {
// clears the output box so that previous previews are removed and the box is empty
outputBox.innerHTML = '';
firstCompile = false;
}
// checking what template to use
var template;
if(isFlag) {
template = templateFlag;
} else {
template = templateMedia;
}
// getting all the values
var img = imgSrc.value,
text = editor.value,
mod = modifier.value,
data = [];
// mod is actually the only optional thing so if it's empty we output a space (' ')
// otherwise it outputs undefined
if(!mod) {
mod = '';
}
// pushing the data into an JSON object. [{data}]
data.push({
imgUrl: img,
text: text,
modifier: mod
});
// going through the data object
for(var i = 0; i < data.length; i++) {if (window.CP.shouldStopExecution(2)){break;}
// asigning the var obj to the current dataset
var obj = data[i];
// replacing the template stuff e.g. {title}
var output = template.replace(/\{(.*?)\}/g, function(match, property) {
// returning the matching property
return obj[property];
});
// inserting every output into the output area
outputBox.innerText += output;
}
window.CP.exitedLoop(2);
}
compile.addEventListener('click', compileToHTML);
//# sourceURL=pen.js
</script>
</body></html>
