hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-15 05:53: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

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

@@ -18916,13 +18916,14 @@ var notifyLayout = function notifyLayout(services) {
$notificationTrigger.on('mousedown', function (event) {
event.stopPropagation();
// toggle
if ($notificationTrigger.hasClass('open')) {
//if ($notificationTrigger.hasClass('open')) {
if ((0, _jquery2.default)('#notification_box').is(':visible')) {
$notificationBoxContainer.hide();
$notificationTrigger.removeClass('open');
//$notificationTrigger.removeClass('open');
} else {
$notificationTrigger.addClass('open');
//$notificationTrigger.addClass('open');
$notificationBoxContainer.show();
setBoxHeight();
commonModule.fixNotificationsHeight();
}
});
@@ -18931,7 +18932,7 @@ var notifyLayout = function notifyLayout(services) {
*/
(0, _jquery2.default)(document).on('mousedown', function () {
$notificationBoxContainer.hide();
$notificationTrigger.removeClass('open');
//$notificationTrigger.removeClass('open');
});
$notificationBoxContainer.on('mousedown', function (event) {
@@ -18954,42 +18955,10 @@ var notifyLayout = function notifyLayout(services) {
(0, _jquery2.default)(window).bind('resize', function () {
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() {
if ($notificationTrigger.length > 0) {
var leftOffset = Math.round($notificationTrigger.offset().left);
@@ -19067,8 +19036,7 @@ var notifyLayout = function notifyLayout(services) {
var notifications = data.notifications.notifications;
var i = 0;
var _loop = function _loop() {
for (i in notifications) {
var notification = notifications[i];
// group notifs by day
@@ -19084,14 +19052,10 @@ var notifyLayout = function notifyLayout(services) {
}
// add pre-formatted notif
date_cont.append(notification.html);
(0, _jquery2.default)('.notification_' + notification.id + '_unread', $notifications).tooltip().click(function () {
mark_read(notification.id);
var $z = date_cont.append(notification.html);
(0, _jquery2.default)('.notification_' + notification.id + '_unread', $z).tooltip().click(notification.id, function (event) {
mark_read(event.data);
});
};
for (i in notifications) {
_loop();
}
// handle "show more" button
@@ -19113,30 +19077,21 @@ var notifyLayout = function notifyLayout(services) {
};
var mark_read = function mark_read(notification_id) {
_jquery2.default.ajax({
type: 'PATCH',
url: '/user/notifications/' + notification_id + '/',
data: {
'read': 1
},
success: function success(data) {
commonModule.markNotificationRead(notification_id).success(function (data) {
// xhttp ok : update button
(0, _jquery2.default)('.notification_' + notification_id + '_unread', $notifications).hide();
(0, _jquery2.default)('.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 {

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

@@ -18916,13 +18916,14 @@ var notifyLayout = function notifyLayout(services) {
$notificationTrigger.on('mousedown', function (event) {
event.stopPropagation();
// toggle
if ($notificationTrigger.hasClass('open')) {
//if ($notificationTrigger.hasClass('open')) {
if ((0, _jquery2.default)('#notification_box').is(':visible')) {
$notificationBoxContainer.hide();
$notificationTrigger.removeClass('open');
//$notificationTrigger.removeClass('open');
} else {
$notificationTrigger.addClass('open');
//$notificationTrigger.addClass('open');
$notificationBoxContainer.show();
setBoxHeight();
commonModule.fixNotificationsHeight();
}
});
@@ -18931,7 +18932,7 @@ var notifyLayout = function notifyLayout(services) {
*/
(0, _jquery2.default)(document).on('mousedown', function () {
$notificationBoxContainer.hide();
$notificationTrigger.removeClass('open');
//$notificationTrigger.removeClass('open');
});
$notificationBoxContainer.on('mousedown', function (event) {
@@ -18954,42 +18955,10 @@ var notifyLayout = function notifyLayout(services) {
(0, _jquery2.default)(window).bind('resize', function () {
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() {
if ($notificationTrigger.length > 0) {
var leftOffset = Math.round($notificationTrigger.offset().left);
@@ -19067,8 +19036,7 @@ var notifyLayout = function notifyLayout(services) {
var notifications = data.notifications.notifications;
var i = 0;
var _loop = function _loop() {
for (i in notifications) {
var notification = notifications[i];
// group notifs by day
@@ -19084,14 +19052,10 @@ var notifyLayout = function notifyLayout(services) {
}
// add pre-formatted notif
date_cont.append(notification.html);
(0, _jquery2.default)('.notification_' + notification.id + '_unread', $notifications).tooltip().click(function () {
mark_read(notification.id);
var $z = date_cont.append(notification.html);
(0, _jquery2.default)('.notification_' + notification.id + '_unread', $z).tooltip().click(notification.id, function (event) {
mark_read(event.data);
});
};
for (i in notifications) {
_loop();
}
// handle "show more" button
@@ -19113,30 +19077,21 @@ var notifyLayout = function notifyLayout(services) {
};
var mark_read = function mark_read(notification_id) {
_jquery2.default.ajax({
type: 'PATCH',
url: '/user/notifications/' + notification_id + '/',
data: {
'read': 1
},
success: function success(data) {
commonModule.markNotificationRead(notification_id).success(function (data) {
// xhttp ok : update button
(0, _jquery2.default)('.notification_' + notification_id + '_unread', $notifications).hide();
(0, _jquery2.default)('.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 {

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

@@ -20,12 +20,12 @@ const notifyLayout = (services) => {
// toggle
if ($notificationTrigger.hasClass('open')) {
$notificationBoxContainer.hide();
$notificationTrigger.removeClass('open');
$notificationTrigger.removeClass('open'); // revert background in menubar
}
else {
$notificationTrigger.addClass('open');
$notificationTrigger.addClass('open'); // highlight background in menubar
$notificationBoxContainer.show();
setBoxHeight();
commonModule.fixNotificationsHeight();
}
});
@@ -60,41 +60,8 @@ const notifyLayout = (services) => {
$(window).bind('resize', function () {
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 = () => {
@@ -193,10 +160,11 @@ const notifyLayout = (services) => {
}
// add pre-formatted notif
date_cont.append(notification.html);
$('.notification_' + notification.id + '_unread', $notifications).tooltip().click(
function () {
mark_read(notification.id);
const $z = date_cont.append(notification.html);
$('.notification_' + notification.id + '_unread', $z).tooltip().click(
notification.id,
function (event) {
mark_read(event.data);
});
}
@@ -222,31 +190,13 @@ const notifyLayout = (services) => {
};
const mark_read = (notification_id) => {
$.ajax({
type: 'PATCH',
url: '/user/notifications/' + notification_id + '/',
data: {
'read': 1
},
success: function (data) {
commonModule.markNotificationRead(notification_id,)
.success(function (data) {
// xhttp ok : update button
$('.notification_' + notification_id + '_unread', $notifications).hide();
$('.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 {
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'});
}
function updateNotifications(data)
{
if (data.status == 'disconnected' || data.status == 'session') {
self.location.replace(self.location.href);
/**
* 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)
{
// add notification in bar
// fill the dropdown with pre-formatted notifs (10 unread)
@@ -130,27 +188,26 @@ var commonModule = (function ($, p4) {
$box_notifications.empty();
if(data.notifications.notifications.length === 0) {
// 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();
}
else {
$('.no_notifications', $box).hide();
for (var n in data.notifications.notifications) {
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) {
console.log("++++++++++ clicked("+notification.id+")")
markNotificationRead(event.data);
});
}
$('.show_all', $box).show();
// $('.show_all', $box).show();
}
if ($box.is(':visible')) {
fix_notification_height(); // duplicated, better call notifyLayout.setBoxHeight();
fixNotificationsHeight();
}
// fill the count of uread (red button)
@@ -235,7 +292,7 @@ var commonModule = (function ($, p4) {
/**
* duplicated from production_client::notifyLayout.js
*/
function fix_notification_height() {
function fixNotificationsHeight() {
const $notificationBoxContainer = $('#notification_box');
const not = $('.notification', $notificationBoxContainer);
const n = not.length;
@@ -251,7 +308,9 @@ var commonModule = (function ($, p4) {
return {
showOverlay: showOverlay,
hideOverlay: hideOverlay,
updateNotifications: updateNotifications
markNotificationRead: markNotificationRead,
pollNotifications: pollNotifications,
fixNotificationsHeight: fixNotificationsHeight
}
})(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 }}';
function pollNotifications() {
$.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
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);
// start pooling recursively
window.setTimeout( function() { commonModule.pollNotifications(module === 'prod', true); }, 2000);
</script>