Sticky toolbar buttons

This sample shows how to make certain edit buttons sticky so that the operation can be repeated multiple times without clicking the button again.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }; const viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.layoutMode = 1; viewer.toolbarLayout.annotationEditor = { default: ['edit-select', '$split', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-ink', '$split', 'redact', 'redact-apply', 'save', '$split', 'edit-undo', 'edit-redo'], mobile: ['edit-select', '$split', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-ink', '$split', 'redact', 'redact-apply', 'save', '$split', 'edit-undo', 'edit-redo'], fullscreen: ['$fullscreen', '$split', 'edit-select', '$split', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-ink', '$split', 'redact', 'redact-apply', 'save', '$split', 'edit-undo', 'edit-redo'] }; viewer.toolbarLayout.formEditor = { default: ["edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio", "save", "$split", "edit-undo", "edit-redo"], mobile: ["edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio", "save", "$split", "edit-undo", "edit-redo"], fullscreen: ["$fullscreen", "edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio", "save", "$split", "edit-undo", "edit-redo"] }; // Set the sticky behavior for drawing annotations and form widgets: viewer.toolbarLayout.stickyBehavior = ['edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', "edit-redact", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio"]; viewer.applyToolbarLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-annotations.pdf"); }
window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: getSupportApiSettings() }; const viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.addFormEditorPanel(); viewer.layoutMode = 1; viewer.toolbarLayout.annotationEditor = { default: ['edit-select', '$split', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-ink', '$split', 'redact', 'redact-apply', 'save', '$split', 'edit-undo', 'edit-redo'], mobile: ['edit-select', '$split', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-ink', '$split', 'redact', 'redact-apply', 'save', '$split', 'edit-undo', 'edit-redo'], fullscreen: ['$fullscreen', '$split', 'edit-select', '$split', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-ink', '$split', 'redact', 'redact-apply', 'save', '$split', 'edit-undo', 'edit-redo'] }; viewer.toolbarLayout.formEditor = { default: ["edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio", "save", "$split", "edit-undo", "edit-redo"], mobile: ["edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio", "save", "$split", "edit-undo", "edit-redo"], fullscreen: ["$fullscreen", "edit-select-field", "$split", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio", "save", "$split", "edit-undo", "edit-redo"] }; // Set the sticky behavior for drawing annotations and form widgets: viewer.toolbarLayout.stickyBehavior = ['edit-ink', 'edit-square', 'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', "edit-redact", "edit-widget-tx-field", "edit-widget-tx-text-area", "edit-widget-btn-push", "edit-widget-btn-checkbox", "edit-widget-btn-radio"]; viewer.applyToolbarLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-edit-annotations.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Sticky toolbar buttons</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }