"builder"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: