114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
class UI {
|
|
allowedToolbarItems = [
|
|
'sidebar-thumbnails',
|
|
'sidebar-document-ouline',
|
|
'sidebar-bookmarks',
|
|
'pager',
|
|
'pan',
|
|
'zoom-out',
|
|
'zoom-in',
|
|
'zoom-mode',
|
|
'spacer',
|
|
'search',
|
|
]
|
|
|
|
// 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.
|
|
loadPSPDFKit(arrayBuffer, container) {
|
|
return PSPDFKit.load({
|
|
styleSheets: ['/css/site.css'],
|
|
container: container,
|
|
document: arrayBuffer,
|
|
autoSaveMode: 'DISABLED',
|
|
annotationPresets: this.getPresets(),
|
|
electronicSignatures: {
|
|
creationModes: ['DRAW', 'TYPE'],
|
|
},
|
|
isEditableAnnotation: function (annotation) {
|
|
// Check if the annotation is a signature
|
|
// This will allow new signatures, but not allow edits.
|
|
console.log(annotation.isSignature, annotation.description)
|
|
|
|
if (
|
|
annotation.isSignature ||
|
|
annotation.description == 'FRAME'
|
|
) {
|
|
return false
|
|
}
|
|
|
|
return true
|
|
|
|
//return !annotation.isSignature;
|
|
},
|
|
})
|
|
}
|
|
|
|
configurePSPDFKit(instance, handler) {
|
|
const toolbarItems = this.getToolbarItems(instance, handler)
|
|
instance.setToolbarItems(toolbarItems)
|
|
|
|
console.debug('PSPDFKit configured!')
|
|
}
|
|
|
|
getToolbarItems(instance, handler) {
|
|
const customItems = this.getCustomItems(handler)
|
|
const defaultItems = this.getDefaultItems(instance.toolbarItems)
|
|
return defaultItems.concat(customItems)
|
|
}
|
|
|
|
createElementFromHTML(html) {
|
|
const el = document.createElement('div')
|
|
el.innerHTML = html.trim()
|
|
|
|
return el.firstChild
|
|
}
|
|
|
|
getCustomItems = function (callback) {
|
|
return [
|
|
{
|
|
type: 'custom',
|
|
id: 'button-reset',
|
|
className: 'button-reset',
|
|
title: 'Zurücksetzen',
|
|
onPress() {
|
|
console.log('RESET')
|
|
callback('RESET')
|
|
},
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 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>`,
|
|
},
|
|
{
|
|
type: 'custom',
|
|
id: 'button-finish',
|
|
className: 'button-finish',
|
|
title: 'Abschließen',
|
|
onPress() {
|
|
console.log('FINISH')
|
|
callback('FINISH')
|
|
},
|
|
},
|
|
]
|
|
}
|
|
|
|
getDefaultItems(items) {
|
|
return items.filter((item) =>
|
|
this.allowedToolbarItems.includes(item.type)
|
|
)
|
|
}
|
|
|
|
getPresets() {
|
|
const annotationPresets = PSPDFKit.defaultAnnotationPresets
|
|
annotationPresets.ink = {
|
|
lineWidth: 10,
|
|
}
|
|
|
|
annotationPresets.widget = {
|
|
readOnly: true,
|
|
}
|
|
|
|
return annotationPresets
|
|
}
|
|
}
|