The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-12 19:49:59 +05:00
Code Issues Packages Projects Releases Wiki Activity

Make reorderDOM from toolbar reusable for notifications

Browse Source
This commit is contained in:
yflory 2025-06-04 15:17:34 +02:00
parent 921a469ce2
commit e061f639a8
3 changed files with 68 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
www/common/common-ui-elements.js
View File

@ -4368,5 +4368,61 @@ define([
return container;
};
UIElements.reorderDOM = function ($content, isDrawer) {
var reorderDOM = Util.throttle(function ($content, observer) {
if (!$content.length) { return; }
// List all children based on their "order" property
var map = {};
$content[0].childNodes.forEach((node) => {
try {
if (!node.attributes) { return; }
let nodeWithOrder;
if (isDrawer) { // HACK: the order is set on their inner "a" tag
let $n = $(node);
if (!$n.attr('class') &&
($n.find('.fa').length || $n.find('.cptools').length)) {
nodeWithOrder = $n.find('.fa')[0] || $n.find('.cptools')[0];
}
}
var order = getComputedStyle(nodeWithOrder || node).getPropertyValue("order");
var a = map[order] = map[order] || [];
a.push(node);
} catch (e) { console.error(e, node); }
});
// Disconnect the observer while we're reordering to avoid infinite loop
observer.disconnect();
Object.keys(map).sort(function (a, b) {
return Number(a) - Number(b);
}).forEach(function (k) {
var arr = map[k];
if (!Number(k)) { return; } // No need to "append" if order is -1
// Reorder
arr.forEach(function (node) {
$content.append(node);
});
});
observer.start();
}, 100);
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
reorderDOM($content, observer);
}
});
});
observer.start = function () {
if (!$content.length) { return; }
observer.observe($content[0], {
childList: true
});
};
observer.start();
};
return UIElements;
});

70
www/common/toolbar.js
View File

@ -65,60 +65,6 @@ MessengerUI, Messages, Pages, PadTypes) {
return 'cp-toolbar-uid-' + String(Math.random()).substring(2);
};
var observeChildren = function ($content, isDrawer) {
var reorderDOM = Util.throttle(function ($content, observer) {
if (!$content.length) { return; }
// List all children based on their "order" property
var map = {};
$content[0].childNodes.forEach((node) => {
try {
if (!node.attributes) { return; }
let nodeWithOrder;
if (isDrawer) { // HACK: the order is set on their inner "a" tag
let $n = $(node);
if (!$n.attr('class') &&
($n.find('.fa').length || $n.find('.cptools').length)) {
nodeWithOrder = $n.find('.fa')[0] || $n.find('.cptools')[0];
}
}
var order = getComputedStyle(nodeWithOrder || node).getPropertyValue("order");
var a = map[order] = map[order] || [];
a.push(node);
} catch (e) { console.error(e, node); }
});
// Disconnect the observer while we're reordering to avoid infinite loop
observer.disconnect();
Object.keys(map).sort(function (a, b) {
return Number(a) - Number(b);
}).forEach(function (k) {
var arr = map[k];
if (!Number(k)) { return; } // No need to "append" if order is 0
// Reorder
arr.forEach(function (node) {
$content.append(node);
});
});
observer.start();
}, 100);
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
reorderDOM($content, observer);
}
});
});
observer.start = function () {
if (!$content.length) { return; }
observer.observe($content[0], {
childList: true
});
};
observer.start();
};
var createRealtimeToolbar = function (config) {
if (!config.$container) { return; }
var $container = config.$container;
@ -1226,7 +1172,7 @@ MessengerUI, Messages, Pages, PadTypes) {
$button.attr('aria-label', Messages.notificationsPage);
var $n = $button.find('.cp-dropdown-button-title').hide();
var $empty = $(div).find('.cp-notifications-empty');
observeChildren($(div));
UIElements.reorderDOM($(div));
var refresh = function () {
updateUserList(toolbar, config);
@ -1452,14 +1398,14 @@ MessengerUI, Messages, Pages, PadTypes) {
toolbar.$history = $toolbar.find('.'+Bar.constants.history);
toolbar.$user = $toolbar.find('.'+Bar.constants.userAdmin);
observeChildren(toolbar.$drawer, true);
observeChildren(toolbar.$bottomL);
observeChildren(toolbar.$bottomM);
observeChildren(toolbar.$bottomR);
observeChildren(toolbar.$top);
observeChildren(toolbar.$user);
UIElements.reorderDOM(toolbar.$drawer, true);
UIElements.reorderDOM(toolbar.$bottomL);
UIElements.reorderDOM(toolbar.$bottomM);
UIElements.reorderDOM(toolbar.$bottomR);
UIElements.reorderDOM(toolbar.$top);
UIElements.reorderDOM(toolbar.$user);
if (config.$contentContainer) {
observeChildren(config.$contentContainer);
UIElements.reorderDOM(config.$contentContainer);
}
toolbar.$userAdmin = $toolbar.find('.'+Bar.constants.userAdmin);

4
www/notifications/inner.js
View File

@ -12,6 +12,7 @@ define([
'/common/hyperscript.js',
'/customize/messages.js',
'/common/common-interface.js',
'/common/common-ui-elements.js',
'/common/notifications.js',
'css!/components/bootstrap/dist/css/bootstrap.min.css',
@ -27,6 +28,7 @@ define([
h,
Messages,
UI,
UIElements,
Notifications
)
{
@ -82,6 +84,8 @@ define([
]),
]);
UIElements.reorderDOM($(notifsList));
// add notification
var addNotification = function (data, el) {
// if the type of notification correspond