Is there any way in PrizmDoc to highlight the presence of an annotation?

Question

In some other viewers, there are highlights or markers that appear on the UI to indicate that annotations are available for a given page or document. Is there a way to implement this in PrizmDoc?

Answer

Sure can, you just need to make a MarkupLayerRecords request to determine if there are marks that pertain to the given Viewing Session. Keep in mind that documents don’t really have a specific set of annotations associated with them though — Markup IDs do, and you can specify any Markup ID you want when you create a viewing session:

// Add rules to your CSS for the following classes.
// The actual style information can be whatever you like.
//
// .mark-indicator {
//     background-color: gold !important;
// }
//
// .marked-page-indicator {
//     background-color: gold !important;
// }

let pasUrl = "http://localhost/pas-service"; // Example PAS proxy URL
let viewingSessionId = <%= viewingSessionId %>; // Example viewingSessionId
let thumbnailButton = $(".pcc-icon-thumbnails");
let pageIndicatorsAdded = false;
let thumbnailsClicked = false;
let marksRetrieved = false;
let markedPages = {};

async function addPageIndicators() {
    console.log("Attempting to add page indicators...");
    if (thumbnailsClicked && marksRetrieved && !pageIndicatorsAdded) {
        console.log("Conditions met.");

        let wrappers = $(".pccThumbnailWrapper");

        wrappers.each(function(index, wrapper) {
            if (markedPages[index]) {
                $(wrapper).addClass("marked-page-indicator");
            }
        });

        pageIndicatorsAdded = true;
    } else {
        console.log("Conditions not met");
    }
}

thumbnailButton.click(function() {
    console.log("Thumbnails button clicked.");

    thumbnailsClicked = true;

    addPageIndicators();
});

async function apiCall(type, url, body = {}) {
    return await $.ajax({
        "type": type,
        "url": url,
        "contentType": "application/json",
        "data": JSON.stringify(body)
    });
}

async function createMarkIndicators() {
    let output = await apiCall("GET", `${pasUrl}/MarkupLayers/u${viewingSessionId}`);

    if (output.length > 0) {
        console.log("Found layers.");

        thumbnailButton.addClass("mark-indicator");

        let layers = await Promise.all(output.map(function(element) {
            return apiCall("GET", `${pasUrl}/MarkupLayers/u${viewingSessionId}/${element.layerRecordId}`);
        }));

        layers.forEach(function(layer) {
            layer.marks.forEach(function(mark) {
                markedPages[mark.pageNumber - 1] = true;
            });
        });

        marksRetrieved = true;

        console.log("Marks retrieved.");

        addPageIndicators();
    } else {
        console.log("No layers found.");
    }
}

createMarkIndicators();