initial on-page support for using the text->ascii api method

resources/public/css/screen.css

@@ -13,4 +13,13 @@ html, body {
 	width: 340px;
 	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
 	white-space: pre;
+}
+
+.textOutputContainer {
+	overflow-x: scroll;
+}
+
+.htmlOutputContainer pre {
+	overflow-x: scroll;
+	word-wrap: normal;
 }

resources/public/js/site.js

@@ -0,0 +1,68 @@
+function isHtmlResponse(xhr) {
+	var contentType = xhr.getResponseHeader('content-type');
+	return contentType.indexOf('text/html') !== -1;
+}
+
+function isTextResponse(xhr) {
+	var contentType = xhr.getResponseHeader('content-type');
+	return contentType.indexOf('text/plain') !== -1;
+}
+
+function isJsonResponse(xhr) {
+	var contentType = xhr.getResponseHeader('content-type');
+	return contentType.indexOf('application/json') !== -1;
+}
+
+$(document).ready(function() {
+	$('form.api-form').submit(function(e) {
+		e.preventDefault();
+
+		var form = $(this);
+
+		var params = {};
+		form.find('input, select, textarea').filter('[data-fieldname]').each(function() {
+			var element = $(this);
+			var fieldName = element.data('fieldname');
+			var value = element.val();   // TODO: handle other types of elements (e.g. checkbox, radiobutton)
+			params[fieldName] = value;
+		});
+
+		var textOutputContainer = form.siblings('pre.textOutputContainer');
+		var htmlOutputContainer = form.siblings('div.htmlOutputContainer');
+		var errorContainer = form.siblings('div.methodErrorContainer');
+
+		var apiEndpoint = form.data('api-endpoint');
+
+		textOutputContainer.text('');
+		htmlOutputContainer.html('');
+		errorContainer.html('');
+		errorContainer.hide();
+
+		var url = context + 'api' + apiEndpoint + '?' + jQuery.param(params);
+		$.get(url)
+			.done(
+			function (data, status, xhr) {
+				if (isHtmlResponse(xhr)) {
+					textOutputContainer.hide();
+					htmlOutputContainer.html(data);
+					htmlOutputContainer.show();
+				} else {
+					htmlOutputContainer.hide();
+					textOutputContainer.text(data);
+					textOutputContainer.show();
+				}
+			})
+			.fail(
+			function (response) {
+				textOutputContainer.hide();
+				htmlOutputContainer.hide();
+
+				errorContainer.html(
+					'<strong>HTTP ' + response.status + ' ' + response.statusText + ':</strong> ' +
+					response.responseText
+				);
+				errorContainer.show();
+			});
+	})
+
+});

resources/views/methods/text.html

@@ -1 +1,36 @@
-<p>TODO: content for "Text &ndash;&gt; ASCII" section</p>
+<form class="form-horizontal api-form" role="form" id="textForm" data-api-endpoint="/text">
+	<div class="form-group">
+		<label for="textText" class="col-sm-2 control-label">Text to Render</label>
+		<div class="col-sm-10">
+			<textarea class="form-control" id="textText" placeholder="Enter text" data-fieldname="s"></textarea>
+		</div>
+	</div>
+	<div class="form-group">
+		<label for="textFont" class="col-sm-2 control-label">Font</label>
+		<div class="col-sm-3">
+			<select class="form-control" id="textFont" data-fieldname="font">
+				{% for font in fontNames %}
+				<option{% if (font == "standard") %} selected{% endif %}>{{ font }}</option>
+				{% endfor %}
+			</select>
+		</div>
+	</div>
+	<div class="form-group">
+		<label for="textFormat" class="col-sm-2 control-label">Format</label>
+		<div class="col-sm-3">
+			<select class="form-control" id="textFormat" data-fieldname="format">
+				<option>html</option>
+				<option>text</option>
+			</select>
+		</div>
+	</div>
+	<div class="form-group">
+		<div class="col-sm-offset-2 col-sm-10">
+			<button type="submit" class="btn btn-primary">Render To ASCII</button>
+		</div>
+	</div>
+</form>
+
+<pre class="textOutputContainer" style="display: none;"></pre>
+<div class="htmlOutputContainer" style="display: none;"></div>
+<div class="methodErrorContainer alert alert-danger" style="display: none;"></div>