dcr-generator

dcr-generator.carbide.md

dcr-generator

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

cell0.js

import $ from 'jquery'
//import _ from 'lodash'
//import React from 'react'
//import ReactDOM from 'react-dom'

import { headContent, contentItem } from './templates.js';

$(document.head).append('<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/g/bootswatch(superhero/bootstrap.min.css)"/>')

var middle = [];

var $app = $('<div>').attr({id: 'app'}).addClass('container');
var $form = $('<form/>').attr({id: 'data-capture', action: '#'});
var $heading = $('<input class="form-control" placeholder="heading"/>').attr({name: 'component-heading', id: 'component-heading'});
var $strapline = $('<input class="form-control" placeholder="strapline"/>').attr({name: 'component-strapline', id: 'component-strapline'});
var $input = $('<input class="form-control" placeholder="element type"/>').attr({name: 'element-type', id: 'element-type'});
var $text = $('<textarea class="form-control" placeholder="element value"/>').attr({name: 'element-value', id: 'element-value'});
var $pop = $('<input type="button" class="form-control"/>').attr({value: 'push it'});
var $submit = $('<input type="submit" class="form-control"/>').attr({value: 'do it'});
var $br = $('<br/><br/>');

var $preview = $('<code>');

$(document.body).html('<br/>').append($app);

$app.append($form);
[
    $heading, $br.clone(),
    $strapline, $br.clone(), $br.clone(),
    $input, $br.clone(),
    $text, $br.clone(),
    $pop, $br.clone(), $br.clone(),
    $submit, $br.clone(),
    $('<pre>').append($preview)
].forEach(item => $form.append(item))

$pop.on('click', function(){
   middle.push(contentItem($input.val(), $text.val()));
});

$form.on('submit', (e) => {
    e.preventDefault();
    var output = [
     	headContent($heading.val(), $strapline.val()),
        middle.join('\n'),
		`
    </content-area>
</flexible>`
    ].join('\n');
    $preview.text(output);
    return false;
});

main.css

body {
    margin-top: 1em;
}

templates.js

export function headContent(heading, strapline) { return `
<?xml version="1.0" encoding="UTF-8"?>
<flexible>
    <content-head>
        <content-item>
            <section-heading>
                <text>${heading}</text>
            </section-heading>
            <section-strapline>
                <text>${strapline}</text>
            </section-strapline>
        </content-item>
    </content-head>
    <content-area>

`}

export function contentItem(type, text) { return `
        <content-item>
            <${type}>
                <text>${text}</text>
            </${type}>
        </content-item>
`}