|
@@ -0,0 +1,194 @@
|
|
|
+(function (window, document) {
|
|
|
+ "use strict";
|
|
|
+
|
|
|
+ var tabs = {};
|
|
|
+
|
|
|
+ function changeElementClass(element, classValue) {
|
|
|
+ if (element.getAttribute("className")) {
|
|
|
+ element.setAttribute("className", classValue);
|
|
|
+ } else {
|
|
|
+ element.setAttribute("class", classValue);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function getClassAttribute(element) {
|
|
|
+ if (element.getAttribute("className")) {
|
|
|
+ return element.getAttribute("className");
|
|
|
+ } else {
|
|
|
+ return element.getAttribute("class");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function addClass(element, classValue) {
|
|
|
+ changeElementClass(element, getClassAttribute(element) + " " + classValue);
|
|
|
+ }
|
|
|
+
|
|
|
+ function removeClass(element, classValue) {
|
|
|
+ changeElementClass(element, getClassAttribute(element).replace(classValue, ""));
|
|
|
+ }
|
|
|
+
|
|
|
+ function initTabs() {
|
|
|
+ var container = document.getElementById("tabs");
|
|
|
+
|
|
|
+ tabs.tabs = findTabs(container);
|
|
|
+ tabs.titles = findTitles(tabs.tabs);
|
|
|
+ tabs.headers = findHeaders(container);
|
|
|
+ tabs.select = select;
|
|
|
+ tabs.deselectAll = deselectAll;
|
|
|
+ tabs.select(0);
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function getCheckBox() {
|
|
|
+ return document.getElementById("line-wrapping-toggle");
|
|
|
+ }
|
|
|
+
|
|
|
+ function getLabelForCheckBox() {
|
|
|
+ return document.getElementById("label-for-line-wrapping-toggle");
|
|
|
+ }
|
|
|
+
|
|
|
+ function findCodeBlocks() {
|
|
|
+ var spans = document.getElementById("tabs").getElementsByTagName("span");
|
|
|
+ var codeBlocks = [];
|
|
|
+ for (var i = 0; i < spans.length; ++i) {
|
|
|
+ if (spans[i].className.indexOf("code") >= 0) {
|
|
|
+ codeBlocks.push(spans[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return codeBlocks;
|
|
|
+ }
|
|
|
+
|
|
|
+ function forAllCodeBlocks(operation) {
|
|
|
+ var codeBlocks = findCodeBlocks();
|
|
|
+
|
|
|
+ for (var i = 0; i < codeBlocks.length; ++i) {
|
|
|
+ operation(codeBlocks[i], "wrapped");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function toggleLineWrapping() {
|
|
|
+ var checkBox = getCheckBox();
|
|
|
+
|
|
|
+ if (checkBox.checked) {
|
|
|
+ forAllCodeBlocks(addClass);
|
|
|
+ } else {
|
|
|
+ forAllCodeBlocks(removeClass);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function initControls() {
|
|
|
+ if (findCodeBlocks().length > 0) {
|
|
|
+ var checkBox = getCheckBox();
|
|
|
+ var label = getLabelForCheckBox();
|
|
|
+
|
|
|
+ checkBox.onclick = toggleLineWrapping;
|
|
|
+ checkBox.checked = false;
|
|
|
+
|
|
|
+ removeClass(label, "hidden");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function switchTab() {
|
|
|
+ var id = this.id.substr(1);
|
|
|
+
|
|
|
+ for (var i = 0; i < tabs.tabs.length; i++) {
|
|
|
+ if (tabs.tabs[i].id === id) {
|
|
|
+ tabs.select(i);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ function select(i) {
|
|
|
+ this.deselectAll();
|
|
|
+
|
|
|
+ changeElementClass(this.tabs[i], "tab selected");
|
|
|
+ changeElementClass(this.headers[i], "selected");
|
|
|
+
|
|
|
+ while (this.headers[i].firstChild) {
|
|
|
+ this.headers[i].removeChild(this.headers[i].firstChild);
|
|
|
+ }
|
|
|
+
|
|
|
+ var h2 = document.createElement("H2");
|
|
|
+
|
|
|
+ h2.appendChild(document.createTextNode(this.titles[i]));
|
|
|
+ this.headers[i].appendChild(h2);
|
|
|
+ }
|
|
|
+
|
|
|
+ function deselectAll() {
|
|
|
+ for (var i = 0; i < this.tabs.length; i++) {
|
|
|
+ changeElementClass(this.tabs[i], "tab deselected");
|
|
|
+ changeElementClass(this.headers[i], "deselected");
|
|
|
+
|
|
|
+ while (this.headers[i].firstChild) {
|
|
|
+ this.headers[i].removeChild(this.headers[i].firstChild);
|
|
|
+ }
|
|
|
+
|
|
|
+ var a = document.createElement("A");
|
|
|
+
|
|
|
+ a.setAttribute("id", "ltab" + i);
|
|
|
+ a.setAttribute("href", "#tab" + i);
|
|
|
+ a.onclick = switchTab;
|
|
|
+ a.appendChild(document.createTextNode(this.titles[i]));
|
|
|
+
|
|
|
+ this.headers[i].appendChild(a);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function findTabs(container) {
|
|
|
+ return findChildElements(container, "DIV", "tab");
|
|
|
+ }
|
|
|
+
|
|
|
+ function findHeaders(container) {
|
|
|
+ var owner = findChildElements(container, "UL", "tabLinks");
|
|
|
+ return findChildElements(owner[0], "LI", null);
|
|
|
+ }
|
|
|
+
|
|
|
+ function findTitles(tabs) {
|
|
|
+ var titles = [];
|
|
|
+
|
|
|
+ for (var i = 0; i < tabs.length; i++) {
|
|
|
+ var tab = tabs[i];
|
|
|
+ var header = findChildElements(tab, "H2", null)[0];
|
|
|
+
|
|
|
+ header.parentNode.removeChild(header);
|
|
|
+
|
|
|
+ if (header.innerText) {
|
|
|
+ titles.push(header.innerText);
|
|
|
+ } else {
|
|
|
+ titles.push(header.textContent);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return titles;
|
|
|
+ }
|
|
|
+
|
|
|
+ function findChildElements(container, name, targetClass) {
|
|
|
+ var elements = [];
|
|
|
+ var children = container.childNodes;
|
|
|
+
|
|
|
+ for (var i = 0; i < children.length; i++) {
|
|
|
+ var child = children.item(i);
|
|
|
+
|
|
|
+ if (child.nodeType === 1 && child.nodeName === name) {
|
|
|
+ if (targetClass && child.className.indexOf(targetClass) < 0) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+
|
|
|
+ elements.push(child);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return elements;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Entry point.
|
|
|
+
|
|
|
+ window.onload = function() {
|
|
|
+ initTabs();
|
|
|
+ initControls();
|
|
|
+ };
|
|
|
+} (window, window.document));
|