From 2d7295cc9f5678aa7c2c267c599ec6a1a6c1714b Mon Sep 17 00:00:00 2001
From: Chris Broadfoot <cbro@golang.org>
Date: Thu, 5 Jan 2017 17:20:21 -0800
Subject: [PATCH] godoc: allow nested toggles and toggles with <a name>

Toggles can now be nested within one another. They can also be
referenced using an <a> element with the name attribute, rather than
an element with the "id" attribute.

Updates golang/go#17574.

Change-Id: I43c17499a6879e983a79a74e14c99128296288e1
Reviewed-on: https://go-review.googlesource.com/34825
Reviewed-by: Brad Fitzpatrick <bradfitz@golang.org>
---
 godoc/static/godocs.js | 19 ++++++++++++++++---
 godoc/static/static.go | 27 ++++++++++++++++++++-------
 godoc/static/style.css |  8 ++++----
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/godoc/static/godocs.js b/godoc/static/godocs.js
index 7e353d90..e4d13699 100644
--- a/godoc/static/godocs.js
+++ b/godoc/static/godocs.js
@@ -113,6 +113,11 @@ function generateTOC() {
 
 function bindToggle(el) {
   $('.toggleButton', el).click(function() {
+    if ($(this).closest(".toggle, .toggleVisible")[0] != el) {
+      // Only trigger the closest toggle header.
+      return;
+    }
+
     if ($(el).is('.toggle')) {
       $(el).addClass('toggleVisible').removeClass('toggle');
     } else {
@@ -120,6 +125,7 @@ function bindToggle(el) {
     }
   });
 }
+
 function bindToggles(selector) {
   $(selector).each(function(i, el) {
     bindToggle(el);
@@ -239,10 +245,17 @@ function fixFocus() {
 }
 
 function toggleHash() {
-    var hash = $(window.location.hash);
-    if (hash.is('.toggle')) {
-      hash.find('.toggleButton').first().click();
+  // Open all of the toggles for a particular hash.
+  var els = $(window.location.hash + ", a[name='" + window.location.hash.substring(1) + "']");
+  while (els.length) {
+    for (var i = 0; i < els.length; i++) {
+      var el = $(els[i]);
+      if (el.is('.toggle')) {
+        el.find('.toggleButton').first().click();
+      }
     }
+    els = el.parent();
+  }
 }
 
 function personalizeInstallInstructions() {
diff --git a/godoc/static/static.go b/godoc/static/static.go
index 05916bf7..0190fe75 100644
--- a/godoc/static/static.go
+++ b/godoc/static/static.go
@@ -683,6 +683,11 @@ function generateTOC() {
 
 function bindToggle(el) {
   $('.toggleButton', el).click(function() {
+    if ($(this).closest(".toggle, .toggleVisible")[0] != el) {
+      // Only trigger the closest toggle header.
+      return;
+    }
+
     if ($(el).is('.toggle')) {
       $(el).addClass('toggleVisible').removeClass('toggle');
     } else {
@@ -690,6 +695,7 @@ function bindToggle(el) {
     }
   });
 }
+
 function bindToggles(selector) {
   $(selector).each(function(i, el) {
     bindToggle(el);
@@ -809,10 +815,17 @@ function fixFocus() {
 }
 
 function toggleHash() {
-    var hash = $(window.location.hash);
-    if (hash.is('.toggle')) {
-      hash.find('.toggleButton').first().click();
+  // Open all of the toggles for a particular hash.
+  var els = $(window.location.hash + ", a[name='" + window.location.hash.substring(1) + "']");
+  while (els.length) {
+    for (var i = 0; i < els.length; i++) {
+      var el = $(els[i]);
+      if (el.is('.toggle')) {
+        el.find('.toggleButton').first().click();
+      }
     }
+    els = el.parent();
+  }
 }
 
 function personalizeInstallInstructions() {
@@ -3287,10 +3300,10 @@ div#blog .read {
 }
 
 .toggleButton { cursor: pointer; }
-.toggle .collapsed { display: block; }
-.toggle .expanded { display: none; }
-.toggleVisible .collapsed { display: none; }
-.toggleVisible .expanded { display: block; }
+.toggle > .collapsed { display: block; }
+.toggle > .expanded { display: none; }
+.toggleVisible > .collapsed { display: none; }
+.toggleVisible > .expanded { display: block; }
 
 table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
 table.codetable td { padding-right: 10px; }
diff --git a/godoc/static/style.css b/godoc/static/style.css
index ba457a1a..78c539e9 100644
--- a/godoc/static/style.css
+++ b/godoc/static/style.css
@@ -457,10 +457,10 @@ div#blog .read {
 }
 
 .toggleButton { cursor: pointer; }
-.toggle .collapsed { display: block; }
-.toggle .expanded { display: none; }
-.toggleVisible .collapsed { display: none; }
-.toggleVisible .expanded { display: block; }
+.toggle > .collapsed { display: block; }
+.toggle > .expanded { display: none; }
+.toggleVisible > .collapsed { display: none; }
+.toggleVisible > .expanded { display: block; }
 
 table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
 table.codetable td { padding-right: 10px; }