scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-09 05:18:01 +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() { function renderSmartAnnotations() {
$(`${TABLE_ID} .text-value`).each(function() { const scrollElement = $('.repository-table .dataTables_scrollBody')[0];
window.renderElementSmartAnnotations(this); window.renderElementSmartAnnotations(scrollElement, '.text-value', scrollElement);
});
} }
function checkSnapshottingStatus() { function checkSnapshottingStatus() {

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

@ -65,25 +65,34 @@ async function fetchSmartAnnotationData(element) {
} }
} }
window.renderElementSmartAnnotations = (element) => { window.renderElementSmartAnnotations = (parentElement, selector, scrollElement = null) => {
if (!element.innerHTML.match(SA_REGEX)) return true; // 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 if (elements.length === 0) {
element.querySelectorAll('.sa-link, .user-tooltip').forEach((el) => { (scrollElement || window).removeEventListener('scroll', renderFunction);
if (isInViewport(el)) {
fetchSmartAnnotationData(el);
return; return;
} }
const 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); fetchSmartAnnotationData(el);
window.removeEventListener('scroll', fetchFunction); });
}
});
}; };
window.addEventListener('scroll', fetchFunction); renderFunction();
}); (scrollElement || window).addEventListener('scroll', renderFunction);
parentElement.classList.add('sa-initialized');
return true; return true;
}; };
@ -107,7 +116,7 @@ $(document).on('click', '.user-tooltip', function () {
<div class='row'> <div class='row'>
<div class='col-xs-12'> <div class='col-xs-12'>
<p class='silver email'>${escapeHtml(data.email)}</p> <p class='silver email'>${escapeHtml(data.email)}</p>
<p>${escapeHtml(data.info)}</p> <p>${data.info}</p>
</div> </div>
</div> </div>
</div> </div>