IEEE Spectrum Figure Generator

by Josh Romero

HTML

<link rel="stylesheet" href="http://spectrum.ieee.org/assets/css/style.css">
<link rel="stylesheet" href="http://spectrum.ieee.org/assets/css/sb.css">
<link rel="stylesheet" href="http://spectrum.ieee.org/assets/css/slimbox2.css">
<link rel="stylesheet" href="http://spectrum.ieee.org/assets/css/site2.css">
<link rel="stylesheet" href="http://spectrum.ieee.org/ns/interactive/temp-styles/temp-styles-2.26.14.css">
<link rel="stylesheet" href="http://spectrum.ieee.org/assets/css/site3.css">
<link rel="stylesheet" href="http://spectrum.ieee.org/assets/css/site4.css">
<body>
    <h1>IEEE Spectrum Figure Auto-Generator</h1>
    <p>Use this form to create properly formed and formatted "figures" which can contain photos, videos, or optional captions and credits.</p>
    <p><small><i>Before using this form, first upload your image via the IEEE Spectrum CMS. Then, copy and paste the image URL into the field below.</i></small></p>
    <form>
        <div><label for="img_src">Image URL:</label>

            <input type="text" name="img_src" id="img_src" required >
        </div>
        <div><label for="caption">Caption:</label>

            <input type="text" name="caption" id="caption">
        </div>
        <div><label for="credit">Credit:</label>

            <input type="text" name="credit" id="credit">
        </div>
        <div><label for="size">Size:</label>

            <select name="size" id="size">
                <option value="sm">Small</option>
                <option value="med" selected>Medium</option>
                <option value="lrg">Large</option>
                <option value="xlrg">Extra Large</option>
            </select>
        </div>
        <div>
            <fieldset id="pos">
                <label>Position:</label>
    
                <input type="radio" name="position" value="lt" id="lt" />
                <label for="lt">left</label>
                <input type="radio" name="position" value="rt" class="default" id="rt" checked />
         ...

CSS

body {
    padding: 1em;
}
p, button {
    margin-bottom: 1em;
}
form {
    line-height: 1.5em;
    font-size: 16px;
    margin-bottom: 1em;
}
form div {
    margin: .5em 0;
}
form div label {
    margin: 0 5px;
    display: inline-block;
}
form div label:first-child {
    min-width: 100px;
}
input {
    background: lightblue;
    border: 3px solid black;
}
code {
    display: block;
    padding: 2em;
    border: 3px black dashed;
}
.hidden {
    display: none;
}
.article-detail {
    margin: 0 auto 5em;
    padding: 2em 0;
    width: 620px;
    background: lightblue;
    overflow-y: auto;
}
figure {
    background: white;
}
.ipsum {
    display: none;
}
.plain {
    background: white;
}

JavaScript

$(document).ready(function () {
    var figure = {};

    $('#generate').click(function (event) {
        event.preventDefault();
        collectFormData();
        //TODO validate(figure); 
        var newFigure = createFigure();
        createPreview(newFigure);
        $('.hidden').show().removeClass('hidden');
    });

    function collectFormData() {
        var fields = $('form').serializeArray();
        $.each(fields, function( i, field ) {
            figure[field.name] = field.value.trim();
        });
    }

    function createFigure() {
        /* By default, a figure should always contain an image and have a size class set */
        var generatedFigure = $('<figure></figure>')
            .addClass(figure.size)
            .append($('<img>', {
            'src': cleanImgSrc(figure.img_src)
        }));

        /* Only add caption and credit nodes if necessary */
        if (figure.credit !== '') {
            generatedFigure.append($('<figcaption></figcaption>', {
                html: figure.credit,
                    'class': 'hi-cap'
            }));
        }

        if (figure.caption !== '') {
            generatedFigure.append($('<figcaption></figcaption>', {
                html: figure.caption
            }));
        }

        /* Only add position class if needed */
        if (figure.size !== 'xlrg') {
            generatedFigure.addClass(figure.position);
        }

        /* Create the text to be copy/pasted */
        $('code').text(generatedFigure[0].outerHTML);

        function cleanImgSrc(url) {
            /* if the image is from the spectrum domain, we strip it to create a relative URL */
            var matches = url.match(/\/img\/(.*)$/);
            figure.abs_img_src = url;
            
            if (matches) {
                /*
                if (/^http(.*)spectrum\.ieee\.org(.*)$/.test(url)) {
                    
                } 
                // */
                figure.abs_img_src =...