doc: sync playground.js

R=golang-dev, rsc
CC=golang-dev
http://codereview.appspot.com/5956043

1 files changed, 56 insertions, 31 deletions

diff --git a/doc/play/playground.js b/doc/play/playground.js
index 947f8a4ec..d7cc58d6e 100644
--- a/doc/play/playground.js
+++ b/doc/play/playground.js
@@ -6,13 +6,14 @@
 // 	codeEl - code editor element 
 // 	outputEl - program output element
 // 	runEl - run button element
+// 	fmtEl - fmt button element (optional)
 // 	shareEl - share button element (optional)
 // 	shareURLEl - share URL text input element (optional)
 // 	shareRedirect - base URL to redirect to on share (optional)
-// 	preCompile - callback to mutate request data before compiling
-// 	postCompile - callback to read response data after compiling
-//      simple - use plain textarea instead of CodeMirror.
-//      toysEl - select element with a list of toys.
+// 	preCompile - callback to mutate request data before compiling (optional)
+// 	postCompile - callback to read response data after compiling (optional)
+// 	simple - use plain textarea instead of CodeMirror. (optional)
+// 	toysEl - select element with a list of toys. (optional)
 function playground(opts) {
 	var simple = opts['simple'];
 	var code = $(opts['codeEl']);
@@ -97,7 +98,7 @@ function playground(opts) {
 		if (!editor) {
 			return;
 		}
-		var errorRe = /[a-z]+\.go:([0-9]+): /g;
+		var errorRe = /[a-z]+\.go:([0-9]+):/g;
 		var result;
 		while ((result = errorRe.exec(text)) != null) {
 			var line = result[1]*1-1;
@@ -120,13 +121,23 @@ function playground(opts) {
 	function origin(href) {
 		return (""+href).split("/").slice(0, 3).join("/");
 	}
+	function loading() {
+		output.removeClass("error").html(
+			'<div class="loading">Waiting for remote server...</div>'
+		);
+	}
+	function setOutput(text, error) {
+		output.empty();
+		if (error) {
+			output.addClass("error");
+		}
+		$("<pre/>").text(text).appendTo(output);
+	}
 
 	var seq = 0;
 	function run() {
 		clearErrors();
-		output.removeClass("error").html(
-			'<div class="loading">Waiting for remote server...</div>'
-		);
+		loading();
 		seq++;
 		var cur = seq;
 		var data = {"body": body()};
@@ -141,8 +152,6 @@ function playground(opts) {
 				if (seq != cur) {
 					return;
 				}
-				pre = $("<pre/>");
-				output.empty().append(pre);
 				if (opts['postCompile']) {
 					opts['postCompile'](data);
 				}
@@ -150,8 +159,7 @@ function playground(opts) {
 					return;
 				}
 				if (data.compile_errors != "") {
-					pre.text(data.compile_errors);
-					output.addClass("error");
+					setOutput(data.compile_errors, true);
 					highlightErrors(data.compile_errors);
 					return;
 				}
@@ -164,11 +172,10 @@ function playground(opts) {
 					output.empty().append(img);
 					return;
 				}
-				pre.text(out);
+				setOutput(out, false);
 			},
 			error: function(xhr) {
 				var text = "Error communicating with remote server.";
-				console.log(xhr.status);
 				if (xhr.status == 501) {
 					text = xhr.responseText;
 				}
@@ -178,6 +185,41 @@ function playground(opts) {
 	}
 	$(opts['runEl']).click(run);
 
+	$(opts['fmtEl']).click(function() {
+		loading();
+		$.ajax("/fmt", {
+			data: {"body": body()},
+			type: "POST",
+			dataType: "json",
+			success: function(data) {
+				if (data.Error) {
+					setOutput(data.Error, true);
+					highlightErrors(data.Error);
+					return;
+				}
+				setBody(data.Body);
+				setOutput("", false);
+			}
+		});
+	});
+
+	$(opts['toysEl']).bind('change', function() {
+		var toy = $(this).val();
+		loading();
+		$.ajax("/doc/play/"+toy, {
+			processData: false,
+			type: "GET",
+			complete: function(xhr) {
+				if (xhr.status != 200) {
+					setOutput("Server error; try again.", true);
+					return;
+				}
+				setBody(xhr.responseText);
+				setOutput("", false);
+			}
+		});
+	});
+
 	if (opts['shareEl'] != null && (opts['shareURLEl'] != null || opts['shareRedirect'] != null)) {
 		var shareURL;
 		if (opts['shareURLEl']) {
@@ -213,22 +255,5 @@ function playground(opts) {
 		});
 	}
 
-	if (opts['toysEl'] != null) {
-		$(opts['toysEl']).bind('change', function() {
-			var toy = $(this).val();
-			$.ajax("/doc/play/"+toy, {
-				processData: false,
-				type: "GET",
-				complete: function(xhr) {
-					if (xhr.status != 200) {
-						alert("Server error; try again.")
-						return;
-					}
-					setBody(xhr.responseText);
-				}
-			});
-		});
-	}
-
 	return editor;
 }