godoc: add jQuery to Go repository, rewrite godocs.js to use jQuery

For golang.org I intend to rewrite the jquery link in godoc.html
to point to the Google-hosted jquery.js.

R=dsymonds, minux.ma
CC=golang-dev
https://golang.org/cl/6589071

doc/godocs.js

-// Except as noted, this content is licensed under Creative Commons
-// Attribution 3.0
+// Copyright 2012 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
 
 /* A little code to ease navigation of these documents.
  *
  * On window load we:
- *  + Generate a table of contents (godocs_generateTOC)
- *  + Add links up to the top of the doc from each section (godocs_addTopLinks)
+ *  + Bind search box hint placeholder show/hide events (bindSearchEvents)
+ *  + Generate a table of contents (generateTOC)
+ *  + Bind foldable sections (bindToggles)
+ *  + Bind links to foldable sections (bindToggleLinks)
  */
 
-/* We want to do some stuff on page load (after the HTML is rendered).
-   So listen for that:
- */
-function bindEvent(el, e, fn) {
-  if (el.addEventListener){
-    el.addEventListener(e, fn, false);
-  } else if (el.attachEvent){
-    el.attachEvent('on'+e, fn);
-  }
-}
+(function() {
+'use strict';
 
-function godocs_bindSearchEvents() {
-  var search = document.getElementById('search');
-  if (!search) {
-    // no search box (index disabled)
-    return;
+function bindSearchEvents() {
+
+  var search = $('#search');
+  if (search.length === 0) {
+    return; // no search box
   }
+
   function clearInactive() {
-    if (search.className == "inactive") {
-      search.value = "";
-      search.className = "";
+    if (search.is('.inactive')) {
+      search.val('');
+      search.removeClass('inactive');
     }
   }
+
   function restoreInactive() {
-    if (search.value !== "") {
+    if (search.val() !== '') {
       return;
     }
-    if (search.type != "search") {
-      search.value = search.getAttribute("placeholder");
-    }
-    search.className = "inactive";
+    search.val(search.attr('placeholder'));
+    search.addClass('inactive');
   }
+
+  search.on('focus', clearInactive);
+  search.on('blur', restoreInactive);
+
   restoreInactive();
-  bindEvent(search, 'focus', clearInactive);
-  bindEvent(search, 'blur', restoreInactive);
 }
 
-/* Returns the "This sweet header" from <h2>This <i>sweet</i> header</h2>.
- * Takes a node, returns a string.
+/* Generates a table of contents: looks for h2 and h3 elements and generates
+ * links. "Decorates" the element with id=="nav" with this table of contents.
  */
-function godocs_nodeToText(node) {
-  var TEXT_NODE = 3; // Defined in Mozilla but not MSIE :(
-
-  var text = '';
-  for (var j = 0; j != node.childNodes.length; j++) {
-    var child = node.childNodes[j];
-    if (child.nodeType == TEXT_NODE) {
-      if (child.nodeValue != '[Top]') { //ok, that's a hack, but it works.
-        text = text + child.nodeValue;
-      }
-    } else {
-      text = text + godocs_nodeToText(child);
-    }
+function generateTOC() {
+  if ($('#manual-nav').length > 0) {
+    return;
   }
-  return text;
-}
 
-/* Generates a table of contents: looks for h2 and h3 elements and generates
- * links.  "Decorates" the element with id=="nav" with this table of contents.
- */
-function godocs_generateTOC() {
-  if (document.getElementById('manual-nav')) { return; }
-  var navbar = document.getElementById('nav');
-  if (!navbar) { return; }
+  var nav = $('#nav');
+  if (nav.length === 0) {
+    return;
+  }
 
   var toc_items = [];
-
-  var i;
-  var seenNav = false;
-  for (i = 0; i < navbar.parentNode.childNodes.length; i++) {
-    var node = navbar.parentNode.childNodes[i];
-    if (!seenNav) { 
-      if (node.id == 'nav') {
-        seenNav = true;
-      }
-      continue;
-    }
-    if ((node.tagName != 'h2') && (node.tagName != 'H2') &&
-        (node.tagName != 'h3') && (node.tagName != 'H3')) {
-      continue;
-    }
-    if (!node.id) {
-      node.id = 'tmp_' + i;
-    }
-    var text = godocs_nodeToText(node);
-    if (!text) { continue; }
-
-    var textNode = document.createTextNode(text);
-
-    var link = document.createElement('a');
-    link.href = '#' + node.id;
-    link.appendChild(textNode);
-
-    // Then create the item itself
+  $(nav).nextAll('h2, h3').each(function() {
+    var node = this;
+    var link = $('<a/>').attr('href', '#' + node.id).text($(node).text());
     var item;
-    if ((node.tagName == 'h2') || (node.tagName == 'H2')) {
-      item = document.createElement('dt');
+    if ($(node).is('h2')) {
+      item = $('<dt/>');
     } else { // h3
-      item = document.createElement('dd');
+      item = $('<dd/>');
     }
-
-    item.appendChild(link);
+    item.append(link);
     toc_items.push(item);
+  });
+  if (toc_items.length <= 1) {
+    return;
   }
 
-  if (toc_items.length <= 1) { return; }
-
-  var dl1 = document.createElement('dl');
-  var dl2 = document.createElement('dl');
+  var dl1 = $('<dl/>');
+  var dl2 = $('<dl/>');
 
   var split_index = (toc_items.length / 2) + 1;
   if (split_index < 8) {
     split_index = toc_items.length;
   }
-
-  for (i = 0; i < split_index; i++) {
-    dl1.appendChild(toc_items[i]);
+  for (var i = 0; i < split_index; i++) {
+    dl1.append(toc_items[i]);
   }
   for (/* keep using i */; i < toc_items.length; i++) {
-    dl2.appendChild(toc_items[i]);
+    dl2.append(toc_items[i]);
   }
 
-  var tocTable = document.createElement('table');
-  navbar.appendChild(tocTable);
-  tocTable.className = 'unruled';
-  var tocBody = document.createElement('tbody');
-  tocTable.appendChild(tocBody);
-
-  var tocRow = document.createElement('tr');
-  tocBody.appendChild(tocRow);
+  var tocTable = $('<table class="unruled"/>').appendTo(nav);
+  var tocBody = $('<tbody/>').appendTo(tocTable);
+  var tocRow = $('<tr/>').appendTo(tocBody);
 
   // 1st column
-  var tocCell = document.createElement('td');
-  tocCell.className = 'first';
-  tocRow.appendChild(tocCell);
-  tocCell.appendChild(dl1);
-
+  $('<td class="first"/>').appendTo(tocRow).append(dl1);
   // 2nd column
-  tocCell = document.createElement('td');
-  tocRow.appendChild(tocCell);
-  tocCell.appendChild(dl2);
-}
-
-function getElementsByClassName(base, clazz) {
-  if (base.getElementsByClassName) {
-    return base.getElementsByClassName(clazz);
-  }
-  var elements = base.getElementsByTagName('*'), foundElements = [];
-  for (var n in elements) {
-    if (clazz == elements[n].className) {
-      foundElements.push(elements[n]);
-    }
-  }
-  return foundElements;
+  $('<td/>').appendTo(tocRow).append(dl2);
 }
 
-function godocs_bindToggle(el) {
-  var button = getElementsByClassName(el, "toggleButton");
-  var callback = function() {
-    if (el.className == "toggle") {
-      el.className = "toggleVisible";
+function bindToggle(el) {
+  $('.toggleButton', el).click(function() {
+    if ($(el).is('.toggle')) {
+      $(el).addClass('toggleVisible').removeClass('toggle');
     } else {
-      el.className = "toggle";
+      $(el).addClass('toggle').removeClass('toggleVisible');
     }
-  };
-  for (var i = 0; i < button.length; i++) {
-    bindEvent(button[i], "click", callback);
-  }
+  });
 }
-function godocs_bindToggles(className) {
-  var els = getElementsByClassName(document, className);
-  for (var i = 0; i < els.length; i++) {
-    godocs_bindToggle(els[i]);
-  }
+function bindToggles(selector) {
+  $(selector).each(function(i, el) {
+    bindToggle(el);
+  });
 }
-function godocs_bindToggleLink(l, prefix) {
-  bindEvent(l, "click", function() {
-    var i = l.href.indexOf("#"+prefix);
+
+function bindToggleLink(el, prefix) {
+  $(el).click(function() {
+    var href = $(el).attr('href');
+    var i = href.indexOf('#'+prefix);
     if (i < 0) {
       return;
     }
-    var id = prefix + l.href.slice(i+1+prefix.length);
-    var eg = document.getElementById(id);
-    eg.className = "toggleVisible";
+    var id = '#' + prefix + href.slice(i+1+prefix.length);
+    if ($(id).is('.toggle')) {
+      $(id).find('.toggleButton').first().click();
+    }
   });
 }
-function godocs_bindToggleLinks(className, prefix) {
-  var links = getElementsByClassName(document, className);
-  for (i = 0; i < links.length; i++) {
-    godocs_bindToggleLink(links[i], prefix);
-  }
-}
-
-function godocs_onload() {
-  godocs_bindSearchEvents();
-  godocs_generateTOC();
-  godocs_bindToggles("toggle");
-  godocs_bindToggles("toggleVisible");
-  godocs_bindToggleLinks("exampleLink", "example_");
-  godocs_bindToggleLinks("overviewLink", "");
-  godocs_bindToggleLinks("examplesLink", "");
-  godocs_bindToggleLinks("indexLink", "");
+function bindToggleLinks(selector, prefix) {
+  $(selector).each(function(i, el) {
+    bindToggleLink(el, prefix);
+  });
 }
 
-bindEvent(window, 'load', godocs_onload);
+$(document).ready(function() {
+  bindSearchEvents();
+  generateTOC();
+  bindToggles(".toggle");
+  bindToggles(".toggleVisible");
+  bindToggleLinks(".exampleLink", "example_");
+  bindToggleLinks(".overviewLink", "");
+  bindToggleLinks(".examplesLink", "");
+  bindToggleLinks(".indexLink", "");
+});
+
+})();

doc/popups.js

-// Copyright 2009 The Go Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-function godocs_bindPopups(data) {
-
-  $('#content span').bind('mouseenter', function() {
-    var id = $(this).attr('id');
-    //var txt = $(this).text();
-    if (typeof data[id] == 'undefined')
-	return;
-    var content = data[id];
-
-    var $el = $('.popup', this);
-    if (!$el.length) { // create it
-      $el = $('<div class="popup"></div>');
-      $el.prependTo(this).css($(this).offset()).text(content);
-    }
-  });
-  $('#content span').bind('mouseleave', function() {
-    $('.popup', this).remove();
-  });
-
-}

doc/root.html

@@ -88,7 +88,6 @@ Linux, Mac OS X, Windows, and more.
 <script type="text/javascript" src="/doc/play/playground.js"></script>
 <script type="text/javascript">
 google.load("feeds", "1");
-google.load("jquery", "1.7.1");
 
 function feedLoaded(result) {
 	if (result.error) {

lib/godoc/godoc.html

@@ -8,6 +8,7 @@
   <title>The Go Programming Language</title>
 {{end}}
 <link type="text/css" rel="stylesheet" href="/doc/style.css">
+<script type="text/javascript" src="/doc/jquery.js"></script>
 <script type="text/javascript" src="/doc/godocs.js"></script>
 {{if .SearchBox}}
 <link rel="search" type="application/opensearchdescription+xml" title="godoc" href="/opensearch.xml" />
@@ -24,7 +25,7 @@
 <a href="/pkg/">Packages</a>
 <a href="/project/">The Project</a>
 <a href="/help/">Help</a>
-<input type="text" id="search" name="q" class="inactive" value="Search">
+<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>
 </form>