godoc: add dropdown playground to nav bar

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

diff --git a/doc/godocs.js b/doc/godocs.js
index 65305aa781160b1f378478814554407025a78a85..8d4a8aab821bf7f880f42b9eaa3ff26cda780cd7 100644 (file)
--- a/doc/godocs.js
+++ b/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();
 });
 
 })();

diff --git a/doc/style.css b/doc/style.css
index 4dd10c4c9e43020d1836a10319589d08c595d576..b9cb1ba6130a280e0c7120d872cf014b1b1e1e0f 100644 (file)
--- a/doc/style.css
+++ b/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;
+       }
+}
+

diff --git a/lib/godoc/godoc.html b/lib/godoc/godoc.html
index 6ee80c6c511bd93b808de0586655e197759887d4..b7a772cb28c4373f9267ffaccd45ff2f458b7867 100644 (file)
--- a/lib/godoc/godoc.html
+++ b/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() {

diff --git a/lib/godoc/package.html b/lib/godoc/package.html
index c5152741ec3b68618d9cb7132ba1ccd503f3557b..a94a43fd0959286bb46affb0dc23067f7a8a8964 100644 (file)
--- a/lib/godoc/package.html
+++ b/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';

diff --git a/src/cmd/godoc/godoc.go b/src/cmd/godoc/godoc.go
index 0dc2378e23adc1025e8973c3d5262871536d7fe0..b72aad56c0843fef93b75cadbede88ac21146e29 100644 (file)
--- a/src/cmd/godoc/godoc.go
+++ b/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)