mirror of https://github.com/golang/go.git
godoc: add dropdown playground to nav bar
R=gri, dsymonds, skybrian CC=golang-dev https://golang.org/cl/6631057
This commit is contained in:
Andrew Gerrand
parent
e7c222cada
commit
8438641629
|
|
@ -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();
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue