godoc: add dropdown playground to nav bar

R=gri, dsymonds, skybrian
CC=golang-dev
https://golang.org/cl/6631057

doc/godocs.js

@@ -130,6 +130,37 @@ function bindToggleLinks(selector, prefix) {
   });
 }
 
+function setupDropdownPlayground() {
+  if (!$('#page').is('.wide')) {
+    return; // don't show on front page
+  }
+  var button = $('#playgroundButton');
+  var div = $('#playground');
+  var setup = false;
+  button.toggle(function() {
+    button.addClass('active');
+    div.show();
+    if (setup) {
+      return;
+    }
+    setup = true;
+    playground({
+      'codeEl': $('.code', div),
+      'outputEl': $('.output', div),
+      'runEl': $('.run', div),
+      'fmtEl': $('.fmt', div),
+      'shareEl': $('.share', div),
+      'shareRedirect': 'http://play.golang.org/p/'
+    });
+  },
+  function() {
+    button.removeClass('active');
+    div.hide();
+  });
+  button.show();
+  $('#menu').css('min-width', '+=60');
+}
+
 $(document).ready(function() {
   bindSearchEvents();
   generateTOC();
@@ -139,6 +170,7 @@ $(document).ready(function() {
   bindToggleLinks(".overviewLink", "");
   bindToggleLinks(".examplesLink", "");
   bindToggleLinks(".indexLink", "");
+  setupDropdownPlayground();
 });
 
 })();

doc/style.css

@@ -130,22 +130,22 @@ div#heading a {
 div#topbar {
 	background: #E0EBF5;
 	height: 64px;
+	overflow: hidden;
 }
 
 body {
 	text-align: center;
 }
-div#page,
+div#page > .container,
 div#topbar > .container {
-	clear: both;
 	text-align: left;
 	margin-left: auto;
 	margin-right: auto;
 	padding: 0 20px;
 	width: 900px;
 }
-div#page.wide,
-div#topbar > .wide {
+div#page.wide > .container,
+div#topbar.wide > .container {
 	width: auto;
 }
 div#plusone {
@@ -153,6 +153,7 @@ div#plusone {
 }
 
 div#footer {
+	text-align: center;
 	color: #666;
 	font-size: 14px;
 	margin: 40px 0;
@@ -172,14 +173,20 @@ div#blog .read a {
 	-moz-border-radius: 5px;
 	border-radius: 5px;
 }
+div#playground .buttons a,
 div#menu > a,
 div#menu > input {
 	border: 1px solid #375EAB;
 }
+div#playground .buttons a,
 div#menu > a {
 	color: white;
 	background: #375EAB;
 }
+#playgroundButton.active {
+	background: white;
+	color: #375EAB;
+}
 a#start,
 div#learn .buttons a,
 div.play .buttons a,
@@ -214,9 +221,11 @@ div#menu > input.inactive {
 
 div.left {
 	float: left;
+	clear: left;
 }
 div.right {
 	float: right;
+	clear: right;
 }
 div.left,
 div.right {
@@ -394,6 +403,7 @@ img.gopher {
 }
 h2 { clear: right; }
 
+/* example and drop-down playground */
 div.play {
 	padding: 0 20px 40px 20px;
 }
@@ -427,6 +437,10 @@ div.play .input textarea {
 
 	overflow: hidden;
 }
+div#playground .input textarea {
+	overflow: auto;
+	resize: auto;
+}
 div.play .output {
 	border-top: none !important;
 
@@ -469,3 +483,60 @@ div.play .buttons a {
 	padding: 10px;
 	cursor: pointer;
 }
+
+/* drop-down playground */
+#playgroundButton,
+div#playground {
+	/* start hidden; revealed by javascript */
+	display: none;
+}
+div#playground {
+	position: absolute;
+	top: 63px;
+	right: 20px;
+	padding: 0 10px 10px 10px;
+	z-index: 1;
+	text-align: left;
+	background: #E0EBF5;
+
+	border: 1px solid #B0BBC5;
+	border-top: none;
+
+	-webkit-border-bottom-left-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-moz-border-radius-bottomleft: 5px;
+	-moz-border-radius-bottomright: 5px;
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+div#playground .code {
+	width: 520px;
+	height: 200px;
+}
+div#playground .output {
+	height: 100px;
+}
+
+/* always show topbar for large screens */
+@media screen and (min-width: 130ex) and (min-height: 300px) {
+       /* 130ex -> wide enough so that title isn't below buttons */
+
+	div#topbar.wide {
+		position: fixed;
+		z-index: 1;
+		top: 0;
+		width: 100%;
+		height: 63px;
+		border-bottom: 1px solid #B0BBC5;
+	}
+
+	div#page.wide {
+		position: fixed;
+		top: 64px; /* to match topbar */
+		bottom: 0px;
+		overflow: auto;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+

