openmedialibrary/static/reader/pdf.js

var id = document.location.pathname.split('/')[1];
var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
var currentPage = 1, rendered = false

Ox.load({
    'UI': {
        loadCSS: false
    }
}, function() {
    Ox.$parent.bindMessage(function(data, event) {
        console.log('got', event, 'data', data)
        if (event == 'selectAnnotation') {
            var annotation = annotations.filter(function(a) { return a.id == data.id })[0]
            if (
                annotation &&
                annotation.page &&
                PDFViewerApplication.pdfViewer.currentPageNumber != annotation.page
            ) {
                //FIXME: scroll into view
                PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
            }
            selectAnnotation(data.id)
        }
    })
    setTimeout(function() {
        annotations.forEach(function(a) {
            Ox.$parent.postMessage('addAnnotation', a)
        })
    }, 1000)
})

window.addEventListener('keydown', function(event) {
    if (event.key == 'Delete') {
        var selected = document.querySelector('.oml-annotation.selected')
        if (selected) {
            removeAnnotation(selected.dataset.id)
            Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
        }
    } else if (event.key == 'n') {
        if (!window.getSelection().isCollapsed) {
            var annot = getHighlight()
            renderAnnotation(annot)
            addAnnotation(annot)
            window.getSelection().removeAllRanges();
        }
        event.stopPropagation()
        event.preventDefault()
    }
})

function bindEvents() {
    if (!window.PDFViewerApplication || !window.PDFViewerApplication.eventBus) {
        setTimeout(bindEvents, 10)
        return
    }
    PDFViewerApplication.eventBus.on('pagerendered', function(event) {
        loadAnnotations(event.pageNumber)
    })
}

bindEvents()

function getHighlight() {
    var pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
    var pageIndex = pageNumber - 1;
    var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
    var pageRect = page.canvas.getClientRects()[0];
    var selection = window.getSelection()
    var selectionRects = selection.getRangeAt(0).getClientRects();
    var viewport = page.viewport;
    var selected = Array.from(selectionRects).map(function (r) {
      return viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat(
         viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y)); 
    });
    var text = selection.toString();
    return {
        created: (new Date).toISOString(),
        page: pageNumber,
        coords: selected,
        text: text,
        id: Ox.SHA1(pageNumber.toString() + JSON.stringify(selected))
    };
}

function renderAnnotation(annotation) {
    var pageIndex = annotation.page - 1;
    var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
    if (!page.canvas) {
        setTimeout(function() {
            renderAnnotation(annotation)
        }, 10)
        return
    }
    var pageElement = page.canvas.parentElement.parentElement;
    var viewport = page.viewport;
    annotation.coords.forEach(function (rect) {
        var bounds = viewport.convertToViewportRectangle(rect);
        var el = document.createElement('div');
        el.classList.add('oml-annotation')
        el.classList.add('a' + annotation.id)
        el.classList.add('page' + annotation.page)
        el.dataset.id = annotation.id
        el.setAttribute('style', 'position: absolute; background-color: yellow;opacity:0.3;' + 
            'left:' + Math.min(bounds[0], bounds[2]) + 'px; top:' + Math.min(bounds[1], bounds[3]) + 'px;' +
            'width:' + Math.abs(bounds[0] - bounds[2]) + 'px; height:' + Math.abs(bounds[1] - bounds[3]) + 'px;');

        el.addEventListener('click', function() {
            if (el.classList.contains('selected')) {
                deselectAnnotation(annotation.id)
                Ox.$parent.postMessage('deselectAnnotation', {id: annotation.id})
            } else {
                selectAnnotation(annotation.id)
                Ox.$parent.postMessage('selectAnnotation', {id: annotation.id})
            }
        });
        pageElement.appendChild(el);
    });
}

function addAnnotation(annotation) {
    annotations.push(annotation)
    Ox.$parent.postMessage('addAnnotation', annotation)
    saveAnnotations()
}

function selectAnnotation(id) {
    document.querySelectorAll('.oml-annotation.selected').forEach(function(g) {
        g.classList.remove('selected')
        g.style.backgroundColor = 'yellow'
    })
    document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
        g.classList.add('selected')
        g.style.backgroundColor = 'blue'
    })
}
function deselectAnnotation(id) {
    document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
        g.classList.remove('selected')
        g.style.backgroundColor = 'yellow'
    })
}

function removeAnnotation(id) {
    document.querySelectorAll('.oml-annotation.a' + id).forEach(function(a) {
        a.remove()
    })
    annotations = annotations.filter(function(annotation) {
        return annotation.id != id
    })
    saveAnnotations()
}

function saveAnnotations() {
    localStorage[id + '.annotations'] = JSON.stringify(annotations)
}

function loadAnnotations(page) {
    document.querySelectorAll('.oml-annotation.page' + page).forEach(function(e) {
        e.remove()
    })
    annotations.filter(function(a) {
        return a.page == page
    }).forEach(function(annot) {
        renderAnnotation(annot)
    })
}