joshuarrrr/README.md

## README.md

      
    Raw
  

              README.md
            
          
    HTML5 Figure Elements

Simple form for creating and previewing captions, credits and images

A jQuery form that helps editors and designers at IEEE Spectrum embed images with captions and credits. Bloggers had a hard time remembering the right HTML structure and style classes for figures—now they don't have to.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <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/site3.css">
	<link rel="stylesheet" href="http://spectrum.ieee.org/ns/interactive/temp-styles/temp-styles-2.26.14.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<style>
    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;
    }
	</style>
</head>

<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 />
                <label for="rt">right</label>
            </fieldset>
        </div>
        <div>
            <button id="generate">Generate</button>
        </div>
    </form>
    <section class="hidden">
        <h2>Generated Code:</h2>
        <code>&nbsp;</code>
        <p id="instrux"><i>Copy and paste into the source view of the CMS (between paragraphs) and make sure to delete your other image</i></p>
    </section>
    <section class="hidden">
        <h2>Preview:</h2>
        <button id="ipsum_toggle">Toggle dummy text</button>
        <article class="article-detail hidden">
            <div id="artBody">
                <div class="articleBody entry-content">
                    <p class="ipsum">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                    <div id="preview"></div>
                    <p class="ipsum">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                    <p class="ipsum">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                    <p class="ipsum">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                    <p class="ipsum">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    <p class="ipsum">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
                </div>
            </div>
        </article>
    </section>
    <script>
      $(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 = 'http://spectrum.ieee.org' + matches[0];
                    return matches[0];
                }
                else {
                    return url;
                }

                /*
                function makeRelative(url) {
                    var matches = url.match(/\/img\/(.*)$/);
                    if (matches) {
                        return matches[0];
                        //abs_img_src = 'http://spectrum.ieee.org' + relative;
                        //return relative;
                    } else {
                        return url;
                    }
                } */
            }
            return generatedFigure;
        }

        function createPreview(previewFigure) {
            //previewFigure.$('img').attr('src', figure.img_src);
            $('#preview').replaceWith(previewFigure.attr('id', 'preview'));
            $('#preview img').attr('src', figure.abs_img_src);
        }

        /* Activate or deactivate the position field based on size */
        var from_xlrg = false;
        $('#size').change(function () {
            if ($('#size option:selected').val() === 'xlrg') {
                $('#pos input').attr('disabled', true);
                $('#pos input').prop('checked', false);
                from_xlrg = true;
            } else {
                $('#pos input').attr('disabled', false);
                if (from_xlrg === true) {
                    $('#pos .default').prop('checked', true);
                }
                from_xlrg = false;
            }

        });

        $('#ipsum_toggle').click(function (event) {
            event.preventDefault();
            $('.ipsum').toggle('fast');
            $('.article-detail').toggleClass('plain');
        });

    });
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<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/site3.css">
	<link rel="stylesheet" href="http://spectrum.ieee.org/ns/interactive/temp-styles/temp-styles-2.26.14.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<style>
	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;
	}
	</style>
	</head>

	<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 />
	<label for="rt">right</label>
	</fieldset>
	</div>
	<div>
	<button id="generate">Generate</button>
	</div>
	</form>
	<section class="hidden">
	<h2>Generated Code:</h2>
	<code> </code>
	<p id="instrux"><i>Copy and paste into the source view of the CMS (between paragraphs) and make sure to delete your other image</i></p>
	</section>
	<section class="hidden">
	<h2>Preview:</h2>
	<button id="ipsum_toggle">Toggle dummy text</button>
	<article class="article-detail hidden">
	<div id="artBody">
	<div class="articleBody entry-content">
	<p class="ipsum">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
	<div id="preview"></div>
	<p class="ipsum">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
	<p class="ipsum">It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<p class="ipsum">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
	<p class="ipsum">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
	<p class="ipsum">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
	</div>
	</div>
	</article>
	</section>
	<script>
	$(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 = 'http://spectrum.ieee.org' + matches[0];
	return matches[0];
	}
	else {
	return url;
	}

	/*
	function makeRelative(url) {
	var matches = url.match(/\/img\/(.*)$/);
	if (matches) {
	return matches[0];
	//abs_img_src = 'http://spectrum.ieee.org' + relative;
	//return relative;
	} else {
	return url;
	}
	} */
	}
	return generatedFigure;
	}

	function createPreview(previewFigure) {
	//previewFigure.$('img').attr('src', figure.img_src);
	$('#preview').replaceWith(previewFigure.attr('id', 'preview'));
	$('#preview img').attr('src', figure.abs_img_src);
	}

	/* Activate or deactivate the position field based on size */
	var from_xlrg = false;
	$('#size').change(function () {
	if ($('#size option:selected').val() === 'xlrg') {
	$('#pos input').attr('disabled', true);
	$('#pos input').prop('checked', false);
	from_xlrg = true;
	} else {
	$('#pos input').attr('disabled', false);
	if (from_xlrg === true) {
	$('#pos .default').prop('checked', true);
	}
	from_xlrg = false;
	}

	});

	$('#ipsum_toggle').click(function (event) {
	event.preventDefault();
	$('.ipsum').toggle('fast');
	$('.article-detail').toggleClass('plain');
	});

	});
	</script>
	</body>