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.

app.js
index.html
styles.css
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%; }