From 465e6f399236d0ea2466584539d4eab4d3d83720 Mon Sep 17 00:00:00 2001
From: Agniva De Sarker <agnivade@yahoo.co.in>
Date: Wed, 13 Jun 2018 14:59:40 +0530
Subject: [PATCH] godoc: add link to expand/close all examples

Fixes golang/go#3081

Change-Id: I096b22691a08d72b88dbe925e17893d24ba3c992
Reviewed-on: https://go-review.googlesource.com/118935
Reviewed-by: Brad Fitzpatrick <bradfitz@golang.org>
---
 godoc/static/godocs.js    | 22 ++++++++++++++++++++
 godoc/static/package.html |  1 +
 godoc/static/static.go    | 43 +++++++++++++++++++++++++++++++++++++--
 godoc/static/style.css    | 20 ++++++++++++++++--
 4 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/godoc/static/godocs.js b/godoc/static/godocs.js
index e39ea740ac..85c322dd67 100644
--- a/godoc/static/godocs.js
+++ b/godoc/static/godocs.js
@@ -329,6 +329,28 @@ function addPermalinks() {
   });
 }
 
+$(".js-expandAll").click(function() {
+  if ($(this).hasClass("collapsed")) {
+    toggleExamples('toggle');
+    $(this).text("(Collapse All)");
+  } else {
+    toggleExamples('toggleVisible');
+    $(this).text("(Expand All)");
+  }
+  $(this).toggleClass("collapsed")
+});
+
+function toggleExamples(className) {
+  // We need to explicitly iterate through divs starting with "example_"
+  // to avoid toggling Overview and Index collapsibles.
+  $("[id^='example_']").each(function() {
+    // Check for state and click it only if required.
+    if ($(this).hasClass(className)) {
+      $(this).find('.toggleButton').first().click();
+    }
+  });
+}
+
 $(document).ready(function() {
   generateTOC();
   addPermalinks();
diff --git a/godoc/static/package.html b/godoc/static/package.html
index 06f533ae0b..4537c00f61 100644
--- a/godoc/static/package.html
+++ b/godoc/static/package.html
@@ -90,6 +90,7 @@
 		{{if $.Examples}}
 		<div id="pkg-examples">
 			<h3>Examples</h3>
+			<div class="js-expandAll expandAll collapsed">(Expand All)</div>
 			<dl>
 			{{range $.Examples}}
 			<dd><a class="exampleLink" href="#example_{{.Name}}">{{example_name .Name}}</a></dd>
diff --git a/godoc/static/static.go b/godoc/static/static.go
index 88feb3f21c..bb50de9480 100644
--- a/godoc/static/static.go
+++ b/godoc/static/static.go
@@ -912,6 +912,28 @@ function addPermalinks() {
   });
 }
 
+$(".js-expandAll").click(function() {
+  if ($(this).hasClass("collapsed")) {
+    toggleExamples('toggle');
+    $(this).text("(Collapse All)");
+  } else {
+    toggleExamples('toggleVisible');
+    $(this).text("(Expand All)");
+  }
+  $(this).toggleClass("collapsed")
+});
+
+function toggleExamples(className) {
+  // We need to explicitly iterate through divs starting with "example_"
+  // to avoid toggling Overview and Index collapsibles.
+  $("[id^='example_']").each(function() {
+    // Check for state and click it only if required.
+    if ($(this).hasClass(className)) {
+      $(this).find('.toggleButton').first().click();
+    }
+  });
+}
+
 $(document).ready(function() {
   generateTOC();
   addPermalinks();
@@ -1710,6 +1732,7 @@ function cgAddChild(tree, ul, cgn) {
 		{{if $.Examples}}
 		<div id="pkg-examples">
 			<h3>Examples</h3>
+			<div class="js-expandAll expandAll collapsed">(Expand All)</div>
 			<dl>
 			{{range $.Examples}}
 			<dd><a class="exampleLink" href="#example_{{.Name}}">{{example_name .Name}}</a></dd>
@@ -3042,12 +3065,14 @@ pre .ln {
 }
 
 a,
-.exampleHeading .text {
+.exampleHeading .text,
+.expandAll {
 	color: #375EAB;
 	text-decoration: none;
 }
 a:hover,
-.exampleHeading .text:hover {
+.exampleHeading .text:hover,
+.expandAll:hover {
 	text-decoration: underline;
 }
 .article a {
@@ -3164,6 +3189,20 @@ div#nav table td {
 	text-decoration: none;
 }
 
+#pkg-examples h3 {
+	float: left;
+}
+
+#pkg-examples dl {
+	clear: both;
+}
+
+.expandAll {
+	cursor: pointer;
+	float: left;
+	margin: 1.25rem 0;
+}
+
 div#topbar {
 	background: #E0EBF5;
 	height: 4rem;
diff --git a/godoc/static/style.css b/godoc/static/style.css
index 3d1b1a0125..20cd576ab1 100644
--- a/godoc/static/style.css
+++ b/godoc/static/style.css
@@ -40,12 +40,14 @@ pre .ln {
 }
 
 a,
-.exampleHeading .text {
+.exampleHeading .text,
+.expandAll {
 	color: #375EAB;
 	text-decoration: none;
 }
 a:hover,
-.exampleHeading .text:hover {
+.exampleHeading .text:hover,
+.expandAll:hover {
 	text-decoration: underline;
 }
 .article a {
@@ -162,6 +164,20 @@ div#nav table td {
 	text-decoration: none;
 }
 
+#pkg-examples h3 {
+	float: left;
+}
+
+#pkg-examples dl {
+	clear: both;
+}
+
+.expandAll {
+	cursor: pointer;
+	float: left;
+	margin: 1.25rem 0;
+}
+
 div#topbar {
 	background: #E0EBF5;
 	height: 4rem;