mattdennewitz · June 3, 2015 22:31
diff --git a/gistfile1.txt b/gistfile1.txt
 var React = require('react');
 var _ = require('underscore');
 
 var SigForm = React.createClass({
    onChange: function() {
        var node = React.findDOMNode(this.refs.form);

        var serialized = {
            sigName: node['wholename'].value,
            email: node['email'].value,
        }

        this.props.changeSigProps(serialized);
    },
 
    render: function() {
        return (
            <form ref="form" onChange={this.onChange}>
                Name:<br />
                <input type="text" name="wholename" ref="name"/> <br />
                Email:<br />
                <input type="text" name="email" ref="email" /> <br />
                Twitter (no "@", just username):<br />
                <input type="text" name="twitter" ref="twitter" /> <br />
                Website(s) to display:<br />
                <input type="checkbox" name="pitchfork" value="pitchfork.com" /> Pitchfork <br />
                <input type="checkbox" name="dissolve" value="thedissolve.com" /> The Dissolve <br />
                <input type="checkbox" name="review" value="thepitchforkreview.com" /> The Pitchfork Review
                <br />Display address:<br />
                <select>
                    <option value="none">Do not display (recommended)</option>
                    <option value="Brooklyn">Brooklyn</option>
                    <option value="Chicago">Chicago</option>
                    <option value="Los Angeles">Los Angeles</option>
                </select>
                <br />Display phone number:<br />
                <select>
                    <option value="none-phone">Do not display (recommended)</option>
                    <option value="Brooklyn-phone">Brooklyn</option>
                    <option value="Chicago-phone">Chicago</option>
                    <option value="Los Angeles-phone">Los Angeles</option>
                </select>
            </form>
        )
    }
 });

 var sigTemplate = _.template(`<%= sigName %>
 <%= email %>
 `);
 
 var ResultText = React.createClass({
    render: function() {
        var rendered = sigTemplate(this.props.sigProps);
        rendered = rendered.replace('^[\s\n\r]+?', '');

        return (
            <textarea id="textarea" rows="20" cols="60" value={rendered} />
        )
    }
 });
 
 var App = React.createClass({
    getInitialState: function() {
        return {
            sigProps: {
                sigName: '',
                email: '',
            }
        }
    },
 
    changeSigProps: function(newSigProps) {
        this.setState({
            sigProps: newSigProps
        });
    },
 
    render: function() {
        return (
            <div>
                <div id="form">
                    <SigForm changeSigProps={this.changeSigProps} />
                </div>
                <div id="output">
                    <ResultText sigProps={this.state.sigProps} />
                </div>
            </div>
        )
    }
 });
 
 React.render(<App />, document.getElementById('app'));
diff --git a/gistfile2.txt b/gistfile2.txt
 body, html {
    padding: 0;
    margin: 0;
    font-family: Arial;
 }

 body {
    font-size: 62.5%;
 }

 #header {
    width: 100%;
    color: #ef4139;
    text-transform: uppercase;
    text-align: center;
    padding: 2% 0;
    font-size: 2em;
 }

 div {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-size: 1.2em;
 }

 #form {
    width: 40%;
    max-width: 40%;
    float: left;
    background-color: azure;
    height: 80%;
    padding: 2%;
    font-size: 1em;
 }

 #form form * {
    margin-bottom: 2em;
 }

 #output {
    width: 60%;
    max-width: 60%;
    float: left;
    background-color: lightsteelblue;
    height: 80%;
    padding: 2%;
 }

 #output textarea {
    display: block;
    margin: 0 auto;
 }
diff --git a/gistfile3.txt b/gistfile3.txt
 <!DOCTYPE html>
 <html>
    <head>
        <title>Pitchfork Email Signature Generator</title>
        <link rel="stylesheet" href="./css/master.css" />
    </head>
    <body>
        <div id="header">Pitchfork Email Signature Generator</div>
        <div id="app"></div>        
        <script type="text/javascript" src="./build/bundle.js"></script>
    </body>
 </html>
	var React = require('react');
	var _ = require('underscore');

	var SigForm = React.createClass({
	onChange: function() {
	var node = React.findDOMNode(this.refs.form);

	var serialized = {
	sigName: node['wholename'].value,
	email: node['email'].value,
	}

	this.props.changeSigProps(serialized);
	},

	render: function() {
	return (
	<form ref="form" onChange={this.onChange}>
	Name:<br />
	<input type="text" name="wholename" ref="name"/> <br />
	Email:<br />
	<input type="text" name="email" ref="email" /> <br />
	Twitter (no "@", just username):<br />
	<input type="text" name="twitter" ref="twitter" /> <br />
	Website(s) to display:<br />
	<input type="checkbox" name="pitchfork" value="pitchfork.com" /> Pitchfork <br />
	<input type="checkbox" name="dissolve" value="thedissolve.com" /> The Dissolve <br />
	<input type="checkbox" name="review" value="thepitchforkreview.com" /> The Pitchfork Review
	<br />Display address:<br />
	<select>
	<option value="none">Do not display (recommended)</option>
	<option value="Brooklyn">Brooklyn</option>
	<option value="Chicago">Chicago</option>
	<option value="Los Angeles">Los Angeles</option>
	</select>
	<br />Display phone number:<br />
	<select>
	<option value="none-phone">Do not display (recommended)</option>
	<option value="Brooklyn-phone">Brooklyn</option>
	<option value="Chicago-phone">Chicago</option>
	<option value="Los Angeles-phone">Los Angeles</option>
	</select>
	</form>
	)
	}
	});

	var sigTemplate = _.template(`<%= sigName %>
	<%= email %>
	`);

	var ResultText = React.createClass({
	render: function() {
	var rendered = sigTemplate(this.props.sigProps);
	rendered = rendered.replace('^[\s\n\r]+?', '');

	return (
	<textarea id="textarea" rows="20" cols="60" value={rendered} />
	)
	}
	});

	var App = React.createClass({
	getInitialState: function() {
	return {
	sigProps: {
	sigName: '',
	email: '',
	}
	}
	},

	changeSigProps: function(newSigProps) {
	this.setState({
	sigProps: newSigProps
	});
	},

	render: function() {
	return (
	<div>
	<div id="form">
	<SigForm changeSigProps={this.changeSigProps} />
	</div>
	<div id="output">
	<ResultText sigProps={this.state.sigProps} />
	</div>
	</div>
	)
	}
	});

	React.render(<App />, document.getElementById('app'));
	body, html {
	padding: 0;
	margin: 0;
	font-family: Arial;
	}

	body {
	font-size: 62.5%;
	}

	#header {
	width: 100%;
	color: #ef4139;
	text-transform: uppercase;
	text-align: center;
	padding: 2% 0;
	font-size: 2em;
	}

	div {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
	font-size: 1.2em;
	}

	#form {
	width: 40%;
	max-width: 40%;
	float: left;
	background-color: azure;
	height: 80%;
	padding: 2%;
	font-size: 1em;
	}

	#form form * {
	margin-bottom: 2em;
	}

	#output {
	width: 60%;
	max-width: 60%;
	float: left;
	background-color: lightsteelblue;
	height: 80%;
	padding: 2%;
	}

	#output textarea {
	display: block;
	margin: 0 auto;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pitchfork Email Signature Generator</title>
	<link rel="stylesheet" href="./css/master.css" />
	</head>
	<body>
	<div id="header">Pitchfork Email Signature Generator</div>
	<div id="app"></div>
	<script type="text/javascript" src="./build/bundle.js"></script>
	</body>
	</html>