148 lines
5.1 KiB
JavaScript
148 lines
5.1 KiB
JavaScript
class UI {
|
|
static allowedToolbarItems = [
|
|
'sidebar-thumbnails',
|
|
'sidebar-document-ouline',
|
|
'sidebar-bookmarks',
|
|
'pager',
|
|
'pan',
|
|
'zoom-out',
|
|
'zoom-in',
|
|
'zoom-mode',
|
|
'spacer',
|
|
'search',
|
|
'export-pdf'
|
|
]
|
|
|
|
// Load the PSPDFKit UI by setting a target element as the container to render in
|
|
// and a arraybuffer which represents the document that should be displayed.
|
|
static Instance
|
|
static loadPSPDFKit(arrayBuffer, container, licenseKey, locale) {
|
|
UI.Instance = PSPDFKit.load({
|
|
inlineWorkers: false,
|
|
locale: locale,
|
|
licenseKey: licenseKey,
|
|
styleSheets: ['/css/site.css'],
|
|
container: container,
|
|
document: arrayBuffer,
|
|
annotationPresets: UI.getPresets(),
|
|
electronicSignatures: {
|
|
creationModes: ['DRAW', 'TYPE', 'IMAGE'],
|
|
},
|
|
initialViewState: new PSPDFKit.ViewState({
|
|
sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS,
|
|
}),
|
|
isEditableAnnotation: function (annotation) {
|
|
// Check if the annotation is a signature
|
|
// This will allow new signatures, but not allow edits.
|
|
if (annotation.isSignature || annotation.description == 'FRAME') {
|
|
return false
|
|
}
|
|
|
|
return true
|
|
|
|
//return !annotation.isSignature;
|
|
},
|
|
customRenderers: {
|
|
Annotation: UI.annotationRenderer,
|
|
},
|
|
})
|
|
|
|
return UI.Instance;
|
|
}
|
|
|
|
static addToolbarItems(instance, handler) {
|
|
var toolbarItems = instance.toolbarItems.filter((item) => UI.allowedToolbarItems.includes(item.type));
|
|
|
|
if (!IS_READONLY)
|
|
toolbarItems = toolbarItems.concat(UI.getWritableItems(handler));
|
|
|
|
if (!IS_DESKTOP && !IS_READONLY)
|
|
toolbarItems = toolbarItems.concat(UI.getMobileWritableItems(handler));
|
|
|
|
instance.setToolbarItems(toolbarItems)
|
|
}
|
|
|
|
static annotationRenderer(data) {
|
|
// leave everything as is
|
|
return null
|
|
}
|
|
|
|
static createElementFromHTML(html) {
|
|
const el = document.createElement('div')
|
|
el.innerHTML = html.trim()
|
|
|
|
return el.firstChild
|
|
}
|
|
|
|
static getWritableItems = function (callback) {
|
|
return [
|
|
{
|
|
type: 'custom',
|
|
id: 'button-share',
|
|
className: 'button-share',
|
|
title: 'Teilen',
|
|
onPress() {
|
|
callback('SHARE')
|
|
},
|
|
icon: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>`,
|
|
}
|
|
];
|
|
}
|
|
|
|
static getMobileWritableItems = function (callback) {
|
|
return [
|
|
{
|
|
type: 'custom',
|
|
id: 'button-finish',
|
|
className: 'button-finish',
|
|
onPress() {
|
|
callback('FINISH')
|
|
},
|
|
icon: `<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
|
|
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
|
|
<path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
|
|
</svg>`
|
|
},
|
|
{
|
|
type: 'custom',
|
|
id: 'button-reject',
|
|
className: 'button-reject',
|
|
title: 'Ablehnen',
|
|
onPress() {
|
|
callback('REJECT')
|
|
},
|
|
icon: `<svg width="25px" height="25px" viewBox="43.5 43.5 512 512" version="1.1" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<path class="st0" d="M263.24,43.5c-117.36,0-212.5,95.14-212.5,212.5s95.14,212.5,212.5,212.5s212.5-95.14,212.5-212.5 S380.6,43.5,263.24,43.5z M367.83,298.36c17.18,17.18,17.18,45.04,0,62.23v0c-17.18,17.18-45.04,17.18-62.23,0l-42.36-42.36 l-42.36,42.36c-17.18,17.18-45.04,17.18-62.23,0v0c-17.18-17.18-17.18-45.04,0-62.23L201.01,256l-42.36-42.36 c-17.18-17.18-17.18-45.04,0-62.23v0c17.18-17.18,45.04-17.18,62.23,0l42.36,42.36l42.36-42.36c17.18-17.18,45.04-17.18,62.23,0v0 c17.18,17.18,17.18,45.04,0,62.23L325.46,256L367.83,298.36z" />
|
|
</svg>`,
|
|
},
|
|
{
|
|
type: 'custom',
|
|
id: 'button-reset',
|
|
className: 'button-reset',
|
|
title: 'Zurücksetzen',
|
|
onPress() {
|
|
callback('RESET')
|
|
},
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="-1 -1 16 16">
|
|
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
|
|
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
|
|
</svg>`,
|
|
}
|
|
];
|
|
}
|
|
|
|
static getPresets() {
|
|
const annotationPresets = PSPDFKit.defaultAnnotationPresets
|
|
annotationPresets.ink = {
|
|
lineWidth: 10,
|
|
}
|
|
|
|
annotationPresets.widget = {
|
|
readOnly: true,
|
|
}
|
|
|
|
return annotationPresets
|
|
}
|
|
} |