mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-06 03:46:39 +08:00
Fix and optimize smart annotation rendering [SCI-11698]
This commit is contained in:
parent
0f0abd71cd
commit
1cb45c86bf
2 changed files with 25 additions and 17 deletions
|
@ -499,9 +499,8 @@ var RepositoryDatatable = (function(global) {
|
|||
}
|
||||
|
||||
function renderSmartAnnotations() {
|
||||
$(`${TABLE_ID} .text-value`).each(function() {
|
||||
window.renderElementSmartAnnotations(this);
|
||||
});
|
||||
const scrollElement = $('.repository-table .dataTables_scrollBody')[0];
|
||||
window.renderElementSmartAnnotations(scrollElement, '.text-value', scrollElement);
|
||||
}
|
||||
|
||||
function checkSnapshottingStatus() {
|
||||
|
|
|
@ -65,25 +65,34 @@ async function fetchSmartAnnotationData(element) {
|
|||
}
|
||||
}
|
||||
|
||||
window.renderElementSmartAnnotations = (element) => {
|
||||
if (!element.innerHTML.match(SA_REGEX)) return true;
|
||||
window.renderElementSmartAnnotations = (parentElement, selector, scrollElement = null) => {
|
||||
// Check if it was not initialized yet and contains SA strings
|
||||
if (parentElement.classList.contains('sa-initialized' || !parentElement.innerHTML.match(SA_REGEX))) return true;
|
||||
|
||||
element.innerHTML = window.renderSmartAnnotations(element.innerHTML);
|
||||
// Handle rendering smart annotations when innerElement scrolls into viewport
|
||||
const renderFunction = () => {
|
||||
const elements = parentElement.querySelectorAll(`${selector}:not(.sa-rendered)`);
|
||||
|
||||
// Schedule fetch of data for each annotation element when it scrolls into viewport
|
||||
element.querySelectorAll('.sa-link, .user-tooltip').forEach((el) => {
|
||||
if (isInViewport(el)) {
|
||||
fetchSmartAnnotationData(el);
|
||||
if (elements.length === 0) {
|
||||
(scrollElement || window).removeEventListener('scroll', renderFunction);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchFunction = () => {
|
||||
fetchSmartAnnotationData(el);
|
||||
window.removeEventListener('scroll', fetchFunction);
|
||||
};
|
||||
elements.forEach((innerElement) => {
|
||||
if (isInViewport(innerElement)) {
|
||||
innerElement.innerHTML = window.renderSmartAnnotations(innerElement.innerHTML);
|
||||
innerElement.classList.add('sa-rendered');
|
||||
innerElement.querySelectorAll('.sa-link, .user-tooltip').forEach((el) => {
|
||||
fetchSmartAnnotationData(el);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', fetchFunction);
|
||||
});
|
||||
renderFunction();
|
||||
(scrollElement || window).addEventListener('scroll', renderFunction);
|
||||
|
||||
parentElement.classList.add('sa-initialized');
|
||||
|
||||
return true;
|
||||
};
|
||||
|
@ -107,7 +116,7 @@ $(document).on('click', '.user-tooltip', function () {
|
|||
<div class='row'>
|
||||
<div class='col-xs-12'>
|
||||
<p class='silver email'>${escapeHtml(data.email)}</p>
|
||||
<p>${escapeHtml(data.info)}</p>
|
||||
<p>${data.info}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Reference in a new issue