lib/godoc/godoc.html

@@ -10,6 +10,9 @@
 <link type="text/css" rel="stylesheet" href="/doc/style.css">
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script type="text/javascript">window.jQuery || document.write(unescape("%3Cscript src='/doc/jquery.js' type='text/javascript'%3E%3C/script%3E"));</script>
+{{if .Playground}}
+<script type="text/javascript" src="/doc/play/playground.js"></script>
+{{end}}
 <script type="text/javascript" src="/doc/godocs.js"></script>
 {{if .SearchBox}}
 <link rel="search" type="application/opensearchdescription+xml" title="godoc" href="/opensearch.xml" />
@@ -17,7 +20,7 @@
 </head>
 <body>
 
-<div id="topbar"><div class="container{{if .Title}} wide{{end}}">
+<div id="topbar"{{if .Title}} class="wide"{{end}}><div class="container">
 
 <form method="GET" action="/search">
 <div id="menu">
@@ -26,6 +29,9 @@
 <a href="/pkg/">Packages</a>
 <a href="/project/">The Project</a>
 <a href="/help/">Help</a>
+{{if .Playground}}
+<a id="playgroundButton" href="http://play.golang.org/" title="Show Go Playground">Play</a>
+{{end}}
 <input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search">
 </div>
 <div id="heading"><a href="/">The Go Programming Language</a></div>
@@ -33,7 +39,26 @@
 
 </div></div>
 
+{{if .Playground}}
+<div id="playground" class="play">
+	<div class="input"><textarea class="code">package main
+
+import "fmt"
+
+func main() {
+	fmt.Println("Hello, 世界")
+}</textarea></div>
+	<div class="output"></div>
+	<div class="buttons">
+		<a class="run" title="Run this code [shift-enter]">Run</a>
+		<a class="fmt" title="Format this code">Format</a>
+		<a class="share" title="Share this code">Share</a>
+	</div>
+</div>
+{{end}}
+
 <div id="page"{{if .Title}} class="wide"{{end}}>
+<div class="container">
 
 {{with .Title}}
   <div id="plusone"><g:plusone size="small" annotation="none"></g:plusone></div>
@@ -50,8 +75,6 @@
 {{/* Body is HTML-escaped elsewhere */}}
 {{printf "%s" .Body}}
 
-</div>
-
 <div id="footer">
 Build version {{html .Version}}.<br>
 Except as <a href="http://code.google.com/policies.html#restrictions">noted</a>,
@@ -62,6 +85,9 @@ and code is licensed under a <a href="/LICENSE">BSD license</a>.<br>
 <a href="http://www.google.com/intl/en/policies/privacy/">Privacy Policy</a>
 </div>
 
+</div><!-- .container -->
+</div><!-- #page -->
+
 </body>
 <script type="text/javascript">
   (function() {

lib/godoc/package.html

@@ -163,7 +163,6 @@
 				{{example_html $name $.Examples $.FSet}}
 			{{end}}
 		{{end}}
-		</div>
 	{{else}}  {{/* not a package; is a command */}}
 		{{comment_html .Doc}}
 	{{end}}
@@ -224,7 +223,6 @@
 {{end}}
 
 {{if $.Examples}}
-<script type="text/javascript" src="/doc/play/playground.js"></script>
 <script>
 $(document).ready(function() {
 	'use strict';

src/cmd/godoc/godoc.go

@@ -554,8 +554,9 @@ type Page struct {
 	Body     []byte
 
 	// filled in by servePage
-	SearchBox bool
-	Version   string
+	SearchBox  bool
+	Playground bool
+	Version    string
 }
 
 func servePage(w http.ResponseWriter, page Page) {
@@ -563,6 +564,7 @@ func servePage(w http.ResponseWriter, page Page) {
 		page.Tabtitle = page.Title
 	}
 	page.SearchBox = *indexEnabled
+	page.Playground = *showPlayground
 	page.Version = runtime.Version()
 	if err := godocHTML.Execute(w, page); err != nil {
 		log.Printf("godocHTML.Execute: %s", err)