Howly mowly! Toggleable menus are now working with cookies

application/views/header.php

@@ -67,8 +67,8 @@
 <?
 	endif;
 ?>
-				<li>
-					<a href="javascript:void(0);" onclick="$(this).parent().toggleClass('active').find('ul').slideToggle();"><?=_('Projects');?></a>
+				<li class="toggleable" id="nav_projects">
+					<a href="javascript:void(0);"><?=_('Projects');?></a>
 					<ul>
 						<li><a href="<?=site_url('projects/create');?>" title="<?=_('Create a new project');?>"><?=_('New project');?></a></li>
 						<li><a href="<?=site_url('projects');?>" title="<?=_('Shows a list of all projects');?>"><?=_('Show projects');?></a></li>
@@ -83,8 +83,8 @@
 		</div>
 		<div class="navigation">
 			<ul>
-				<li>
-					<a href="javascript:void(0);" onclick="$(this).parent().toggleClass('active').find('ul').slideToggle();"><?=_('Own projects')?></a>
+				<li class="toggleable" id="nav_own_projects">
+					<a href="javascript:void(0);"><?=_('Own projects')?></a>
 					<ul>
 <?
 	$projects = $this->project->getOwn();
@@ -96,14 +96,14 @@
 ?>
 					</ul>
 				</li>
-				<li>
-					<a href="javascript:void(0);" onclick="$(this).parent().toggleClass('active').find('ul').slideToggle();"><?=_('Projects shared with me')?></a>
+				<li class="toggleable" id="nav_shared_projects">
+					<a href="javascript:void(0);"><?=_('Projects shared with me')?></a>
 					<ul>
 						<li><a href="#">Prisma</a></li>
 					</ul>
 				</li>
-				<li>
-					<a href="javascript:void(0);" onclick="$(this).parent().toggleClass('active').find('ul').slideToggle();"><?=_('Public projects')?></a>
+				<li class="toggleable" id="nav_public_projects">
+					<a href="javascript:void(0);"><?=_('Public projects')?></a>
 					<ul>
 						<li><a href="#">Beispielprojekt</a></li>
 					</ul>

assets/js/scattport.js

@@ -22,6 +22,81 @@ function deleteConfirm(url) {
 	}
 }
 
+/**
+ * Sets a cookie.
+ *
+ * @param name
+ * @param value
+ * @param days
+ */
+function setCookie(name, value, days) {
+	var today = new Date();
+	var expire = new Date();
+
+	if (days == null || days == 0) {
+		days = 1;
+	}
+	expire.setTime(today.getTime() + 3600000 * 24 * days);
+	document.cookie = name + "=" + escape(value) + ";path=/;expires=" + expire.toGMTString();
+}
+
+/**
+ * Gets a cookie.
+ *
+ * @param name
+ * @returns
+ */
+function getCookie(name) {
+	var cookie = ' ' + document.cookie;
+	var index = cookie.indexOf(" " + name + "=");
+
+	if (index == -1) {
+		index = cookie.indexOf(";" + name + "=");
+	}
+	if (index == -1 || name == '') {
+		return '';
+	}
+
+	var index2 = cookie.indexOf(";", index + 1);
+
+	if (index2 == -1) {
+		index2 = cookie.length;
+	}
+	return unescape(cookie.substring(index + name.length + 2, index2));
+}
+
+/**
+ *
+ * @param cookieName
+ * @returns
+ */
+var CookieList = function(cookieName) {
+	var cookie = getCookie(cookieName);
+	// load the items or a new array if null
+	var items = cookie ? cookie.split(/,/) : new Array();
+
+	return {
+		"add": function(val) {
+			// add to the items
+			items.push(val);
+			// save the items to a cookie
+			setCookie(cookieName, items.join(','));
+		}, "remove": function(val) {
+			// remove the value from items
+			items.splice(items.indexOf(val), 1);
+			// save the items to a cookie
+			setCookie(cookieName, items.join(','));
+		}, "clear": function() {
+			items = null;
+			// clear the cookie
+			setCookie(cookieName, null, null);
+		}, "items": function() {
+			// get all the items
+			return items;
+		}
+	};
+};
+
 /**
  * Saves the changes done by in-place edit.
  *
@@ -207,4 +282,27 @@ $(document).ready(function() {
 			window.location = url;
 		}
 	});
+
+	/*
+	 * Toggleable navigation
+	 */
+	var toggleList = new CookieList("toggled");
+	var toggled = toggleList.items();
+
+	for (var i = 0; i < toggled.length; i++) {
+		$('#' + toggled[i]).toggleClass('active').find('ul').hide();
+	}
+
+	$('.toggleable').find('a').click(function() {
+		var id = $(this).parent().attr('id');
+
+		// toggle
+		$(this).parent().toggleClass('active').find('ul').toggle();
+
+		if ($(this).next().css('display') == 'none') {
+			toggleList.add(id);
+		} else {
+			toggleList.remove(id);
+		}
+	});
 });