Added preview to form builder

css/formbuilder.css

@@ -71,6 +71,10 @@ p.indent {
 		margin-top: 2px;
 	}
 
+#field-list-list, #field-list-preview {
+	display: none;
+}
+
 /* full/list fields toggle */
 .toggle {
 	text-align: right;

handlers/edit.php

@@ -24,6 +24,10 @@
 $page->add_script ('/apps/form/js/formbuilder.js');
 $page->add_script ('/apps/form/css/formbuilder.css');
 
+$page->add_script ('/apps/form/js/jquery.tools.min.js');
+$page->add_script ('/apps/form/css/rangeinput.css');
+$page->add_script ('/apps/form/css/dateinput.css');
+
 $page->title = i18n_get ('Form Builder');
 
 echo $tpl->render ('form/edit', $f);

handlers/preview.php

@@ -0,0 +1,47 @@
+<?php
+
+/**
+ * Render a preview of a form based on the form ID. Usage:
+ *
+ *     /form/preview/form-id
+ */
+
+$page->layout = false;
+
+$id = (isset ($this->params[0])) ? $this->params[0] : (isset ($data['id']) ? $data['id'] : false);
+if (! $id) {
+	// no form specified
+	@error_log ('no form specified');
+	return;
+}
+
+$f = new form\Form ((int) $id);
+if ($f->error) {
+	// form not found
+	@error_log ('form not found');
+	return;
+}
+
+// render the form
+echo '<h1>' . $f->title . '</h1>';
+
+$o = $f->orig ();
+$o->failed = $f->failed;
+echo $tpl->render ('form/head', $o);
+
+foreach ($f->field_list as $field) {
+	if ($field->type == 'date') {
+		if ($field->default == 'today') {
+			$field->default = gmdate ('Y-m-d');
+		}
+	}
+	echo $tpl->render ('form/field/' . $field->type, $field);
+}
+
+echo $tpl->render ('form/previewtail', $o);
+
+echo '<hr />';
+echo '<h1>' . $f->response_title . '</h1>';
+echo $f->response_body;
+
+?>

js/formbuilder.js

@@ -6,6 +6,45 @@ $(function () {
 	// Initialize the tabs
 	$('#tabs').tabs ();
 
+	// Initialize the full/list/preview buttons
+	$('#toggle-full').on ('click', function () {
+		$('#toggle-full').addClass ('active');
+		$('#toggle-list').removeClass ('active');
+		$('#toggle-preview').removeClass ('active');
+		$('#field-list-full').show ();
+		$('#field-list-list').hide ();
+		$('#field-list-preview').hide ();
+		return false;
+	});
+	$('#toggle-list').on ('click', function () {
+		$('#toggle-full').removeClass ('active');
+		$('#toggle-list').addClass ('active');
+		$('#toggle-preview').removeClass ('active');
+		$('#field-list-full').hide ();
+		$('#field-list-list').show ();
+		$('#field-list-preview').hide ();
+		return false;
+	});
+	$('#toggle-preview').on ('click', function () {
+		$('#toggle-full').removeClass ('active');
+		$('#toggle-list').removeClass ('active');
+		$('#toggle-preview').addClass ('active');
+		$('#field-list-full').hide ();
+		$('#field-list-list').hide ();
+		$('#field-list-preview').show ();
+
+		$('#field-list-preview').html ('Loading...');
+
+		// Load preview of form
+		$.get ('/form/preview/' + form_id, function (res) {
+			$('#field-list-preview').html (res);
+			$(":range").rangeinput({progress:true});
+			$(":date").dateinput({format:"yyyy-mm-dd"});
+		});
+
+		return false;
+	});
+
 	/**
 	 * Form model.
 	 */

views/edit.html

@@ -1,3 +1,7 @@
+<script>
+var form_id = {{ id }};
+</script>
+
 <p style="float: right"><a href="/form/admin">{"Done editing"}</a></p>
 
 <div id="tabs">
@@ -44,7 +48,7 @@
 				<a href="#" id="toggle-list" title="{"View as list"}"></a>
 				<a href="#" id="toggle-full" title="{"View in full"}" class="active"></a>
 			</div>
-			<div id="field-list">
+			<div id="field-list-full">
 
 				<div class="section">
 					<div class="buttons">
@@ -171,7 +175,18 @@ <h6>{"Slider"}</h6>
 				</div>
 
 			</div>
+
+			<div id="field-list-list">
+				<ul>
+					<li>...</li>
+				</ul>
+			</div>
+
+			<div id="field-list-preview">
+
+			</div>
 		</div>
+
 	</div>
 
 	<div id="actions">

views/previewtail.html

@@ -0,0 +1,6 @@
+<div class="form-field form-field-submit">
+	<div class="form-field-input">
+		<input type="submit" value="{" Submit "}" onclick="return false" />
+	</div>
+</div>
+</form>