scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-27 06:29:07 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix and optimize smart annotation rendering [SCI-11698]

Browse source
This commit is contained in:
Martin Artnik 2025-03-19 15:55:48 +01:00
parent 0f0abd71cd
commit 1cb45c86bf
2 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/assets/javascripts/repositories/repository_datatable.js
View file

@ -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() {

37
app/javascript/packs/smart_annotations.js
View file

@ -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>