From 918d377d5b2e9468ee0c35e95bb2c90541cdcfb5 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Mon, 12 Nov 2018 21:49:10 -0700 Subject: [PATCH] Update notifications.js --- .../assets/js/components/notifications.js | 213 +++++++++++++----- 1 file changed, 151 insertions(+), 62 deletions(-) diff --git a/resources/assets/js/components/notifications.js b/resources/assets/js/components/notifications.js index 3cf409259..44e65733f 100644 --- a/resources/assets/js/components/notifications.js +++ b/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 = $('
  • ').addClass('dropdown-item py-3') - .attr('style', 'border-bottom: 1px solid #ccc') - switch(action) { - case 'comment': - let avatar = $('') - .attr('class', 'notification-icon pr-3'); - let avatarImg = $('') - .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); + $('.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 = $('
  • ').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 = $('') + .attr('class', 'notification-icon pr-3'); + let avatarImg = $('') + .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 = $('') - .attr('href', v.url) - .attr('class', 'font-weight-bold') - .html(v.rendered); + let text = $('') + .attr('href', v.url) + .attr('class', 'font-weight-bold') + .html(v.rendered); - notification.append(avatar); - notification.append(text); - container.append(notification); - break; + notification.append(avatar); + notification.append(text); + container.append(notification); + break; - case 'follow': - avatar = $('') - .attr('class', 'notification-icon pr-3'); - avatarImg = $('') - .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); + case 'follow': + avatar = $('') + .attr('class', 'notification-icon pr-3'); + avatarImg = $('') + .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 = $('') - .attr('href', v.url) - .attr('class', 'font-weight-bold') - .html(v.rendered); + text = $('') + .attr('href', v.url) + .attr('class', 'font-weight-bold') + .html(v.rendered); - notification.append(avatar); - notification.append(text); - container.append(notification); - break; - } + notification.append(avatar); + notification.append(text); + container.append(notification); + break; + } + }); + let all = $('') + .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 = $('') - .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: '' + }); + 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(); + } }); \ No newline at end of file