playground: redesign of top menu bar and add embed functionality
Make playground's design closer to www.golang.org and add embed
functionality when sharing code snippet. It hides share button
and embed checkbox, if inside of iframe.
Change-Id: Ie3de27abc99a3543b7a34b36274c8e98a18d0585
Reviewed-on: https://go-review.googlesource.com/10580
Reviewed-by: Andrew Gerrand <adg@golang.org>
diff --git a/app/goplay/edit.html b/app/goplay/edit.html
index 6017463..7339738 100644
--- a/app/goplay/edit.html
+++ b/app/goplay/edit.html
@@ -1,11 +1,12 @@
<!doctype html>
<html>
<head>
- <title>Go Playground</title>
+ <title>The Go Playground</title>
<link rel="stylesheet" href="/static/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/static/jquery-linedtextarea.js"></script>
<script src="/playground.js"></script>
+ <script src="/static/playground-embed.js"></script>
<script>
$(document).ready(function() {
playground({
@@ -18,6 +19,13 @@
'shareURLEl': '#shareURL',
'enableHistory': true
});
+ playgroundEmbed({
+ 'codeEl': '#code',
+ 'shareEl': '#share',
+ 'embedEl': '#embed',
+ 'embedLabelEl': '#embedLabel',
+ 'embedHTMLEl': '#shareURL'
+ });
$('#code').linedtextarea();
// Avoid line wrapping.
$('#code').attr('wrap', 'off');
@@ -61,7 +69,7 @@
</head>
<body itemscope itemtype="http://schema.org/CreativeWork">
<div id="banner">
- <div id="head" itemprop="name">Go Playground</div>
+ <div id="head" itemprop="name">The Go Playground</div>
<div id="controls">
<input type="button" value="Run" id="run">
<input type="button" value="Format" id="fmt">
@@ -73,6 +81,11 @@
</div>
<input type="button" value="Share" id="share">
<input type="text" id="shareURL">
+
+ <label id="embedLabel">
+ <input type="checkbox" id="embed">
+ embed
+ </label>
</div>
<div id="aboutControls">
<input type="button" value="About" id="aboutButton">
diff --git a/app/static/playground-embed.js b/app/static/playground-embed.js
new file mode 100644
index 0000000..c610c8e
--- /dev/null
+++ b/app/static/playground-embed.js
@@ -0,0 +1,74 @@
+// Copyright 2015 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+// opts is an object with these keys
+// codeEl - code editor element
+// shareEl - embed button element
+// embedEl - embed checkbox element
+// embedLabelEl - embed label element, containing embedEl
+// embedHTMLEl - embed HTML text input element
+function playgroundEmbed(opts) {
+ if (opts.codeEl === null || opts.shareEl === null || opts.embedEl === null || opts.embedLabelEl === null || opts.embedHTMLEl === null) {
+ return;
+ }
+
+ code = $(opts.codeEl)
+ embed = $(opts.embedEl);
+ embedLabel = $(opts.embedLabelEl);
+ share = $(opts.shareEl);
+
+ function inIFrame(){
+ return window.self !== window.top;
+ }
+ embedLabel.hide();
+ if (inIFrame()) {
+ share.hide();
+ return;
+ }
+
+ function origin(href) {
+ return (""+href).split("/").slice(0, 3).join("/");
+ }
+
+ function inputChanged() {
+ embedLabel.hide();
+ }
+
+ if (window.history && window.history.pushState && window.addEventListener) {
+ code[0].addEventListener('input', inputChanged);
+ }
+
+ share.click(function(){
+ embedLabel.show();
+ embed.prop('checked', false);
+ });
+
+ var embedHTML = $(opts.embedHTMLEl).hide();
+ var embedding = false;
+ embed.change(function() {
+ if (embedding) return;
+ embedding = true;
+ var embeddingData = code.val();
+ $.ajax("/share", {
+ processData: false,
+ data: embeddingData,
+ type: "POST",
+ complete: function(xhr) {
+ embedding = false;
+ if (xhr.status != 200) {
+ alert("Server error; try again.");
+ return;
+ }
+ if (embedHTML) {
+ var path = "/p/" + xhr.responseText;
+ var url = origin(window.location) + path;
+ if (embed.prop('checked')){
+ url = "<iframe src=\"" + url + "\" frameborder=\"0\" style=\"width: 100%; height: 100%\"><a href=\"" + url + "\">see this code in play.golang.org</a></iframe>";
+ }
+ embedHTML.show().val(url).focus().select();
+ }
+ }
+ });
+ });
+}
diff --git a/app/static/style.css b/app/static/style.css
index a9a3b59..1711124 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -29,7 +29,7 @@
z-index: 1;
padding: 10px 40px;
font-size: 16px;
- font-family: Georgia, serif;
+ font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}
#about p {
@@ -82,54 +82,62 @@
right: 0;
top: 0;
height: 50px;
+ background-color: #E0EBF5;
}
#head {
float: left;
- padding: 8px;
+ padding: 15px 10px;
- font-size: 30px;
- font-family: Georgia, serif;
+ font-size: 20px;
+ font-family: Helvetica, Arial, sans-serif;
}
#controls {
- float: left;
- padding: 10px;
+ float: left;
+ padding: 10px 15px;
+ min-width: 245px;
+}
+#controls > input {
+ border-radius: 5px;
}
#aboutControls {
- float: right;
- padding: 10px;
+ float: right;
+ padding: 10px 15px;
}
input[type=button],
#importsBox {
height: 30px;
- border: 1px solid #ccc;
- font-size: 20px;
- font-family: Georgia, serif;
- background: #eee;
- color: black;
+ border: 1px solid #375EAB;
+ font-size: 16px;
+ font-family: Helvetica, Arial, sans-serif;
+ background: #375EAB;
+ color: white;
position: static;
top: 1px;
-}
-input[type=button]:hover {
- color: white;
- background: #666;
+ border-radius: 5px;
}
#importsBox {
position: relative;
display: inline;
- padding: 3px 0;
+ padding: 5px 0;
margin-right: 5px;
}
#importsBox input {
position: relative;
top: -2px;
left: 1px;
+ height: 10px;
+ width: 10px;
}
-#shareURL {
- width: 350px;
+#shareURL {
+ width: 280px;
font-size: 16px;
border: 1px solid #ccc;
background: #eee;
color: black;
+ height: 23px;
+}
+#embedLabel {
+ font-family: Helvetica, Arial, sans-serif;
}
.lines {
float: left;
