styles unification

doc/doc-filelist.js

@@ -0,0 +1 @@
+var tree={};

doc/doc-script.js

@@ -0,0 +1,228 @@
+// # res/script.js
+//
+// This is the script file that gets copied into the output. It mainly manages the display
+// of the folder tree. The idea of this script file is to be minimal and standalone. So
+// that means no jQuery.
+
+// Use localStorage to store data about the tree's state: whether or not
+// the tree is visible and which directories are expanded. Unless the state
+var sidebarVisible = (window.localStorage && window.localStorage.docker_showSidebar) ?
+                        window.localStorage.docker_showSidebar == 'yes' :
+                        defaultSidebar;
+
+/**
+ * ## makeTree
+ *
+ * Consructs the folder tree view
+ *
+ * @param {object} treeData Folder structure as in [queueFile](../src/docker.js.html#docker.prototype.queuefile)
+ * @param {string} root Path from current file to root (ie `'../../'` etc.)
+ * @param {string} filename The current file name
+ */
+function makeTree(treeData, root, filename) {
+  var treeNode = document.getElementById('tree');
+  var treeHandle = document.getElementById('sidebar-toggle');
+  treeHandle.addEventListener('click', toggleTree, false);
+
+  // Build the html and add it to the container.
+  treeNode.innerHTML = nodeHtml('', treeData, '', root);
+
+  // Root folder (whole tree) should always be open
+  treeNode.childNodes[0].className += ' open';
+
+  // Attach click event handler
+  treeNode.addEventListener('click', nodeClicked, false);
+
+  if (sidebarVisible) document.body.className += ' sidebar';
+
+  // Restore scroll position from localStorage if set. And attach scroll handler
+  if (window.localStorage && window.localStorage.docker_treeScroll) treeNode.scrollTop = window.localStorage.docker_treeScroll;
+  treeNode.onscroll = treeScrolled;
+
+  // Only set a class to allow CSS transitions after the tree state has been painted
+  setTimeout(function() { document.body.className += ' slidey'; }, 100);
+}
+
+/**
+ * ## treeScrolled
+ *
+ * Called when the tree is scrolled. Stores the scroll position in localStorage
+ * so it can be restored on the next pageview.
+ */
+function treeScrolled() {
+  var tree = document.getElementById('tree');
+  if (window.localStorage) window.localStorage.docker_treeScroll = tree.scrollTop;
+}
+
+/**
+ * ## nodeClicked
+ *
+ * Called when a directory is clicked. Toggles open state of the directory
+ *
+ * @param {Event} e The click event
+ */
+function nodeClicked(e) {
+  // Find the target
+  var t = e.target;
+
+  // If the click target is actually a file (rather than a directory), ignore it
+  if (t.tagName.toLowerCase() !== 'div' || t.className === 'children') return;
+
+  // Recurse upwards until we find the actual directory node
+  while (t && t.className.substring(0, 3) != 'dir') t = t.parentNode;
+
+  // If we're at the root node, then do nothing (we don't allow collapsing of the whole tree)
+  if (!t || t.parentNode.id == 'tree') return;
+
+  // Find the path and toggle the state, saving the state in the localStorage variable
+  var path = t.getAttribute('rel');
+  if (t.className.indexOf('open') !== -1) {
+    t.className = t.className.replace(/\s*open/g, '');
+    if (window.localStorage) window.localStorage.removeItem('docker_openPath:' + path);
+  } else {
+    t.className += ' open';
+    if (window.localStorage) window.localStorage['docker_openPath:' + path] = 'yes';
+  }
+}
+
+
+/**
+ * ## nodeHtml
+ *
+ * Constructs the markup for a directory in the tree
+ *
+ * @param {string} nodename The node name.
+ * @param {object} node Node object of same format as whole tree.
+ * @param {string} path The path form the base to this node
+ * @param {string} root Relative path from current page to root
+ */
+function nodeHtml(nodename, node, path, root) {
+  // Firstly, figure out whether or not the directory is expanded from localStorage
+  var isOpen = window.localStorage && window.localStorage['docker_openPath:' + path] == 'yes';
+  var out = '<div class="dir' + (isOpen ? ' open' : '') + '" rel="' + path + '">';
+  out += '<div class="nodename">' + nodename + '</div>';
+  out += '<div class="children">';
+
+  // Loop through all child directories first
+  if (node.dirs) {
+    var dirs = [];
+    for (var i in node.dirs) {
+      if (node.dirs.hasOwnProperty(i)) dirs.push({ name: i, html: nodeHtml(i, node.dirs[i], path + i + '/', root) });
+    }
+    // Have to store them in an array first and then sort them alphabetically here
+    dirs.sort(function(a, b) { return (a.name > b.name) ? 1 : (a.name == b.name) ? 0 : -1; });
+
+    for (var k = 0; k < dirs.length; k += 1) out += dirs[k].html;
+  }
+
+  // Now loop through all the child files alphabetically
+  if (node.files) {
+    node.files.sort();
+    for (var j = 0; j < node.files.length; j += 1) {
+      out += '<a class="file" href="' + root + path + node.files[j] + '.html">' + node.files[j] + '</a>';
+    }
+  }
+
+  // Close things off
+  out += '</div></div>';
+
+  return out;
+}
+
+/**
+ * ## toggleTree
+ *
+ * Toggles the visibility of the folder tree
+ */
+function toggleTree() {
+  // Do the actual toggling by modifying the class on the body element. That way we can get some nice CSS transitions going.
+  if (sidebarVisible) {
+    document.body.className = document.body.className.replace(/\s*sidebar/g, '');
+    sidebarVisible = false;
+  } else {
+    document.body.className += ' sidebar';
+    sidebarVisible = true;
+  }
+  if (window.localStorage) {
+    if (sidebarVisible) {
+      window.localStorage.docker_showSidebar = 'yes';
+    } else {
+      window.localStorage.docker_showSidebar = 'no';
+    }
+  }
+}
+
+/**
+ * ## wireUpTabs
+ *
+ * Wires up events on the sidebar tabe
+ */
+function wireUpTabs() {
+  var tabEl = document.getElementById('sidebar_switch');
+  var children = tabEl.childNodes;
+
+  // Each tab has a class corresponding of the id of its tab pane
+  for (var i = 0, l = children.length; i < l; i += 1) {
+    // Ignore text nodes
+    if (children[i].nodeType !== 1) continue;
+    children[i].addEventListener('click', function(c) {
+      return function() { switchTab(c); };
+    }(children[i].className));
+  }
+}
+
+/**
+ * ## switchTab
+ *
+ * Switches tabs in the sidebar
+ *
+ * @param {string} tab The ID of the tab to switch to
+ */
+function switchTab(tab) {
+  var tabEl = document.getElementById('sidebar_switch');
+  var children = tabEl.childNodes;
+
+  // Easiest way to go through tabs without any kind of selector is just to look at the tab bar
+  for (var i = 0, l = children.length; i < l; i += 1) {
+    // Ignore text nodes
+    if (children[i].nodeType !== 1) continue;
+
+    // Figure out what tab pane this tab button corresponts to
+    var t = children[i].className.replace(/\s.*$/, '');
+    if (t === tab) {
+      // Show the tab pane, select the tab button
+      document.getElementById(t).style.display = 'block';
+      if (children[i].className.indexOf('selected') === -1) children[i].className += ' selected';
+    } else {
+      // Hide the tab pane, deselect the tab button
+      document.getElementById(t).style.display = 'none';
+      children[i].className = children[i].className.replace(/\sselected/, '');
+    }
+  }
+
+  // Store the last open tab in localStorage
+  if (window.localStorage) window.localStorage.docker_sidebarTab = tab;
+}
+
+/**
+ * ## window.onload
+ *
+ * When the document is ready, make the sidebar and all that jazz
+ */
+(function(init) {
+  if (window.addEventListener) {
+    window.addEventListener('DOMContentLoaded', init);
+  } else { // IE8 and below
+    window.onload = init;
+  }
+}(function() {
+  makeTree(tree, relativeDir, thisFile);
+  wireUpTabs();
+
+  // Switch to the last viewed sidebar tab if stored, otherwise default to folder tree
+  if (window.localStorage && window.localStorage.docker_sidebarTab) {
+    switchTab(window.localStorage.docker_sidebarTab);
+  } else {
+    switchTab('tree');
+  }
+}));