revert line saving techniques resulting in hair loss

panels.js

@@ -1,57 +1,61 @@
 // toggleable tabbed panels
-[].forEach.call(document.getElementsByClassName('tabbed-panels'), function(parent) {
-	var tabs = this('tab', parent);
-	var panels = this('panel', parent);
-	var closeable = parent.classList.contains('closeable');
-	var hovering = parent.classList.contains('hovering');
-	var lastClickedTab = null;
-	var lastClickedTabI = null;
-
-	function tabClick(i) {
-		lastClickedTab = this;
-		lastClickedTabI = i;
-
-		// non-clicked tabs: deactivate
-		tabs.forEach(function(tab) {
-			if (tab != this) tab.classList.remove('active');
-		}, this);
-
-		// clicked tab: if closeable, toggle its active state, otherwise activate
-		var isActive = this.classList[closeable ? 'toggle' : 'add']('active');
-
-		// parent: if not closeable or if a tab is active, activate parent, otherwise deactivate
-		parent.classList[(!closeable || isActive) ? 'add' : 'remove']('active');
-
-		// panels: activate clicked tab's panel, deactivate other panels
-		panels.forEach(function(panel, j) {
-			panel.classList[j === i ? (closeable ? 'toggle' : 'add') : 'remove']('active');
+(function(){
+	// Get descendants of scopeEl with className that have no
+	// .tabbed-panels ancestor which is also a descendant of scopeEl
+	// This is needed to support nesting of tabbed panels.
+	function getElements(className, scopeEl) {
+		return [].filter.call(scopeEl.getElementsByClassName(className), function(child) {
+	        var el = child;
+			while ((el = el.parentNode)) {
+	            if (el === scopeEl) break;
+	            if (el.classList.contains('tabbed-panels')) return false;
+			}
+			return true;
 		});
 	}
 
-	tabs.forEach(function(tab, i) {
-		tab.addEventListener('click', tabClick.bind(tab, i));
-	});
+	[].forEach.call(document.getElementsByClassName('tabbed-panels'), function(parent) {
+		var tabs = getElements('tab', parent);
+		var panels = getElements('panel', parent);
+		var closeable = parent.classList.contains('closeable');
+		var hovering = parent.classList.contains('hovering');
+		var lastClickedTab = null;
+		var lastClickedTabI = null;
+
+		function tabClick(clickedTab, clickedTabI) {
+			// non-clicked tabs: deactivate
+			tabs.forEach(function(tab) {
+				if (tab != clickedTab) tab.classList.remove('active');
+			});
+
+			// clicked tab: if closeable, toggle its active state, otherwise activate
+			var isActive = clickedTab.classList[closeable ? 'toggle' : 'add']('active');
+
+			// parent: if not closeable or if a tab is active, activate parent, otherwise deactivate
+			parent.classList[(!closeable || isActive) ? 'add' : 'remove']('active');
+
+			// panels: activate clicked tab's panel, deactivate other panels
+			panels.forEach(function(panel, panelI) {
+				panel.classList[panelI === clickedTabI ? (closeable ? 'toggle' : 'add') : 'remove']('active');
+			});
+
+			lastClickedTab = clickedTab;
+			lastClickedTabI = clickedTabI;
+		}
 
-	if (closeable && hovering) {
-		window.addEventListener('click', function(e) {
-			if (
-				parent.classList.contains('active') &&
-				(!parent.contains(e.target) || e.target === parent)
-			) {
-				tabClick.call(lastClickedTab, lastClickedTabI);
-			}
+		tabs.forEach(function(tab, i) {
+			tab.addEventListener('click', tabClick.bind(null, tab, i));
 		});
-	}
 
-// Get descendants of scopeEl with className that have no
-// .tabbed-panels ancestor which is also a descendant of scopeEl:
-}, function(className, scopeEl) {
-	return [].filter.call(scopeEl.getElementsByClassName(className), function(child) {
-        var el = child;
-		while ((el = el.parentNode)) {
-            if (el === scopeEl) break;
-            if (el.classList.contains('tabbed-panels')) return false;
+		if (closeable && hovering) {
+			window.addEventListener('click', function(e) {
+				if (
+					parent.classList.contains('active') &&
+					(!parent.contains(e.target) || e.target === parent)
+				) {
+					tabClick(lastClickedTab, lastClickedTabI);
+				}
+			});
 		}
-		return true;
 	});
-});
+})();