Make Tables of Contents Hide-able

Closes #217

Author: zoffixznet

README.md

@@ -138,3 +138,6 @@ This repository also contains code authored by third parties that may be license
 files indicate the copyright and license terms at the top of the file. Currently these include:
 
 * jQuery and jQuery UI libraries: Copyright 2015 jQuery Foundation and other contributors; [MIT License](http://creativecommons.org/licenses/MIT)
+* [jQuery Cookie plugin](https://github.com/js-cookie/js-cookie):
+  Copyright 2006, 2015 Klaus Hartl & Fagner Brack;
+  [MIT License](http://creativecommons.org/licenses/MIT)

assets/sass/style.scss

@@ -338,6 +338,16 @@ footer.pretty-box {
     font-size: 80%;
 }
 
+#TOC_title {
+    font-size: 120%;
+
+    a {
+        font-weight: normal;
+        font-size: 90%;
+        outline: 0;
+    }
+}
+
 @media (max-width : 560px) {
     #header {
         border-radius: 10px;

html/css/style.css

@@ -280,6 +280,13 @@ footer.pretty-box {
   text-align: center;
   font-size: 80%; }
 
+#TOC_title {
+  font-size: 120%; }
+  #TOC_title a {
+    font-weight: normal;
+    font-size: 90%;
+    outline: 0; }
+
 @media (max-width: 560px) {
   #header {
     border-radius: 10px; }

html/js/jquery.cookie.js

@@ -0,0 +1,139 @@
+/*!
+ * JavaScript Cookie v2.0.3
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		var _OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = _OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			var result;
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					var expires = new Date();
+					expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
+					attributes.expires = expires;
+				}
+
+				try {
+					result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				value = encodeURIComponent(String(value));
+				value = value.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+
+				key = encodeURIComponent(String(key));
+				key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
+				key = key.replace(/[\(\)]/g, escape);
+
+				return (document.cookie = [
+					key, '=', value,
+					attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
+					attributes.path    && '; path=' + attributes.path,
+					attributes.domain  && '; domain=' + attributes.domain,
+					attributes.secure ? '; secure' : ''
+				].join(''));
+			}
+
+			// Read
+
+			if (!key) {
+				result = {};
+			}
+
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()"
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var rdecode = /(%[0-9A-Z]{2})+/g;
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var name = parts[0].replace(rdecode, decodeURIComponent);
+				var cookie = parts.slice(1).join('=');
+
+				if (cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					cookie = converter && converter(cookie, name) || cookie.replace(rdecode, decodeURIComponent);
+
+					if (this.json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					if (key === name) {
+						result = cookie;
+						break;
+					}
+
+					if (!key) {
+						result[name] = cookie;
+					}
+				} catch (e) {}
+			}
+
+			return result;
+		}
+
+		api.get = api.set = api;
+		api.getJSON = function () {
+			return api.apply({
+				json: true
+			}, [].slice.call(arguments));
+		};
+		api.defaults = {};
+
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init();
+}));

html/js/main.js

@@ -1,6 +1,7 @@
 $(function(){
     setup_search_box();
     setup_auto_title_anchors();
+    setup_collapsible_TOC();
     $(window).resize(setup_search_box);
 });
 
@@ -25,3 +26,41 @@ function setup_auto_title_anchors() {
         );
     });
 }
+
+function setup_collapsible_TOC() {
+    var state;
+    if ( ! $('nav.indexgroup > ol').length ) { return; }
+
+    // fix for jumpy .slideDown() effect
+    $('nav.indexgroup > ol').each( function(){
+        $(this).css( 'height', $(this).height() );
+    });
+
+    state = Cookies.get('toc_state') || 'shown';
+    if ( state == 'hidden' ) {
+        $('nav.indexgroup > ol').hide();
+    }
+
+    $('nav.indexgroup')
+        .prepend('<h2 id="TOC_title">Table of Contents'
+            + ' <a href="#">['
+            + ( state == 'hidden' ? 'show' : 'hide')
+            + ']</a></h2>'
+        )
+        .find('a')
+            .click(function() {
+                var el = $(this);
+                if (el.text() == '[hide]') {
+                    Cookies.set('toc_state', 'hidden');
+                    el.parents('nav').find('ol').slideUp();
+                    el.text('[show]');
+                }
+                else {
+                    Cookies.set('toc_state', 'shown');
+                    el.parents('nav').find('ol').slideDown();
+                    el.text('[hide]');
+                }
+
+                return false;x
+            });
+}

template/footer.html

@@ -10,9 +10,17 @@
       <a href="https://raw.githubusercontent.com/perl6/doc/master/LICENSE">Artistic License 2.0</a>.
       The Camelia image is copyright © 2009 by Larry Wall.
   </p>
+  <p>
+    <small>
+      This site uses HTTP Cookies to save your browsing preferences. If that's
+      an issue, please <a href="https://www.google.com/search?q=block+website+from+using+cookie">
+      configure your browser to block them</a>.
+    </small>
+  </p>
 </footer>
 
 <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/js/search.js"></script>
+<script type="text/javascript" src="/js/jquery.cookie.js"></script>
 <script type="text/javascript" src="/js/main.js"></script>