mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-26 16:23:16 +00:00
Update notifications.js
This commit is contained in:
Daniel Supernault
parent
88de69ce72
commit
918d377d5b
1 changed files with 151 additions and 62 deletions
213
resources/assets/js/components/notifications.js
vendored
213
resources/assets/js/components/notifications.js
vendored
|
|
@ -1,73 +1,162 @@
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$('.nav-link.nav-notification').on('click', function(e) {
|
$('.nav-link.nav-notification').on('click', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
let el = $(this);
|
let el = $(this);
|
||||||
let container = $('.navbar .nav-notification-dropdown');
|
if(el.attr('data-toggle') == 'tooltip') {
|
||||||
if(pixelfed.notifications) {
|
el.attr('data-toggle', 'dropdown');
|
||||||
return;
|
el.tooltip('dispose');
|
||||||
}
|
}
|
||||||
axios.get('/api/v2/notifications')
|
let container = $('.navbar .nav-notification-dropdown');
|
||||||
.then((res) => {
|
if(pixelfed.notifications) {
|
||||||
$('.nav-notification-dropdown .loader').hide();
|
return;
|
||||||
let data = res.data;
|
}
|
||||||
data.forEach(function(v, k) {
|
axios.get('/api/v2/notifications')
|
||||||
let action = v.action;
|
.then((res) => {
|
||||||
let notification = $('<li>').addClass('dropdown-item py-3')
|
$('.nav-notification-dropdown .loader').hide();
|
||||||
.attr('style', 'border-bottom: 1px solid #ccc')
|
let data = res.data;
|
||||||
switch(action) {
|
data.forEach(function(v, k) {
|
||||||
case 'comment':
|
let action = v.action;
|
||||||
let avatar = $('<span>')
|
let notification = $('<li>').addClass('dropdown-item py-3')
|
||||||
.attr('class', 'notification-icon pr-3');
|
if(v.read_at == null) {
|
||||||
let avatarImg = $('<img>')
|
notification.attr('style', 'border: 1px solid #6cb2eb;background-color: #eff8ff;border-bottom:none;');
|
||||||
.attr('width', '32px')
|
} else {
|
||||||
.attr('height', '32px')
|
notification.attr('style', 'border-bottom: 1px solid #ccc;');
|
||||||
.attr('class', 'rounded-circle')
|
}
|
||||||
.attr('style', 'border: 1px solid #ccc')
|
switch(action) {
|
||||||
.attr('src', v.actor.avatar);
|
case 'comment':
|
||||||
avatar = avatar.append(avatarImg);
|
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>')
|
let text = $('<span>')
|
||||||
.attr('href', v.url)
|
.attr('href', v.url)
|
||||||
.attr('class', 'font-weight-bold')
|
.attr('class', 'font-weight-bold')
|
||||||
.html(v.rendered);
|
.html(v.rendered);
|
||||||
|
|
||||||
notification.append(avatar);
|
notification.append(avatar);
|
||||||
notification.append(text);
|
notification.append(text);
|
||||||
container.append(notification);
|
container.append(notification);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'follow':
|
case 'follow':
|
||||||
avatar = $('<span>')
|
avatar = $('<span>')
|
||||||
.attr('class', 'notification-icon pr-3');
|
.attr('class', 'notification-icon pr-3');
|
||||||
avatarImg = $('<img>')
|
avatarImg = $('<img>')
|
||||||
.attr('width', '32px')
|
.attr('width', '32px')
|
||||||
.attr('height', '32px')
|
.attr('height', '32px')
|
||||||
.attr('class', 'rounded-circle')
|
.attr('class', 'rounded-circle')
|
||||||
.attr('style', 'border: 1px solid #ccc')
|
.attr('style', 'border: 1px solid #ccc')
|
||||||
.attr('src', v.actor.avatar);
|
.attr('src', v.actor.avatar);
|
||||||
avatar = avatar.append(avatarImg);
|
avatar = avatar.append(avatarImg);
|
||||||
|
|
||||||
text = $('<span>')
|
text = $('<span>')
|
||||||
.attr('href', v.url)
|
.attr('href', v.url)
|
||||||
.attr('class', 'font-weight-bold')
|
.attr('class', 'font-weight-bold')
|
||||||
.html(v.rendered);
|
.html(v.rendered);
|
||||||
|
|
||||||
notification.append(avatar);
|
notification.append(avatar);
|
||||||
notification.append(text);
|
notification.append(text);
|
||||||
container.append(notification);
|
container.append(notification);
|
||||||
break;
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
Loading…
Reference in a new issue