tweaks to notif window to show relative time

public/src/utils.js

@@ -40,28 +40,28 @@
 			});
 		},
 		
-		relativeTime: function(timestamp) {
+		relativeTime: function(timestamp, min) {
 			var	now = +new Date(),
 				difference = now - Math.floor(parseFloat(timestamp));
 
 			difference = Math.floor(difference / 1000);
 			
-			if (difference < 60) return difference + ' second' + (difference !== 1 ? 's' : '');
+			if (difference < 60) return difference + (min ? 's' : ' second') + (difference !== 1 && !min ? 's' : '');
 			
 			difference = Math.floor(difference / 60);
-			if (difference < 60) return difference + ' minute' + (difference !== 1 ? 's' : '');
+			if (difference < 60) return difference + (min ? 'm' : ' minute') + (difference !== 1 && !min ? 's' : '');
 
 			difference = Math.floor(difference / 60);
-			if (difference < 24) return difference + ' hour' + (difference !== 1 ? 's' : '');
+			if (difference < 24) return difference + (min ? 'h' : ' hour') + (difference !== 1 && !min ? 's' : '');
 
 			difference = Math.floor(difference / 24);
-			if (difference < 30) return difference + ' day' + (difference !== 1 ? 's' : '');
+			if (difference < 30) return difference + (min ? 'd' : ' day') + (difference !== 1 && !min ? 's' : '');
 
 			difference = Math.floor(difference / 30);
-			if (difference < 12) return difference + ' month' + (difference !== 1 ? 's' : '');
+			if (difference < 12) return difference + (min ? 'mon' : ' month') + (difference !== 1 && !min ? 's' : '');
 
 			difference = Math.floor(difference / 12);
-			return difference + ' year' + (difference !== 1 ? 's' : '');
+			return difference + (min ? 'y' : ' year') + (difference !== 1 && !min ? 's' : '');
 		},
 		
 		//http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/
@@ -83,7 +83,7 @@
 			return str;
 		},
 
-		// Willingly stolen from: http://phpjs.org/functions/strip_tags/
+		// Blatently stolen from: http://phpjs.org/functions/strip_tags/
 		'strip_tags': function(input, allowed) {
 			allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
 			var	tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,

public/templates/footer.tpl

@@ -102,28 +102,34 @@
 				case 'li': target = e.target; break;
 			}
 			if (target) {
-				var nid = target.getAttribute('data-nid');
-				socket.emit('api:notifications.mark_read', nid);
+				var nid = parseInt(target.getAttribute('data-nid'));
+				if (nid > 0) socket.emit('api:notifications.mark_read', nid);
 			}
 		})
 		socket.on('api:notifications.get', function(data) {
+			console.log(data);
 			var	notifFrag = document.createDocumentFragment(),
 				notifEl = document.createElement('li'),
 				numRead = data.read.length,
 				numUnread = data.unread.length,
 				x;
 			notifList.innerHTML = '';
-			for(x=0;x<numUnread;x++) {
-				notifEl.setAttribute('data-nid', data.unread[x].nid);
-				notifEl.className = 'unread';
-				notifEl.innerHTML = '<a href="' + data.unread[x].path + '"><span class="pull-right">11m</span>' + data.unread[x].text + '</a>';
-				notifFrag.appendChild(notifEl.cloneNode(true));
-			}
-			for(x=0;x<numRead;x++) {
-				notifEl.setAttribute('data-nid', data.read[x].nid);
-				notifEl.className = '';
-				notifEl.innerHTML = '<a href="' + data.read[x].path + '"><span class="pull-right">11m</span>' + data.read[x].text + '</a>';
-				notifFrag.appendChild(notifEl.cloneNode(true));
+			if (data.read.length + data.unread.length > 0) {
+				for(x=0;x<numUnread;x++) {
+					notifEl.setAttribute('data-nid', data.unread[x].nid);
+					notifEl.className = 'unread';
+					notifEl.innerHTML = '<a href="' + data.unread[x].path + '"><span class="pull-right">' + utils.relativeTime(data.unread[x].datetime, true) + '</span>' + data.unread[x].text + '</a>';
+					notifFrag.appendChild(notifEl.cloneNode(true));
+				}
+				for(x=0;x<numRead;x++) {
+					notifEl.setAttribute('data-nid', data.read[x].nid);
+					notifEl.className = '';
+					notifEl.innerHTML = '<a href="' + data.read[x].path + '"><span class="pull-right">' + utils.relativeTime(data.unread[x].datetime, true) + '</span>' + data.read[x].text + '</a>';
+					notifFrag.appendChild(notifEl.cloneNode(true));
+				}
+			} else {
+				notifEl.innerHTML = '<a>You have no notifications</a>';
+				notifFrag.appendChild(notifEl);
 			}
 			notifList.appendChild(notifFrag);
 		});

public/templates/header.tpl

@@ -16,6 +16,7 @@
 	<script type="text/javascript" src="/src/templates.js"></script>
 	<script type="text/javascript" src="/src/ajaxify.js"></script>
 	<script type="text/javascript" src="/src/jquery.form.js"></script>
+	<script type="text/javascript" src="/src/utils.js"></script>
 
 	<link rel="stylesheet" type="text/css" href="/css/style.css" />
 </head>