Skip to content

Instantly share code, notes, and snippets.

@billymoon
Created October 11, 2016 13:36
Show Gist options
  • Save billymoon/25420556f3c8ce019d66e12d3b76e6da to your computer and use it in GitHub Desktop.
Save billymoon/25420556f3c8ce019d66e12d3b76e6da to your computer and use it in GitHub Desktop.
dcr-generator
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;
});
body {
margin-top: 1em;
}
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>
`}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment