Customization of the WebDocumentViewer (WDV) toolbar is easily done with Jquery and CSS.
A very basic WDV implementation prior to any customization you may make will expose zoom and fit icons on the toolbar, however there are also buttons for saving, and several annotations which customers sometimes wish to remove.
You do not ever want to fully remove a button from the toolbar or set their css display to none, as this can have unwanted side effects. The supported means of hiding buttons is to use their hide() function which can be accomplished with a bit of jQuery.
For example to hide the "BestFit" button for zoom you would do the following in your css file:
$('.atala-ui-icon-fit-best').parent().hide();
With it hidden, you would then still be able to programmatically call a click on the action to enable the behavior: EX: $('.atala-ui-icon-fit-best').parent().trigger('click');
If you need to unhide a previously hidden button, you just call the show() function on it:
$('.atala-ui-icon-fit-best').parent().show();
| Button |
jQuerySelector |
|
Zoom Controls |
| Zoom Area |
$('.atala-ui-icon-zoom-area').parent() |
| Zoom Out |
$('.atala-ui-icon-zoom-out').parent() |
| Zoom In |
$('.atala-ui-icon-zoom-in').parent() |
|
Rotation Controls |
| Rotate Left |
$('.atala-ui-icon-rotate-left').parent() |
| Rotate Right |
$('.atala-ui-icon-rotate-right').parent() |
|
Annotation Buttons |
| Highlight |
$('.atala-ui-icon-highlight').parent() |
| Line |
$('.atala-ui-icon-line').parent() |
| Frehand |
$('.atala-ui-icon-freehand').parent() |
| Rectangle |
$('.atala-ui-icon-rectangle').parent() |
| Text |
$('.atala-ui-icon-text').parent() |
| Ellipse |
$('.atala-ui-icon-ellipse').parent() |
| Lines |
$('.atala-ui-icon-lines').parent() |
In order to ensure the buttons exist in the DOM, you need to ensure the control is initialized first... the common approach is to bind to the viewer initialized event to call your hide commands
Example: Hide the Rotation buttons on startup
_viewer.bind('initialized', function(e) {
$('.atala-ui-icon-rotate-left').parent().hide();
$('.atala-ui-icon-rotate-right').parent().hide();
});
Original Article:
Q10404 - HOWTO: Remove buttons from the WebDocumentViewer toolbar