hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-15 22:13:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

PHRAS-3442_optimize-list-notifications_4.1-bis

Browse Source 
WIP
factorize js
less js in twig
fix "mark as read" in dropdown
fix refresh after read
This commit is contained in:
jygaulier
2021-06-21 17:21:06 +02:00
parent 0c58dd2af2
commit 0305818a6e
6 changed files with 127 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
Phraseanet-production-client/dist/production.js vendored
View File

@@ -18916,13 +18916,14 @@ var notifyLayout = function notifyLayout(services) {
$notificationTrigger.on('mousedown', function (event) { $notificationTrigger.on('mousedown', function (event) {
event.stopPropagation(); event.stopPropagation();
// toggle // toggle
if ($notificationTrigger.hasClass('open')) { //if ($notificationTrigger.hasClass('open')) {
if ((0, _jquery2.default)('#notification_box').is(':visible')) {
$notificationBoxContainer.hide(); $notificationBoxContainer.hide();
$notificationTrigger.removeClass('open'); //$notificationTrigger.removeClass('open');
} else { } else {
$notificationTrigger.addClass('open'); //$notificationTrigger.addClass('open');
$notificationBoxContainer.show(); $notificationBoxContainer.show();
setBoxHeight(); commonModule.fixNotificationsHeight();
} }
}); });
@@ -18931,7 +18932,7 @@ var notifyLayout = function notifyLayout(services) {
*/ */
(0, _jquery2.default)(document).on('mousedown', function () { (0, _jquery2.default)(document).on('mousedown', function () {
$notificationBoxContainer.hide(); $notificationBoxContainer.hide();
$notificationTrigger.removeClass('open'); //$notificationTrigger.removeClass('open');
}); });
$notificationBoxContainer.on('mousedown', function (event) { $notificationBoxContainer.on('mousedown', function (event) {
@@ -18954,42 +18955,10 @@ var notifyLayout = function notifyLayout(services) {
(0, _jquery2.default)(window).bind('resize', function () { (0, _jquery2.default)(window).bind('resize', function () {
setBoxPosition(); setBoxPosition();
}); });
setBoxPosition(); setBoxPosition();
}; };
// const addNotifications = (notificationContent) => {
// // var box = $('#notification_box');
// $notificationBoxContainer.empty().append(notificationContent);
//
// if ($notificationBoxContainer.is(':visible')) {
// setBoxHeight();
// }
//
// if ($('.notification.unread', $notificationBoxContainer).length > 0) {
// $('.counter', $notificationTrigger)
// .empty()
// .append($('.notification.unread', $notificationBoxContainer).length);
// $('.counter', $notificationTrigger).css('visibility', 'visible');
//
// } else {
// $('.notification_trigger .counter').css('visibility', 'hidden').empty();
// }
// };
var setBoxHeight = function setBoxHeight() {
//var box = $('#notification_box');
var not = (0, _jquery2.default)('.notification', $notificationBoxContainer);
var n = not.length;
var not_t = (0, _jquery2.default)('.notification_title', $notificationBoxContainer);
var n_t = not_t.length;
var h = not.outerHeight() * n + not_t.outerHeight() * n_t;
h = h > 350 ? 350 : h;
$notificationBoxContainer.stop().animate({ height: h });
};
var setBoxPosition = function setBoxPosition() { var setBoxPosition = function setBoxPosition() {
if ($notificationTrigger.length > 0) { if ($notificationTrigger.length > 0) {
var leftOffset = Math.round($notificationTrigger.offset().left); var leftOffset = Math.round($notificationTrigger.offset().left);
@@ -19067,8 +19036,7 @@ var notifyLayout = function notifyLayout(services) {
var notifications = data.notifications.notifications; var notifications = data.notifications.notifications;
var i = 0; var i = 0;
for (i in notifications) {
var _loop = function _loop() {
var notification = notifications[i]; var notification = notifications[i];
// group notifs by day // group notifs by day
@@ -19084,14 +19052,10 @@ var notifyLayout = function notifyLayout(services) {
} }
// add pre-formatted notif // add pre-formatted notif
date_cont.append(notification.html); var $z = date_cont.append(notification.html);
(0, _jquery2.default)('.notification_' + notification.id + '_unread', $notifications).tooltip().click(function () { (0, _jquery2.default)('.notification_' + notification.id + '_unread', $z).tooltip().click(notification.id, function (event) {
mark_read(notification.id); mark_read(event.data);
}); });
};
for (i in notifications) {
_loop();
} }
// handle "show more" button // handle "show more" button
@@ -19113,31 +19077,22 @@ var notifyLayout = function notifyLayout(services) {
}; };
var mark_read = function mark_read(notification_id) { var mark_read = function mark_read(notification_id) {
_jquery2.default.ajax({ commonModule.markNotificationRead(notification_id).success(function (data) {
type: 'PATCH', // xhttp ok : update button
url: '/user/notifications/' + notification_id + '/', (0, _jquery2.default)('.notification_' + notification_id + '_unread', $notifications).hide();
data: { (0, _jquery2.default)('.notification_' + notification_id + '_read', $notifications).show();
'read': 1
},
success: function success(data) {
(0, _jquery2.default)('.notification_' + notification_id + '_unread', $notifications).hide();
(0, _jquery2.default)('.notification_' + notification_id + '_read', $notifications).show();
}
}); });
}; };
/* /*
const clear_notifications = () => { const clear_notifications = () => {
var unread = $('#notification_box .unread'); var unread = $('#notification_box .unread');
if (unread.length === 0) {
if (unread.length === 0) {
return; return;
} }
unread.removeClass('unread');
unread.removeClass('unread');
$('.notification_trigger .counter').css('visibility', 'hidden').empty(); $('.notification_trigger .counter').css('visibility', 'hidden').empty();
}; };
*/
*/
return { return {
initialize: initialize initialize: initialize

81
Phraseanet-production-client/dist/production.min.js vendored
View File

@@ -18916,13 +18916,14 @@ var notifyLayout = function notifyLayout(services) {
$notificationTrigger.on('mousedown', function (event) { $notificationTrigger.on('mousedown', function (event) {
event.stopPropagation(); event.stopPropagation();
// toggle // toggle
if ($notificationTrigger.hasClass('open')) { //if ($notificationTrigger.hasClass('open')) {
if ((0, _jquery2.default)('#notification_box').is(':visible')) {
$notificationBoxContainer.hide(); $notificationBoxContainer.hide();
$notificationTrigger.removeClass('open'); //$notificationTrigger.removeClass('open');
} else { } else {
$notificationTrigger.addClass('open'); //$notificationTrigger.addClass('open');
$notificationBoxContainer.show(); $notificationBoxContainer.show();
setBoxHeight(); commonModule.fixNotificationsHeight();
} }
}); });
@@ -18931,7 +18932,7 @@ var notifyLayout = function notifyLayout(services) {
*/ */
(0, _jquery2.default)(document).on('mousedown', function () { (0, _jquery2.default)(document).on('mousedown', function () {
$notificationBoxContainer.hide(); $notificationBoxContainer.hide();
$notificationTrigger.removeClass('open'); //$notificationTrigger.removeClass('open');
}); });
$notificationBoxContainer.on('mousedown', function (event) { $notificationBoxContainer.on('mousedown', function (event) {
@@ -18954,42 +18955,10 @@ var notifyLayout = function notifyLayout(services) {
(0, _jquery2.default)(window).bind('resize', function () { (0, _jquery2.default)(window).bind('resize', function () {
setBoxPosition(); setBoxPosition();
}); });
setBoxPosition(); setBoxPosition();
}; };
// const addNotifications = (notificationContent) => {
// // var box = $('#notification_box');
// $notificationBoxContainer.empty().append(notificationContent);
//
// if ($notificationBoxContainer.is(':visible')) {
// setBoxHeight();
// }
//
// if ($('.notification.unread', $notificationBoxContainer).length > 0) {
// $('.counter', $notificationTrigger)
// .empty()
// .append($('.notification.unread', $notificationBoxContainer).length);
// $('.counter', $notificationTrigger).css('visibility', 'visible');
//
// } else {
// $('.notification_trigger .counter').css('visibility', 'hidden').empty();
// }
// };
var setBoxHeight = function setBoxHeight() {
//var box = $('#notification_box');
var not = (0, _jquery2.default)('.notification', $notificationBoxContainer);
var n = not.length;
var not_t = (0, _jquery2.default)('.notification_title', $notificationBoxContainer);
var n_t = not_t.length;
var h = not.outerHeight() * n + not_t.outerHeight() * n_t;
h = h > 350 ? 350 : h;
$notificationBoxContainer.stop().animate({ height: h });
};
var setBoxPosition = function setBoxPosition() { var setBoxPosition = function setBoxPosition() {
if ($notificationTrigger.length > 0) { if ($notificationTrigger.length > 0) {
var leftOffset = Math.round($notificationTrigger.offset().left); var leftOffset = Math.round($notificationTrigger.offset().left);
@@ -19067,8 +19036,7 @@ var notifyLayout = function notifyLayout(services) {
var notifications = data.notifications.notifications; var notifications = data.notifications.notifications;
var i = 0; var i = 0;
for (i in notifications) {
var _loop = function _loop() {
var notification = notifications[i]; var notification = notifications[i];
// group notifs by day // group notifs by day
@@ -19084,14 +19052,10 @@ var notifyLayout = function notifyLayout(services) {
} }
// add pre-formatted notif // add pre-formatted notif
date_cont.append(notification.html); var $z = date_cont.append(notification.html);
(0, _jquery2.default)('.notification_' + notification.id + '_unread', $notifications).tooltip().click(function () { (0, _jquery2.default)('.notification_' + notification.id + '_unread', $z).tooltip().click(notification.id, function (event) {
mark_read(notification.id); mark_read(event.data);
}); });
};
for (i in notifications) {
_loop();
} }
// handle "show more" button // handle "show more" button
@@ -19113,31 +19077,22 @@ var notifyLayout = function notifyLayout(services) {
}; };
var mark_read = function mark_read(notification_id) { var mark_read = function mark_read(notification_id) {
_jquery2.default.ajax({ commonModule.markNotificationRead(notification_id).success(function (data) {
type: 'PATCH', // xhttp ok : update button
url: '/user/notifications/' + notification_id + '/', (0, _jquery2.default)('.notification_' + notification_id + '_unread', $notifications).hide();
data: { (0, _jquery2.default)('.notification_' + notification_id + '_read', $notifications).show();
'read': 1
},
success: function success(data) {
(0, _jquery2.default)('.notification_' + notification_id + '_unread', $notifications).hide();
(0, _jquery2.default)('.notification_' + notification_id + '_read', $notifications).show();
}
}); });
}; };
/* /*
const clear_notifications = () => { const clear_notifications = () => {
var unread = $('#notification_box .unread'); var unread = $('#notification_box .unread');
if (unread.length === 0) {
if (unread.length === 0) {
return; return;
} }
unread.removeClass('unread');
unread.removeClass('unread');
$('.notification_trigger .counter').css('visibility', 'hidden').empty(); $('.notification_trigger .counter').css('visibility', 'hidden').empty();
}; };
*/
*/
return { return {
initialize: initialize initialize: initialize

76
Phraseanet-production-client/src/components/notify/notifyLayout.js
View File

@@ -20,12 +20,12 @@ const notifyLayout = (services) => {
// toggle // toggle
if ($notificationTrigger.hasClass('open')) { if ($notificationTrigger.hasClass('open')) {
$notificationBoxContainer.hide(); $notificationBoxContainer.hide();
$notificationTrigger.removeClass('open'); $notificationTrigger.removeClass('open'); // revert background in menubar
} }
else { else {
$notificationTrigger.addClass('open'); $notificationTrigger.addClass('open'); // highlight background in menubar
$notificationBoxContainer.show(); $notificationBoxContainer.show();
setBoxHeight(); commonModule.fixNotificationsHeight();
} }
}); });
@@ -60,41 +60,8 @@ const notifyLayout = (services) => {
$(window).bind('resize', function () { $(window).bind('resize', function () {
setBoxPosition(); setBoxPosition();
}); });
setBoxPosition(); setBoxPosition();
};
// const addNotifications = (notificationContent) => {
// // var box = $('#notification_box');
// $notificationBoxContainer.empty().append(notificationContent);
//
// if ($notificationBoxContainer.is(':visible')) {
// setBoxHeight();
// }
//
// if ($('.notification.unread', $notificationBoxContainer).length > 0) {
// $('.counter', $notificationTrigger)
// .empty()
// .append($('.notification.unread', $notificationBoxContainer).length);
// $('.counter', $notificationTrigger).css('visibility', 'visible');
//
// } else {
// $('.notification_trigger .counter').css('visibility', 'hidden').empty();
// }
// };
const setBoxHeight = () => {
//var box = $('#notification_box');
var not = $('.notification', $notificationBoxContainer);
var n = not.length;
var not_t = $('.notification_title', $notificationBoxContainer);
var n_t = not_t.length;
var h = not.outerHeight() * n + not_t.outerHeight() * n_t;
h = h > 350 ? 350 : h;
$notificationBoxContainer.stop().animate({height: h});
}; };
const setBoxPosition = () => { const setBoxPosition = () => {
@@ -193,10 +160,11 @@ const notifyLayout = (services) => {
} }
// add pre-formatted notif // add pre-formatted notif
date_cont.append(notification.html); const $z = date_cont.append(notification.html);
$('.notification_' + notification.id + '_unread', $notifications).tooltip().click( $('.notification_' + notification.id + '_unread', $z).tooltip().click(
function () { notification.id,
mark_read(notification.id); function (event) {
mark_read(event.data);
}); });
} }
@@ -222,31 +190,13 @@ const notifyLayout = (services) => {
}; };
const mark_read = (notification_id) => { const mark_read = (notification_id) => {
$.ajax({ commonModule.markNotificationRead(notification_id,)
type: 'PATCH', .success(function (data) {
url: '/user/notifications/' + notification_id + '/', // xhttp ok : update button
data: {
'read': 1
},
success: function (data) {
$('.notification_' + notification_id + '_unread', $notifications).hide(); $('.notification_' + notification_id + '_unread', $notifications).hide();
$('.notification_' + notification_id + '_read', $notifications).show(); $('.notification_' + notification_id + '_read', $notifications).show();
} })
});
}; };
/*
const clear_notifications = () => {
var unread = $('#notification_box .unread');
if (unread.length === 0) {
return;
}
unread.removeClass('unread');
$('.notification_trigger .counter').css('visibility', 'hidden').empty();
};
*/
return { return {
initialize initialize

0
cache/.gitkeep vendored
View File

87
resources/www/common/js/components/common.js
View File

@@ -114,12 +114,70 @@ var commonModule = (function ($, p4) {
}).dialog('open').css({'overflow-x': 'auto', 'overflow-y': 'hidden', 'padding': '0'}); }).dialog('open').css({'overflow-x': 'auto', 'overflow-y': 'hidden', 'padding': '0'});
} }
/**
* pool notifications on route /user/notifications
*
* @param update // bool to refresh the counter/dropdown
* @param recurse // bool to re-run recursively (used by menubar)
*/
function pollNotifications(update, recurse) {
$.ajax({
type: "GET",
url: "/user/notifications/",
dataType: 'json',
data: {
'offset': 0,
'limit': 10,
'what': 2, // 2 : only unread
},
headers: {
'update-session': '0' // polling should not maintain the session alive
// also : use lowercase as recomended / normalized
},
error: function (data) {
if(data.getResponseHeader('x-phraseanet-end-session')) {
self.location.replace(self.location.href); // refresh will redirect to login
}
},
timeout: function () {
if(recurse) {
window.setTimeout(function() { pollNotifications(update, recurse); }, 10000);
}
},
success: function (data) {
// there is no notification bar nor a basket notification if not on prod module
if (update) {
updateNotifications(data);
}
if(recurse) {
window.setTimeout(function() { pollNotifications(update, recurse); }, 30000);
}
}
})
}
/**
* mark a notification as read
*
* @param notification_id
* @returns {*} // ajax promise, so the caller can add his own post-process
*/
function markNotificationRead(notification_id) {
return $.ajax({
type: 'PATCH',
url: '/user/notifications/' + notification_id + '/',
data: {
'read': 1
},
success: function () {
// update the counter & dropdown
pollNotifications(true, false); // true:update ; false : do not recurse
}
});
}
function updateNotifications(data) function updateNotifications(data)
{ {
if (data.status == 'disconnected' || data.status == 'session') {
self.location.replace(self.location.href);
}
// add notification in bar // add notification in bar
// fill the dropdown with pre-formatted notifs (10 unread) // fill the dropdown with pre-formatted notifs (10 unread)
@@ -130,27 +188,26 @@ var commonModule = (function ($, p4) {
$box_notifications.empty(); $box_notifications.empty();
if(data.notifications.notifications.length === 0) { if(data.notifications.notifications.length === 0) {
// no notification // no notification
$('.show_all', $box).hide(); // $('.show_all', $box).hide(); // the "show in dlg" is alway visible since it's the only way to see already read notifs.
$('.no_notifications', $box).show(); $('.no_notifications', $box).show();
} }
else { else {
$('.no_notifications', $box).hide(); $('.no_notifications', $box).hide();
for (var n in data.notifications.notifications) { for (var n in data.notifications.notifications) {
var notification = data.notifications.notifications[n]; var notification = data.notifications.notifications[n];
$box_notifications.append(notification.html); var $z = $box_notifications.append(notification.html);
$('.notification_' + notification.id + '_read', $box_notifications).click( $('.notification_' + notification.id + '_unread', $z).click(
notification.id,
function (event) { function (event) {
console.log("++++++++++ clicked("+notification.id+")") markNotificationRead(event.data);
}); });
} }
$('.show_all', $box).show(); // $('.show_all', $box).show();
} }
if ($box.is(':visible')) { if ($box.is(':visible')) {
fix_notification_height(); // duplicated, better call notifyLayout.setBoxHeight(); fixNotificationsHeight();
} }
// fill the count of uread (red button) // fill the count of uread (red button)
@@ -235,7 +292,7 @@ var commonModule = (function ($, p4) {
/** /**
* duplicated from production_client::notifyLayout.js * duplicated from production_client::notifyLayout.js
*/ */
function fix_notification_height() { function fixNotificationsHeight() {
const $notificationBoxContainer = $('#notification_box'); const $notificationBoxContainer = $('#notification_box');
const not = $('.notification', $notificationBoxContainer); const not = $('.notification', $notificationBoxContainer);
const n = not.length; const n = not.length;
@@ -251,7 +308,9 @@ var commonModule = (function ($, p4) {
return { return {
showOverlay: showOverlay, showOverlay: showOverlay,
hideOverlay: hideOverlay, hideOverlay: hideOverlay,
updateNotifications: updateNotifications markNotificationRead: markNotificationRead,
pollNotifications: pollNotifications,
fixNotificationsHeight: fixNotificationsHeight
} }
})(jQuery, p4); })(jQuery, p4);

41
templates/web/common/menubar.html.twig
View File

@@ -415,42 +415,11 @@
} }
}); });
}); });
/**manage session and redirect to login page**/
// var usrId = '{{ app.getAuthenticator().user.getId }}' ; /**manage session and redirect to login page**/
var module = '{{ module }}'; var module = '{{ module }}';
function pollNotifications() { // start pooling recursively
$.ajax({ window.setTimeout( function() { commonModule.pollNotifications(module === 'prod', true); }, 2000);
type: "GET",
url: "/user/notifications/",
dataType: 'json',
data: {
'offset': 0,
'limit': 10,
'what': 2, // 2 : only unread
},
headers: {
'update-session': '0' // polling should not maintain the session alive
// also : use lowercase as recomended / normalized
},
error: function (data) {
if(data.getResponseHeader('x-phraseanet-end-session')) {
// self.location.replace(self.location.href); // refresh will redirect to login
console.log("======= GO HOME ======");
}
},
timeout: function () {
window.setTimeout("pollNotifications();", 10000);
},
success: function (data) {
// there is no notification bar nor a basket notification if not on prod module
if (module === 'prod' && data) {
commonModule.updateNotifications(data);
}
window.setTimeout("pollNotifications();", 30000);
}
});
}
window.setTimeout("pollNotifications();", 2000);
</script> </script>