<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/goldenstatewarriors/pen/QMgdbR?depth=everything&order=popularity&page=52&q=Builder&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<style class="cp-pen-styles">body {
padding-top: 50px;
}
textarea {
resize: none;
}
.field {
margin-bottom: 10px;
padding: 5px;
background-color: #eaeaea;
}
.helper-text {
color: #666;
font-size: 10px;
}
.result-container {
position: relative;
}
.result-container .button {
position: absolute;
right: 0;
top: 25px;
min-width: 100px;
}
</style></head><body>
<div class="row">
<div class="small-12 medium-6 large-4 large-offset-1 columns">
<form id="formComponent">
<label>Component Type
<select id="selectComponent">
<option value="card">Card</option>
</select>
<div id="customFields"></div>
</label>
</form>
</div>
<div class="small-12 medium-6 large-5 large-offset-1 columns">
<div class="result-container">
<label>Result
<textarea name="Result" id="result" rows="10"></textarea>
</label>
<button class="button" id="buttonCopy" data-clipboard-target="#result">Copy</button>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.14/beautify-html.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js'></script>
<script >const imageServer = 'http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/';
const components = {
card: {
title: {
fields: [{
label: 'Title',
selector: 'input',
type: 'text'
}]
},
image: {
fields: [{
label: 'Image',
helper: 'include file type - .jpg / .png / .gif',
selector: 'input',
type: 'text'
}]
},
description: {
fields: [{
label: 'Description',
helper: 'can include HTML, eg. <a href="">...</a>',
selector: 'textarea'
}]
},
action: {
multiple: true,
fields: [{
label: 'Action URL',
selector: 'input',
type: 'text',
required: true
}, {
label: 'Action Title',
selector: 'input',
type: 'text'
}]
}
}
};
// const components = {
// card: [{
// label: 'Title',
// selector: 'input',
// type: 'text'
// }, {
// label: 'Image',
// helper: 'include file type - .jpg / .png / .gif',
// selector: 'input',
// type: 'text'
// }, {
// label: 'Description',
// helper: 'can include HTML, eg. <a href="">...</a>',
// selector: 'textarea'
// }, {
// label: 'Action URL',
// selector: 'input',
// type: 'text',
// required: true
// }, {
// label: 'Action Title',
// selector: 'input',
// type: 'text'
// }]
// };
/* Utility Functions */
// from: https://stackoverflow.com/a/4149393/1179207
const fromCamelCase = text => {
return text
// insert a space before all caps
.replace(/([A-Z])/g, ' $1')
// uppercase the first character
.replace(/^./, function(str){ return str.toUpperCase(); })
}
// from: https://stackoverflow.com/a/15829686/1179207
const toCamelCase = text => {
return text
.replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
.replace(/\s/g, '')
.replace(/^(.)/, function($1) { return $1.toLowerCase(); });
}
const toPascalCase = text => {
return text
.replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
.replace(/\s/g, '')
}
/* End Utility Functions */
const updateComponentType = (type) => {
$('#result').text(''); // clear out result
const fieldsHtml = Object.keys(components[type])
.map(key => {
const thisComponent = components[type][key];
const fields = thisComponent.fields;
console.log(fields);
let thisFieldsHtml = '<div class="field">';
thisFieldsHtml += fields
.map(field => {
const type = field.type ? `type="${field.type}"` : '';
const helper = field.helper ? `<span class="helper-text">(${field.helper})</span>` : '';
const required = field.required ? 'required' : '';
return `<label>${field.label} ${helper}<${field.selector} ${type} class="${required}" id="field${toPascalCase(field.label)}"></${field.selector}></label>`;
})
.join('');
if (thisComponent.multiple) {
thisFieldsHtml += '<button><i class="fa fa-plus"></i></button>'
}
thisFieldsHtml += '</div>'
return thisFieldsHtml;
})
.concat(['<button type="submit" form="formComponent" class="button" id="buttonProcess">Process</button>']);
console.log(fieldsHtml);
// const fieldsHtml = components[type]
// .map(field => {
// const type = field.type ? `type="${field.type}"` : '';
// const helper = field.helper ? `<span class="helper-text">(${field.helper})</span>` : '';
// const required = field.required ? 'required': '';
// return `<label>${field.label} ${helper}<${field.selector} ${type} class="${required}" id="field${toPascalCase(field.label)}"></${field.selector}></label>`;
// })
// .concat(['<button type="submit" form="formComponent" class="button" id="buttonProcess">Process</button>']);
$('#customFields').html(fieldsHtml);
};
const processResult = () => {
const type = $('#selectComponent').val();
let html = '';
switch(type) {
case 'card':
const fieldTitle = $('#fieldTitle').val();
const fieldImage = $('#fieldImage').val();
const fieldActionURL = $('#fieldActionURL').val();
html = '<div class="Card">';
html += (fieldImage)
? `<div class="Card-header"><a href="${fieldActionURL}"><img src="${imageServer}${fieldImage}" width="540" alt="${fieldTitle}"></a></div>`
: '';
html += '<div class="Card-body">';
html += (fieldTitle) ? `<h2>${fieldTitle}</h2>` : '';
html +='<div class="Card-description">'
+ '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc tortor, venenatis eget commodo id, commodo eupurus.</p>'
+ '</div>'
+ '</div>'
+ '</div>';
break;
default:
alert('Non-valid component type was selected somehow.')
}
const beautified = html_beautify(html, {indent_size: 2});
$('#result').text(beautified);
}
const selectComponentOptions = Object.keys(components)
.map(key => `<option value="${key}">${fromCamelCase(key)}</option>`)
.join();
$('#selectComponent').html(selectComponentOptions);
$('#selectComponent').on('change', function() {
updateComponentType(this.value);
})
$('#customFields').on('click', '#buttonProcess', (e) => {
e.preventDefault();
processResult();
})
/* copy to clipboard */
const btn = document.getElementById('buttonCopy');
const clipboard = new Clipboard(btn);
const resetButton = () => {
setTimeout(() => {
$('#buttonCopy')
.removeClass('success')
.removeClass('alert')
.text('Copy');
}, 2000);
};
clipboard.on('success', function(e) {
$('#buttonCopy').addClass('success').text('Copied!');
resetButton();
});
clipboard.on('error', function(e) {
$('#buttonCopy').addClass('alert').text('Failed!');
resetButton();
});
/* also want to select all if we just click into the text box
* from: https://stackoverflow.com/a/5797700/1179207 */
$("#result").focus(function() {
var $this = $(this);
$this.select();
$this.mouseup(function() {
$this.unbind("mouseup");
return false;
});
});
// default to the first component type in the object
updateComponentType(Object.keys(components)[0]);
//# sourceURL=pen.js
</script>
</body></html>
