Update notifications.js

resources/assets/js/components/notifications.js

@@ -3,6 +3,10 @@ $(document).ready(function() {
 	$('.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;
@@ -14,7 +18,11 @@ $('.nav-link.nav-notification').on('click', function(e) {
 			data.forEach(function(v, k) {
 				let action = v.action;
 				let notification = $('<li>').addClass('dropdown-item py-3')
-			.attr('style', 'border-bottom: 1px solid #ccc')
+				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>')
@@ -62,6 +70,7 @@ $('.nav-link.nav-notification').on('click', function(e) {
 			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;
@@ -70,4 +79,84 @@ $('.nav-link.nav-notification').on('click', function(e) {
 		});
 	});
 
+	$('.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();
+	}
+
 });