Option sections are now collapsable

CookieMonster.js

@@ -510,7 +510,7 @@ CM.LoadConfig = function() {
 		if (mod) CM.SaveConfig(CM.Config);
 		CM.Loop(); // Do loop once
 		for (var i in CM.ConfigDefault) {
-			if (i != 'StatsPref' && typeof CM.ConfigData[i].func !== 'undefined') {
+			if (i != 'StatsPref' && i != 'MenuPref' && typeof CM.ConfigData[i].func !== 'undefined') {
 				CM.ConfigData[i].func();
 			}
 		}
@@ -573,6 +573,16 @@ CM.ToggleStatsConfig = function(config) {
 	CM.SaveConfig(CM.Config);
 }
 
+CM.ToggleMenuConfig = function(config) {
+	if (CM.Config.MenuPref[config] == 0) {
+		CM.Config.MenuPref[config]++;
+	}
+	else {
+		CM.Config.MenuPref[config]--;
+	}
+	CM.SaveConfig(CM.Config);
+}
+
 // Checks if the browsers has permissions to produce notifications
 // Should be triggered when Config related to Notifications is toggled on
 CM.CheckNotificationPermissions = function(ToggleOnOff) {
@@ -1917,14 +1927,28 @@ CM.Disp.CreateTooltip = function(placeholder, text, minWidth) {
 }
 
 CM.Disp.AddMenuPref = function(title) {
-	var header = function(text) {
+	var header = function(text, config) {
 		var div = document.createElement('div');
 		div.className = 'listing';
 		div.style.padding = '5px 16px';
 		div.style.opacity = '0.7';
 		div.style.fontSize = '17px';
 		div.style.fontFamily = '\"Kavoon\", Georgia, serif';
-		div.textContent = text;
+		div.appendChild(document.createTextNode(text + ' '));
+		var span = document.createElement('span');
+		span.style.cursor = 'pointer';
+		span.style.display = 'inline-block';
+		span.style.height = '14px';
+		span.style.width = '14px';
+		span.style.borderRadius = '7px';
+		span.style.textAlign = 'center';
+		span.style.backgroundColor = '#C0C0C0';
+		span.style.color = 'black';
+		span.style.fontSize = '13px';
+		span.style.verticalAlign = 'middle';
+		span.textContent = CM.Config.MenuPref[config] ? '-' : '+';
+		span.onclick = function() {CM.ToggleMenuConfig(config); Game.UpdateMenu();};
+		div.appendChild(span);
 		return div;
 	}
 
@@ -2008,7 +2032,8 @@ CM.Disp.AddMenuPref = function(title) {
 		return div;
 	}
 
-	frag.appendChild(header('Bars/Colors'));
+	frag.appendChild(header('Bars/Colors', 'BarsColors'));
+	if (CM.Config.MenuPref.BarsColors) {
 		frag.appendChild(listing('BotBar'));
 		frag.appendChild(listing('TimerBar'));
 		frag.appendChild(listing('TimerBarPos'));
@@ -2035,15 +2060,19 @@ CM.Disp.AddMenuPref = function(title) {
 			frag.appendChild(div);
 		}
 		frag.appendChild(listing('UpgradeBarFixedPos'));
+	}
 
-	frag.appendChild(header('Calculation'));
+	frag.appendChild(header('Calculation', 'Calculation'));
+	if (CM.Config.MenuPref.Calculation) {
 		frag.appendChild(listing('CalcWrink'));
 		frag.appendChild(listing('CPSMode'));
 		frag.appendChild(listing('AvgCPSHist'));
 		frag.appendChild(listing('AvgClicksHist'));
 		frag.appendChild(listing('ToolWarnBon'));
+	}
 
-	frag.appendChild(header('Notification'));
+	frag.appendChild(header('Notification', 'Notification'));
+	if (CM.Config.MenuPref.Notification) {
 		frag.appendChild(listing('GCNotification'));
 		frag.appendChild(listing('GCFlash'));
 		frag.appendChild(listing('GCSound'));
@@ -2081,8 +2110,10 @@ CM.Disp.AddMenuPref = function(title) {
 		frag.appendChild(vol('WrinklerMaxVolume'));
 		frag.appendChild(url('WrinklerMaxSoundURL'));
 		frag.appendChild(listing('Title'));
+	}
 
-	frag.appendChild(header('Tooltip'));
+	frag.appendChild(header('Tooltip', 'Tooltip'));
+	if (CM.Config.MenuPref.Tooltip) {
 		frag.appendChild(listing('TooltipBuildUp'));
 		frag.appendChild(listing('TooltipAmor'));
 		frag.appendChild(listing('ToolWarnLucky'));
@@ -2091,15 +2122,19 @@ CM.Disp.AddMenuPref = function(title) {
 		frag.appendChild(listing('TooltipGrim'));
 		frag.appendChild(listing('ToolWrink'));
 		frag.appendChild(listing('TooltipLump'));
+	}
 
-	frag.appendChild(header('Statistics'));
+	frag.appendChild(header('Statistics', 'Statistics'));
+	if (CM.Config.MenuPref.Statistics) {
 		frag.appendChild(listing('Stats'));
 		frag.appendChild(listing('UpStats'));
 		frag.appendChild(listing('TimeFormat'));
 		frag.appendChild(listing('SayTime'));
 		frag.appendChild(listing('GrimoireBar'));
+	}
 
-	frag.appendChild(header('Other'));
+	frag.appendChild(header('Other', 'Other'));
+	if (CM.Config.MenuPref.Other) {
 		frag.appendChild(listing('Scale'));
 		var resDef = document.createElement('div');
 		resDef.className = 'listing';
@@ -2109,6 +2144,7 @@ CM.Disp.AddMenuPref = function(title) {
 		resDefBut.textContent = 'Restore Default';
 		resDef.appendChild(resDefBut);
 		frag.appendChild(resDef);
+	}
 
 	l('menu').childNodes[2].insertBefore(frag, l('menu').childNodes[2].childNodes[l('menu').childNodes[2].childNodes.length - 1]);
 
@@ -3515,6 +3551,7 @@ CM.ConfigDefault = {
 	SayTime: 1, 
 	GrimoireBar: 1, 
 	Scale: 2, 
+	MenuPref: {BarsColors: 1, Calculation: 1, Notification: 1, Tooltip: 1, Statistics: 1, Other: 1}, 
 	StatsPref: {Lucky: 1, Conjure: 1, Chain: 1, Prestige: 1, Wrink: 1, Sea: 1, Misc: 1}, 
 	Colors : {Blue: '#4bb8f0', Green: '#00ff00', Yellow: '#ffff00', Orange: '#ff7f00', Red: '#ff0000', Purple: '#ff00ff', Gray: '#b3b3b3', Pink: '#ff1493', Brown: '#8b4513'},
 	SortBuildings: 0,

src/Config.js

@@ -51,7 +51,7 @@ CM.LoadConfig = function() {
 		if (mod) CM.SaveConfig(CM.Config);
 		CM.Loop(); // Do loop once
 		for (var i in CM.ConfigDefault) {
-			if (i != 'StatsPref' && typeof CM.ConfigData[i].func !== 'undefined') {
+			if (i != 'StatsPref' && i != 'MenuPref' && typeof CM.ConfigData[i].func !== 'undefined') {
 				CM.ConfigData[i].func();
 			}
 		}
@@ -114,6 +114,16 @@ CM.ToggleStatsConfig = function(config) {
 	CM.SaveConfig(CM.Config);
 }
 
+CM.ToggleMenuConfig = function(config) {
+	if (CM.Config.MenuPref[config] == 0) {
+		CM.Config.MenuPref[config]++;
+	}
+	else {
+		CM.Config.MenuPref[config]--;
+	}
+	CM.SaveConfig(CM.Config);
+}
+
 // Checks if the browsers has permissions to produce notifications
 // Should be triggered when Config related to Notifications is toggled on
 CM.CheckNotificationPermissions = function(ToggleOnOff) {

src/Disp.js

@@ -1179,14 +1179,28 @@ CM.Disp.CreateTooltip = function(placeholder, text, minWidth) {
 }
 
 CM.Disp.AddMenuPref = function(title) {
-	var header = function(text) {
+	var header = function(text, config) {
 		var div = document.createElement('div');
 		div.className = 'listing';
 		div.style.padding = '5px 16px';
 		div.style.opacity = '0.7';
 		div.style.fontSize = '17px';
 		div.style.fontFamily = '\"Kavoon\", Georgia, serif';
-		div.textContent = text;
+		div.appendChild(document.createTextNode(text + ' '));
+		var span = document.createElement('span');
+		span.style.cursor = 'pointer';
+		span.style.display = 'inline-block';
+		span.style.height = '14px';
+		span.style.width = '14px';
+		span.style.borderRadius = '7px';
+		span.style.textAlign = 'center';
+		span.style.backgroundColor = '#C0C0C0';
+		span.style.color = 'black';
+		span.style.fontSize = '13px';
+		span.style.verticalAlign = 'middle';
+		span.textContent = CM.Config.MenuPref[config] ? '-' : '+';
+		span.onclick = function() {CM.ToggleMenuConfig(config); Game.UpdateMenu();};
+		div.appendChild(span);
 		return div;
 	}
 
@@ -1270,7 +1284,8 @@ CM.Disp.AddMenuPref = function(title) {
 		return div;
 	}
 
-	frag.appendChild(header('Bars/Colors'));
+	frag.appendChild(header('Bars/Colors', 'BarsColors'));
+	if (CM.Config.MenuPref.BarsColors) {
 		frag.appendChild(listing('BotBar'));
 		frag.appendChild(listing('TimerBar'));
 		frag.appendChild(listing('TimerBarPos'));
@@ -1297,15 +1312,19 @@ CM.Disp.AddMenuPref = function(title) {
 			frag.appendChild(div);
 		}
 		frag.appendChild(listing('UpgradeBarFixedPos'));
+	}
 
-	frag.appendChild(header('Calculation'));
+	frag.appendChild(header('Calculation', 'Calculation'));
+	if (CM.Config.MenuPref.Calculation) {
 		frag.appendChild(listing('CalcWrink'));
 		frag.appendChild(listing('CPSMode'));
 		frag.appendChild(listing('AvgCPSHist'));
 		frag.appendChild(listing('AvgClicksHist'));
 		frag.appendChild(listing('ToolWarnBon'));
+	}
 
-	frag.appendChild(header('Notification'));
+	frag.appendChild(header('Notification', 'Notification'));
+	if (CM.Config.MenuPref.Notification) {
 		frag.appendChild(listing('GCNotification'));
 		frag.appendChild(listing('GCFlash'));
 		frag.appendChild(listing('GCSound'));
@@ -1343,8 +1362,10 @@ CM.Disp.AddMenuPref = function(title) {
 		frag.appendChild(vol('WrinklerMaxVolume'));
 		frag.appendChild(url('WrinklerMaxSoundURL'));
 		frag.appendChild(listing('Title'));
+	}
 
-	frag.appendChild(header('Tooltip'));
+	frag.appendChild(header('Tooltip', 'Tooltip'));
+	if (CM.Config.MenuPref.Tooltip) {
 		frag.appendChild(listing('TooltipBuildUp'));
 		frag.appendChild(listing('TooltipAmor'));
 		frag.appendChild(listing('ToolWarnLucky'));
@@ -1353,15 +1374,19 @@ CM.Disp.AddMenuPref = function(title) {
 		frag.appendChild(listing('TooltipGrim'));
 		frag.appendChild(listing('ToolWrink'));
 		frag.appendChild(listing('TooltipLump'));
+	}
 
-	frag.appendChild(header('Statistics'));
+	frag.appendChild(header('Statistics', 'Statistics'));
+	if (CM.Config.MenuPref.Statistics) {
 		frag.appendChild(listing('Stats'));
 		frag.appendChild(listing('UpStats'));
 		frag.appendChild(listing('TimeFormat'));
 		frag.appendChild(listing('SayTime'));
 		frag.appendChild(listing('GrimoireBar'));
+	}
 
-	frag.appendChild(header('Other'));
+	frag.appendChild(header('Other', 'Other'));
+	if (CM.Config.MenuPref.Other) {
 		frag.appendChild(listing('Scale'));
 		var resDef = document.createElement('div');
 		resDef.className = 'listing';
@@ -1371,6 +1396,7 @@ CM.Disp.AddMenuPref = function(title) {
 		resDefBut.textContent = 'Restore Default';
 		resDef.appendChild(resDefBut);
 		frag.appendChild(resDef);
+	}
 
 	l('menu').childNodes[2].insertBefore(frag, l('menu').childNodes[2].childNodes[l('menu').childNodes[2].childNodes.length - 1]);
 

src/Main.js

@@ -323,6 +323,7 @@ CM.ConfigDefault = {
 	SayTime: 1, 
 	GrimoireBar: 1, 
 	Scale: 2, 
+	MenuPref: {BarsColors: 1, Calculation: 1, Notification: 1, Tooltip: 1, Statistics: 1, Other: 1}, 
 	StatsPref: {Lucky: 1, Conjure: 1, Chain: 1, Prestige: 1, Wrink: 1, Sea: 1, Misc: 1}, 
 	Colors : {Blue: '#4bb8f0', Green: '#00ff00', Yellow: '#ffff00', Orange: '#ff7f00', Red: '#ff0000', Purple: '#ff00ff', Gray: '#b3b3b3', Pink: '#ff1493', Brown: '#8b4513'},
 	SortBuildings: 0,