Update notifications.js

resources/assets/js/components/notifications.js

@@ -1,73 +1,162 @@
 $(document).ready(function() {
 
-$('.nav-link.nav-notification').on('click', function(e) {
-	e.preventDefault();
-	let el = $(this);
-	let container = $('.navbar .nav-notification-dropdown');
-	if(pixelfed.notifications) {
-		return;
-	}
-	axios.get('/api/v2/notifications')
-	.then((res) => {
-		$('.nav-notification-dropdown .loader').hide();
-		let data = res.data;
-		data.forEach(function(v, k) {
-			let action = v.action;
-			let notification = $('<li>').addClass('dropdown-item py-3')
-			.attr('style', 'border-bottom: 1px solid #ccc')
-			switch(action) {
-				case 'comment':
-					let avatar = $('<span>')
-					.attr('class', 'notification-icon pr-3');
-					let avatarImg = $('<img>')
-					.attr('width', '32px')
-					.attr('height', '32px')
-					.attr('class', 'rounded-circle')
-					.attr('style', 'border: 1px solid #ccc')
-					.attr('src', v.actor.avatar);
-					avatar = avatar.append(avatarImg);
-
-					let text = $('<span>')
-					.attr('href', v.url)
-					.attr('class', 'font-weight-bold')
-					.html(v.rendered);
-
-					notification.append(avatar);
-					notification.append(text);
-					container.append(notification);
-				break;
-
-				case 'follow':
-					avatar = $('<span>')
-					.attr('class', 'notification-icon pr-3');
-					avatarImg = $('<img>')
-					.attr('width', '32px')
-					.attr('height', '32px')
-					.attr('class', 'rounded-circle')
-					.attr('style', 'border: 1px solid #ccc')
-					.attr('src', v.actor.avatar);
-					avatar = avatar.append(avatarImg);
-
-					text = $('<span>')
-					.attr('href', v.url)
-					.attr('class', 'font-weight-bold')
-					.html(v.rendered);
-
-					notification.append(avatar);
-					notification.append(text);
-					container.append(notification);
-				break;
-			}
+	$('.nav-link.nav-notification').on('click', function(e) {
+		e.preventDefault();
+		let el = $(this);
+		if(el.attr('data-toggle') == 'tooltip') {
+			el.attr('data-toggle', 'dropdown');
+			el.tooltip('dispose');
+		}
+		let container = $('.navbar .nav-notification-dropdown');
+		if(pixelfed.notifications) {
+			return;
+		}
+		axios.get('/api/v2/notifications')
+		.then((res) => {
+			$('.nav-notification-dropdown .loader').hide();
+			let data = res.data;
+			data.forEach(function(v, k) {
+				let action = v.action;
+				let notification = $('<li>').addClass('dropdown-item py-3')
+				if(v.read_at == null) {
+					notification.attr('style', 'border: 1px solid #6cb2eb;background-color: #eff8ff;border-bottom:none;');
+				} else {
+					notification.attr('style', 'border-bottom: 1px solid #ccc;');
+				}
+				switch(action) {
+					case 'comment':
+						let avatar = $('<span>')
+						.attr('class', 'notification-icon pr-3');
+						let avatarImg = $('<img>')
+						.attr('width', '32px')
+						.attr('height', '32px')
+						.attr('class', 'rounded-circle')
+						.attr('style', 'border: 1px solid #ccc')
+						.attr('src', v.actor.avatar);
+						avatar = avatar.append(avatarImg);
+
+						let text = $('<span>')
+						.attr('href', v.url)
+						.attr('class', 'font-weight-bold')
+						.html(v.rendered);
+
+						notification.append(avatar);
+						notification.append(text);
+						container.append(notification);
+					break;
+
+					case 'follow':
+						avatar = $('<span>')
+						.attr('class', 'notification-icon pr-3');
+						avatarImg = $('<img>')
+						.attr('width', '32px')
+						.attr('height', '32px')
+						.attr('class', 'rounded-circle')
+						.attr('style', 'border: 1px solid #ccc')
+						.attr('src', v.actor.avatar);
+						avatar = avatar.append(avatarImg);
+
+						text = $('<span>')
+						.attr('href', v.url)
+						.attr('class', 'font-weight-bold')
+						.html(v.rendered);
+
+						notification.append(avatar);
+						notification.append(text);
+						container.append(notification);
+					break;
+				}
+			});
+			let all = $('<a>')
+			.attr('class', 'dropdown-item py-3 text-center text-primary font-weight-bold')
+			.attr('href', '/account/activity')
+			.attr('style', 'border-top:1px solid #ccc')
+			.text('View all notifications');
+			container.append(all);
+			pixelfed.notifications = true;
+		}).catch((err) => {
+			$('.nav-notification-dropdown .loader').addClass('font-weight-bold').text('Something went wrong. Please try again later.');
 		});
-		let all = $('<a>')
-		.attr('class', 'dropdown-item py-3 text-center text-primary font-weight-bold')
-		.attr('href', '/account/activity')
-		.text('View all notifications');
-		container.append(all);
-		pixelfed.notifications = true;
-	}).catch((err) => {
-		$('.nav-notification-dropdown .loader').addClass('font-weight-bold').text('Something went wrong. Please try again later.');
 	});
-});
+
+	$('.notification-action[data-type="mark_read"]').on('click', function(e) {
+		e.preventDefault();
+
+		axios.post('/api/v2/notifications', {
+			'action': 'mark_read'
+		}).then(res => {
+			pixelfed.notifications = false;
+			ls.del('n.lastCheck');
+			ls.del('n.count');
+			swal(
+				'Success!',
+				'All of your notifications have been marked as read.',
+				'success'
+			);
+		}).catch(err => {
+			swal(
+				'Something went wrong!',
+				'An error occured, please try again later.',
+				'error'
+			);
+		});
+	});
+
+	pixelfed.n.showCount = (count = 1) => {
+		let el = $('.nav-link.nav-notification');
+		el.tooltip('dispose');
+		el.attr('title', count)
+		el.attr('data-toggle', 'tooltip');
+		el.tooltip({
+			template: '<div class="tooltip notification-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-danger px-3"></div></div>'
+		});
+		setTimeout(function() {
+			el.fadeIn(function() {
+				el.tooltip('show')
+			});
+		}, 500);
+	}
+
+	pixelfed.n.sound = () => {
+		let beep = new Audio('/static/beep.mp3');
+		beep.play();
+	}
+
+	pixelfed.n.check = (count) => {
+		pixelfed.n.sound();
+		pixelfed.n.showCount(count);
+	}
+
+	pixelfed.n.fetch = (force = false) => {
+		let now = Date.now();
+		let ts = ls.get('n.lastCheck');
+		let count = ls.get('n.count');
+		let offset = now - 9e5;
+
+		if(ts == null) {
+			ts = now;
+		}
+
+		if(force && count != null || ts > offset) {
+			pixelfed.n.showCount(count);
+			ls.set('n.lastCheck', ts);
+			return;
+		}
+
+		axios.get('/api/v2/notifications')
+		.then(res => {
+			let len = res.data.length;
+			if(len > 0) {
+				ls.set('n.count', len);
+				ls.set('n.lastCheck', ts);
+				pixelfed.n.check(len);
+			}
+		}).catch(err => {
+		})
+	}
+
+	if($('body').hasClass('loggedIn') == true) {
+		pixelfed.n.fetch();
+	}
 
 });