openmedialibrary/static/reader/pdf.js

161 lines
5.4 KiB
JavaScript
Raw Normal View History

var id = document.location.pathname.split('/')[1];
2019-01-24 11:52:44 +00:00
var annotations = [];
var currentPage = 1, rendered = false
2019-01-23 15:14:59 +00:00
Ox.load({
'UI': {
loadCSS: false
}
2019-01-23 15:14:59 +00:00
}, 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)
2019-01-24 11:52:44 +00:00
} else if (event == 'addAnnotations') {
data.annotations.forEach(function(annotation) {
annotations.push(annotation)
renderAnnotation(annotation)
})
2019-01-23 15:14:59 +00:00
}
})
})
window.addEventListener('keydown', function(event) {
if (event.key == 'Delete') {
var selected = document.querySelector('.oml-annotation.selected')
if (selected) {
removeAnnotation(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) {
2019-01-23 15:14:59 +00:00
loadAnnotations(event.pageNumber)
})
}
bindEvents()
function getHighlight() {
2019-01-23 15:14:59 +00:00
var pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
var pageIndex = pageNumber - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
var pageRect = page.canvas.getClientRects()[0];
2019-01-23 15:14:59 +00:00
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));
});
2019-01-23 15:14:59 +00:00
var text = selection.toString();
return {
page: pageNumber,
coords: selected,
text: text,
id: Ox.SHA1(pageNumber.toString() + JSON.stringify(selected))
};
}
function renderAnnotation(annotation) {
2019-01-23 15:14:59 +00:00
var pageIndex = annotation.page - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
2019-01-24 11:52:44 +00:00
if (!page || !page.canvas) {
setTimeout(function() {
renderAnnotation(annotation)
2019-01-24 11:52:44 +00:00
}, 50)
return
}
2019-01-22 14:06:48 +00:00
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;');
2019-01-22 14:06:48 +00:00
el.addEventListener('click', function() {
if (el.classList.contains('selected')) {
deselectAnnotation(annotation.id)
2019-01-23 15:14:59 +00:00
Ox.$parent.postMessage('deselectAnnotation', {id: annotation.id})
} else {
selectAnnotation(annotation.id)
2019-01-23 15:14:59 +00:00
Ox.$parent.postMessage('selectAnnotation', {id: annotation.id})
}
});
pageElement.appendChild(el);
});
}
function addAnnotation(annotation) {
annotations.push(annotation)
2019-01-23 15:14:59 +00:00
Ox.$parent.postMessage('addAnnotation', annotation)
}
function selectAnnotation(id) {
2019-01-23 15:14:59 +00:00
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
})
2019-01-24 11:52:44 +00:00
Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
}
2019-01-23 15:14:59 +00:00
function loadAnnotations(page) {
document.querySelectorAll('.oml-annotation.page' + page).forEach(function(e) {
e.remove()
})
annotations.filter(function(a) {
2019-01-23 15:14:59 +00:00
return a.page == page
}).forEach(function(annot) {
renderAnnotation(annot)
})
}