[]
DsPdfViewer offers its users the ability to restore legacy toolbar/panel layouts and navigation controls if they prefer the old version after the redesign.
To restore previous navigation appearance:
const viewer = new DsPdfViewer('#viewer', {
navigation: {
showFirstButton: true,
showLastButton: true,
pageInputWidth: 100,
buttonSizing: 'standard'
}
});
To revert to legacy panel arrangement:
viewer.layoutPanels([
'DocumentList', 'SharedDocuments', 'Thumbnails', 'Search',
'Outline', 'ExtractTable', 'Layers', 'StructureTree',
'Attachments', 'Articles', 'sep',
'AnnotationEditor', 'FormEditor'
]);
To restore previous toolbar configurations:
// Main Viewer Toolbar
const viewerButtons = {
default: ['open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', '$split', 'rotate', 'page-display', 'theme-change', 'print', 'save-as', 'hide-annotations', 'form-filler', 'extract-table', 'search', 'doc-title', 'doc-properties', 'about'],
fullscreen: ['$fullscreen', '$navigation', '$split', 'open', 'text-selection', 'pan', 'zoom', '$split', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', '$split', 'rotate', 'page-display', 'theme-change', 'print', 'save-as', 'hide-annotations', 'form-filler', 'extract-table', 'search', 'doc-title', 'doc-properties', 'about'],
mobile: ['open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', '$split', 'rotate', 'page-display', 'theme-change', 'print', 'save-as', 'hide-annotations', 'form-filler', 'extract-table', 'search', 'doc-title', 'doc-properties', 'about']
};
// Annotation Editor Toolbar
const annotationEditorButtons = {
default: ['edit-select', 'save-as', 'share', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'image-list', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link',
'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out',
'$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
fullscreen: ['$fullscreen', 'edit-select', 'save-as', 'share', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'image-list', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link',
'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out',
'$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
mobile: ['edit-select', 'save-as', 'share', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square', 'edit-link',
'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out',
'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'image-list', 'edit-file-attachment', 'edit-richmedia', 'edit-sound',
'$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer']
};
// Form Editor Toolbar
const formEditorButtons = {
default: [
'edit-select-field', 'save-as', 'share', '$split',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'$split', 'edit-erase-field', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
fullscreen: ['$fullscreen', 'edit-select-field', 'save-as', 'share', '$split',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'$split', 'edit-erase-field', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
mobile: ['edit-select-field', 'save-as', 'share', '$split',
'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
'$split', 'edit-erase-field', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
};
viewer.toolbarLayout = {
viewer: viewerButtons,
annotationEditor: annotationEditorButtons,
formEditor: formEditorButtons,
stickyBehavior: []
};