add embed button to pdf viewer

This commit is contained in:
j 2023-10-27 13:47:56 +02:00
parent 5bc0b70d73
commit 47b348f724
5 changed files with 51 additions and 9 deletions

View file

@ -95,6 +95,13 @@ pandora.ui.document = function() {
{position: $content.getArea().map(Math.round)}
);
},
embed: function(data) {
var id = item.id;
pandora.$ui.embedDocumentDialog = pandora.ui.embedDocumentDialog(
id,
data.page
).open();
},
key_escape: function() {
// ...
},

View file

@ -222,6 +222,13 @@ pandora.ui.documentDialog = function(options) {
{position: $content.getArea().map(Math.round)}
);
},
embed: function(data) {
var id = options.items[options.index].id;
pandora.$ui.embedDocumentDialog = pandora.ui.embedDocumentDialog(
id,
data.page
).open();
},
key_escape: function() {
pandora.$ui.documentDialog.close();
},

View file

@ -4,15 +4,17 @@ Ox.load({
}
}, function() {
var currentPage = PDFViewerApplication.page;
window.addEventListener('pagechange', function (evt) {
var page = evt.pageNumber;
PDFViewerApplication.initializedPromise.then(function() {
PDFViewerApplication.pdfViewer.eventBus.on("pagechanging", function(event) {
var page = event.pageNumber;
if (page && page != currentPage) {
currentPage = page;
Ox.$parent.postMessage('page', {
page: Math.round(page)
page: page
});
}
});
})
})
Ox.$parent.bindMessage({
page: function(data) {
if (data.page != PDFViewerApplication.page) {

View file

@ -3,11 +3,19 @@
.secondaryToolbarButton.cropFile::before {
mask-image: url(custom/toolbarButton-crop.png);
}
.toolbarButton.embedPage::before,
.secondaryToolbarButton.embedPage::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PGxpbmUgeDE9Ijg4IiB5MT0iNTYiIHgyPSIyNCIgeTI9IjEyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMjQiIHkxPSIxMjgiIHgyPSI4OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTY4IiB5MT0iNTYiIHgyPSIyMzIiIHkyPSIxMjgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjQ4Ii8+PGxpbmUgeDE9IjIzMiIgeTE9IjEyOCIgeDI9IjE2OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48L3N2Zz48IS0teyJjb2xvciI6ImRlZmF1bHQiLCJuYW1lIjoic3ltYm9sRW1iZWQiLCJ0aGVtZSI6Im94bWVkaXVtIn0tLT4=);
}
@media screen and (min-resolution: 2dppx) {
.toolbarButton.cropFile::before,
.secondaryToolbarButton.cropFile::before {
mask-image: url(custom/toolbarButton-crop@2x.png);
}
.toolbarButton.embedPage::before,
.secondaryToolbarButton.embedPage::before {
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PGxpbmUgeDE9Ijg4IiB5MT0iNTYiIHgyPSIyNCIgeTI9IjEyOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMjQiIHkxPSIxMjgiIHgyPSI4OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48bGluZSB4MT0iMTY4IiB5MT0iNTYiIHgyPSIyMzIiIHkyPSIxMjgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjQ4Ii8+PGxpbmUgeDE9IjIzMiIgeTE9IjEyOCIgeDI9IjE2OCIgeTI9IjIwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iNDgiLz48L3N2Zz48IS0teyJjb2xvciI6ImRlZmF1bHQiLCJuYW1lIjoic3ltYm9sRW1iZWQiLCJ0aGVtZSI6Im94bWVkaXVtIn0tLT4=);
}
}
.verticalToolbarSeparator.hiddenMediumView,

View file

@ -4,6 +4,8 @@ var cache = {}
var documentId
var baseUrl = document.location.protocol + '//' + document.location.host
var div = document.createElement("div")
div.innerHTML = `
<button id="cropFile" class="toolbarButton cropFile hiddenLargeView" title="Crop" tabindex="30" data-l10n-id="crop_file">
@ -14,6 +16,19 @@ var cropFile = div.querySelector("#cropFile")
document.querySelector('#toolbarViewerRight').insertBefore(cropFile, document.querySelector('#toolbarViewerRight').firstChild)
div.innerHTML = `
<button id="embedPage" class="toolbarButton embedPage hiddenLargeView" title="Embed" tabindex="29" data-l10n-id="embed">
<span data-l10n-id="embed_label">Embed</span>
</button>
`
var embedPage = div.querySelector("#embedPage")
document.querySelector('#toolbarViewerRight').insertBefore(embedPage, document.querySelector('#toolbarViewerRight').firstChild)
embedPage.addEventListener("click", event => {
Ox.$parent.postMessage('embed', {
page: PDFViewerApplication.page
});
})
async function archiveAPI(action, data) {
var url = baseUrl + '/api/'
var key = JSON.stringify([action, data])
@ -207,6 +222,9 @@ function initOverlay() {
div.appendChild(overlay)
renderCropOverlay(overlay, documentId, page)
})
PDFViewerApplication.pdfViewer.eventBus.on("pagechanging", function(event) {
console.log("pagechanging", event, event.pageNumber.toString())
})
})
}